很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
大家好，我是Clippp。今天为大家带来的文章是「动效」设计。动效在产品设计中扮演着重要角色，它的好坏与否直接影响了用户的使用体验和对产品的印象。
动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰，它能够提升产品的参与度并扩展交流的范围。
本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～
动效与用户体验的结合相对较新，其根源是迪士尼动画设计的十二个条基本原理。
迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演，但不能充分满足现代UI界面的交互需求。
为了弥合这个差距，动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。
在围绕界面元素建立用户体验时，重新定位动效原理的关键在于：
将动效设计与UI动画区分开;
阐明动效如何帮助可用性;
解开核心动效的内部工作机制。
在讨论动效设计的原理之前，重要的是要强调动效不仅仅是装饰，而是一种用来帮助用户体验的行为。
动效设计涉及两种基本的交互类型：实时和非实时。
当用户在屏幕上点击UI元素时，实时交互提供即时反馈，会对用户的操作做出即时响应。
非实时交互发生在用户操作后，这意味着用户需要经过短暂的转场才能看到结果，然后再继续。
另外动效设计通过四种不同的方式来提升产品的可用性：
期望:当用户与界面交互时，他们期望看到哪些行为？动效是否符合预期或引起混乱？
连续性：交互在整个体验中是否发生一致的运动行为？
叙述：触发的动作是否与满足用户意图的事件的逻辑进程相关联？
关系：UI界面的空间、美学和层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？
这里提供12种动效设计原理的解析，每一种对应不同的案例，从更直观的角度来解读抽象的原理。
缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。
下图中的卡片和对应的椅子移动速度很快，但由于缓动效果它们可以平稳地受到控制。
当多个UI元素同时快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素自身的功能性。
偏移和延迟会在移动的UI元素之间创建层级结构，并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的，而是交错排列产生一种微妙的“一个接一个”的效果。
当用户在屏幕之间穿梭时，偏移和延迟表明存在多个交互选项。
父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时，子元素的链接属性也会更改，同时所有元素的属性都可以相互链接。
在下图中，将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时，子元素的发光效果的范围和光照强度的数值会发生变化。
父子关系在元素间创建关系并建立层级结构，允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。
当一种UI元素变成另一种形式时就会发生转换。例如，转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条，进度条转换为完成图标。
从UX角度看，转换效果告知用户元素的状态发生了变化并将信息传递给用户，提高了用户的认知度。
数值的变化(数字、文本或图形)在数字界面中非常丰富，从银行APP到日历到电商网站的各种产品中都会出现。
在某种程度上，数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入，向用户显示他们有能力影响数据，提升了参与活动的意愿。
遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例，在改变元素效果的同时允许元素本身保持可识别性。因此，照片和插图等视觉形式是理想的选择。
从可用性的角度来看，设计师可以通过遮罩向用户展示产品正在进行一系列的交互。
二维空间中没有深度，元素只能沿X或Y轴移动，叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度，覆盖可以根据用户的需要隐藏和显示元素。
在使用覆盖时，信息层级结构是重要的考虑因素。例如，用户在笔记应用中首先应该看到的是笔记列表，然后使用覆盖来显示每个笔记的辅助选项，如删除或归档。
克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。
通过克隆将元素与界面相链接，如果元素只是突然出现或消失没有关联性，那么用户将缺乏信心去交互。
想象一扇磨砂玻璃门，虽然看不清门后的东西但是我们能察觉到门后事物的存在。
模糊的工作原理是一样的。它为用户提供提示，让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。
当两个(或更多）元素同时以不同的速度移动时会构成视差效果。视差的主要目的是划分层级结构：
可交互的元素移动速度更快，出现在前景中;
非交互式元素移动速度较慢，退到背景中。
视差引导用户点击可交互的元素，同时允许非交互的元素保留在屏幕上并保持设计的统一性。
维度使界面元素具备具多个方向的交互，这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。
作为一种叙述性工具，维度意味着元素的不同侧面是相互联系的，并且可以实现无缝的屏幕过渡。
平移与缩放通过视角的变化能产生更多空间上的体验，逐级递进显示更高级别的细节。
平移：点击元素后发生距离远近的平移，用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)
缩放：用户的视角与图像的距离保持不变，但图像在屏幕中的比例会增加。（这个人站在原地不动，只利用相机的变焦功能使花显得更大）
互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理，即使最基本的界面元素也能成为交流的复杂媒介。
动效设计与产品用户体验之间的关系正在迅速成熟，而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟～
原文：toptal.com/designers/ux/motion-design-principles
作者：Micah Bowers
译者：Clippp
-END-
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)