本帖最后由 小篱 于 2015-11-17 10:11 编辑


　　(我们的app都是由很多页面组成的，由于用户对界面之间的关联没有预期，所以经常会受到惊吓或者感到困惑。 )

　　当用户感知不到页面之间的关系时，就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要，这直接关系到操作效率。在没有辅助解释的的情况下，用户只能通过经验去理解。这是一个非常有挫折感的体验。

　　举例来说，在Windows中，如果我们的任务是：打开“我的电脑”中的D盘，那流程是这样的：

　　1.双击“计算机”图标；

　　2.图标扩展成一个窗口；

　　3.在窗口中选择D盘。

　　在这种情况下，第一步的元素是图标，第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接，且没有前后关联。如果用户第一次使用Windows，这样的界面跳转需要理解一阵子。

(运动模糊的全部帧效果，可以通过每帧展示多个竖线来达到提高帧数的效果)
　　运动模糊的效果表明：运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。动画师经常使用运动模糊，即使只是粗略进行运动模糊的渲染，也足以打造一种快速运动的幻觉。在App设计中，由于手机尺寸的限制，一般不会出现超远距离的拖动，但是在大屏幕的电脑上就会遇到这个问题。

　　1.2 拟物化的方法二：出现和消失

　　除了移动，元素无规则的出现和消失也会造成用户困惑。在UI设计中，有三种方式展示出现消失的效果：移入，擦除，和模糊消失。他们的动作是快而连续的，给用户必要的视觉线索来理解发生了什么。


　　(白雪公主因为更接近于现实，所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而白雪公主则特征不明显。图片来自：Disney.com )

　　所以，夸张的表现手法可以突出某些受到忽视的细节。在中，动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。

　　和一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。

　　张方法：给用户足够的预期

　　在动作发生之前，最好给给观众一些提示。当动作发生时，观众已经准备好，而不必对所发生的动作所惊讶。

　　像类似预期一样的的夸张技巧，它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索，用户会非常难以理解这些界面。

　　3 增强现实（Reinforcement）

　　所有的动画技术都会增强某个现实。有些会非常极端－就像在某些动画中，角色高速移动，变成了一道光线，快速的穿过屏幕。实际上这是非常隐蔽的手法。 观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理，所以观众不会被这些夸张效果所困惑。本节就是探讨，通过增强现实技 术，用来弥补与观众之间的关系，亦或者UI与使用者之间的关系。

　　3.1 增强现实方法一：缓进缓出

　　如前文描述，当人物移动时，是非常拟物化的。 然而，这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果：角色缓慢的走出屏幕，接着一个快速的动作，最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外，缓进缓出效果出现在某一个快速动作之前，有助于观看时更加舒适。如果没有它，动画中的移动会感觉很假，类似缓进缓出这种细节效果可以极大的影响一个动画的质量。

　　3.2 增强现实方法二：弧形运动

　　另一个原理也是经常运行在人的潜意识中，那就是弧形运动。相比于直线运动，对象沿在弧形运动时，他们是非直接式运动。类似于中的角色。圆弧路径的运动给人一种更吸引人，更活泼的感觉，而直线运动则比较简单。

(Mac OS X中，最小化窗口使用了弧线，显得更加活泼)
　　3.3 增强现实方法三：跟随运动

　　增强现实的最后一个方法是跟随运动。 在现实世界中，当主物体发成运动时，与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中，当动画中的主体物停止后，其他部分细节依然可以运动。包括了身体，衣服，和一些局部的动作处理，让其动效变的更加极致。

(iOS中，移动app位置是典型的跟随运动效果，当App插入一个新位置时，其他app位置跟着位移)
　　构建一个假象是一件非常脆弱的事。 一些动画的细节对最后的效果影响非常大。虽然这些动画效果如果不在中使用，其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动，更逼真。 最终可以让故事更容易被说服，人们也更容易理解，也更容易让用户参与其中。

　　三、为什么使用动画

　　为什么要在UI中使用动画？动画有2个特点可以解释其在UI设计中的价值。

　　首先，由于是艺术性的，他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确，清晰，简洁的沟通。

　　其次，创造了一个虚拟的世界，它非常容易让观众沉浸其中。通过此方法，UI也能变的引人入胜。通过动画，充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务。

　　四、使用UI动效的注意点

　　在UI界面中使用动效是有益的。但是UI并不是。它们之间最重要的一个区别是：是一种被动介质，而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态（足够快，足够引人入胜，足够干净利落。使用户无意识的认识到这一点）用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下，应该给予用户最直接的控制。但是界面设计的原则仍应该利用动画技术来支持。

　　和UI的另一个区别是他们的使用目标：纯粹是享受和娱乐，而用户界面是用来完成工作的。由于工作的严谨性，需要排除漫画中的娱乐元素。往往古怪且愚蠢，如果这种古怪足以让用户理解用户界面的功能，那这种古怪则可以保留。例如，动画可以用在第一次打开软件时，给用户一个惊喜。通过预期暗示用户操作，通过这个动作给用户一些惊喜是可取的。

　　UI是用来完成任务的工具，动画应该尽可能的快，同时也保持其清晰度。例如把动画当作一个时尚元素使用时，动画必须要快，通过快来减少用户执行和理解的时间。

　　五、总结

　　在UI中使用动效有以下几个优点：

　　-由于动画让用户更容易理解界面之间的关系，所以减轻了很多认知负担。

　　-通过消除屏幕上的跳变，让界面不让用户吃惊并费解，从而让体验更加愉快。

　　-将物理世界的运动用在动画中，缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。

　　动画展示效果远远超过了静态展示，甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的，或者会分散用户注意力的东西。通过悉心调整，动画可以让界面可理解，有魅力的。同时使用起来的体验是愉快的。

　　相关阅读：IOS 9人机界面指南（1）：UI设计基础

via：腾讯ISUX

锐亚教育，游戏开发论坛|游戏制作人|游戏策划|游戏开发|独立游戏|游戏产业|游戏研发|游戏运营| unity|unity3d|unity3d官网|unity3d 教程|金融帝国3|8k8k8k|mcafee8.5i|游戏蛮牛|蛮牛 unity|蛮牛