header_v0.7.2

【译】功能型动画设计:如何做一个巧妙过渡?

354天前发布

原创文章 / UI / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

本文经优秀设计团队设计夹校对发布,文章介绍了功能性动画设计的6大特性,能帮助我们把动画设计得更加自然流畅而有意义。

功能型动画是一种清晰有逻辑性的微妙动画,它能减少认知负担,防止盲目修改,在空间关系上建立更好的回馈。值得一提的是,动画把用户界面带到了生活中。


运动能让界面看起来生动,通过乘法或除法,改变它们的形状和大小。你应该使用功能型动画在导航上下文流畅地传递给用户,解释屏幕上元素的有序变化,强化元素间的层次结构。成功的动画设计过程遵循以下6个特性:


1、响应式


在用户界面设计中,视觉反馈是非常重要的。它之所以会起作用,是因为它吸引了用户对认知的原始诉求。在现实生活中,按钮、控制器和物体对我们的交互做出反馈,这就是为什么用户期望事物能起作用。





图片来源:material design


用户界面应该在被触发输入的地方快速响应用户进行精确输入,并展示新界面和构成界面的元素或动作之间的联系。点击APP的感觉很棒,总觉得你知道发生了什么。




对象恰当地回应用户的意图


2.组合


将新创建的界面和构成界面的元素或动作连接起来。组合联系背后的逻辑是帮助用户理解刚刚在可视布局里发生的变化,是什么触发了这个变化。下面你会看到两个过渡菜单动画的例子,在第一个示例中,菜单出现得离触发点很远,这打破了它和输入方法的联系。




不正确


在第二个示例中,菜单是从触发点右侧出现的,建立了元素间的联系。




正确


还有一个示例是关于动作按钮,在特定环境下它的功能发生了改变。播放和暂停按钮可能是最常见的转换按钮,从播放按钮变成暂停按钮,意味着这两个动作是相连的,按下一个意味着另一个操作将会出现。你应该让状态之间的过渡充满生气,让它看起来很平滑流畅,而不是间断的。




控制器平滑的过渡,告诉了用户按钮的功能,也在交互中增加了有惊喜的元素


3.自然


避免出现让人惊讶的过渡,每个运动都应该是被现实世界的作用力激发的。在现实世界,物体迅速加速或减速是受重力和摩擦力的影响;类似的,在好的用户界面设计中,开始或停止也不是突然出现的。


下面你会看到一个范例,用户在一个列表中选择一个条目,放大看它的详细内容。在扩大的过程中,随着扩张为一个大卡片,这个小卡片是以某种弧线运动到终点的。




屏幕上元素的上移要同时描述向上的加速运动效果


4.有意图


在恰当的时机指引到恰当的点,运动,根据它的天性,在用户界面中能最显著的突出来。不论是文字段落,还是静态图片,都能通过运动完成,一个好的过渡能帮助用户引导到交互操作的下一步。


第一次进入的用户可能不能预知一个将要发生的交互动作,但是合理的动画能帮助用户保持方向性,不会觉得内容图突然发生了变化。当把窗口缩小时,Mac OS使用了一个功能性的动画,这个动画连接了第一个状态和下一个状态。




Mac OS缩小窗口的动画


另一个好的示例是一个继承性过渡,当用户在列表中或卡片元素中选择某一项,放大看它的细节内容,这个交互允许用户保持上下文的一致。




继承性过渡动画

 

5、快速


当元素在位置或状态上运动,这个运动要足够快,不会引起等待,但是适当慢,过渡能更被理解。动画不要太慢,因为会导致不必要的延迟,会延长持续时间。




不正确


许多元素惊人而缓慢的运动会延长时间。




不正确


快速运动的话,让用户不必等到动画结束。




正确


保持过渡时间足够短,因为用户会频繁地看到他们,保持动画的过渡间隔低于300ms。

 




正确


6、清晰


过渡应该避免一次做太多事情,因为当众多的条目需要在不同的方向或路径运动时,它们会让人困惑。




不正确


过渡应该清晰、简单而连贯。记住,在动画设计时,少即是多。所以我们应该只关注动画为用户做的实际事情。




结论


综上,运动不是随机的,每一个运动背后都有目的。运动引导并让你不错过最重要的信息,无论你的app是好玩有趣的,还是严肃直接的,使用动画原理能帮你提供一个清晰快速连贯的体验。用心设计,注意每一个细节都是成功的关键,让人机交互更容易使用。



欢迎关注本人微信公众号:

517057d17e0c0000012e7eda9754.jpg

声明:如需转载,请申请本人授权并保留译者全部个人信息,严禁私自用于任何商业用途,请尊重译者权益。


70

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功