纳金网

标题: UI中使用动效的3个关键点 [打印本页]

作者: 五十六个民族 时间: 2017-4-14 17:43
标题: UI中使用动效的3个关键点
随着技术的快速发展，动效不再是视觉上的华美，更多的用户所要求的期望功能。动效解决了很多功能问题和接口，可以真正与用户互动。
下面让我们探索动效的关键策略，提高界面接口的功能增加情感的力量。
1.系统状态
在你的程序在后台总发生一些过程，如正在从服务器下载数据，进行计算。这总是需要一些时间的。你需要让用户知道这个程序没有冻结，显示正在处理的状态。视觉交互给用户一种控制程序的感觉。
加载完成度
加载时间对大多数产品是不可避免的。而动效虽然不能解决这个问题，但会减少一点问题。
当我们不能缩短时，当然可以使等待变得更愉快。
有创意的过程动效可以减少用户感知的时间。动效影响用户感知你的产品，使它看起来比实际上更好。

如果一个应用在加载时为用户提供了一些有趣的事情，这会使得用户更少关注等待本身。
图片来源：Ramotion
下拉刷新
这组很流行的动效是“下拉刷新”，它发起一个移动设备上的内容更新的过程。

图片来源：Zee Young
提示：刷新动效应该与设计整体匹配——如果应用很小，动效也应该是。
通知
因为运动会吸引注意力，动效是一个令人愉快的方式可以与没有太多经验的用户进行交互。

移动的对象立即抓住了用户的注意力。图片来源：Arjun Kani
2.导航和转换
最基本的动效是转换。这种类型的动效背后的逻辑是帮助用户理解发生在页面上的布局的变化，改变了什么以及以后如何再次改变。一个典型的例子是一个汉堡包按钮，进行切换隐藏内容。

动效设计可以有效地引导用户愉快的接受通知。
图片来源：Gal Shir
尽管汉堡包动效可能在这里是最推荐的，还是有很多其他方式的动画导航
导航之间的转换
设计师使用动效在导航之间切换用户上下文，解释屏幕上的元素的变化。

不同状态之间的转换应该充当中介的UI,帮助用户理解屏幕上的变化是发生了什么。
图片来源：Ehsan Rahimi
视觉元素之间的层次结构和联系
动效可以完美的描述对象，并说明它们如何进行交互的。

动效说明了元素是如何交互的。
图片来源：Vitaly Rubtsov
功能变化
在某些情况下，设计师们不得不设计一个在一定条件下变化的操作按钮。我们经常在空间受限的手机设计中看到。

“开始”和“停止”按钮可能是最常见的多态按钮的例子。
图片来源：KREATIVA Studio
这种类型的动画显示了当用户进行交互时元素是怎样改变的。在下面的示例中，当用户按浮动操作按钮，加号变成了一支铅笔。这表示铅笔是主要的功能。这个小的细节意味着接下来发生不同的情况，知道图标意味着这两种状态。

按钮改变从一个“ ”到“铅笔”表明按钮的功能发生了变化。
图片来源：Material Design
3.视觉反馈
视觉反馈对于任何用户界面都至关重要。它可以让用户有控制感，让用户感觉理解在给定的时间的当前上下文的系统。
反馈确认
用户界面的元素如按钮和控件应该是真实的，即使他们是在另一个图层后面。
在物质世界中，按钮、控件和其他与我们进行交互的对象。人们期望用户界面控件具有类似的响应能力。
为了弥合这一差距，视觉和运动轨迹需要即时输入，动画的外观和方式可以直接进行操作。

按钮响应用户的点击。图片来源：Material Design
可视化的行为的结果
动效可以提高每一个交互并且是加强用户预成型的操作。
在下面的例子中，当用户点击“支付”，一个转轮短暂出现在应用中表示成功的状态。动效让用户觉得他们可以很容易支付而且用户会很喜欢这样的细节。

视觉反应可以增加用户的参与度并取悦用户。图片来源：Michaël Villar
工具和教程
下面的教程可以帮助你把动效融入你的Android或者iOS项目中：
*用Adobe After Effects制作动效
*用图形和动效指南帮助你为应用程序添加一个动效到你的Android程序
*使用iOS自定义的动画项目

欢迎光临纳金网 (http://rs.narkii.com/club/)