奧革士
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
- 避免使用不重要的动画
- 用动画把使用者的注意力引导到重要且不容易被发现的地方上
- 通过适当的动画，让使用者者理解介面的变化
- 利用适当的动画，帮助使用者者建立心智模型
细节决定成败，今天来谈谈动画在用户体验上扮演哪些重要的角色。随着装置效能的提升，越来越多的应用程式开始加入动画到应用里，利用动画的效果，透过各种各式各样的动画，事情更容易理解、焦虑的心情减少了、枯燥的状态变的有意思了
本文章会先从动画的任务开始，瞭解动画如何应用在介面设计上，接着会从卡通瞭解如何设计更真实自然的动画，最后会提出一些使用动画要注意的事项。
动画的任务
动画能够帮助使用者瞭解物体的状态，及状态之间的因果关系，如果使用的恰当，动画能够大幅度的减少使用者在状态认知的负担，并建立正确的心智模型（Metal Model）。
以下，我们将介绍动画的所带来的帮助：
一、解释状态之间的变化
使用者的操作通常會造成介面狀態的改變，利用動畫可以清楚的讓使用者瞭解介面狀態改變的因果關係。例如在電腦上，使用者點擊縮小視窗的按鈕，系統會利用動畫將視窗縮小到工具欄上，使用者點擊應用程式，視窗會使用同樣的動畫顯示被縮小的是窗。
二、吸引使用者的注意力
在一些时后，我们需要必须吸引使用者的目光，告诉他一件事情发生了或者期望使用者做些事情，在这时候我们可以利用一些适当的动画，让使用者能够轻易的注意到。
假设我们正在一个安静的乡村街道上，突然间出现了一辆跑车呼啸而过，这时候大家的目光肯定会被吸引过去，一样的，当使用者在一个静止状态的页面中，突然有个会动的物体出现，使用者的注意力就会放在这上面。
三、告诉使用者应该做什么
使用者常常打开一个应用程式后，就不晓得接下来该作什么事情，特别是在初次使用或者极限状态发生的时候，在这些情况下，除了使用文字与清楚的颜色提示使用者外，使用动画更能引导使用者进行操作。
在 Flipboard 应用中，刚启动的页面会在画面右测，纸张会不时的翻起，提示你可以向左翻阅。
在 Path 应用中，在第一次使用时，右方的导航列也会不时的滑动，提醒使用者这边有个抽屉能够滑开来。
四、操作反馈
使用者正在与介面进行互动，他们可能点击、滑过、拖拉，适时的提供及时的反馈让使用者清楚的得到回馈，让操作的过程更清楚更简单。
五、减少使用者的焦虑
当系统需要载入资料时，提供有趣的载入动画，吸引使用者的目光，会让等待产生的焦虑减少许多。
六、突显显重要的功能
利用动画效果，可以清楚的提示使用者重要的功能在哪里，并吸引他们去碰触这些功能，如80/20法则，除了透过对比的方式凸显重要的元素外，利用动画可能会是个不错的方式。
七、帮助使用者建立心智模型
应用程式常都是由多个页面组成，产品的设计者与开发者当然很清楚的知道每个页面之间的关系，可是使用者不了解。使用动画，可以更直觉的了解每个页面之间的关系，从而帮助使用者建立应用程式的心智模型。
八、手势的引导
手势操作带来非常便利的操作体验，然而手势操作却不像按钮一样显而易见，使用者没办法很容易的知道哪些介面可以使用什么手势。动画是解决这个问题的好方法，我们可让介面像是纸张一样浮起来，让介面看起来可以移动。又或者可以利用手势提示的方式，提示使用者可以滑动。
九、状态提示
动画要符合真实性
物体不会凭空出现
在现实中，所有实体从来不会凭空出现，操作介面上应该避免物体突然出现在画面上的情况。
预先动作
就好像跳远前需要助跑一样，在动画开始之前，使用一个预先动作，让整个动画显的自然且顺畅。约翰・拉赛尔（John Lasseter）曾说过，"没有先兆的动画会显的突然、僵硬与不自然"。
移动具有加速度
使用加速度而不是固定速率，真实的物体不会在开始就有一定的速度，肯定需要一段加速阶段，动画设计上特别需要注意这点。
需要注意哪些事情
相关阅读
Google Material Design 中也提到了非常多的动画设计上的细节，值得我们细细品尝研究。 [http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity]
设计之下 - 搜寻新闻客户端的用户体验设计
行动设计之钥
亲爱的介面
全部评论：16条
更多作品
发表评论