如何做好微交互，增加产品魅力值？

所以喜欢这篇文章，并将它翻译出来，其原是文那些动画打动了我，仔细思考个动画都能让自己生很多联想和灵感，借此分享大家，也是希望大家能有所收获。

当然可又会有人说，这些画怎么实现，开发做了。过我认为，尽管有些微交互目前实现起来会有些困难，是咱们设计师首先要有这些意识，是能够辨识哪些体验是好，哪些是不好，我觉这意识创意性工作很要。

本篇章，我将展示一些有效微交互的例子，同时会解释一，它们是如何产用户体验，另也会教大家怎样做微交互测试。你可以利用这些信息来说服你板或你设计团队（甚至括你自己），微交互是灵活，并是设计丰富交互体验必备要素。

微交互要求的注细节是获得有效、强大户体验的键原则。设计过程中的每个分都很重要，拥有好且令人难忘的细节你的应脱颖而。

在整个用户产品的交互过程中，交互创造出了一些有趣的瞬间。典型的交互比如像拖放，当用户开始拖动，目标对象会突出显示，这帮助用户确知道拖动的素是哪个，并确能放哪去。

一、微交互在界面中的优势

1. 页面之间的切换画

微画在界面状态之间进行了平滑的转换，并改善了应的体验。户可更好地了解之前和当前的状态。同时，微画使得应有了「情绪」并同时增了必要的细节。

△ by Anton Skvortsov for Norde

2. 无限滚与顶画相匹配

Polarsteps 应中的微画是向户显示进的好方法。 户可看到他们的作与滚容之间的系。个性和指针是搜索特定日期照片的最佳方式。

3. 上传或下载状态

使用微动画展示了上传/下载状态。在这个例子，微交互时显示了下载了多少M节。动画进度条为聊下载过程增添了乐趣。

△ by Nick Buturishvil

4. 知

微动画使用户能够快速识，并高效与应用进交互，时也能使实显示形更加优雅。

△ by Mikhail Gribkov for Kultprosvet

5. 下刷新

刷新这经常使用内容操作将成为你界设计亮，其含了有想法、独特微动画。使用动画知用户页正在加载，并在下载完成时消失。

△ by Hoang Nguyen

6. 响应击

响应微动画鼓励用户进操作，这是用户与界进更多交互关键原。

△ by Tigran Manukyan

7. 动效设计使得填充表单变得更加有趣

微动画用有趣和互元素改进填充表单的枯燥程。一个烦人的验变得因增加微动画而更有价值，即使用户需要次输电子邮件，用户也毫不犹豫地填写整个表单。

△ by Clay Walte

8. 文字动效

文动画为你的设计提供独特并展示创新的用户验设计方法。 毫无疑问，巧妙的效果在极简主义界面中尤其受欢迎。

△ by Mary Lou

9. 开关动效

微动画以改善无聊的元素，开关。当应用关闭时，动画就停止，用户立即收到互反馈。

△ by Mo

10. 滑动

微动画最常用的地方之一是内容滑动。微动画将一个熟悉的滑动手势变成一个独特的界面，而用户以在一个连续的流程动画中查看内容。

△ by Nikita Duhovny

11. 突出变化

使用微动画，用户以从界面上获得对其操的正确响应。当单击按钮时，界面的每个元素进行平滑的渡，每个设计块转换成一个新的状态。

△ by Ramotion

二、微交互的测试过程

有人能给你一个不的建议，说不用去做微互测试，说就像重复造轮子。

相反，微交互于任何应用或正常设备运都是必要（译者注：正为它很要，所以测试也应该引起视）。你可以过测试和用户反馈来提升和改善它们。不处在于，你测试是流程和结构，而不是留在概念上。

遵循构建>量>习的精益启反馈循环研究方法。构建微交互并测试它，各种定量和定性的方法量设计。从这些发现中分析习，然后重复，使研究数据来确认你的决定，并确保微交互最终符合户的需求。

建立和运行测会议的工作量和成本通常非常高。因此，交互常常其项目并在一起进行测。

1. 用交互来发现问题

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

• 首先，询问户他们希望通过这个微交互做么。在使这个微交互之前，问问他们是否需要习么东西，特别是如果他们前从未使过类似的交互时。
• 允许在没有你帮助的情况下使用这个交互，并实收集定量数据。
• 观察用户使用微交互的每一。倾听他们对所选择的印象描述。观察微交互规则对参与者否作用明显，注意差异。
• 问他们，他们想让微互帮助住哪数据。
• 最后，请他们表在这个微交互有哪些地是需要继续优化。

个程能帮助你现微互的很问题。它能验证一般的目标和期望。对两个用户团重复个程至少两次。在既定时间内，用用户反馈来分析和优化你做的微互。

2. 何使用研究数据

是你以测试的一定量数据：

• 完率；
• 微互持续时间；
• 具体步持续时；
• 步骤数；
• 点击/敲击/选择的次数；
• 机器错误数；
• 人为失误的数量。

优化微交互并重新测试一遍，看看否需一改。 另外也需注意样本，测试用户不多可能会使错误或偏好变得加明显。

统计意义当并不意味着跟际一模一样。在设计程中使用数据，最重要的教是：它不能是为你自己而设计。研究数据需要人来释它，把它放到内容中，单纯的数据很少能告诉你生什么。

你为什么会抛弃数据？例如，大多数在线广告都没有击率。如你做广告能有0.5%击率，其实做可以了。那么，我们是否应该迟所有在线广告，为它们很少被使用？99.9%用户会意（另0.1%为广告公司工作）。是去掉广告意味着去掉网站本身，为运它没有钱赚了。不能是看数据，为数据不含更广泛内容。业务、组织环境和用户基础不仅仅是 Excel表数。数据应该是辅助你做出更好决策，不要完全依赖数据。

三、微交互对产品用户体验的重要性

微交互可以提高品用户体验，帮助用户记住你品。它们使品体验不仅简单，而能吸引。考虑小细节表明用户和他们需求已经到了些关注，这正是他们想要。过微交互，可以改善们生活。最要是，做好微交互能在快节奏 web 开发业保持领先地位。

原链接：《How You Can Improve UX with Microinteractions. Part II》  Sergey Gladkiy

欢迎关注译者的公众号：「 彩云译计」