产品的交互按照这 6 点做才加分

交互能够让界面看起来生动有趣，但是要格外注意上下文。通过上下文流畅地传递给用户，能够让用户有明显的预期。解释界面上的元素，强化元素间的层次结构，并且表现产品逻辑。

如何让交互的上下文表现的更加流畅呢？《Functional Animation In UX Design: What Makes a Good Transition?》（原文需要翻墙）一文中提到了 6 点，包括：有响应、能联想、自然的、有目的、速度适中、简单清晰。

1. 有响应

简单的说，用户操作并产生预期的反馈。作者在文中提到了“开关灯”这个场景，在现实生活中也会有类似的场景存在，比如点击应用图标打开应用、点击用户头像进入用户个人主页等等。我认为，有响应是大多数应用遵循的基本的逻辑和原则。

2. 能联想

这一点和“有响应”有密切的关系，也就是符合用户预期。将新展开的界面和构成界面的元素或动作连接起来。组合联系背后的逻辑是帮助用户理解刚刚在可视布局里发生的变化，是什么触发了这个变化。也就是用户在前一界面发生点击行为，与后一界面之间的关联性。这个概率的大小，决定了用户预期的强弱。

3. 自然的

在现实世界，物体迅速加速或减速是受重力和摩擦力的影响，比较明显的几种类型有：

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果；

ease-in 规定以慢速开始的过渡效果；

ease-out 规定以慢速结束的过渡效果；

ease-in-out 规定以慢速开始和结束的过渡效果

类似的，在好的用户界面设计中，开始或停止也不是突然出现的，而是遵循一定的加速或者减速的表现。

4. 有目的

在恰当的时机指引到恰当的方向和目的，交互的作用彰显的淋漓尽致。不论是文字段落，还是静态图片，都能通过交互完成，一个好的交互能够引导用户进行下一步的操作。

第一次进入的用户或许不能预知即将发生的交互行为，但合理的动画能帮助用户保持良好的方向感，不会觉得内容突然发生了变化而感觉不适。当把窗口缩小时，Mac OS 使用了一个动画，这个动画连接了前一个状态和下一个状态。

另一个好的示例是一个继承性过渡，当用户在列表中或卡片元素中选择某一项，放大看它的细节内容，这个交互需要用户保持上下文一致。（请对照原文阅读体会）

5. 速度适中

原文中表达的是“快速”，我认为应该是速度适中，或者应该是找到一个平衡点，让用户既不会等太久，且符合用户心理感知。在用户操作后，能够让用户理解和判断即将发生的事情。

6. 简单清晰

过渡应该避免一次做太多事情，因为当众多的条目需要在不同的方向或路径运动时，它们会让人困惑。

过渡应该清晰、简单而连贯。记住，在交互设计时，少即是多。所以我们应该只关注希望用户做的主要事情，完成我们为用户设置的主要任务就可以了。

在结论部分，作者也介绍说明了：

交互不是随机的，每一个交互背后都有目的。交互需要让你的用户不错过最重要的信息，无论你的 App 是好玩有趣的，还是严肃直接的，使用合理的交互能帮你给用户提供一个清晰快速连贯的体验。用心设计，注意每一个细节都是成功的关键，让人机交互更容易使用。

文章由 郑几块 原创发布，转载请获得授权，谢谢！