如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

      之前说过我要出一个吉祥物制作的教程，但是其实这种教程很多，上百度随便搜一个就能知道个大概。现在是教程泛滥的时代，今天看一篇明天看一篇，发现很多换汤不换药，有种不看可惜看了又很鸡肋的感觉。所以我在想我要怎么出这篇教程才会让大家有所收获。

        设计的进阶道路，大概分为借鉴，实操，驾驭，引领。从借鉴到引领这个过程学习、思考、总结是贯穿的，多实践，多总结才能飞速进步，不然有可能你干了5年的设计还不如人家干一年来得出色。我总结了一些原理性的东西给大家一个启发，做东西掌握实质才能一生二，二生n多，然后你就羽化成“大神”、“大湿”了哈。

       关于吉祥物，详细步骤教程大家可以看看其他大神的总结，不过大概步骤是要知道，用些什么关键性的工具也需要烂熟于心。 

一、吉祥物制作过程

1、钢笔勾轮廓（描边成线稿）

用钢笔的形状工具，勾出轮廓，描边成线稿。要领是需要每个部分都要画全，图层都分好，详细命名。

2、面稿上色（隐藏描边）

隐藏描边，形状上色，即成面稿。各自部分需要单独做蒙版，然后整体需要建组加一个形状蒙版，便于上色，不超出身体部位。

3、剖析光影（这个可以找一些实物，或者大神的吉祥物观察） 
常用图层样式：眉毛（斜面浮雕）；眼睛（眼白渐变加内阴影，眼眶渐变加羽化）；嘴（加两个内阴影，一亮一暗，内部光影用钢笔勾，羽化）；身体（渐变，暗部正片叠底一个内阴影强化阴影，再内阴影一个细的环境光）；衣服（内阴影+渐变，加上明暗交界线和衣服袖口的厚度）。 

4、灵活应用笔刷，不好画的圆弧用钢笔勾然后羽化

吉祥物细腻制作过程中，剖析光影是很关键的。光影细腻了才能立体生动。

二、光影效果总结

光有明度、方向、色彩等特征。光的反射形成了物体的形象，光让我们辨别事物，认识材质、尺寸和透视。

1、三大面：黑（背光面）、白（受光面）、灰（侧光面）

2、五大调子：

（1）高光（最亮部分）

不同材质的高光强度也不一样。同样强度光线的情况下，越是光滑的物体的高光部分越是强；棉、毛、粗糙物体的表面则会相对柔和。

（2）中间调、亮部（本色部分）

一般是物体本身的颜色。

（3）明暗交界线（是最深的部分，刻画结构）

它深浅的程度跟光线和物体的材质都有关系。光线越强硬度越高明暗交界线越是明显。比如光滑的金属对比是很强烈的。如果是棉毛制品则相对柔和。

（4）暗部+反光（暗部本色偏暗，反光受环境光影响，反光强烈时暗部和明暗交界线重叠）

反光跟光线强弱和材质也有关系，反光同时也受环境色的影响。越是光滑的表面受环境色影响越是大。

（5）投影

同样投影跟光线强弱和材质也一样有密切的联系。靠近物体的部分通常最深。透明物体投影相对也弱。

明暗五调子在深浅变化上有规律，以明暗交界线为界，在背光部是逐渐亮起来到反光；在受光部是逐渐亮来到高光（辉点）。这被称为渐变规律。

       光有一个灰色的球还是不够的，我们还要了解色彩的基本知识。插画中很多插画师为了先定好精准的型和光影效果，一般会先画黑白稿然后用混合模式叠加颜色上去。混合模式在图片合成和滤镜中也应用广泛。下面是我的一些总结，有点类似理工科的笔记哈，一张表格弄懂混合模式和色彩模式，大家随便看看。

三、了解混合模式

       知识体系的连接起来有助于我们理解，没必要去背，理解一下大概心里有个底，能锁定自己要用模式的区域就行。理论是基础，一切的产出源于实践，所以大家一定要好好去实践尝试一下，各种叠加一下，就能弄懂这些模式，就会觉得这个神奇而不神秘了。 

四、用HSB模式分析色彩

       用HSB是基于人眼的色彩模式，是我们最容易理解的，所以我着重在这块进行分析。色相即色彩，只要不是色盲都能看清楚；明暗也一目了然，素描稿可以理解为只有明暗对比，色相饱和度为0。 但是饱和度夹杂色彩和明暗的时候就难以分辨。 画画用色上中也会受到一定的干扰。从小画画， 基本功扎实的小伙伴有时候凭感觉就可以画出美丽的色彩， 但是现在很多半路出家的同学就会发现难以入手， 所以搞懂我们吉祥物中色彩饱和度的原理就会顺手很多，就可以比较好的应用HSB模式。

       我的习惯是用拾色器的色相版面,横向从左向右，明度一样，饱和度变高，纵向从从下往上，饱和度一样，明度变高，所以右上角的点是明度和饱和度同时最高的点，所以想要取饱和度高的尽量右，想要亮的尽量往上。

       在拾色器中还可以总结出很多用色技巧，以这个灰度球为例，五大调子明暗度分别是：92 60 40 62 43 。叠加高饱和混色后（球1）五大调子明暗度分别是:100  91 73 95 67。叠加高饱和混色后（球2），五大调子明暗度分别是:100  82 76 100 67。说明颜色叠加上去，可以改变一些明度值，但是整体趋势是一致的。所以在叠加颜色值考虑色相和饱和度即可。 
       叠加高饱和混色后（球2）五大调子饱和度为：13 62 76 64 68 可以得出结论就是光照越强（越趋白）饱和度越低，明暗交接线上饱和值较高。 
       高光一般都是饱和度的，透明材质和反光材质，明暗交界线饱和度高，反光强，给人一种通透感。（球3）上我用饱和度模式提高了明暗交界线和反光区域的饱和度，整个球看起来通透了很多。所以要增加通透感可以增加明暗交接线的饱和度，提亮高光（明度）。

     下面是我给灰度球上色的过程。

       说了这么多，感觉是不是跟没看一样，有点懵。而且大部分吉祥物上色也是直接上色。我讲灰度球上色过程你帮助深度理解光影和色彩，而且球会画了，其他也不在话下。那我来总结一些更实用的要点。

五、吉祥物细腻刻画的要点

1、鲜明的对比,整体的饱和度高

（1）吉祥物弥漫着色彩绚烂的卡通色彩，所以一般采用饱和度较高的颜色。

（2）配色方案可以用对比色。需要注意的是，背景明度不能太高，否则反光发挥不出作用，就像我们高光也不会用纯白的，这样画面才有张弛。

         以下是我对自己三张吉祥物海报的色彩分析（除去吉祥物原本的颜色）： 

       从色盘构成的三角形中看每组配色中都有对比色。除了对比色还用到了中差色和相似色。在吉祥物中为了拉开颜色的对比，一般邻近色作为一个物体的过度，不会作为一个配色方案。互补色是对比最强的色组，放在一起，会给人强烈的排斥感。若混合在一起，会调出浑浊的颜色。但是也不是不能用，可以调节明度对比和饱和度对比来减弱这种排斥感。

       对比色中还包含了一种冷暖对比，第三张海报“蓝黄”搭配就是对比中的冷暖对比，黄色在蓝色中使整个画面更加活泼。

        红色、橙色、黄色--为暖色，象征着：太阳、火焰。

        绿色、蓝色、黑色--为冷色，象征着：森林、大海、蓝天。

        灰色、紫色、白色--为中间色。

总结：想要颜色丰富又没有排斥感，可以用对比色（包含冷暖对比），再配合调节明度对比和饱和度对比。

2、假象光源要定好，再加环境光

（1 ) 在未加入环境中，一般假象光是左上和正前光相结合。整体光源源要一致。（2）为了让吉祥物更加融入场景，应该叠加一些环境光。

（3）环境光可以加多个，一般常用的是两个一个高光一个反光。

（4）光需要有强度对比，不要两个一样强弱，没有主次。

3、细腻度的体现

4、用不惯笔刷可以用钢笔+羽化

       要做一个柔和的吉祥物，就像c4d做出来的，用“钢笔+羽化+图层样式+蒙版”就够用了。

       如下图给水滴加环境色，我们可以用钢笔画出轮廓然后根据实际情况调整羽化程度。

       同样的效果，也可以用内阴影做出，还可以多加几个光。“钢笔+羽化”比图层样式好用的地方是：受限制少，不依靠物体的轮廓，可以随机调节区域。

感觉差不多了，我们下次再见！

有人会问：好几点没看懂？

答：评论问呗。

有人会说：看了等于没看！

答：还是谢谢你看了，宝宝会继续走自己的风格。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

表单设计可以说是设计界一个老生常谈的话题，针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结，希望能帮助到大家。

从「因子（构成要件）」的角度，将表单逐一拆分，从而能够全面的看待。

如下，大卸八块，一一道来：

• 结构
• 标签
• 输入字段
• 占位符
• 帮助
• 操作
• 验证
• 反馈

一、结构 Structure

字段的顺序、节奏、外观和组织。

1. 只问所需

必要而不是全部，简化表单，或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要，是否是当前最相关的信息，如果它是可选的，最好不要显示。

2. 有理排序

先问什么，再问什么，前后字段根据相关性循循渐进。

3. 从易到难

从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意。

4. 组织相关

在繁多字段的情况下，将相关字段按照顺序进行分类组合，并通过增加一些额外的空间或者主标题将它们分成语义组，增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。

5. 单列呈现

单列，只需眼睛沿着自然的方向从上至下，便于用户理解操作。多列，眼睛需要按照「之」形进行浏览，从而增加浏览和理解认知的时间。

当然单列呈现还是多列，并非绝对，需根据页面空间，表单内容及性质共同决定。

6. 提高对比度

提高颜色的对比度，你的用户群体可不是高清屏，飞行员。

二、标签 label

标签告诉用户需要输入什么。

1. 名词标签

名词具有很好的描述性且简洁明了。常用的字段可以使用大家熟悉的图标代替文本。

2. 标签位置

左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

多数情况下，谨慎使用内联标签，在用户输入后，内联标签会消失，用户无法判断输入的内容是否符合，当然在用户熟悉且简单的字段下可采用（例如登录中只有账号和密码）。针对以上问题，你可以采用内联浮动标签解决内联标签在输入后标签消失的弊端。

三、输入字段 Input

承载用户输入的区域。

1. 自动对焦（PC端）

进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。

2. 提供默认值

可根据已知信息，帮助用户预判内容。例如可以通过 IP 检测出用户的地理位置。

3. 保存输入的数据

记住用户已经填写的内容，以防万一（例如页面刷新），从而避免用户需要再次输入而放弃。

4. 字段约束

为有要求的字段设置限制。例如，最大字符数，电话中数字、字母符号等要求，从而有效的避免脏数据。

5. 格式化（掩码）输入

提供输入格式，帮助用户理解所填内容且减少错误发生。常用于手机号码、日期、银行卡和邮编等。

6. 匹配键盘（移动端）

提供合适的键盘，帮助用户快速完成。

7. 区分可填

如上所述，尽量避免可填字段。如果不可避免，应该做明确区分。根据经验，可填和必填的数量少的做标记说明。

常规做法：必填，使用「*」星号符；可填，使用「（选填）」。

四、占位符 Placeholder

标签的额外描述，帮助用户了解可输入的数据类型和格式提示。

1. 颜色区分

它是内容提示，而不是内容。

2. 不是所有输入框都需要占位符

占位符是对输入内容有特殊要求的提示或提醒，也可理解为对标签的补充，并不是所有的输入框都需要占位符。

3. 输入后消失

不要在鼠标键入后消失，而是在输入内容后消失，这样可以在用户还未输入的时候，依然帮助到用户。

如果提示特别复杂或者重要，请使用帮助，它会一直显示在那里。

五、帮助提示 Tips

说明要求，解释原因，甚至帮助回忆。

1. 三种方式

常驻、按需提供、偶尔需要。

2. 给予解释

当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。

六、操作 Submit

对当前用户输入数据的提交等动作。

1. 区分主次

主操作，是我们期望用户的使用途径，应该在视觉上与次操作做出明显的区分，以突显号召用户点击。

2. 合理放置

合理放置操作的位置，可根据表单的排列方式合理摆放，避免居中。例如表单采用的是顶部对齐，你可以将操作与输入字段左对齐，这样用户在完成输入的时候，轻松地看到操作按钮。

3. 准确命名

清晰可预测。应该准确地描述用户点击按钮后会发生什么。

4. 行动号召

按钮应始终带有强烈的动词，鼓励用户行动。

为了给用户提供足够的上下文，在按钮上使用「动词」 +「名词」格式，除了保存，关闭，取消或确定等常用操作。

5. 禁用操作

在未完成必填字段，禁用操作按钮，通过直观的视觉上告诉用户是否完成了要求，并在恰当的时刻（表单填写完成，按钮被激活）将用户的视线吸引到按钮上。

七、验证 Required

对用户输入数据的验证反馈。

1. 前端验证和后端验证

前端验证不需要服务器上传验证的数据，就可以判断，例如手机格式等；但是要记住在用户输入后才进行验证，为空不验证；

后端验证，例如手机注册输入效验码，通过后才注册成功，需要通过服务器判断，才知道用户输入的是否正确。

2. 错在哪里，显示在哪里

就近原则，方便用户发现并修改操作。

3. 结合颜色、图标和文字

我们不仅仅需要视觉上的区别（请考虑色盲用户），还需要文字说明并告知原因和解决办法，而不是简单的「输入错误」。

4. 请勿清除

错误的字段，请勿在键入后直接清除，请给用户在此基础上修改的机会，记住用户才是决定者。

八、反馈 Feedback

对用户行为的反馈，告知当前状态。

1. 操作前：光标状态

鼠标在屏幕上的映射，我们称之为光标（指针），它会随着操作对象及系统状态而呈现出不同形状，让用户对操作的行为及结果有预先的心理感知。

2. 操作中：操作反馈

如 default，disabled，hover，fouce，pressed，active，error，success 等。例如输入框的悬停和键入的视觉反馈，从而帮助用户聚焦。

3. 操作后：按钮加载

呈现按钮的加载过程，而不是禁止不动，用户会以为系统没有执行操作，从而进行多次点击，呈现加载并禁止用户的后续点击操作。

总结

以上便是对表单设计的一些总结，更多的是提供一种分析问题的框架，从结构化的思维分析设计问题，从而能够全面的认识一个事物并进行了解掌握，愿对你有所帮助。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

系列位置效应大家可能有点陌生，因为它不像格式塔那样被大家熟知，但是当我看了它的概念之后，我决定和大家分享一下。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

所以跟大家分享下，我的一些相关思考。

 1. “+”的运用场景 

我们常见的产品中，采用“+”功能的场景，大致分为两种：a.（上传）内容选项；b.（聚合）快捷功能。

a.（上传）内容选项

根据“+”的直观表意，大致也能猜到它的运用跟“添加”、“上传”某个东西相关。

比如：微博，点击“+”入口后，是选择所要上传的内容类型。（可以晒自己精修X小时后妈都认不出来的自拍、也可以晒逗比的小视频、或者老子就想搞一场直播）。

比如：下厨房左上角的“+”，点击后，是选择上传作品，或者创建菜谱的选项。

再比如：工具类产品：Google drive，dropbox、百度网盘、微云，点击“+”后，同样是选择上传不同文件的入口。 

可以看出，这种情况下的“+”功能，多指“添加”、“上传”的含义，所承载的内容，是同一纬度下的不同选项。

b.（聚合）快捷功能。

众所周知，产品为了节省界面空间，同时避免过多功能给用户不必要的干扰，会选择把一些不常用的快捷功能收到二级展示。常见的产品中，他们选择把这些快捷功能塞进“+”里。

那么，你是不是觉得“+”功能跟“…”功能承载的内容是一样的？比如：乐趣首页右上角“...”，同样是对频率较低的功能的集合。

那为什么有的产品不直接用“...”，还是选择用“+”呢？

通过分析发现，“+”虽然也是聚合快捷功能的入口，但承载的功能有一个共性：都是围绕着用户主动打开、发起、新建...等操作进行的，因此用“+”更贴切。

比如：微信里的“+”，包含着：“发起群聊”，“添加朋友”，“扫一扫”，“收付款”，其实都跟“添加”有关。 

比如：淘宝也是类似的处理方式。

再比如：爱奇艺的“+”，里面包含的也是跟“添加”，“上传”相关，像上传视频、扫一扫、我要直播….

反过来看“...”，它聚合的功能，大多是相互关联较弱，且没有主动添加、上传等含义的。因此，用一个相对模糊，没有指向性的符号诠释，更为合适。

由上可以看出，在这种情况下，“+”作为聚合快捷功能的入口，包含的是频率较低，且跟主动“新建”、“发起”、“扫描”等相关的功能。

 2. “+”的展开方式 

当用户触发界面中的“+”时，常见的展开方式有3种，分别是：a.气泡弹出框；b.动态栏；c.沉浸模式。

a.气泡弹出框

气泡弹出框，这个控件又常被称为Popover，一般是由一个矩形和三角箭头组成的弹出窗口，通过点击Popover内的按钮或者非Popover的屏幕其他区域可关闭。 

比如,以微信为代表的“+”的展开方式，采用的就是Popover。一般用于聚合快捷功能。优点是触发“+”到Popover的距离很近，操作顺手，效率高（更像是导航的延伸）。

b.动作栏

动作栏，这个控件官方称之为Action Sheet，是用户触发“+”后，出现的一种模态弹出框，里面包含一组与当前情景相关的选项，一般用于上传内容选项。 

在iPhone屏幕上，为了便于单手持握时操作，Action Sheet通常占据屏幕底部区域。

比如：以Google drive、Dropbox为代表的产品，需要选择上传文件类型的选项。

在这个部分，同事们讨论有些争议点，在于：google drive 和 Dropbox或者微博，它们的加号本来就在底部，所以弹窗让用户感觉视线统一。

而有的产品“+”在上面，弹窗从底部出来，担心注意力切换和手指移动的路径比较长，显得割裂。

带着这个问题，我调研了下有类似情况的产品，会不会让人觉得不舒服。

后来发现，不会的。原因在于我们常用的、拥有10亿+用户的微信，发朋友圈时操作就是这样，而我们并没有感觉很割裂，反而已经习惯。

同样，iPhone自带的“提醒事项”App，也是这样处理。

后来看了规范发现，iOS确实意识到在iPad上，如果继续将Action Sheet显示在屏幕底部，如果频繁操作使用会比较累。因此，做了特殊处理。而手机屏幕上以底部为主，同时点击空白区域取消的操作，也是系统用户所熟知的。

总的来说，操作栏适合承载同一纬度下的内容选项，同时，就算“+”在顶部，采用底部动态栏，体验上也是没问题的。

c.沉浸模式

沉浸模式，指的是当触发“+”时，用户在全局蒙层上进行功能操作，同样适用于上传内容选项。

优点是拓展性更强，体现在：1.提升收益；2.品牌认知；3.内容运营。

1.提升收益

比如：微博，采用沉浸模式，下面是上传不同状态类型的入口，上面可以增加广告收入。

再比如：微云，在沉浸模式下，可以植入自己的“会员”广告，从而提升会员转化。

2.品牌认知

比如：有道云笔记，在顶部的空间内，宣传自己的品牌slogn：“记录，成为更好的自己”，是一种品牌情感化的传递。  

3.内容运营

像“好好住”，它们在这个页面加入“话题”运营推广。从而给UGC内容模块带节奏。

大多数产品都想营造社区氛围，建立用户关系，从而增加用户粘性，提升产品留存。

但要想拥有浓厚的社区氛围，首先要有内容、才有人愿意看、才有人在里面互动。

现实问题是，有很多用户有想发状态的心，但不知道发啥，从而放弃。因此，我们应该作出相应的引导。

比如，“好好住”在发布环节，增加话题运营“#每天一张生活日常#”入口，就是解决刚才说的“用户不知道发什么”的问题。运营同学想点子、造话题、带节奏，从而提升用户的发布量。

因此可以看出，“沉浸模式”，对于那些有拓展需求（收益、品牌、运营）的产品更适用。

不知道你有没有发现，相比国外，国内采用这种“沉浸模式”的产品偏多。或许在中国这个互联网竞争如此激烈的大环境下，大家不愿意放弃任何一个能够运营或留住用户的机会。 

总结 

总的来说，在常见的产品中“+”功能的运用场景有：（上传）内容选项、（聚合）快捷功能；它的展开方式可分为：气泡弹出框（适合承载快捷功能）、操作栏（适合容纳内容选项）、沉浸模式（容纳内容选项的同时，拓展性更强）。其实，交互形式没有好坏之分，只有哪个更适合自己的内容需求和产品目标，正如Louis Sullivan所说：“形式追随功能”。

小tips：日常工作中有太多类似“+”这种，看似一个不起眼的小功能，被大家忽略。我们习惯性看一下竞品，拍脑袋决定方案。

但是，慢慢你会发现，只有深挖和分析这些所谓的“小细节”，才能知道别人这么做背后的原因、才能举一反三的去运用、才能更好的兼顾统一性和拓展性，而不是停留在浮于表面的模仿。

希望这篇文章对你有所帮助。 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这次的采访我们聊得很细，细到某一个交互的设计思路的变迁，以及为什么最终是以那种方式呈现在 MIUI 10 之上。我相信，无论你是对设计还是对手机系统存在好奇，一定都可以从这次访谈里得到一些有益的启发。因为我们没聊虚的。

△ MIUI设计团队

一、彻底干掉虚拟键的全面屏手势是不是太激进了？

△ 虚拟键不该存在

是不是太激进我们还是根据用户反馈来判断，这套手势因为没有任何虚拟键的提示，刚开始确实需要一两分钟来学习，但大部分的用户反馈是：用了就回不去了。目前从客观上来讲，安卓手机里的全面屏手势，MIUI 确实是最好用的，不是我们自己说，而是从各种用户反馈，包括微博上很多专业数码博主的反馈得来的结论，很多人在主动地说这件事。

但是在手势的设计上，我们是踩过很多坑的。

我们尝试过很多版本的全面屏手势，最初还没有大胆到想干掉所有虚拟键，而是想在虚拟键上做文章。开始我们觉得那个区域很多时候3个 button 可能用不上，比如看书的时候，你可能只需要一个返回键，所以我们考虑的是在某些特定的应用场景里把一些用不到的虚拟键收起来，这是做减法，减法做完之后，原来虚拟键的位置就空出来了，我们觉得这个空间是浪费的，又在想应该怎么利用起来，这是早期一个很复杂的思路。

△ 早期带横杆的产品

后来我们又想是不是可以把3个键整合成一个虚拟键，当初做了一个 Demo，把3个键集合成一个横杆，那个时候还没有看到 iPhone 的模型，在 iOS 的全面屏手势出来之前，我们就做了一个横杆子，其实是受 Palm 的启发，这根杆子很早之前 Palm 就有了，苹果可能也是受 Palm 启发。我们设计的是在那个杆子上横滑返回，然后上滑回桌面，很接近苹果目前的处理方式。但最终还是把这个设计给放弃了，去掉的原因是：提示杆一开始是有比较好的引导操作作用，但一段时间后，用户就不需要了，另外就是视觉感官上横杆并不好看，工业设计上好不容易才能把手机下巴缩短几毫米，你一根横杆又全给它加回来了，这其实背离了「全面屏」的初衷，在设计上是一种不得已而为之的妥协。

否定横杆之后，我们才真正全心考虑干掉所有虚拟键的方案。但没有虚拟键，就对我们的交互设计提出了很高的要求，首先，这个手势的出发点一定得非常符合直觉，所以不管是返回上一级菜单也好，回到桌面也好，这必须是两个最基础的操作（横滑、上滑），在这两个基础操作上略做停顿，我们就可以进入应用间的快切和多任务管理，我们用一种非常轻的设计把它附着在两个基础交互上。彻底干掉虚拟键这件事最早我们没有太大的勇气去做，最后做出来反倒更贴近用户操作手机的直觉，有一种柳暗花明的感觉。

△ 简洁易用的MIUI全面屏手势

二、MIUI 10的整体视觉设计遵循了什么思路？

△ 为全面屏而重新设计

在天气、日历、安全中心等等 MIUI 10 的各个角落里，其实都把原来分段式的画面结构做了一个全面屏化的设计，让页面不要有很强的割裂感。让内容直接浮在屏幕上，用户第一时间得到信息，去掉干扰元素。

在非全面屏时代，手机有上下两个比较大的黑色边框，在视觉上天然是分段式的，之前屏幕内的多色块设计其实是对应了手机外观的这种「分段」，它还是和谐的，但原样搬到全面屏手机上，就显得是把一整块完整的屏幕生生分割成了几段。

另外就是原来有一些插画类型的风格和表达手法，想让整个画面有一些亲和力。但是因为我们的用户覆盖面很大，两三亿用户，会有一些年龄层的用户觉得原先插画形式有些稚嫩感。所以我们觉得到10这一代，整个系统应该更成熟、更普适一些，我们更倾向于做一个对任何人来说都很舒服的视觉设计。

三、这次整体视觉风格有比较大的变动，有没有什么地方特别花费精力的？

举个特别细节的例子。MIUI 10 的时钟，有一部分用户会有疑问：在 MIUI 10 里，可见的大多数页面是亮色，为什么进入时钟时却是黑色的？我们其实也在白色和黑色反复了很多次，调研也做了很多次。最终我们认为更重要的是时钟的使用场景问题，比如说你晚上在睡觉前拿起手机定个闹钟，在夜晚或者室内，从手机桌面进来打开时钟，如果进入一个很亮的页面，它即便是好看的，也可能会刺眼。所以我们还是选择了黑色，当然那个对比度到现在还在调整，我们想把视觉上的美观和使用的舒服统一进来。

四、MIUI 10的自然音效系统是发布会上的一个惊喜，你们为什么会想到去做音效？

我明白你这个问题的意思，大部分人的手机是长期静音的，音效这个东西，好像已经被完全忽略了。但是我们觉得，哪怕只有1%的用户打开了手机铃声，他也应该感受到悦耳而不是打扰和腻烦。如果我没记错的话，我们是手机厂商里第一个针对音效做系统性设计和优化的，我们从「百听不厌」的自然系音效出发，和得过格莱美奖的顶尖音乐人合作，还针对手机音腔的特性对音效做了特别的优化。

发布会上洪锋把自然音效系统作为一个彩蛋来讲，这是我们送给小米手机用户的一个礼物，是让我们骄傲的产品。我不确定有多少用户会发现这个产品，有些人可能因为长期静音他没有机会接触到这个新设计，但它是一个能带给人惊喜和温暖的东西。

五、MIUI的设计理念是什么？

有些人可能会觉得设计是一个偏感性的、依赖审美的东西，但是对于一个好的系统设计，我会从视觉、动效、交互、字体、音效，五个维度的去衡量它的完善程度。

我们用一个人来做类比。视觉，就是感官层面的，比如说你见到一个人会说：这个人很帅；第二就是交互层面的整体逻辑，就好比你跟他说话，发现他的脑子清楚；第三就是整个动效的层面，这个人的肢体语言很优雅；还有字体，我们是从 MIUI8 的时候就开始做了，为了让大家有更好的阅读体验，让人觉得你这个人很有涵养，这已经深入到非常细节的层面了；最后，我们加了一个声音的系统，就是你说话的时候，声音还要好听。MIUI 在设计上一直是往多个方面进化，我们并不满足于做出某个漂亮的页面或者交互，而是追求整个体验层面的饱满。

做设计过程中，我们可能会尝试各种各样的方案，也有灵光乍现的时刻，但我们会从多个维度完整地去考量这个设计成果，避免做出一些只是「看上去很美」的自嗨的东西。实际看起来、用起来、听起来怎么样，我们想从这几个大的感官维度上都能达到体验层面的满足。

举一个例子：比如说之前我们为了快去掉了一些解锁的动画，用户一按指纹解锁，直接进到桌面，这种确实是非常的快，但这种感觉就像什么呢？就像你一按电梯，门就消失了，你进了电梯，它咔一声又关上了，是很快，但是这种观感是不太好的。它没有一种欢迎的意识，就只是把东西呈现给你。这一次我们希望把这个东西改回来，当你进入手机桌面的时候，图标应该有个简短的优雅的动态，有一个进场亮相的过程。

△ MIUI动态图标

MIUI 其实已经非常流畅了，在这种地方去掉应有的动画，是可以快100毫秒，但这种快是没有意义的。让用户舒服的看到这个东西，这才是整个体验的核心。所以我们这次就定下一个目标，和工程团队一起，把这种为快而快的东西给它削弱，用户要的是更优雅的体验，而不是那种无感知的快100毫秒。

这个事情说起来不大，但其实是一种理念层面的进步，大家已经从那种无意义的纯数据比拼里解脱出来，更注意到整个体验层面。我们这次会把上面说的进场动画加进来，能让用户点亮屏幕的时候感觉到更加的舒服，能够感觉整个系统的「肢体语言」更加优雅。

六、对于MIUI 11的展望？

之前的非全面屏时代，手机屏幕在16:9的形态下，UX设计上其实已经极度成熟。手机的很多功能和设计的出新，很大程度上都是在迎合一些小众的需求，可能一部分人觉得很喜欢这个设计，但它并不普适。

全面屏手机的出现又将设计师的注意力从这些小众需求拉回到了一个大众需求：怎么在全面屏手机上做出更好的体验。因为智能手机用户迟早会将手中的设备换成全面屏设备，手机厂商如果只是简单地把原来16:9的画面改成18:9，而不根据硬件特点做真正的深度定制，那就会离用户体验越来越远。

手机系统的未来我们认为也会是这样的趋势，软硬件的结合会更加的紧密。在这一点上，MIUI 有这个意识，也有行动，目前是走在比较前面的。

MIUI10 落版后，我们也在考虑往这个方向去深化。我们不会特意去考虑11跟10之间非得做出什么大的区别来，相比这个，我们更关心的问题是：什么是用户真正需要的设计。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

关于什么是好设计的问题的答案，定义了设计师。

“有什么好处，Phaedrus，还有什么不好 - 需要我们让任何人告诉我们这些事情吗？” Robert M. Pirsig，Zen和摩托车维修艺术：对价值观的探讨

上周，我的一位英雄（@johnmaeda）发推文说“设计一直是关于肤浅和实质的。”我认为这是一个很好的引用。出于某种原因，我们需要时刻提醒我们，设计不仅仅是花哨的造型。但为什么？为什么物质需要防御？如果你看看像Dribbble这样的网站，设计的表面看起来真的很吸引人。肤浅的品质不需要解释。但这不是设计。在他的“ 设计形状”一书中，交互设计师Frank Chimero正确地说“如果我们留在表面并且不深入研究为什么我们不是真正的设计”。如果问为什么是设计的本质，设计真的是哲学的一个分支。

清晰思考

目前我们有一位来自马斯特里赫特大学的教授，他们在我们的设计工作室中。他正在研究野外设计师，就像人类学家在非洲研究一个不知名的部落一样。他研究的主题之一是设计过程。我总是觉得这是一个有趣的话题，这就是我对Chimero的书的原因：它从设计师的角度讲述了设计过程。他的内部人士认为这是一场认可的盛宴。关于他对设计过程的描述最让我困惑的是清晰思考的想法。奇美罗对他的工作方式有一个有趣的描述：他只是“出现”并让“语境说出它需要的东西”。他说“设计师的工作就是找出一种方法让问题表明它是真实的自我，这样他才能回应已经出现的真相。

设计师通过询问原因来工作。问为什么“更高水平的研究，一个调查所使用的动机和思维过程，以便它们可以应用于我们自己的情况。”为什么看起来更深。它将目前的解决方案与用户的需求相结合，以设想更好的解决方案。

哲学

当我们开始问为什么并开始思考真理时，我们就进入了哲学领域。我一直将设计（和其他艺术）视为哲学的视觉形式。比传统哲学更精细的一个，因为它不仅通过文字而且通过图像进行思考。有些人可能会称这种特殊形式的哲学设计思维。当我们将设计定义为哲学的一个分支时，下一步就是质疑这个世界上一些伟大的思想家，看看他们对设计的看法。对我来说，Martin Heidegger有两个哲学文本定义了良好的设计。

关于您的客户和互联网的真相

第一部是Der Ursprung des Kunstwerkes（艺术作品的起源），其中海德格尔思考什么使艺术品成为艺术品。简而言之，他认为，为了使艺术作品成为一件好作品，它必须揭示我们存在的真相。他用梵高的一双农夫鞋作为例子。这幅画是一件艺术品，因为它向我们展示了鞋子，农业，生活的真相，也展示了梵高绘画时的绘画媒介和艺术现状。它很漂亮，根据海德格尔的说法，美丽是表达真相的最好方式。

如果我们将网页设计视为一门艺术，我们可以将海德格尔的艺术思想转化为网站，并得出一个有用的网站定义。首先（和Chimero在他的书中所说的相似），一个好的网站揭示了用户与您为其建立网站的组织的互动的真相。当然，美丽很重要，因为它是真相展示自己的最佳方式。Beauty以直接方式连接到用户。它比单词更快更有效。但海德格尔增加了另一个重要方面。一件好的艺术品，即一个网站也定义了媒体，即互联网。因此，良好网站的问题与互联网的问题紧密相关。一个好的网站向我们展示了互联网是什么或可以是什么。

与媒体的深层联系

因此，与您正在设计的介质建立深层连接至关重要。这是海德格尔第二篇文章的主题，它定义了良好的设计。在他的文本Bauen，wohnen，denken（建筑，生活，思考）他说，在你建造之前，你首先必须学会生活。在这篇关于建筑的文章中，他将设计与对人类基本条件的理解联系起来。他敦促设计师与他们的主题联系，实现他们的主题，而不是以抽象的方式看待它。对于建筑师来说，很容易爱上图纸，抽象概念和模型。但是如果没有与你设计的生活有真正的联系，它就会变得毫无用处。就像建筑一样，互联网也是人类的基本需求。我们将互联网视为能够让您做新事物的东西。但是人们只想做他们一直做的事情。 人们的经验和广泛的兴趣促进了设计师的理解和想象力。

通过哲学分析生活 - 问为什么 - 是良好设计的基础。哲学是生活与设计之间缺失的纽带。

一个好网站的定义

就像艺术一样，设计一直需要定义。我认为好的设计问题的答案定义了设计师。所以：
- 设计就是问为什么（所以它基本上是哲学）
- 网页设计的目的是找到关于客户，用户和互联网
的真相 - 真相最好通过美容传达
- 找到关于你的媒介的真相必须与之建立深厚的联系

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1. 用气泡元素营造视觉焦点

在简约清爽的背景之下，使用色彩鲜艳，形体自然随性的气泡元素来创造视觉焦点，气泡和需要凸显的图片素材结合到一起，有目的地将用户的视线吸引到关键的元素上，最终起到提升转化率的目的。

2. 用简约线性的气泡动画来驱动交互

使用几何特征的简约气泡元素来构造动画，是一种成本比较低的做法，动画会随着用户滚动页面，而有趋向地发生转变，从而促使用户不断地滚动，向下浏览查看更多内容，这种设计同样能够提升网页的参与度。

3. 用不规则的涂鸦斑点强化品牌

斑斓的背景和强对比的涂鸦斑点，同样是一种引导视觉的策略，但是它更重要地是通过这种风格来营造狂野粗粝的品牌气质，帮助用户更快更直接地 Get 到品牌的独特氛围和神髓。

4. 用液态色块拼贴来传达时尚感

充满流动感的色块和斑点元素类似，同样充满了不受控制的自然气场，充满对比度的多彩配色则赋予了这些液态感十足的色彩拼贴以时尚的气质，从而营造出独树一帜的视觉体验。

5. 用渐变色气泡来营造立体感

微妙的渐变色常常能够赋予元素以一定的3D立体感，多变的气泡元素如果拥有渐变色会仿佛拥有景深和层次一般，让页面更加立体。当然，如果一开始使用动画软件来建模，渲染生成动画，那么就更加到位了。

6. 使用扁平化气泡元素渲染现代感

扁平化设计依然是目前的主流，在许多纯粹扁平化的页面中，气泡类的元素能够起到很好的点缀作用，让背景不再单调，几何感十足的气泡边缘和清爽的色彩，能够很好的赋予页面足够的现代感，干净而具有当下的时代感。

7. 作为图片载体给人独特的印象

气泡类元素本身的形体都是非常规的几何元素，因此它们相比于常见的圆形、矩形、三角形，出现的机率更低，当它作为图片的载体的时候，这种独特的视觉体验更容易给用户留下印象，四两拨千斤。

8. 用气泡动画来创造趣味性

气泡动画可以拥有冷淡的科技感，也可以软萌可爱充满趣味感，这取决于动画的设计者怎么做。在页面中使用有趣的气泡动画能够让页面更加令人亲近，让用户在加载和转场的时候会心一笑，记住你的设计。

9. 用气泡动画来构建品牌LOGO

这同样是一种巧妙地吸引用户同时宣传品牌的手法，当然，前提是你的品牌 LOGO 适合使用这样的表现方式。气泡动画富有活力，有生命力，这一点最终能够加持在品牌上，同时能够给用户留下更加深刻的记忆。

结语

有机感是近两年来比较热的一个设计方向，但是它的呈现方式并没有那么具体，而诸如斑点和气泡这样的元素是呈现有机感最常用的方式，加上新的设计工具的普及，设计师开始使用这些元素来创造富有有机感的设计。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

有了这篇文章，你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够长的时间，让用户能够注意到变化，但是同时，又不能慢到需要用户去等待。

大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页，考虑到浏览器性能和大家的使用习惯，用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度，网页中的速度会快上一倍，换句话说，就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长，用户会忍不住觉得网页卡住了。

不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注意力，那么请忘记这个规则，在这种情况下，动效可以更长。

更大的屏幕=更慢的动效？绝不是如此！

请务必记住，无论是在什么平台上，动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。

大小相同的元素，在移动的时候，移动距离最短的元素，是停止下来的。

与较大的元素相比，较小的元素运动速度应该更慢，因为相同的移动距离，对于小元素而言，位移距离和自身大小比例倍数更大，相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律，当元素运动到边界，发生碰撞的时候，碰撞的「能量」最终是要均匀分摊下来的，而弹跳的在多数情况下是不适合的，仅在特殊情况下适合使用。

△ 避免使用弹跳，它会分散用户的注意力

元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果（是的，说的就是 AE 的模糊动效爱好者们），模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项（新闻列表、邮件列表等）所使用的动效，在实际运动的过程中，项和项之间应该有轻微的延迟，元素之间的延迟应该控制在20~25毫秒之间，如果持续时间再长，可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响，匀速直线运动看起来是非常不自然的，尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征，我将尝试阐述它们的含义，以及如何使用。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物理中所学到的，坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线，表示速度是均匀的，也就是匀速直线运动，物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。

缓动加速曲线

通过曲线我们可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在下面的案例当中，我们可以看每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。当然，通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候，动效应该遵循这类曲线的运动特征。从全速进入屏幕开始，速度降低，直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下，物体从静止开始加速，到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见，每当你不知道要在动效中使用哪种运动方式的时候，可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范，最好使用不那么对称的增速和减速的过程，让动效看起来更加真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程最好进行适当的强调，换句话说就是减速过程持续的时长最好超过开始加速的时长，用户将会更加清楚地观察到运动的最终结果，从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候，最好使用这种标准的缓动曲线，这个过程中，尽量不要让动画效果引人注意，不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候，不对称的缓动曲线

当元素从屏幕上消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中，可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效，元素随着减速曲线出现，然后使用标准缓动曲线消失。根据 Material Design 的标准，新出现的元素持续的时间应该更长，因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier（）是用来描述曲线的，它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点（0，0）和终点（1，1）在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解，我们推荐两个网站，分别是 easings.net 和 cubic-bezier.com ，前者包含了最常见的曲线的列表，你可以将他们复制到你的原型工具中，第二个网站为你提供了不同曲线的参数，你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier（）的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样，动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去。

编排有两种不同的方式，一种是均等交互，另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。

在其他的设计当中，用户很难搞清楚哪个才是主要的，因为注意力被分散了。因此，如果要设置多个动画元素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象，那么其他的对象的运动方式都要受它制约，否则用户分不清楚主次。

根据 Material Design 的规定，当元素不成比例地变幻尺寸的时候，它应该沿着弧线运动，而不是直线运动，这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的，换句话来说，变化的速度也不一样。（比如，方形变成矩形）

△ 不成比例地改变对象外观的时候，运动轨迹应该是弧线的

相反，如果元素是按照比例改变大小的时候，应该沿着直线移动，这样不仅操作更加方便，而且更符合均匀变化的特征。看一下真实的案例，你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候，应该沿着直线运动

当元素不成比例放大的时候，运动轨迹是弧线，而这种弧线运动轨迹有两种不同的呈现一种，一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的（Horizontal out），另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的（Vertical out）。

那么怎么选取这个方向呢？很简单，元素运动曲线的方向，应该是要向界面的主要运动方向的主轴靠拢重合。举个例子，在下面的动效当中，整个界面的滚动方向是上下滚动，主轴是纵向的，因此，当卡片点击之后被展开的时候，会先向右水平移动，并最终以垂直运动结束，运动的最终方向，切线是垂直的，也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候，最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交，那么他们不能彼此穿越。如果每个元素都必须通过某个交点，抵达另外一个位置，那么应该次第减速，依次通过这个点，给彼此留出足够的空间。另外一种选择，是元素不相交，而是像实体一样在靠近的时候，彼此推开。为什么？因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中，元素不应彼此穿越，而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中，某个元素可以「越过」其他的元素，它同样没有穿过其他的元素消失，而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律，只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则，从某种意义上还是延续自我们对于物理世界的认知，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。如果不是这样，那么你需要让动效更微妙一点，实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍，或者转移注意力的存在。

当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。