来自腾讯交互设计师的分享:交互微动效设计指南

本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。


本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。

来自腾讯交互设计师的分享:交互微动效设计指南

一、本指南的适用范围

本指南适用于UI界面中交互微动效,属于功能性动效。与聚焦于提供娱乐体验的动效(如动画影片、游戏动效等)不同,功能性动效的设计,有清晰的逻辑目的,聚焦于帮助用户理解当前所处的状态。

动效范围涵盖:

入场/出场动效(enter & exit)、过渡动效(transition)和加载动效(loading)

二、设计原则和设计考量

一个优秀的交互微动效,在设计上应该遵循以下三个核心原则:

来自腾讯交互设计师的分享:交互微动效设计指南

为了确保动效有清晰的用途并能完成目标,设计时请思考以下几方面的问题:

来自腾讯交互设计师的分享:交互微动效设计指南

三、响应时间与持续时间

时间是动效核心元素,设计动效时需要考虑两类时间 —— 响应时间与持续时长

1、响应时间

响应时间指从用户执行操作到反馈出现的间隔时间。触发机制不同,响应时间的限制也不同:

  • 对于由用户操作 直接触发 的反馈,理想的响应时间应该控制在 100 毫秒内
  • 对于由用户操作 间接触发 的反馈,响应时长可允许达到 1秒左右,不可超过2秒无反馈
  • 当 超过 2秒 才能获取反馈结果时,须设计加载动效(loading):
  • 当反馈时间为 2-9秒 时,可使用循环的加载样式(如常见的菊花转)
  • 当反馈时间 超过10秒 时,须使用带有进度指示的加载样式(如已加载了60%,还剩30秒)

来自腾讯交互设计师的分享:交互微动效设计指南

来自腾讯交互设计师的分享:交互微动效设计指南

2、持续时间

交互微动效的持续时间不宜过长,以避免浪费用户时间,影响用户的阅读和操作效率,其持续时间一般不超过500毫秒 ( 加载动效除外 )。

若你希望用户能清晰地捕捉到元素的渐进变化,持续时须大于200毫秒;若你不介意用户认为元素的改变是瞬间的,希望尽量节省用户时间,持续时间也可设计在 200毫秒以内(如hover到按钮上颜色瞬间发生微妙改变) 。

具体的持续时间的取值,一方面会受到元素的大小、动效的复杂程度影响;另一方面也会受到动效的目标 和 运行动效的设备的影响:

  • 小元素的轻微变化效果(如渐隐渐现、大小变化等小范围变化),一般在 200~300毫秒以内
  • 较大元素的复杂变化效果(如包含大范围缓动位移),可长达 400-500毫秒

来自腾讯交互设计师的分享:交互微动效设计指南

较快的动效更容易吸引用户注意力,也更节省时间。若动效元素在用户的视线之外,为了吸引用户注意并采取行动,可使用在短时间内变化较大的动效(如发生位置移动和速率改变);若动效元素已经在用户的注意范围内,为了保持视觉连续性,完成必要的过渡(如渐隐渐现)后即可结束。

较慢的动效较少分散用户注意力,更适用于非用户直接触发的场景。若动效不是用户直接触发的,不希望用户注意力被转移,可使用在长时间内变化较小的动效(一般不会出现位置移动)

不同设备的屏幕尺寸和特性不同,理想的持续时间也不一样。一般来说,对于移动设备而言,屏幕越大往往动效的位移也越大,因此持续时间也应该越长(可穿戴设备上的持续时间大约比手机上快30%,平板电脑上的持续时间大约比手机上慢30%)。而台式设备的动效设计往往比移动设备中的动效设计更简单快速(150毫秒~200毫秒间较为常见),这是因为复杂的动效在台式设备场景下容易出现掉帧、卡顿的情况,瞬时响应的动效能避免这一点。

出场动效一般比入场动效更快 ( 如当入场动效设置为230毫秒时,出场动效可设置为200毫秒) 这是因为元素入场时用户一般需要阅读并处理新出现的信息,而元素出场时通常表明用户在此元素上的任务已完成,不需要再关注了,快速出场能够节省用户更多时间。

来自腾讯交互设计师的分享:交互微动效设计指南

四、常用动效类型及应用参考

在浏览器中最常用、最容易实现且能保障性能的是 位置(position)、大小(scale)、旋转(rotation)、透明度(opacity) 这四种属性的变化,当变化这四种属性的任意一种或几种就能达到交互微动效的目的时,无须再加入其它不必要的属性,以免影响动效流畅度。

属性的变化一般又分为 线性(liner)变化 和 曲线(curves)变化两种。

1、线性变化

线性变化具有 匀速、骤停 这两个特征,一般适用于与物理属性无关的过渡动效(如透明度属性的变化,包含渐隐渐现或颜色间的切换),或有规律的加载动效(如均匀的循环、数值变化或进度变化)。在与物理参数有关的变化中(如位置变化),尽量避免使用线性变化,否则很容易给人带来动效僵硬、不自然的感觉。

2、曲线变化

曲线包含多种类型,在交互微动效设计中,缓动曲线(easing)的应用范围最广、效果最自然、对用户的干扰也较小,多用于与物理属性相关的属性变化中,常用场景如下:

结语

交互微动效以功能性为主,须遵循克制有度、清晰聚焦、自然流畅这三个核心设计原则。在设计前,思考希望如何影响用户的注意力、动效的目标是什么、动效出现的频率和触发机制是怎样的,在设计时选择合适动效类型和持续时间并关注反馈的响应时间,做到有理有据、令人信服。

 

作者:李嘉娜,腾讯交互设计师,腾讯社交用户体验设计部-商业产品中心交互设计师。爱生活爱记录,喜欢一切鲜活有趣的事物。

来源:微信公众号【腾讯大讲堂】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22656/

(0)
CatherineCatherine
上一篇 2017-05-02 14:07
下一篇 2017-05-02 15:58

相关推荐

  • Axure教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 无框界面的四大优势,为你演绎一种新的设计风格

    无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

    2017-05-10
  • 符合用户直觉的设计,才能更快地获得用户信任

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。

    2017-05-15
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • Justinmind 和 Axure谁更适合做原型?

    Justinmind 和 Axure 都是目前很强大的原型设计工具,被业界推为原型设计神器,在很多项目中起着不可估量的作用,但这两者的之间的作用是相互竞争还是相辅相成呢,我们应该客观地进行分析,使之更好地服务于我们的…

    Axure 2015-08-25
  • 原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 教你读懂UI设计的心理学!

    来源:阿里妈妈MUX 作者:阿里妈妈MUX编译   作为UI设计师,对待用户就像对待婴儿,知道如何通过界面设计诱导用户非常重要,这就需要了解心理学方面的知识了。今天分享一篇日本设计师的好文,结合心理学与设计,…

    2014-09-27
  • 在互金个人理财爆发之前,以UX方法进行货币基金体验设计

    以业务模式和产品生命周期为核心的方法论所构建的功能模型完备而趋同,产品无法和用户的内心产生共振。UX方法论的核心专注于用户的想法,感受和目标,而非业务和功能。本文通过20个小时对货币基金APP的产品研究,用户研究,使用UX工具构建场景,目的在于改变产品高度趋同现状,使得呈现模型遵循用户的心智,而不再仅仅是“买与卖”的理财超市。

    2017-04-28
  • 英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27