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

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

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

1、响应

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

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

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

2、关联

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

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

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

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

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

3、自然

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

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

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

4、有意图的

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

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

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

(Mac OS最小化窗口动效)

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

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

5、快速

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

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

(错误方式)

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

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

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

(正确方式)

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

(正确方式)

6、清晰

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

(错误方式)

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

(正确方式)

结论

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

原文发布于微信公众号 - BestSDK(bestsdk)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信终端开发团队的专栏

iOS微信小视频优化心得

image.png 小视频是微信6.0版本重大功能之一,在开发过程中遇到不少问题。本文先叙述小视频的产品需求,介绍了几个实现方案,分析每个方案的优缺点,最后...

6837
来自专栏Material Design组件

Human Interface Guidelines —— 活动视图(Activity Views)

3729
来自专栏分布式系统和大数据处理

ppk谈JavaScript

这本书买得比较早,断断续续读了几次。这次花了一周时间重新读了一遍。总得来说,这本书中的部分理念,不说完全过时,但在现在的技术环境下也很难实现了。例如书中提到的“...

992
来自专栏草根博客站长有话说

展望 WordPress 5.0 会给我们带来哪些更新?

目前 WordPress 最后的一个正式版已经到 4.9.7 了, WordPress 5.0 也即将到来了,那么 WordPress 5.0 会给我们带来哪些...

2233
来自专栏非著名程序员

推荐几个比较好的开源项目和开源库

? 最近比较忙,北京天气又很闷热,没有太写文章,公众号后台经常有人问:为什么这几天没推送?说实话,确实有点忙,天太热而且身体有些不舒服,还请大家见谅。今天推送...

33210
来自专栏phodal

一次超帅的代码生成设计

需求 昨天,我看到这个Badge的时候,我就在想我也会创建一个自己的Badge。 ? 然后,我就可以这样到处粘贴: ? 看样子,我做的效果还是没有上面的好看...

2529
来自专栏前端笔记

【WP主题】Kratos 文章样式使用说明 。

为了拓展 WordPress 原有的文章编辑器功能,三哥额外添加了一些配合主题使用的小功能(网易云音乐、优酷视频、腾讯视频、哔哩哔哩、Youtube、进度条、下...

3939
来自专栏IT派

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

3365
来自专栏PHP在线

HTML5移动应用开发

1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构...

3718
来自专栏KK的小酒馆

几个作品

3.拥有置于前台的服务,实现Notification的播放、暂停按钮与其他界面同步。

943

扫码关注云+社区