赞助商
立即赞助

为什么越来越流行的酷炫动效,你不一定要学?

UI设计3年前 (2021)更新 流光
9.2K 0 0

写篇文章的因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 展现状的文章。文章表在 16 年,其中提到:「我不认为 Dribbble 决什么问题,你期望在 400*300px 的矩形中决少现中的问题?Dribbble 一直没有变化,但你以有所变化,果你更关心其他情而不是新的 UI 趋势」。当,他也提到,果正在从创意设计等领域的工,他很认 Dribbble 能为他带来的灵感的价值。

为什么越来越流行的酷炫动效,你不一定要学?

我来释下,者 Tobias van Schneider 是以一名(UI/UX)验设计师的从业者身份表的观点,即 Dribbble 流行的 UI 趋势则并不能决用户验相关的一问题。我们回顾历史以来比重要的验互领域的重大革新,际上是跟随硬件革新,由平台级团研究并普及开来,而不是 Dribbble 之类的设计分享流平台。

作体验向 UI 设师,我们应当花费多精力交互体验相关的技能构建,不对于流行趋势的盲目随崇拜。趋势不能解决问题,用研究探索解决方案能解决产品面临的问题,甚至很多人都不明白自己产品所面临的问题,别提解决了。

确保有主见,能独立思考,然后再去待目前的趋势及身的职业生涯当下的行业现状。

这个思考同时我想起了年流行起来的产设计师、全链路设计师的概念。在阿里BBC UED总监汪方进口中的 UED 转 UXD,目的是解决阿里及各个公司存在的职分工问题,实现设计师从产修者到产区分者乃至产驱者的转变,放大设计师的值,且使设计工作成果可验证。

其愿景是好,在里内部实施成应该也不,数趋若鹜,跟随这股潮流却是,更多看到了它好,像股票,听说能赚钱,疯狂投入。殊不知,里 UXD 是从 P7 开始培养。于是批本该精力锻炼与沉淀自己核心竞争力设计师,拖慢了自己成长步伐,形反而削弱了个竞争力。

问题在哪里?问题在,你不是在 BAT 工,你的产品主导者仍是老板是产品经理,你认为你的战略思想拼得老板?互能力拼得互设计师?不存在的,职能并没有下放,你还是仅仅在做 UI 设计,你没有能力主导产品,驱动产品也难。因此,趋势的产生有其生长的土壤,并不适合移植到所有地方。一点所有人应该谨,在跟随潮流趋势时,反省一下样做对我常工的到帮助吗?

它使我始辩证看待我们当下的各种流行趋势,及这些新潮看似繁荣的设发展背后所呈的一些较隐晦的问题。人类总繁荣中沉溺自我满足,无法意识到甚至抗拒可能会出的问题,职业也一样,设师这种人风格浓郁,性支配力强的职业如此,我们沉迷、从众、自嗨、盲目,自以,投身于潮流浪潮,却不自知裸泳。

这次要讲的是关于流行动效的问题,就是每在 Dribbble 浏览的致动效。文章包括:

  • 对当动效趋势的思考,存什么问题?
  • 应当如何正确认识当下的流行动效?
  • 如何做更实优质的效?

关于当下流行动效的问题

否会常惊叹那些复杂炫酷的 UI 动效,优的转场,精致的交互细节,动感的节奏。很常,我也会,以我甚至会这样浏览一小时,下载下仔细研究临摹,当复原了这样一高复杂度的动效,我也会就感。甚至到后,当我传自己产出的一些 UI 作品时,我会刻意使用一些 Dribbble 流行的动效样式,并自得其乐。我相信很多人我一样,但我们出观的、酷炫的动效设计,它们的是设计吗?还是单纯的设计师自嗨型设计?

我们看下面这两案例,作创意设,或者单纯看视觉效果,这两作品无疑极优秀。但他们其实应当归属于 UI/UX 体验设,从这角度看,问题就点多了。

为什么越来越流行的酷炫动效,你不一定要学?

为什么越来越流行的酷炫动效,你不一定要学?

下面我将指出目前以 Dribbble 平台为主的品分享中曝露出的典型的问题。

1. 太强展示,而忽略核心内容

以 UI 为主的品其重点展示的在用户界面的视、互等细节,但当下流行出一种通度富乃至复的背、装饰元素,来提高整个品图的设计感,参考上面一个品。因此,在质上将一个验类产品设计呈现出平面创意类设计。所以,设计师想要传达什么呢?平面还是UI?浏览者从中学习什么?对行业有什么影响有什么推动用?

作 UI/UX 的我们总强调体验,但我们并真将其融入所的设产出,出这样一重视觉呈,忽略了体验设本质的作品时,设师对自我的职能一自我否的状态,只同设师的我们沉迷其中,自嗨不自知。这设服务谁的?解决了一什么关键问题?这我们应当思考,且呈出利于同行的关键点。

2. 了展示展示,违背基础原则

我们遇到的很多酷炫的动效,什么酷炫,什么那么多细节可以被感知到?因设者被看到。事实,动效不应被清晰感知到,它只应该起到过渡作用,不应该扰用户的注意力。然 Dribbble 分之八十的作品都刻意减缓转场动画的速度,延动效的整体时,以展示多的设细节,那么设师需问问自己,这些细节的展示,否必,否意义?答案显易见,如果熟读谷歌动效规范,会记得篇第一句话,动效使 UI 富表力且易于使用,表力添花,易于使用,体验度核。

为什么越来越流行的酷炫动效,你不一定要学?

3. 表品的错误出点

最一点,也是最典型的一点,就是设计师盲目沉迷圈子内的消极心态,一点的相当典型且有害行业和个人的展。

我们都讲用户,用户体验,以用户中。然事实呢?我们传的作品,了呈给谁?错,了给同行看的。然产品的使用者谁?用户不设师,设师自嗨、从众、盲目信奉趋势,群体无意识的沉溺于这状态,这真的很恐怖的状。我们发表的 UX/UI 类作品了取悦设师群体,不用户解决问题,这就起点的错误。

而如果一个计在作品中呈现用一种独的交互方式解决了一个什问题,那社氛围就是另一个。不否认通过更丰的视觉效果来博眼球,但是一切都应当围绕着计性质的核心来进行,而不是将一个体验计丰成一个面计。

我们应该意识到一些问题,对自己对行有清晰的认知是未来够变得更好的前,但我们应该智的应对现状。设计师已经习惯了发表更博眼球的作来吸引注,或者是为了创更多私单和升职机会,这无可厚非。视觉上创与升华明显易于一套优秀的户体验的构建,然而构建体验解决问题却是我们职生涯中更键的分,是职值得体现的分。

此,我看法是,我们应认现状,尽量去选择正确去提升成长,不要盲目被潮流趋势带偏。

正确认识当下的动效设计

UI 动画常被认为能提升用户体验愉悦度,事实上并没有增加太大价值,设计师应避免代入职能偏好,而导致做出误判断。

设计师习惯自动代设计一个位的特殊,对动效有更敏感的感,因分关注从而产生动效有用户验样的错,但上用户处非时互时核心诉求在迅速完成界面的切换与度,而不是欣赏你的动效细节。而当用户处时互时,用户关注的也不是反馈的美观度,而是反馈的速度。是从用户使用产品的质诉求为出点的判断。

1. 动效的不同阶段

动效大致以按照时互和非时互划分不同阶段。时互阶段即正在执行的互操与动效同时进行,按下按钮时的状态变化,此类动效是与操同时完成的。

非实时动效则用户完操作后紧的转场或状态变化,如点击新的 tab 后的跳转转场,由右侧入或者底部划出。再例如一些加载效果,都非实时行的,它们与操作并不同时完。

2. 动效的目的及意义

动效设的目的意义什么?致可以概括以下几方面。

反应元素界面的层级关系

通过动效,用户易于理解界面的转场,能轻松到当行的作,此类动效给用户传达出任务层级,及界面中各相关元素的关系,减少困扰从提升体验。

为什么越来越流行的酷炫动效,你不一定要学?

提供互反馈和状态

动效能够提供及时的反馈和互状态。当用户完成具的操行为时,产品应当且必须给予用户反馈,以告该操是否生效,若无任何反馈则导致用户对自己和产品产生怀疑,甚至产生挫败感。没有反馈用户也无法清楚产品是否还在工。除此之外,动效也是表达状态的主要语言,加载状态、选中状态等等。

为什么越来越流行的酷炫动效,你不一定要学?

引导用户

动效是进用户教育有力工具,大家最熟悉莫过于苹解锁屏幕滑动手势引导。我们也会在些需要新用户引导场景下见到各手势引导操作。使用动画进引导形具有高效真实,易于交互特性,用户可以瞬心领神会,大大降低学习成本。如下图 Material Design 官案例,手势解锁引导(左图)及加入物便捷操作引导(右图)。

为什么越来越流行的酷炫动效,你不一定要学?

个性与情感因素

个性与情感效设计并适于有场景,因为效复杂和丰富实际上与效追求简洁的基本原则相违背,但在某些特殊场景,却往往发挥奇效。例如载页面来缓解户疲劳感与等待焦虑(右图),强牌logo相容来达到占领户心智的目的(左图)由此可看,规则是严谨的但是美,论存在盲区,可适当打破。

为什么越来越流行的酷炫动效,你不一定要学?

当然,在做与情感相的效设计时(UI设计领域而是牌设计领域),设计师最先要考虑的还是设计的目的、发点。即我为么要做这个设计,从体验角还是从战略角?为了升等待期间的体验或者为了深牌影响占领户心智,又或者单纯为了酷炫?

3. 动效应该遵循的通用原则

动效应当有阐释性

动效应当有解释交互的能力,如素的空间层次关系,传达操作的可用性和预期结果。

动效应当聚焦重点

动效在产品界面中位于层的最高点,因为移动的事物然更加聚焦注力,应当正确的理解这一点及利用这一点,而不能滥用。动效只应当发生在用户发生交互,或用户视线聚焦的地点。即动效的展示应当用户注力关,不应当产生干扰用户完成任的情况,更不应该出现无义的转移注力性质的计。但如果是商业化驱动的产品,这一规则可以无视,此类产品通常牺牲体验换取商业上的成功。

动效简洁程度产品易用性成正相关

真正优秀的动效是不易被知的,因其然而简。可以在一些重量产品上验证这一点,、QQ、支付等等。最短的间,最简的过渡,快速响应,直达用户的目的地。近期 QQ 体验计队发表的一篇计总结中对于动效的把握认为可以作为一个典型案例,在后文会有展示。

动效应该有细节从而使过渡然

追求简短简洁的动效是为了追求响应速度,提高用户使用效率及避免干扰,但这并不味着动效应当简陋。恰当的使用缓动曲线,关注不同景下的动效过渡间、空间变化、透度和大比例等细节素。

从设计和开发实现的角,效应当是复杂的,因为要综合各种变,考虑各种细节。从户使和感知的角,效应该是简单的,户会发觉的效才是过渡自然的效。

效的取应当遵循一致性原则

同一个产中相同性质的操作应当呈现一致的视觉体验,如跳转一层级为从右往左淡入页面,返上一级从左往右淡入界面。遵循一致性原则使 UI 作中的视觉呈现更统一,而那些太过哨的效作往往并遵循这一原则。具有一致性的效设计是商产(上线产)的基础要求。由于同平台的差异,及一些产追求个性的需要,目前各平台各产的转场效并没有实现真正的一致性,但相信随着时间的推进,就像移端的交互手势一样,最终会成真正的统一。保留那些效易的,舍弃那些复杂低效率的。

4. 设计师产出的动效设计包括应用型和展示型

根据当设计师的效产,我将效设计分为应和展示。

展示效

我们平时在设计分享浏览的酷炫或精致,乃至复杂的效都属于展示效,或者是将应效延长了几倍展示时间,或者刻意放慢效速展示更多设计细节。该类效设计的演示目标人群是设计师。

其设计目从好来说是演示设计细节,传授业或者展示个设计能力以获取些工作或会,经个设计品。从坏度讲是炫技,眼球。也正此,是有调侃敢不敢拿真正上线作品出来看看。然这讽刺也过分偏激,要有仰望空,是要谨记设计目出发,如是处于交流目来设计些展示类动效,传下设计技巧也是蛮不。唯担心是新误引导,使失去体验设计本真,度沉溺于花哨表。

应用型动效

应用动效即应用在真实商业品动效设计,其演示目标群是开发员和用户。首先动效设计作为品设计部分,服务目标肯定是用户,以辅助用户理解品界,理解交互流程为目进动效设计,才是真正为用户着想。另考虑到动效原度,动效设计需要专提供个开发员参考版本,涉及到预期效演示、数值曲线演示等。

应用型动效是我们工中的产出,和职能挂钩,更应该遵循动效设计的简洁易用的核心原则,进行相关设计时,应当查阅动效规范,参考成熟的上产品。

很多人抱怨一些产品设风格陈旧,不时不随潮流,那都了满足体用户的审偏好及体验偏好,如果一直入设师的审偏好及对流行趋势的推崇,那产品将很难取得功。动效设也一样,摒弃人偏好,考虑真实用户。

应用型动效应该是不易被知的,当浏览一些 UI 动效,能清晰地辨出其过渡的细节,变化的段,那它是无法被应用于真实的线上产品中的。

  • 动效过渡时间求(查看谷歌文档)
  • 较长的动画过渡产生加载缓慢假象
  • 被感知的效说明对户视觉构成了干扰
5. 真实产品中UI动效是什么样的?遵循哪些规则?

以 qq 近的一次改版例子,避免复杂,避免亢,对应下文的简单映射(如右入左出)。

使用横向切换表明层级间的变化

为什么越来越流行的酷炫动效,你不一定要学?

纵滑动与弹出,开启个分支任务

为什么越来越流行的酷炫动效,你不一定要学?

全屏缩放调内容的来源

为什么越来越流行的酷炫动效,你不一定要学?

所以理的动效不易被感知的,这证明的产品流畅度达标,能迅速出反应,用户能迅速抵达目的。

打造优秀动效必不可少的细节

1. 时间与速度的设定

动效转换速度设定应该恰合理

动效应该能帮助用户跟踪 UI 更改,即使用户易于理解从哪里来到哪里去或者执了什么操作。过快会导致用户法理解其操作导致结,过慢则显冗余及加载缓慢等问题。此转化速度应该设定在能够辅助用户理解其执操作最快速度。这能保证动效生高效引导作用,时不会显多余冗长。右侧为正常速度,左侧为过快与过慢情况。

为什么越来越流行的酷炫动效,你不一定要学?

效的持续时间根据效复杂而变

简单的画需要更短的时间就成,因为变较,可快速成。而复杂的画强制使较短的时间,则会产生卡顿和模糊的情况。一般涉及到简单控件元素的效都可在 100ms 到 200ms 成,特殊情况可到 500ms。

般个完过渡动效可以在 300ms 内完成,如你使用 Principle 来制作 UI 动效你会发现它默认时设定是 0.3s,即300ms。而在些过于花哨或为展示细节而设计动效你会发现转场时要远远长于 300ms,这实上并不合理。

为什么越来越流行的酷炫动效,你不一定要学?

退操作的过渡画可在更短的时间来成

闭元素即传元素时间应当更,原因是它们户的一个任务要次要的多,因此并需要转移户过多注意。

此在我们为自家品设计动效转场时,针关闭和返回性质转场,可以使用更短过渡时,如 200ms、250ms 等等。

为什么越来越流行的酷炫动效,你不一定要学?

大面积元素的变应当更多的时间来成

小面积元素的变的时间应该小于较大面积元素的变。这一点与茨定律保持一致,大面积的元素要更吸引户注意,因此需要更多的时间来成过渡。

为什么越来越流行的酷炫动效,你不一定要学?

理利用easing曲线

说曲线是动效的灵魂都不为过,选择恰当的曲线可以使动效过渡更然,有节奏从而产生美。曲线主要为缓入缓出和缓动三类,较常用的是缓动曲线,即中间快头慢,更符现实中的物理则。

为什么越来越流行的酷炫动效,你不一定要学?

2. 为过渡动效「编舞」

首先我们应该理解,动效概括下就移、透明度、比例的变化,万变不离其宗。我们主研究的动效过渡动效,它涵盖了产品设中主的动效应用场景,即反应界面层级元素关系。我们希望过渡动效能实这样的效果:使用户高效完界面跳转,同时轻松理解跳转关系,间卡顿,体验流畅。

而想要造流畅的过渡动效,要为需要变化的所有素进行「编舞」,使其符逻辑且不会出现视觉混乱。如下图,是 Material Design 动效的编舞规则,它将动效过渡期间的不同素为三大类:传出素、传入素、持续性素。

传入元素指即将进入的结果页面的元素,传元素则是要消失为后面的元素腾位置的元素,持续性元素则是始终存在的容器类元素,如 bg(background)。

体过渡序遵循此原则:首先传出元素消失,然后传入元素出现,在这期持续性元素始终保持变化,持续性元素变化时长是此过渡动效时长。

下图中的橙框是传和传出元素,紫框是持续元素。

为什么越来越流行的酷炫动效,你不一定要学?

另外一个比细节的设计点是值的连接点用。持续元素曲的值应当在整个动效的 30% 节点处,即下图中的紫曲的值,以此时间点(X轴)为分界,衔接传和传出元素,完成整个渡。

为什么越来越流行的酷炫动效,你不一定要学?

果不明白也没关系,我们学怎么使用就以。我们需要确定整个渡动效的总时长,乘以 30%,以此为节点,衔接传元素和传出元素。

例如一过渡动效总时 300ms,300*30% 90ms,我们需 0~90ms 时让传出元素消失, 90~300ms 时让传入动效出。

上面这个案例是针对较复杂的动效,而对于一些简动效的转则无需过复杂的编舞,各素变化可以同步进行,如下图:

为什么越来越流行的酷炫动效,你不一定要学?

3. 使用组或容器的形式完成过渡

复杂的布局中,存元素过多的况,我们不可能让每元素都行自己的动画,那样会使动效冗复杂乃至混乱,应当避免过多元素争抢用户注意力的况。因此我们需将元素组合单元组,以单元组的变化呈主动效的视觉效果,针对小的单采用淡入淡出的处理手法,从避免过多元素频繁变化争抢注意力的况。如下图中,元素以组的形式行变化,使动效过渡自然的同时,减少了单元素的动画频率,其中所小元素,如图片都采用了淡入淡出的处理手法。

为什么越来越流行的酷炫动效,你不一定要学?

再看一下反面案例,了追求所元素的动画效果导致整体臃肿复杂,得其反。

为什么越来越流行的酷炫动效,你不一定要学?

除了组的形式解决这一问题,我们还可以使用器承载较复杂的一系列元素。我们通过主动义一明确的界,例如一张卡片,使内部元素保持纵横比例,缩以应界面的小,从构缩器的效果,与 iphone 打 APP 的动效体验一致。

为什么越来越流行的酷炫动效,你不一定要学?

参考内容:

  • Material Design 设计规范
  • 《大厂案例复盘!腾讯顶尖设计团队如何做 QQ 8.0 新版设计?》

注「EasonZhang」公众号:

为什么越来越流行的酷炫动效,你不一定要学?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归...
动效落地
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法。 优秀的人机交互和舒适合理的动画,一直...
SVG
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用...
Lottie
对如今的 UX 设计师来说,会点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传 ...
AE动效
编者按:Google 设计团队为了更好地推进 UI 和动效设计,自己开发过不少新的工具,打通 Sketch2AE 是其中之一,如今的 AEUX ...
AE动效
UI和设计这一行似乎越来越难混了:进要懂手绘,退要明交互,以往一个界面的事情,如今都不够了。上一屏到下一屏之间的变化,...
AE
Lottie 是 Airbnb 推出的一种 SVG 动画解决方案,它可以跨平台播放,并解决了动画落地难的问题。当设计师做完动画只需使用 bo...
AE