欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

来自腾讯ISUX的交互微动效设计指南

发布时间:2017:07:06 11:08:04 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1392个文字,预计阅读时间4分钟
导语
本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供

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

来自腾讯ISUX的交互微动效设计指南

  一. 本指南的适用范围

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

  动效范围涵盖:

  入场\出场动效(enter & exit)

  过渡动效(transition)

  加载动效(loading)

  二. 设计原则和设计考量

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

来自腾讯ISUX的交互微动效设计指南

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

来自腾讯ISUX的交互微动效设计指南

  三. 响应时间与持续时间

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

  响应时间指从用户执行操作到反馈出现的间隔时间。触发机制不同,广州网站建设公司,响应时间的限制也不同:

  对于由用户操作 直接触发 的反馈,理想的响应时间应该控制在 100毫秒内。

  对于由用户操作 间接触发 的反馈,响应时长可允许达到 1秒左右,不可 超过2秒 无反馈。

  当 超过2秒 才能获取反馈结果时,须设计加载动效(loading)。

  当反馈时间为 2-9秒 时,可使用循环的加载样式(如常见的菊花转)。

  当反馈时间 超过10秒 时,须使用带有进度指示的加载样式(如已加载了60%,还剩30秒)。

来自腾讯ISUX的交互微动效设计指南

来自腾讯ISUX的交互微动效设计指南

  2. 持续时间

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

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

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

  小元素的轻微变化效果(如渐隐渐现、大小变化等小范围变化),一般在 200~300毫秒以内。

  较大元素的复杂变化效果(如包含大范围缓动位移),可长达 400-500毫秒。

来自腾讯ISUX的交互微动效设计指南

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

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

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

来自腾讯ISUX的交互微动效设计指南

来自腾讯ISUX的交互微动效设计指南

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

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:为什么建设链接对SEO很重要?

下一篇:我们和获得1.28亿元融资的“读客图书”聊了聊 IP孵化的方法论

  • 18876 文章总数
  • 2195508访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信