专栏首页BestSDK【教程】UX中最常用的6个功能性动效,看完自己也成大神了

【教程】UX中最常用的6个功能性动效,看完自己也成大神了

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

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

1、响应

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

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

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

2、关联

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

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

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

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

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

3、自然

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

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

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

4、有意图的

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

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

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

(Mac OS最小化窗口动效)

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

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

5、快速

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

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

(错误方式)

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

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

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

(正确方式)

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

(正确方式)

6、清晰

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

(错误方式)

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

(正确方式)

结论

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

本文分享自微信公众号 - BestSDK(bestsdk)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-02-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3分钟让你分清,数据管理与数据治理的区别

     数据管理和数据治理有很多地方是互相重叠的,它们都围绕数据这个领域展开,因此这两个术语经常被混为一谈。   此外,每当人们提起数据管理和数据治理的时候,还有一...

    BestSDK
  • 如何像BAT 一样,挖掘金融大数据这座“金矿”?

    金融创新很大一部分原因在于大数据和金融之间的结合。纵观BAT、京东、小米、万达、平安这些把触角伸到互联网金融领域的巨头,无一不是在大数据层面上有所布局。大数据和...

    BestSDK
  • 大数据改变的不只是商业,更重要的是思维

    自从进入大数据行业,被问及最多的问题,一是大数据是什么,二是大数据能干什么,三是我周围哪里用到了大数据 对于前两个问题,小编经常就随便糊弄过去,毕竟学术界都还每...

    BestSDK
  • 4月21日数据动态早报

    数据动态早报,让您了解数据新变化、新创造和新价值。 ---- ? 一、通信行业数据动态 1 对于有天然数据资源优势的电信运营商,大数据正成为其业务创新、跨界合作...

    陆勤_数据人网
  • 哈佛商业评论:数据是内容营销的下一大热门话题

    大数据文摘
  • 政府开放大数据,为何大公司优先?

    原创2015-03-20罗超 大数据终于不再是纸上谈兵,而是进入到实际应用阶段,标志性事件是两会上,李克强总理明确表态,政府应该尽量的公开非涉密的数据,以便利用...

    罗超频道
  • 你的大数据项目失败的三大关键因素

    说到大数据,有一个网上流传已久的段子: Big data is like teenage sex: everyone talks about it, nobod...

    小莹莹
  • 【热点】大数据人才“求贤若渴”

    在推进大数据应用的过程中,企业主要面临以下三方面的困难,一是认识上的不足,很多人并不知道大数据是什么,因此也就无法知道如何正确地使用大数据工具;二是投入...

    小莹莹
  • 2018年9月25日python的web框架Django入门的理论知识

    1、什么是软件     软件就是解决某一问题或者某类问题的指令集合,是一个工具,是一个进程,是程序。

    武军超
  • 大数据就业方向有哪些?可以干什么工作?

    大数据及其应用的迅速发展,使得大数据人才缺口较大,大数据也迅速成为行业和市场的热点,更多的企业无论是对人才的招聘还是在培训都成了刚需,大数据的就业领域是很宽广的...

    加米谷大数据

扫码关注云+社区

领取腾讯云代金券