写篇文章的因是前段时间在 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」公众号：
浙公网安备33011002017549号