资讯
欣赏
资源
服务
返回首页
UX设计中的功能性动效
作者:333cn  来源:  :


(图片来源:ZURB University)

功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷,防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是,动效给用户界面赋予了生命。

通过对界面元素进行组合、拆分、改变他们的形状和大小,动效可以让界面更加生动。你应当使用功能性动效流畅地在上下文间引导用户,解释屏幕上元素排列的变化,以及加强元素层次结构。

成功的动效设计具有以下六大特点。

1、响应

视觉反馈在用户界面设计中是非常重要的,因为渴望得到确认反馈信息是用户的一种天性。在现实生活中,按钮、控制键和其它物体会因我们的操作而产生相应的反馈,这已经是人们习以为常的交互方式。

 

用户界面应该在用户点击输入框时,就准确及时地给予响应,表现出上一界面和当前界面的关系,以及哪些元素和操作导致了当前界面的出现。用户通过点击应用程序总是能知道发生了什么,这感觉很好。


(元素对用户的操作意图给出了合适的回应)

2、关联

新出现的界面需要和那些导致它出现的元素或操作联系起来。这种联想式关系所隐含的逻辑,能帮助用户理解刚刚在视图的布局中发生的变化和什么触发了变化。

下面你能看到两个导航菜单的动效案例。第一个案例中,菜单从用户点击点以外很远的地方开始浮现,这就打破了点击行为和菜单动效的联系。

在第二个例子中菜单从接触点出现,这就将元素关联在了接触点上。

另一个例子是在特定条件下操作按钮功能的变化。“播放”和“停止”按钮可能是切换开关最常见的例子。将播放按钮转换为暂停按钮意味着这两个动作是相连的,并且点击一个按钮后另一个按钮才会出现。你应该提供按钮动效让这两种状态转换地更为流畅且避免间断感。

 

(平滑地过渡到一个播放控件并告知用户按钮的功能,同时增加了一个惊喜的交互元素。图片来源:Material Design)

3、自然

避免令人诧异的过渡,每一个运动都应该遵循现实世界中的作用力。在现实世界中,一个物体加速或减速的能力受重量和摩擦力的影响。同样的,好的界面设计中,动效的启动和停止也不能过于突兀。

下面你可以看到一个很好的例子,用户选择列表中的一项放大到详细视图。在扩展过程中,小卡片沿着弧线移动到它的目的地,扩展成一个更大的卡。


(正确方式。在屏幕上向上移动的元素应该在运动过程中出现加速的力)

4、有意图的

操作指南关注的是如何在合适的地点、合适的时间给出引导提示。而动态效果,因为其特性,则拥有界面上最高的可见性(译者补充:运动中的东西最易被人眼察觉)。无论是文本段落,还是静态图像都无法超越它。好的过渡有助于引导用户下一步的交互。

第一次使用时用户无法真正预测即将发生的交互,但适当的动效可以帮助用户引导方向,不会觉得内容突然发生变化。

Mac OS最小化窗口时使用的功能性动效,这个动效将第一个状态和第二个状态连接起来。


(Mac OS最小化窗口动效)

层级跳转间使用的过渡动效,用户在列表中选择一个项目或卡片元素,并放大到详细视图。这个交互动效能够让用户保持维持对界面情景的认知。


(层级跳转间的过渡动效)

5、快速

当元素在位置或状态之间移动时,运动应该足够简洁快速,不要造成用户的等待,同时又能保证过渡动效能够被用户所察觉并理解。

避免过慢的动画,因为它会造成不必要的迟缓并增加完成操作的耗时。


(错误方式)

错开和放慢过多元素的运动会延长持续时间。


(错误方式。图片来源:MaterialDesign)

快速的动效,让用户不必等待动效完成。


(正确方式)

用户会经常看到它们,所以应保持过渡时间短,保持动效持续时间在300毫秒内。


(正确方式)

6、清晰

避免在一次动效中做多件事情,因为当多个项目需要在不同的方向或交叉路径移动时,它们就会变得很混乱,让用户晕头转向。


(错误方式)

过渡应该是清晰的,简洁的,连贯的。关于动效,请记住少即是多。因此,我们应该只关注动效对用户的实际价值。


(正确方式)

结论

总之,运动不是随意的,每个动作都是有目的的。运动原理是动效设计的基础原则,运动也能突出重点让你不会淹没在界面元素里。无论您的应用程序是有趣好玩或严肃直接的,使用运动原理能帮你建立一种清晰又具有凝聚力的界面体验。

谨慎设计。关注每一个细节是使人机交互易于使用的关键。

注: 本文图片来源MaterialDesign等设计网站

英文原文:Nick Babich, Functional Animation In UX Design: What Makes a Good Transition?

原文地址:https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e#.i3v9b5n7e

本文相关关键字:
继续阅读:
[转载请注明作者与出处 传播设计品牌影响力 汇聚中国设计力量 联络QQ:775487204]  编辑:
相关
文章
推荐
2017海峡两岸大学...
巨头竞争伊斯坦布...
2016麦当劳换了时...
优秀LOGO设计大学...
花边
“支撑”世纪文胸...
英国Christopher ...
丛林精灵 人体彩...
Harry Smith的翻...
用光画油画的摄影...
性感美丽的纹身摄...
排行
专题
  • 平面设计

  • 工业设计

  • CG插画

  • UI交互

  • 室内设计

  • 建筑环境

设计服务友情链接网站地图广告服务合作伙伴关于我们版权申明
中国设计之窗 © 版权所有 粤ICP备09030610号 ICP许可证 粤B2-20060659号 
座机:0755-21041837 网站客服QQ:点击这里给我发消息