11大黄金法则：顶级移动UX设计心髓

摘要：与动画设计一样，UX设计也追求画面与动作的真实存在感，如果做得不够逼真，带给用户的体验就非常糟糕，怎样才能把UX设计做到好？请看下面移动UX设计的11大黄金法则。

移动时代的到来，触摸无处不在，用户体验是设计师不断的追求，怎样才能将UX设计做到最佳境界？本文将告诉大家如何利用《迪士尼动画原则》设计出最棒的移动UX。

首先让大家有个大概了解，这11大黄金法则都包括：

1. 挤压与伸展
2. 预备动作
3. 构图布局
4. 连续动作与关键动作
5. 跟随与重叠动作
6. 慢入慢出
7. 动作弧线
8. 次要动作表演
9. 时间
10. 夸张化
11. 纯熟的绘画及讨喜

接下来我们一个个来看：

1.挤压与伸展

这条也是动画设计中描绘物体软硬程度的普遍适用的原则，同样适用于移动UX设计。有的东西需要表现得坚硬、锋利，而有的则要体现柔软、优雅、有韧性，这时候，合理控制挤压与伸展就非常重要。

比如在Flipboard中，翻页设计就表现出页面的坚硬厚重感，而在苹果自己的iBook中，翻页时则要表现出柔软有弧度感。在设计中，根据应用所需，合理利用这条规则。

Flipboard的翻页设计

 

iBook的翻页设计

2.预备动作

当一个设计者展示运动的物体或者人物的时候，要表述三个明显的阶段

• 预备动作
• 动作本身
• 动作结果

同样，与动画设计中的预备动作类似，在设计移动UX的时候，预备动作就是为了告诉用户接下来会发生什么事情，速度以及方向会是怎样，以便给用户一个缓冲时间。这个原则可用于打开App时处理视觉效果，也可用于用户体验之间的承接。

比如上图中的黑色屏幕，一般手机中的摄像头都会用它来当做拍摄的预备动作。

Windows Phone 7里，窗口阴影部分就是展现动态砖UI的预备动作。

3.构图布局

好的布局能让用户一眼看明白你的主要意图。

在移动UX设计中，屏幕与屏幕之间，以及人机交互的间隔时段，构图布局尤为重要，好的布局是灯光，色彩等元素的结合，还要包括元素分配以及动作引导。好的移动用户体验让人觉得流畅缓和，差的体验则让人感觉脱节，如下图。

设计UI界面最大的挑战就是设计的时候缺少一个强有力的概念目标，如果布局不合理，用户进入UI的时候，会在导航页没有方向感。如果你的UI设计的够好，动画及衔接布局都很好，那么用户使用起App来就会如鱼得水。

4.连续动作与关键动作

这点与动画绘制过程有很大关系，为了捕捉到动态的快速运动，就需要使用连续动作，方法就是画出每一个动画所需的框架。而在关键动作绘制的时候，则只用画出关键框架（比如绘制出一个队列的中间及首尾框架）。

在移动UX的过渡设计中，大部分都采用关键动作，并且通常都用于不太复杂的，或者简单的过渡设计。

利用连续动作体现水果动态

5.跟随与重叠动作

什么是跟随动作？举个例子，动物耳朵，衣物，毛发等在它无意识控制的情况下自然飘动或延迟的现象就是跟随动作的一种。

重叠动作又指什么呢？比如我们背后传来一首歌，可能先动眼睛，再回头，头转了一半身子也跟着转，这就是重叠动作。

这两点能帮助你定义UI元素之间的关系，以及UI之间转换的方式。

Windows Phone中的砖块就使用了重叠动作，每个砖块都以不同的速率移动。

6.慢入慢出

自然界中，不论是汽车启动还是运动员起跑，都需要一个缓冲过程，慢入与慢出就利用间隔空间处理这个过程的。正确的处理方法就是在开始与结束的时候增加框架，中间减少框架，这种方法会让用户感觉画面更加自然。

这在许多移动UI清单列表中的时候就用得比较多，开始与结束框架多，中间框架少，这样的好处就是：滑动UI之后，仿佛后边的跟进滑动都是惯性使然而不是机械处理的结果。

比如你在App Store里搜索应用，会出现许多结果，你轻轻滑动屏幕，后边的应用自动跟上，非常自然。

慢入与慢出还用于主屏应用布局中，例如下图：

7.动作弧线

现实生活中，物体的运动都不是任意的，通常会受推力、空气阻力、地心引力的影响。物体的运动轨迹取决于它是机械的还是有机的，机械物体的运动通常都是直线型，而有机物体的运动通常都是曲线形，在UI设计的时候，要考虑你设计的东西是有机的还是机械的，再决定如何设计轨迹类型。

 

Android倾向于使用直线

8.次要动作表演

所谓次要动作就是在主要动作以外的有助于表现角色内心状态或者个性的动作。比如一只松鼠跑到你家草坪上，然后钻进丛林里，他的身体和腿部运动就是主要动作，尾巴运动则是次要动作。次要动作的存在是为了配合主要动作，共同让整个画面更加真实生动。

这在移动UX设计中怎么运用？当一个用户点击一个邮件中的URL的时候，就会启动手机上的浏览器，在这当中，浏览器窗口跳出来是主要动作，邮件应用自动退到后台是次要动作，我们看见两个动作同时发生，但实际上次要动作在支持主要动作。次要动作还可运用在App窗口的切换之间。

9.时间

一个动作运动得太慢或太快都会让人觉得怪异，在动画绘制中，时间用框架的数量来描述，动画播放后，这个时间就转换成速度。

时间非常重要，能帮助定义一个物体的物理特性，比如重量、大小、规模，除此以外，还能帮助传达角色的情感状态或个性特点，微妙的时间变动都能体现出角色的心情及体态。

比如Wile E. Coyote and Road Runner 中，时间的正确处理体现了Wile E. Coyote的笨拙，Road Runner的轻盈。

在移动UX设计中，在App内，屏幕转换的时间如果处理不好，带来的用户体验就很糟糕，要花时间去琢磨、试验。

关于时间处理，iPad的图片应用是个很好的例子，图片切换非常轻盈，有浮力感，感觉很真实。

10.夸张化

动画不一定非要体现真真切切的现实，有时甚至会表现现实中不可能发生的事情。尤其是肢体表演方式，细致时可以非常细致，夸张时则是飞天遁地，无所不能。

看过《猫与老鼠》和卓别林默片的人应该深有感触夸张的重要性。这点怎样运用到移动UX设计中呢？这就需要控制“度”，如果一个场景包含几个元素，那么对几个元素的夸大程度要合适，需要平衡，避免带给用户迷茫感。

比如在主屏状态下打开一个应用的时候，恰到好处的夸张就会让用户觉得，窗口是自然蹦出来的。

11.纯熟手绘与讨喜

这点在人物角色的绘画中特别重要，但在移动UX设计中的应用不是很大。

操作的时候，你只需要遵守三维立体空间设计规则，在理解三维空间构成（框架，重量，平衡感，光线，阴影）的基础上，通过体积、重量表现人物角色即可。

有了这十一大黄金法则还不够，核心问题“如何将动作整合到设计中”仍旧存在，要怎么操作？分三步：

画草图：事先勾勒好转换与变化阶段有助你弄清自己到底想要传达怎样的移动体验。勾线框：这步非常重要，是你将设计idea与开发商及股东进行沟通的桥梁。最后成型！在这三个步骤当中合理利用这11条法则，千万不可滥用。

 （文章翻译：陈徐天九  责任编辑：张宁）

文章来源：Smashing