功能性动画UX设计——打造优秀的过渡转场效果

功能性动画(functional animation)是有明确、合理目标的微动画。它能减少认知负荷,防止变化盲视,营造更好的空间关系。另外,动画让用户界面更贴近生活。

通过组合与分割、改变形状和尺寸,动画可以让界面鲜活起来。你可以运用功能性动画,来流畅地在导航内容间引导用户,解释屏幕元素排列的变化,强调元素层级等等。




成功的动画设计具有以下六个特征:

1 响应性

视觉反馈在UI设计中极为重要,因为它迎合了用户对确认应答的天然需要。在现实生活中,按钮、遥控等各种物体会响应我们的操作,反映了人们对事物的期待。

界面应当快速响应用户输入,准确地说是要在用户触发的一刹那响应,展现出新界面和触发它们的元素及操作之间的关联。在应用中点击之后,清楚知道正在发生什么和是什么导致新事件的发生,这种感觉非常棒。


2 关联性

把新产生的界面,与触发它们的元素或操作关联起来。关联性背后的逻辑,能帮助用户在界面布局中理解刚发生的变化,和什么导致了变化。

下图中,可以看到两个菜单过渡效果。第一个例子中,菜单出现位置和触发它的接触点距离很远,破坏了与输入方式的关联。

第二个例子中,菜单正是从触点展开的。这就把菜单元素与触点关联起来了。

另一个例子,是操作按钮在特定情境下可以改变功能。“播放”和“暂停”按钮或许是切换按钮中最常见的例子。播放可以转变为暂停,表现出这两者是相关联的,点按其中一个,就会看到另一个。我们应该设计好状态间的过渡动画,让它看起来流畅不间断。


3 自然

避免令人意外的过渡效果。所有的动作都应该遵循真实世界中力的作用。现实中,一个物体加速减速是由于重力和表面摩擦力的作用。类似的,在好的界面设计中,启动和停止也不会即刻发生。

下图中可以看到一个很好的例子,用户选中列表中的一项,展开进入详情视图。展开的过程中,小卡片沿着一条弧线移动到目标位置,展开成一张更大的卡片。


4 目的性

在合适的时机,应将视线引导到适当的位置。动画天生就是最高级的突显,无论文本段落还是静止图片都无法与之相提并论。好的过渡效果应当起到引导用户下一步交互的作用。

用户第一次无法预料某个操作触发的结果,但适当的动画能让用户保持方向性,不会感觉到内容突变。

Mac OS在最小化窗口时用了一种功能性动画,把前后两个状态联系起来。

另一个例子是由父及子的过渡,用户选中一个列表项或卡片元素,放大进入详情视图。这个操作能让用户了解上下文过渡。


5 快速

元素在不同位置和状态间运动时,要保证足够快,不要让人等待;但也不可过快,要让这个过渡容易理解。

不要制作缓慢的动画,因为它产生了不必要的停顿,延长了持续时间。

不要交错和减缓多个元素的运动。

快速完成动画,用户就不必费时间等待动画结束。

保持过渡动画简短,因为用户会频繁看到它们。控制动画持续时间在300ms或更短。


6 清晰

过渡效果应当避免一次做太多事情,因为如果许多物体往不同方向或沿着不同路径运动,会令人感到困惑。

过渡效果应当明确、简洁、连贯、清晰。记住,在动画方面,少即是多。我们应该只专注于动画能为用户带来的实际价值。




结论

综上所述,动画不是随意为之。每个操作背后都有其目的。动画对用户起引导作用,突出重要内容。无论你的应用是欢乐幽默型还是严肃直接型,动画的运用原则都有助于你提供清晰、快速、连贯的用户体验。

谨慎设计。注意每一个细节,是打造成功的人机交互的关键。


小编心得:
我们不是为了设计动画而设计动画,功能性动画的存在价值在于“功能”二字,而如何体现功能还是需要一番精心设计的。
via: uxplanet



D∬G   设计和代码其实都是一种艺术修行~~

设计灵感来自于梦境和现实的夹层中 ~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~