查看: 6064|回复: 1

【原译】下一个转场,动画见

[复制链接]

1

主题

23

回帖

50

积分

会员

Rank: 5Rank: 5

积分
50
发表于 2015-7-10 09:25:48 | 显示全部楼层 |阅读模式
尹广磊公众帐号
好的动画转场能够提升用户体验,今天翻译的文章将说明动画与用户体验的关系,以一些精彩的动画转场案例。以下是译文:

在设计数字产品时,为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上进行元素之间的复杂过渡,作为设计师,我们应该接受这种为更好的用户体验索带来的发展。 但是如何定义一个好的转场呢?

好的动画是看不见的。 你不注意到你是在看动画。 ——帕斯夸里德

1. 动画和用户体验

为了更好地定义转场,了解动画和用户体验之间的关系非常关键。

动画贯通上下文
如今,数码产品已经能够使我们做之前难以想象的事情,如从你的手腕上订购一辆出租车或无需思考就能准备好一顿饭。 随后,这意味着作为一个成功的产品界面设计师的工作是至关重要的。 通过所有这些复杂的交互和可能性,用户可以快速贯通和产品定位。 如果元素在屏幕上突然(重新)移动,你可以失去对界面的理解。在电影中当有人经过时间机器时使用动画和音效并不罕见,所以在界面设计时也很自然地使用动画。

动画提供反馈
使用动画可以为用户提供有价值的反馈,而不会弄乱界面或避开用户信息。 一个很好的例子是iOS上的相机应用程序,当它试图对焦于一个对象,十字准星淡入并通过收缩模仿抓住焦点。当抓住正确的焦点,曝光会闪烁两次然后逐渐消失,告知用户准备拍照了。 这些类型的动画在没有避开用户的前提下提供非常具体的信息。

动画突出重点
如果一个界面功能拥有很多元素,它可以将用户的注意力在屏幕上转移到一个特定的元素。 使用动画使设计师能够通过位置,规模和不透明度来吸引用户的注意力。 另一个技巧是使用异步时间轴动画将注意力放在变化的元素上。

如果不使用动画,流程会感觉不流畅;如果不是,这可能意味着你的动画是多余的。 ——迈克尔·维拉尔

动画不解决用户流程
动画绝对可以帮助提高界面使用体验,但仅仅是一小部分的用户交互。动画可以帮助用户去理解的他们的设计之路,但需要确保路径是通往正确的目标和期望。

2. 交互设计中的动画

动画可以提升用户体验,但并不是每一个动画都适合你的产品。诺基亚在2010年做过研究,他们得出的结论是,用户就动画作为一个过渡的一部分是喜忧参半。 不过通过使用不同的速度和动画曲线,他们能够确定哪些是最理想的动画。

缓冲

计算机生成的动画是非线性的,而使用缓冲动画被证明是自然并更令人愉悦的。 诺基亚发现动画从慢到快的发展通常经历了从低到高的产品,最有可能是因为产品提供了慢于预期的反馈。

产品提供的反馈应该尽快转为产品消息并快速响应,即使最终到目的地的路径很缓慢。 如果已经展示出了产品的进步,用户通常更倾向于等待新的改变,所以越快地反馈进展,与用户建立连接也越快。 只要确保你的加载时间快,不必显示一致的进程,可以向下面这样:

3. 动画转换的精彩案例

在用户界面上我们已经收集了一些例子,这些案例都增强了用户体验。

iOS上的日历
为了确保用户了解他们的日历,它提供了一个缩放和规模动画以保持上下文在屏幕之间的灵活过渡。 因为缩放动画,用户就会被呈现一种无形的系统布局,即底部是全年日期,上面一层是具体月份。

可见缩放动画帮助贯穿上下文。

iOS上的Facebook
使用动画来改善转场的另一个很好的例子是在Facebook应用程序中打开和关闭照片。无论点击任何照片,它都会提供一个全屏视图的照片。为改善体验,你点击停留在屏幕上的照片和自动变焦,而背后的界面和它的周围会逐渐淡入。关闭照片回到图片在时间轴的原有位置。所以使用这些小动画的界面很容易追踪正在发生什么。

Iconjar
这些动画并不限于移动设备。 例如在Iconjar网站上,当你点击一个链接它将揭示以无缝的方式打开一个下拉菜单。 因为下拉单的出现和隐藏,用户理解到它是源于你点击才出现的。

4. 总结

动画不仅提供美观的界面,还可以是真实的用户体验改良剂。关键在于在有趣和功能之间找到合适的平衡点,并确保用户流程是在没有动画的前提也是好的。一个良好的过渡是不突出的,不仅增强了用户体验,同时是有趣的。

来源:medium   

博客无法插入动画视频,点击可查看:下一个转场,动画见
任何人只要专注于一个领域,5年可以成为专家,10年可以成为权威,15年可以世界顶尖。www.iamue.com站长致力专业交互设计学习网站。

0

主题

18

回帖

0

积分

会员

Rank: 5Rank: 5

积分
0
发表于 2017-11-27 12:50:08 | 显示全部楼层
厉害
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-28 21:12

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表