这篇文章深度需求30分钟… 相信你坚持下来会带走一些收成…（巨多图片，主张WIFI环境下观看！）前语
关于“用户体会动效“的十二项准则，本文分为四部分来引进阐明：
1. “用户体会动效” 不等于 “界面动画”；
2. 实时与非实时交互的差异；
3. 动效的四种可用性进步方法；
4. “用户体会动效”的十二项准则。
1. “用户体会动效”不等于“界面动画”
在用户界面规划中，大部分动态的效果被规划师了解为“界面动画”，实际却并非如此。在介绍“用户体会动效”的十二项准则之前，咱们先明晰一下二者之间的不同。
大部分规划师以为，“界面动画”是为了让用户体会变得更愉快，但它并没有太多实践的价值。假定将用户体会比作一个红头发的女子，“界面动画”通常被作为口红，仅仅做了微乎其微装修。
这篇文章将阐明，“界面动画”需求以“用户体会动效”的十二项准则为根底，才干具有姮好的可用性。比方，“界面动画”是修建的施工，那“用户体会动效”的准则便是施工的图纸，它将指引正确的方向。动画是实践，准则则是辅导实践的理论，十二项准则讲给规划师在动效规划上供给有力的支点。
2. 实时与非实时交互的差异实时交互 Eealtime（左图）与 非实时交互 Non-realtime（右图）
首要，在这儿要将“情况”与“行为”做一个差异。在用户体会的进程中，许多内容的情况都是停止的，当一些内容或许处于被掩盖或遮挡的情况未显现出来时，用户需求进行时刻短的行为动作与界面进行互动。
用户交互的时刻上可分为实时与非实时两种情况。实时意味着用户直接与用户界面的目标进行交互；非实时是指用户行为发生后界面的反响，它是具有必定的过渡性。这是一个十分重要的差异。因而实时交互被以为是“直接操作”，用户与界面的动作是同步的；非实时交互只要在用户行为发生后用户界面才会有情况的改动，并且直到情况改动完毕用户才可持续操作。
差异二者的不同，将协助咱们更好的体会用户体会动效的十二项准则。
3. 动效的四种可用性进步方法
以下四种方法，是进步用户体会动效可用性的中心：
期望
期望分为两个维度：用户对界面的期望，以及界面是否满意用户的预期。作为规划师，咱们要减小用户的期望与实践体会之间的间隔。
接连性
接连性是指用户流程的顺利与用户体会的流通要共同。接连性包含场景/页面内、场景/页面之间的接连与流通。
叙说性
叙说性是用户体会中的线性工作中，时刻/空间架构的改动。这能够了解为把整个用户体会联接在一同的一系列关键时刻与工作。
相关性
相关性指界面目标之间的时刻/空间的层次表现，协助用户了解和决议计划。
4. “用户体会动效”的十二项准则
· 时刻相关的准则 (Timing):
缓动 (Easing) 、偏移 (Offset) 、推迟 (Delay)；
· 相关性相关的准则 (Objeect Retationship):
父子联系 (Parenting);
· 接连性准则 (Continuity):
改换 (Transformation) 、数值/文本改动 (Value Change) 、遮罩 (Masking) 、掩盖 (Overlay) 、割裂 (Cloning);
· 时刻层级相关准则 (Temporal Hierarchy):
视差 (Parallax);
· 空间接连相关准则 (Spatial Continuity):
景深 (Obscuration)、翻转 (Dimensionality)、移动变焦(Dolly & Zoom)。
emm…这是一个表格准则1. 缓动 Easing
当工作发生时，目标行为应与用户期望坚持共同。
缓动 Easing
一切具有时刻行为的运动都需求缓动（无论是实时还对错实时的交互）。缓动能够让运动目标更天然，并且更满意用户的所期望的接连性。迪士尼动画准则将其称为“缓入缓出”
线性运动 Linear motion（左图） 与 缓动运动 Elastic motion（右图）
左面的比方是线性运动 ，看起来十分糟糕。上边三个动效是在同一时刻内具有相同的帧数和动作，位移的差异在于增加的缓动效果。
作为规划师，除了重视美学外，还需求对自己进行严厉的要求与反思，什么样的效果更具有可用性？更简略被用户所承受？
缓动是固有存在的，假定把缓动的程度幻想成一个“阶梯”，那么其间超出用户预期的缓动效果体会较差，是不行用的。将用户体会动效与用户行为无缝联接，这才是一件合理可用的工作，因为它不会影响用户的留意力。线性运动显然是过于显着的，感觉像是短少或不完好的效果，简略形成用户留意力的涣散。
动效与用户行为彻底无缝联接才是最好的效果么？这边举一个相对立的比方，相比较右边的动效，它与用户行为也不是无缝的，但它是经过规划过的。用户能够留意到运动目标的着陆进程（那种弹跳的缓动），这个超出用户的预期，但比线性动效要好多了。
缓动能够对可用性形成糟糕的影响吗？答案是必定的。咱们要防止出现以下的情况：时刻太慢或太快，会打破用户的预期，形成留意力的涣散；相同假如缓动效果与全体的体会不共同，也会发生负面的影响。
这儿所展现的仅仅冰山一角，规划师能够在项目中创立许多的“缓动”效果，不同场景的缓动都会带来不同的效果，给用户带来的体会也是不同的。并且在任何时分，都不要忘掉缓动的效果！
准则2. 偏移与推迟 Offset & Delay
介绍新元素或场景进入时的层级与联系。
偏移与推迟 Offset & Delay
这个准则有用性在于，它能够很天然的告知用户界面中元素的性质。上图能够看出，顶部的两个形状是连在一同的，与最下班的形状是分隔的。或许前两个形状或许是一个非交互式的图画或文本，而底部则是一个按钮。
在用户触摸这些目标之前，规划师现已用偏移与推迟的规划准则，将信息分类，便于用户有用的辨认。
图片来历: InVision
在上图比方中，悬浮按钮转化成三个按钮组成的导航元素。因为这些按钮在时刻上的“推迟”，所以能够很明晰的感触到他们是“别离”的情况，这个效果的可用性十分高。换一种说法，规划师运用时刻差向用户阐明三个元素是别离的联系。这是一种与视觉规划不同的方法来告知用户界面中元素的性质。
为了更好的表明这个准则的效果，下面将举一个反例来做一个比照：
图片来历：Jordi Verdu
上图中，假如是静态的规划稿，咱们能够看出虚化的布景上悬浮着一些图标，这些图标互相是别离的情况，并担任着不同的功用。可是这个过错的动效却起了相反的效果。
在运动的瞬间，每行的图标与文字都被打组，看起来一行的元素像是连在一同的全体。这个动效展现的效果与用户所看到的预期相违反，咱们能够说这样的效果是不行取的。
准则3. 父子联系 Parenting
多个目标交互运动时的空间联系。
父子联系 Parenting
父子联系对错常重要的准则，能够将界面中的目标相关在一同。上图中，顶部子级元素与底部的父级元素在“份额”与“方位”的特点上相关在一同，这种相关与承继联系，能够增强动效的可用性。
界面中元素的特点包含：份额、不通明度、方位、旋转、形状、色彩等，这些特点中的任何特点都能够彼此相关，为用户供给更好的交互体会。
图片来历: Andrew J Lee，Frank Rapacciuolo
如上左图中，气泡表情中的表情元素为子级，它的纵轴会跟从父级元素圆形指示器的横轴发生相关。当圆形指示器延横轴移动式，其”子元素”表情会沿着水平与笔直方向同步改动。
父子联系的成果是在同一时刻发生不同层级的改动。表情元素在每一个数字中心是不完好的，只要当用户的动作刚好停在数字上时，才会显现完好的表情，用这种奇妙的“欺骗性”效果，到达用户体会的无缝联接。
父子联系在“实时互动”的情况下最有用。当用户对界面进行直接操作时，规划师能够经过这种动效向用户传达元素之间的联系。
父子联系分为：“直接承继”（拜见上面的两个比方）、“推迟承继”（下图左）和 “逆向承继”（下图右）三种方法。
推迟承继（图左) 和 逆向承继（图右） 图片来历: AgenceMe准则4. 改换 Transformation
用不同的形状来表明目标功用的改动。
改换 Transformation
形状改动对错常显着的效果，因为它很简略被辨认。用户能够简略的留意到“承认提交”的按钮形状改换成圆形的进度条，随后在终究情况改换成承认的符号。这种形状改换十分简略招引留意力，并且能够描绘一个完好的工作。
图片来历: Colin Gacven
这种改换是将用户体会的不同情况（“按钮-进度条-成功”三种情况）无缝的联接，终究发生用户所等待的成果。用户经过这些改换了解到三种功用情况，并终究到达意图。
改换准则能够将用户体会中不一起刻的信息别离成节点，并且在改换的形状中无缝联接，完结一个工作信息的传递。这样连贯性的效果更简略被用户的认知所承受。
准则5. 数值/文本改动 Value Change
可用一种动态的接连的方法来表达数值的改动。
数值改动 Value Change
数字/文本的改动对错常遍及的，以至于咱们常常疏忽这种改动，没有为这种改动的可用性进行深化的了解。
那么用户在数字/文本发生改动时会有怎样的感触？假如说本文罗列的“用户体会动效的12项准则”是在寻觅动效可用性的时机点，那么数字/文本的改动准则将有三个点能够进步动效的可用性: 向用户传递信息背面的含义、代表一种改动的概念以及内容自身改动的含义。
来看下面“仪表盘”的比方:
静态值 Static value（图左）与 动态值 Dynamic value（图右）
假如在画面加载动效中，数字/文本没有发生改动时，用户会以为整个元素看起来是停止的情况，它们看起来与“限速55km/h”的标识牌的效果是相同的。（见上图左）
许多数字/文本要反响实际发生的工作，比方时刻、收入、游戏成果、商业目标、健身数据等。假如咱们经过动态方法来表明这些内容，能够更直接感触到这些改动的信息（见上图右）。假如用静态的方法来处理改动的数据，则会失掉深层次体会的时机。
动态展现改动的数值/文本，能够影响用户的“神经反响”，让用户更直接的感触到内容的改动。可是当数值/文本是静态的时分，数值与改动的相关就会削减，用户也很难感触到内容背面的变量。
图片来历：Barthelemy Chalvet, Gal Shir,（不知道）
数值/文本改动准则，在实时与非实时的工作中都适用。在实时工作中，用户能够经过对界面的交互改动数值/文本的内容（如上图二）；在非实工作中，比方加载或转化，这些数值在没有用户参加的情况下发生改动（如上图三）。
准则6. 遮罩 Masking
当一个或一组元素元素在显现与遮挡之间转化时，改动进程要坚持接连性。
遮罩 Masking
遮罩准则能够了解为，形状改动与功用改动之间的联系。
尽管规划师对静态的“遮罩”有所了解，但咱们应该意识到，遮罩动效是跟着时刻而发生变话的一种动态行为，而不是一种精美的情况。一会儿改动遮罩区域，将内容顺利的显现或躲藏起来的效果，也具有叙事的效果。
图片来历: Anish Chandran
上图的比方中，头图在内容不变的情况下改动了显现区域的形状与方位，变成一个专辑的唱片。这个比方阐明，遮罩准则能够在不改动元素内容的情况下改动它的功用，这是一个十分奇妙地技巧。这个比方归于非实时交互，用户对界面进行操作后遮罩才发生改动。
留意，界面元素是有鸿沟的，内容坚持不变的情况下，改动鸿沟对元素有很大的影响（比方上图的鸿沟改动，将元素变成了唱片）
准则7. 掩盖 Overlay
用堆叠元素的相对方位，来描绘它们扁平的空间联系。
掩盖 Overlay
掩盖准则经过堆叠分层的方法来处理扁平空间缺乏的问题，这对错常有用的准则。规划师在非三维空间内将元素堆叠，经过移动某层的元素使其它层元素的内容显现出来。
图片来历：Bady，JaviPérez
上图左的事例中，远景元素（人名信息）向右滑动，可显现出保藏等其他信息；上图右的事例中，整个界面向下滑动，可显现出其下方图层的其他内容（下方内容一起运用“偏移”与“推迟”准则来表述元素之间的独立联系）
许多时分，“层”的概念关于一个规划师而言对错常深化的，规划进程中常常触摸“图层”的概念。可是规划师要留意“制作的界面”怎么更好的“被运用”。作为一向参加项目规划的规划师，咱们十分了解界面中一切的元素（包含躲藏的部分）。可是，关于用户而言，界面不行见的部分是被躲藏的，只要在拟定的行为动作下才会被显现。
掩盖准则是规划师经过纵深联系定位图层层级，拟定行为下可像用户展现更多信息，展现更多的内容空间。
准则8. 割裂 Cloning
当新元素从主体割裂脱离时，接连性可论述二者之间的联系。
割裂 Cloning
在当时的元素或场景中创立新的元素时，对形状的描绘十分重要。本文着重元将素的发生与割裂的情况描绘出来的重要性，用简略的不通明度的改动是缺乏以描绘发生与割裂的情况。遮罩、割裂和多维度准则十分有用，并且具有激烈的叙说功用，
图片来历：JakubAntalík，JakubAntalík，不知道
在以上三个实例中，当用户留意力会集在主元素时，新元素在主元素的根底上被发明，这种两层动作（先用主体引导留意力，然后从主元素上创立割裂新目标来引导视觉）具有明晰的描绘工作的强壮效果：“Y”是经过“X”创立出来的子目标。
准则9. 景深 Obscuration
让用户看到非主视觉元素的目标或场景，打造空间感。
景深 Obscuration
与遮罩准则相似，景深准则既能够是静态的，也能够是具有时效性的。
景深的这种“静态”比较简略了解，景深的“时效性”或许会给规划师带来疑问。规划师常常会顺次按次序的规划界面或使命。现在将“景深”视为遮盖的一种行为动作，而不是停止的情况。行为发生时非主视觉元素变含糊，到达杰出主视觉并发生空间景深的效果。
图片来历：Virgil Pana, Apple
从上图两个比方能够看出，景深准则看起来像是辅佐元素被含糊虚化或被通明图层掩盖，这也是一种规划多个元素的实时交互。
景深准则常常使用含糊与叠加通明度的效果，让用户感触到主元素与非主元素的空间上的层次联系（注：这儿有别于掩盖的平面层次），主元素的背面看起来像存在另一个国际相同。
原理10. 视差 Parallax
经过用户的翻滚操作，在平面中发明出空间的层次感。
视差 Parallax
“视差”在用户体会动效中的原理是，不同的元素以不同的速度进行运动。
视差在确保界面的完好性的情况下，能够让用户专心于首要操作的内容。在视差准则下，用户对布景元素的感知会削弱。规划师可用观察准则将即时性的内容从环境或主内容中别离出来。
图片来历: Austin Neill, Michael Sevilla
如上图所示，视差准则是让用户在操作时，明晰各元素之间的联系。用户会感觉到，快速移动的远景元素间隔自己很近，而要比移动较慢的布景元素要远一些。
规划师使用运动弄速度的快慢，便能让用户感知到优先级更高的元素。因而，将布景或没有互动的元素怠慢，让它们“远离用户”是有道理的。
这样的视觉效果，不只会让用户对界面的感知超出平面的层次感，也有利于将用户把更多的重视下意识的引到要出现的主元素上，动效对用户天然反响的影响对错常有用且有用的。
准则11. 翻转 Dimensionality
用翻转的空间感，来表明元素的进场与离场。
多维度 Dimensionality
用户体会的关键是接连性与空间感。翻转准则可有用的改进扁平型和非逻辑性的用户体会。
人类很拿手使用空间感来体会实际和虚拟的国际。因而具有空间感的进场或离场是契合并能增强用户体会进程中用户的心思预期。
别的，翻转原理改进扁平化视觉无法分层的情况，它能够让同一平面的元素发生前后叠加的空间感。
翻转原理常以三种方法出现：折纸翻转、悬浮翻转、全体翻转。其间折纸翻转可被了解为三维中的折叠和旋转。
折纸翻转，可被了解为将界面元素在三维空间折叠起来。
折纸翻转事例 图片来历：Eddie Lobanovskiy, Virgil Pana
上图所示，在多个元素组合成的折纸结构中，被躲藏的部分是看不见的，但它们在“空间上”依然存在。这用户体会的扁平感包装成接连的空间体会，用户在对界面或某元素进行交互操作时即可感触到。
悬浮翻转，为界面目标的进场与态度，供给更直观的描。
悬浮翻转事例 图片来历：Virgil Pana
上图所示，旋转是经过3D卡片的效果来完成。这样的结构增强了视觉规划与叙说工作上的表现力，可经过翻转卡片来检查更多内容。
全体翻转可让目标全体更具有真是空间的形状。
全体翻转效果 图片来历: Issara Willenskomer，Creativedash
上图所示，多个2D平面图层被组合在3D的空间中组合成具有真实感的三维形状，翻转可在实时或非实时的交互中显现。全体翻转的效果是招引用户发敏锐的现新出现的元素的功用或内容。
准则12. 移动变焦 Dolly&Zoom
界面元素或空间纵深移动时，流通的动效可表现空间感。
移动变焦 Dolly&Zoom
移动变焦是一个电影概念，经过移动相机或物体的间隔来操控形象的远近。
可是在某些情况下（见下图），无法判别是目标在同一平面缩放、仍是3D空间中摄像机在超固定目标的方向移动、或者是3D空间中目标在朝着固定的摄像机方向移动。
你猜猜图层中谁在动？
因为这儿涉及到元素改动与场景的转化，因而下面会将“相机滑动”与“变焦”分隔来讲，并阐明它们是怎么进步用户体会的可用性。
左面两张图是相机缩放，最右侧图画是变焦
相机滑动（Dolly）是一个电影术语，含义是相机朝向或远离主体的移动而形成的缩放效果。
图片来历：iphone
在用户体会中，空间的运动能够引发用户的视角改动，或当目标改动时坚持视角的停止。相机滑动结合翻转准则，能够打造更多，更好，更深化的空间体会。
变焦是指视点与元素不做空间移动，而是对元素自身进行的缩放（或者说咱们的视角减小，导致元素扩大）。这使观看者感触到视角内的内容是在更多元素或更大的场景之内。
图片来历：iphone
这种流通的过度会进步动效的可用性。在打造界面的空间感，流通的移动变焦效果将起到严重的效果。
ps：还有几句作者的叨逼叨真实不想翻译了… 这么长的篇幅，假如能看到这儿，那么感谢你在这篇文章中所消耗的半小时…
个人感觉这篇文章的干货蛮多，所以想测验翻译一下整理成笔记，没想到这篇文章这么难翻译，成果一弄便是四天… 自己英语比较渣，许多翻译过错和缺乏的当地还期望指出批判~ 有些内容没有依照原文翻译，是读懂了解后用自己的描绘方法写了下来。整篇写下来对这十二个动效准则也有了很深的形象，这算是最大的收成吧。今后也会极力更新，翻译或转载以为不错的文章。
在这儿，要感谢简书作者 Z_Yuhan，翻译到一半的时分发现她曾在简书直译过这篇文章，并且在后来的翻译进程中给了许多的协助与支撑，再次向 Z_Yuhan 表明感谢~ :)
最终，也不知道这片文章有多少人看，拉一波票吧，喜爱的就点个赞或重视一下咯，今后也会有更大的动力坚持更新，哈哈哈~ （文章或许有许多错字，凑合着看，有时刻再改~）
原文作者：Issara Willenskomer
文章来自medium 检查原文：点这儿主动跳转
始发于简书：Jacob_TQ
上一年今天运营文章2023:618大促女装店肆还在为此忧愁？看完瞬间有思路了(0)2023:狐狸：你挑选的“处理方案”，决议了你的产品能卖多贵！(0)2023:win10体系中便笺便签的色彩怎么更改(0)2023:播映屡破3000w，破解近期在短视频渠道快速出圈的爆款逻辑！(0)2023:小红书数据剖析东西：垂类博主怎么创造爆款笔记(0)
微信扫一扫 
支付宝扫一扫 
