UX设计中的功能性动效

图片来源:ZURB UNIVERSITY

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

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

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

1.响应

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

图片来源:SMART DESIGN

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

元素对用户的操作意图给出了合适的回应。图片来源:MATERIALDESIGN

2.关联

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

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

错误方式。图片来源:MATERIAL DESIGN

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

正确方式。图片来源:MATERIAL DESIGN

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

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

3.自然

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

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

正确方式。在屏幕上向上移动的元素应该在运动过程中出现加速的力。图片来源:MATERIAL DESIGN

4.有意图的

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

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

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

MAC OS最小化窗口动效

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

层级跳转间的过渡动效。图片来源:MATERIAL DESIGN

5.快速

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

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

错误方式。图片来源:MATERIALDESIGN

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

错误方式。图片来源:MATERIALDESIGN

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

正确方式。图片来源:MATERIALDESIGN

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

正确方式。图片来源:MATERIALDESIGN

6.清晰

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

错误方式。图片来源:MATERIALDESIGN

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

正确方式。图片来源:MATERIALDESIGN

结论

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

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

谢谢!

UXPLANET

译文地址:DDC

(0)

相关推荐

  • 4个功能性动效让网页更加舒适!

    ​约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗.然而到了今天,已经发生了翻天覆地的变化. 交互设计和动态效果的详情,带来的是网站或APP的根本改变.这种思维方法,在下面有详细的描 ...

  • 巧用AE设计一套ICONS动效

    巧用AE设计一套ICONS动效.模仿追波大神MARKUS Magnusson 炒鸡简单,值得借鉴

  • 如何在琐碎的 UX 设计中,做出显性价值?

    如何在琐碎的 UX 设计中,做出显性价值?

  • 动效在日常产品设计中的实际应用

    本文分享作者C端产品设计中总结的动效使用,归纳出比较实用的6点技巧.利用小技巧有效吸引用户注意力,增加点击率,降低运营成本:用最简单的视觉表现方式说明其中的关系,增加产品易用性等. 几年前随着国内移动 ...

  • 用户体验动效的12大原则

    作为一个UX.UI设计师,我们需要知道如何.何时.何地通过动效来提高用户体验.在本文中,有12个特定的机会可支持用户体验动效的可用性.这些机会称为"用户体验动效的12大原则",它们 ...

  • APP用它说话—动效

    小编:动效是APP的肢体语言,14年有那么一段时间,屏幕上满是华丽的翻转,平稳的过度.UI设计中不可或缺的动效,不仅仅是视觉感官上的享受,它们完全的建立于用户体验上思考,实现的. 引言:如果把APP比 ...

  • UI设计中我们为什么需要设计动效

    最近越来越多的国内公司开始动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性.更多的射鸡师们也开始投身动效设计领域. 随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始动效设计了,越 ...

  • 值得你关注的动感粒子动效设计趋势

    现代风盛行的网页设计圈中,不少设计师会倾向于用动态.抽象的元素来为页面渲染出富有科技和未来感的氛围.在这其中,飘散的粒子动效是比较常见也颇受欢迎的一种元素,而今天我们要聊的就是这种设计元素. 有的网页 ...

  • 腾讯干货!交互微动效设计指南

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