转场动效的5个核心规则

本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~


本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

转场动效的5个核心规则

转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面,动态的转场动效更符合人类的自然认知体系,有效地降低了用户的认知负载,屏幕上元素的变化过程,前后界面的变化逻辑,以及层次结构之间的变化关系,都在动效的加持之下,变得更加清晰自然。从这个角度上来说,动效不仅是界面的重要支持元素,也是用户交互的基础。

动效设计,尤其是协助交互的转场动效,如今日趋成熟。通过大量的案例分析和过来人的经验,我们逐步总结出优秀转场动效的5个核心的规则,今天的文章,我们就来分享这5个知识点。

1、自然是好UI动效的核心

用户界面中状态改变在默认情况下大多是生硬而直接的,这使得用户有时候很难立刻理解。在现实生活中,事物不会突然出现突然消失,通常它们都会有一个转变的过程。当界面有两个甚至更多状态的时候,状态之间的变化使用过渡动效来填充,让用户明白它们是怎么来的,而非一个瞬间的过程。

看看下面的案例,用户在列表中选取一个条目查看详细细节,小卡片展开为大卡片,其中动效的变化规则源自于现实世界。

转场动效的5个核心规则

2、高效的UI动效是层次分明的

一个层次分明的动效通常能够清晰地展示状态的变化,抓住用户的注意力。这一点和人类的意识有关系,用户对焦点的关注和持续性都与此相关。良好的过渡动效有助于在正确的时间点,将用户的注意到吸引到关键的内容上,而这取决于动效是否能够在正确的时间强调对的内容。

在下面的案例当汇总,圆形的悬浮按钮(FAB)经由动效变化扩展成为三个导航按钮。用户在动效发生之前,并清楚动效变化的结果,但是动效的运动趋势和变化趋势让用户对于后续的发展有了预期,其后产生的结果也不会距离预期太远。与此同时,红色的按钮在视觉上也足够拥有吸引力,这个动效有助于引导用户进行下一步的交互。

转场动效的5个核心规则

3、关联是过渡动效的重要功能

既然是过渡,自然就牵涉到变化前后元素之间的关联。良好的过渡动效连接着新出现的界面元素和之前的交互与触发元素,这种关联逻辑让用户清楚变化的过程,以及界面中所发生的前后变化。

下面的两个案例都是交互触发的界面变化,第一个案例中,动效发生的位置距离交互触发点较远,这一点违反了相近关联的原则。

转场动效的5个核心规则

第二个案例中,动效的发生点和交互的触发点是非常靠近的,这个动效无疑阐述了两者之间的因果联系。

转场动效的5个核心规则

而macOS 中著名的窗口最小化动效,也是一个典型的案例,动效连接显示和隐藏的两个不同状态,让用户知道上哪儿找隐藏的窗口。

转场动效的5个核心规则

4、快速的过渡是高效UI动效的基础

如果说有什么是每个动效设计都必须具备的,那一定是快速高效的时机把控。

在设计过渡动效的时候,时间和速度一定是最需要设计师把握好的因素。快速准确,绝不拖沓,这样的动效不会浪费用户的时间,让人觉得APP产生了延迟,不会令用户觉得烦躁。

在下面的案例中,过慢的动效明显给人一种动力不足的感觉。

转场动效的5个核心规则

转场动效的5个核心规则

当元素在不同状态之间切换的时候,运动过程在让人看得清、容易理解的情况下尽量快,这样才是最佳的状态。为了兼顾动效的效率、理解的便捷以及用户体验,动效应该在用户触发之后的0.1s内开始,在300ms 内结束,这样不会浪费用户的时间,还恰到好处。

5、清晰的UI动效才是好动效

不止是动效,清晰是几乎所有好设计都有的共通点。动效是功能性优先、视觉传达为核心的视觉元素,太过复杂的动效除了有炫技之嫌,还会让人难于理解,甚至在操作过程中失去方向感,这对于用户体验而言绝对是一个退步,而非优化。请务必记住,屏幕上的每一个变化都会让用户注意到,它们都会成为影响用户体验和用户决策的因素,不必要的动效会让用户感到混乱。

动效应该避免一次呈现过多效果,尤其当动效同时存在多重、复杂的变化的时候,会自然地呈现出混乱的态势,少即是多的原则对于动效同样是金科玉律。如果某个动效的简化能够让整个UI更加清晰直观,那么这个修改方案一定是个好主意。当动效中同时包含形状、大小和位移变化的时候,请务必保持路径的清晰以及变化的直观性。

可用性和可访问性

动效本质上是作为视觉传达的一个组成部分而存在的,对于视觉障碍用户而言,他们不一定能够从动效中得到好处、获取信息。所以,考虑到这一部分用户的需求,你应该提供额外的信息帮助他们明白界面变化。webacessibility.com 中提供了不少关于动效设计的内容和建议。

结语

过渡动效始终是围绕着用户交互和界面元素而存在的,无论你要成效的是怎样的动态效果,可爱抑或是自然,都始终是服务于功能,然后才是情绪和氛围。

 

原文地址:webdesignerdepot

原文作者:Nick Babich

译者:@陈子木

译文地址:优设网

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21199/

(0)
CatherineCatherine
上一篇 2017-04-27 16:16
下一篇 2017-04-27 18:18

相关推荐

  • 老外看中国的移动App设计精髓-3 通用ui、颜色、文字、表情

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 提升用户验证,要好好考虑几件事情

    出色的移动端用户验证是怎样的?减少注册和登录的痛苦?

    2017-05-06
  • 【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • “空状态的设计“值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。 不要被空状态的…

    2015-08-17
  • 用户体验设计大赛开始啦

    关于举办福州大学第五届大学生用户体验设计大赛的通知用户体验是用户使用产品(服务)的过程中建立起来的心理感受。用户体验设计(User experience design,简称UXD)结合工业设计、心理学、界面设计、信息设计、人机交互、计算机科学、认知科学,以及人类学、社会学、传播学、建筑学、工程学等领域的知识,通过创新设计带给用户良好的交互反馈,提升产品(服务)的用户体验,是一个高度跨学科的领域。随着社会发展和经济增长,国家大力推动“互联...

    2018-04-04
  • 明年的,网页设计趋势!

    是时候展望一下未来了。2014年涌现了许多令人印象深刻的网页设计趋势 ,幽灵按钮越来越多,视差滚动也已经成熟,单页设计也成为了诸多设计手法的重要载体,而逐渐多起来的免Coding网页设计平台也开始造福于设计师了!

    2014-12-27
  • 交互设计之架构真经

    建立信息架构是交互设计师主要工作之一,是需求转向交互稿中非常重要的过程。一个架构的好坏决定这这个产品未来的命运,只有具有一个好的信息架构,才会具有一个好的产品体验。以下将从认识——前期工作——如何产出——如何判断,四个步骤来介绍信息架构。一、何为信息架构信息架构设计是对信息进行结构、组织方式以及归类的设计、好让使用者容易使用和理解的一项艺术与科学。这是比较官方的说法,简单通俗的说法就是对信息进行组织和层级分层。当我们一看到购物车这个信息...

    2018-05-01
  • 一组能切实提高转化率的网站着陆页设计

    网页设计 师目前在设计界是一个最为尴尬的存在,一方面他们被视为和GEEK党混在代码堆里不懂审美的怪咖,另一方面他们又苦于网页中被局限的自由而无法在创意上得到最大延伸,设计师本人无法给自己准确定位。

    2017-06-02
  • 交互新人眼中的交互设计

    从一开始选择做交互设计这个岗位,我就一直在思考:“交互设计究竟是什么东西”。近段时间以来参加了一些面试,每次面试都会让我去重新思考一下这个问题。加上最近又做了一些工作,看了一些资料,对这个问题又有了一…

    2015-12-25
  • 论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03