好的产品通常会做好两件事情：功能和细节。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来。功能和细节两者都很重要，但是功能居首，细节次之。不过，让用户喜欢或者讨厌一个APP或者网站，往往缘起于细节。随着网站交互设计和动效的大规模普及，我们现在所看到的许多细节设计，都可以归类于微交互。微交互所要求的关注细节是获得有效、强大用户体验的关键原则。优秀的动效是完善用户体验中不可或缺的一环，拥有好用且令人难忘的细节能让产品脱颖而出。

——Dan Saffer

1.微交互在界面中的作用

2.微交互的必要性

3.按用途划分动效设计类型

4.如何输出动效

5.如何书写动效设计文档

6.微交互的测试过程

 

「微交互在界面中的作用」

传递状态信息和层级信息

1.通过一定的动效暗示，可以让用户更好的理解整个app的信息结构。

2.赋予app生命感，让用户知道app正在积极的为用户执行操作。

 

提示隐藏信息功能或让用户快速识别提示信息

1.若我们需要隐藏一些需要适时出现的，或需要用户探索的界面或按钮，可以通过适当的动效设计进行合理的引导，提示，衔接。

2.微动画可以使用户能够快速识别界面视觉元素，并高效的与之进行交互，同时也能使实际显示的形式更加优雅。

 

传递情感化信息交互及时得到反馈

1.使等待不枯燥

2.使变化不生硬

3.使反馈不单调

4.增加用户参与度，让用户更加愉悦的体验产品

注册和登录流程一直是产品中最为枯燥繁琐但又必不可少的环节，微动画用有趣和交互性元素改进了填充表单的枯燥过程，可以有效的环节用户在体验上的负面情绪。

当输入密码错误的时候，密码输入栏会显示出一个摇头的效果。完全可以想象，假设用一个错误提示的弹窗，不仅会中断用户的操作流程，引起人的反感，而且很容易让人受挫。通过动效，设计者用一种更友好简单的方式达到了提示的目的。

 

 

「微交互的必要性」

提升用户体验

1.让用户觉察视觉元素的连续变化，对新旧状态的更替有更清晰的感知，为用户提供良好的动态沉浸式体验，使用户更加清晰愉悦的使用产品。

2.解决扁平化的弊端，扁平化虽然可以让用户将注意力放在内容本身，但是在多信息的情况下很难区分信息层级关系，合适的动效可以让用户更好的理解信息层级关系，赋予设计情感，增加用户参与度。

 

增添产品气质

1.合理的动效能更立体的传递信息，提高产品的“表达能力”。

2.增添产品的亲和力和趣味性，利于品牌的建立，未添加动效的产品，会有种死气沉沉的感觉，所有内容平铺直叙，即使界面设计的再美观，也会缺乏一种灵动细腻的气质。

3.但是动效并不是越多越好，不同产品对不同动效需求也不尽相同，如：新闻类，深度阅读类产品过度的动效反而会干扰阅读。所以要针对产品本身的属性来恰当的设计动效。

 

 

「动效设计类型(按用途划分)」

过渡型

人脑灰质会对动态事物（如：移动、形变、色变等）保持敏感。在界面中加入一些平滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系。好的过渡动效避免了界面快速切换时给用户带来的迷失感，作为最为常见的交互，它会在潜意识中引导用户，而用户通常不需要去思考就会下意识执行。

 

反馈型

无论是点击、长按、拖拽、滑动等交互行为，（如：下拉刷新，loading，tabbar上的微交互）都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

表单设计中最容易被忽视的，其实是对于出错信息的处理。表单，尤其是长表单，填写内容出错其实是很正常的事情，等到提交信息的时候再报错，用户会非常沮丧。而微交互结合实时验证，能够让用户在输入的过程中就发现错误并进行修改，一次通过，不用等待提交的时候再回头处理。

 

功能型

特定工具类，直播类产品所需的元素动效，安全、清理类产品的扫描动效，emoji表情动效等。

 

情感型(趣味型)

增加情感交流，强化品牌调性。

如：刷新、loading动效，加载过程往往比较枯燥，有趣的动效可以吸引用户注意力，从而减缓用户负面情绪。

相关实验数据表明，较差的loading动效让用户感受到的等待时长比实际时长还要长，普通的loading动效让用户感受到的等待时长和实际时长相差不多，优秀有趣的loading动效让用户感受到的等待时长比实际时长要短。

以此说明，出色有趣的动效会更加吸引用户注意力，从心理上忘记时间的流逝，大大提升了用户体验。

 

 

「如何输出动效」

1.通常我们做的偏复杂的 app 动效（例如：情感型、功能型），在实际落地过程中会遇到很多问题，比如：Gif 图失真、占内存过大、开发成本过高。

2.Airbnb 开源的动画渲染库 Lottie 可以有效的解决了这一系列问题。Lottie 可以直接利用 AE 导出的 JSON 动画文件，将其解析为原生代码，在 iOS 和 Android 设备平台上运行。

3.使用方法：设计师使用After Effect制作动画，并通过插件bodymovie导出.json文件给开发人员；开发人员通过Lottie开源库进行渲染。

4.Lottie获取方法：微信公众号后台输入“Lottie插件”，会有下载链接。

以上动效输出方式只针对复杂动效，普通过度转场动效还是使用原始方式，标注说明给开发。

 

 

「如何书写动效设计文档」

1.动效输出后会出现开发和设计师对接困难的问题，是因为没有通过精准的参数去描述动效。要解决这个问题，我们需要创造一套有效的动效标注系统（或书写一份动效设计文档），这个系统必须做到以下两点：让设计师可以轻松地描述动效，让开发可以准确地还原动效。

2.如何向开发具象的陈述动效，需要做到以下几步（如图），先拆解动效，将组合动效拆解成基础动画；在从变化、时长、曲线这三方面，阐述每个属性的变化数据。

 

变化

变化可以划分为四类（如动图所示），这四类变化基本涵盖了界面元素的全部运动方式，只要我们准确地描述元素在动效前后的变化量，就可以准确地完成「变化」这个参数的对接。

那么这个时候我们需要记录的状态（这里只涉及到变化）就应该是这样：

初始状态：

◦ 位移：X轴 0

◦ 旋转 ：0度

◦ 尺寸：1

◦ 透明度：0.2

结束状态：

◦ 位移：X轴 200px

◦ 旋转：+180度

◦ 尺寸：1.5

◦ 透明度：1

 

时长

第二个关键参数就是时长，这个顾名思义也就是动画播放的时间长度。无论变化是多是少，简单还是复杂，我们需要把每一段变化的时间确定，时间短干脆利落，时间长轻缓柔和。标注清楚起始时间和终止时间。

 

曲线

曲线描述的是物体运动时候的速度变化，如果说变化和时长是动效的本体，那么曲线就是动效的灵魂。对于一个运动的物体，同样的变化，同样时间，赋予不同的速度曲线，会让它的动效产生丰富的变化。 所以在动效设计中，曲线也是设计者最为关注的部分。

最基础的速度曲线有线性（就是全程匀速）、缓入、缓出、缓入缓出四种，动效描述中要阐述清楚使用的是何种曲线，如需特殊曲线需要展示出来。

 

 

「微交互的测试过程」

 

发现问题

使用下面描述的流程作为测试微交互的开始：

1.首先，询问用户希望通过这个微交互做什么？在使用这个微交互之前，问问用户是否需要学习什么东西，特别是如果他们以前从未使用过类似的交互时。

2.允许用户在没有任何帮助的情况下使用这个微交互，并实时收集定量数据。

3.观察用户使用微交互的每一步。倾听用户对所做选择的印象和描述。观察微交互规则对参与者是否作用明显，注意差异。

4.与用户沟通，记录用户想让微交互帮助记住哪些数据。

5.最后，请用户表达在这个微交互中还有哪些地方是需要继续优化的。

这个过程能帮助你发现微交互的很多问题。它能验证一般的目标和期望。对两个用户团队重复这个过程至少两次。在既定时间内，利用用户反馈来分析和优化你的微交互。

 

使用研究数据

这些是可以测试的一些定量数据：

◦ 完成率

◦ 微交户互持续时间

◦ 具体每一步的持续时间

◦ 步骤数

◦ 点击/敲击/选择的次数

◦ 人为失误的数量

优化微交互并重新测试一遍，看看是否需要进一步改进。 另外也需要注意样本量，测试用户不多可能会使错误或偏好变得更加明显。

数据可以帮助你做出更好的决策，但不能完全依赖数据，很多情况还是需要具体问题具体分析。

 

 

「总结」

1.微交互可以提高产品的用户体验，帮助用户记住你的品牌。增添产品亲和力和趣味性。微交互存在的目的是让用户感觉顺畅、愉悦，设计师借此创造出吸引人或者令人高兴的瞬间，或者说，让用户在这一刻感受到人性化。

2.动效的作用是更好的呈现界面元素间的逻辑关系，帮助用户梳理信息层级，规避了扁平化的缺陷；有趣的动画可以减缓用户使用过程中的负面情绪，增加用户参与度，让用户更加愉悦的体验产品。

3.动效不是越多越好，越炫酷越好，要针对产品自身定位来设计动效，让用户意识不到动效的存在，才是最合适的，否则会适得其反，干扰用户操作。

（注意：以上内容均有参考，作者只负责梳理和总结，图片均来源于网络，侵删）

 

 

 

作者：33

公众号： Panda Plus