交互设计中的功能动效

译者纪：本片文中包含大量的动态页面（原网站是视频链接，本网站上传视频不能排序，故人工转为动图），加载较缓慢，请各位多点耐心，么么哒

---

一个好的交互设计师可以很容易的解释设计里面的决定背后的逻辑。这包含着信息架构，页面内容的层次结构，流程和所做的解释。

迟早，动效将会应用到线框图原型中，这个时候，再去对设计做决定或者是解释，将会变的难一些。例如一些这样的理由：太狂拽酷炫了……太潮了……太鸡冻了……这将是设计失去其力度的领域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我们的设计中，动效理应占到更多的比重。我们应该去定义动效，并且阐述他们的目的——像我们阐述一个设计中其他的元素一样。

功能动效是微妙的动效，是我们嵌入在用户界面设计中的流程的一部分

不像是迪斯尼出的动效（动画）或者是电脑游戏中的动效，我们这里讲的功能动效拥有一个清晰的、有逻辑性目的。这个目的为是我们想要传递的设计理念服务的。功能动效是我们UX（交互设计）工具库中的又一个工具。

在一个完美的世界里，我们应该可以验证功能动效与清晰设定逻辑的目的。如果一个动效在我们的设计里面遵循我们设定的逻辑目的，那么它就是一个有效的功能动效，它存在在我们的设计中便是合理的。但是，如果它不与逻辑目标相符，那么它可能就是多余的，需要重新慎重考虑这个动效存在的意义。

在过去的一年左右的时间里，做过各种各样的项目，我收集并整理了一系列九个逻辑目的。今天帮我验证功能动效。我已经意识到，通过查看一个被很好定义的动效，我可以很容易的把它们放入到这个系列点一个或者更多的组。

也可以这样思考：当一个动效不符合一个功能性的目的，那么这个动效多存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效。我希望你会在你的设计中对你有所帮助。

导向会阐明结构。在这组中，收集的是一些扮演导航角色的动效，它是网页信息结构的反映。这种动效是想要吸引用户对导向的注意，帮助用户理解页面布局刚果发生的变化：什么导致了这个变化，下次想要使用的时候怎么再次打开。

一个典型的例子是：一个按钮，可以切换隐藏内容（如个人资料等）。当你点击它是，会出现一个隐藏的面板，当你合上面板，它缩小回操作按钮。

第一次接触的时候，用户可能对马上要发生的事情（做了动作之后的回馈）猜的不那么准。隐藏面板尺寸不断变大的载入动效可以帮助用户更好的知道发生了什么，而不是觉得自己离开了页面或者内容突然消失了。这样用户就产生一种自在的掌控感。收回面的的动效可以帮助用户关联打开对应面板的按钮或者图标，这样他们就会知道下一次从哪里打开这个面板。

逻辑目的：避免突然间的变化，让用户知道自己在哪。

例如：下列两个动图：

一个众所周知的易用性准则：保持设计和站点内容的一致性。一个具有一致性的站点通常是可预见性的，因此，也是可以学习的。此规则也适用于按钮的操作。

在某些情况下，我们必须要设计一个在一定条件下功能发生一定变化的按钮。我们这样做通常是因为空间受限，如手机等。因此，用户已经知道一个按钮的功能情况下，他还得学习另一个新功能。

“保存”和“编辑”按钮是功能转化按钮的最常见的例子。但是这个又是最简单的，因为这两项操作是互斥的，他们具有相同的情景（context）。在其他的情况中，当两个功能之间不具备明显的联系，可用性的挑战就凸显出来了。功能动效这个时候就能发挥很好的作用。

逻辑目的：强调动作按钮的功能变化。

例如：下列两个动图：

第三组的放大缩小看起来和第一组的导向有些相似。在这些动效里面，用户在列表里选择一个条目，然后就变成了这个条目的内容或细节（取代了列表视图），并且能够返回之前的条目列表。

我们经常在图像库、卡片和条目选择中见到这样的动效。用户选择了一个条目，条目马上响应用户的选择，在屏幕上显示对应的细节内容。

这里的困难是必须让用户继续感到掌控感，并且还在原来的流程中。功能动效在这时候往往是必不可少的。

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!