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

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

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

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

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

当我们看到一件设计作品的时候，映入眼帘的先是配色，然后才是其他的内容，配色的好坏，直接决定了我们对这个作品的第一印象。

当然，选中一个合适的配色绝不是一个偶然的事儿，这其实是一项系统的工作，只有知己知彼，把色彩研究透了，才能运用的得心应手。

以下几个方面也许就是经常困扰你的点：

• 想要表达的设计思想不知道怎么去选取合适的色彩；
• 缺少对色彩全面的认识；
• 对配色没有一个系统的搭配方法；
• 不懂得如何提高对色彩的敏感度。

接下来，我会分几个部分，来聊一聊色彩及配色。

一、认识色彩

1. 色彩理论

开始理解色彩，必然要提到色彩三要素，色相、纯度、明度，这是最基本的概念，我就简单的以三张图概括下：

色相：指的就是红色、绿色这些色调的称呼。

纯度：指色彩的鲜明程度。

明度：指色彩的明亮程度。

而色相又大体上可以分为冷色系和暖色系。

二、色彩印象

在进行配色实践之前，关于色彩本身的理解十分重要，在理解色彩独特的性质之后，才能进一步学习更有效的配色设计技巧。

点缀我们生活的各种色彩，都具有影响人类心理、情绪、感觉的力量，下面展开介绍一些代表性的色彩印象。

1. 红色

红色既有积极的一面，也有消极的一面，在考虑如何用其他颜色去搭配红色之前，先想想想要红色在整个作品中表现什么？

属于红色的关键词有：热情、兴奋、能量、爱、华丽的、辉煌的、生命力、主动性、活力、激情、辛辣的、炙热的；愤怒、危险、攻击性的、暴力性的、嫉妒、压力、压迫感、刺激的等等。

如果想要表现红色积极性的一面，最好使用泛黄的大红色或者明度较高的粉红色系的颜色。泛黄的红色比100%红色更能够表达温暖的感觉，而在粉红色系中，泛黄的暖粉红色比泛紫的冷粉红色更能传达出积极的印象。

相反，如果想要表现红色消极性的一面，使用泛紫的红色比较好。红色和紫红色中间的色系给人冷淡、不自然的感觉。这些色彩的明度越低，越给人不自然的和消极的形象。

下面举几个红色配色的案例。

上面这幅作品，设计师想要传达出「危险」「压迫感」的情感信息，塑造一个难民的形象，整个配色以红黑搭配，更显深沉。

红色也有着「华丽感」和「刺激感」，大面积的红色做为底色，凸显出画面中的人物形象，很好的诠释优雅和成熟。

2. 橙色

每种颜色都会有某种情感偏向，而橙色的情感是非常暧昧的，这种暧昧感使得它比红色更加温和，比黄色更加老练，即它有一种中性的魅力。

属于橙色的关键词有：活跃、温暖的、喜悦、开朗的、朝气蓬勃的、明快的、跃动的、亲近的、丰收、健康的、轻快的、明朗的、朴素的、安心的、温和的；任性的、歇斯底里的、嘈杂的、廉价的等等。

同属于橙色系的色彩，实际上给人的印象是完全不同的。鲜明的橙色富于年轻感，而偏褐色的橙色更具有复古感。

下面举几个橙色配色的案例。

以大面积的橙色做为底色，搭配高饱和度的黄色，这些色彩的「温度」都很高，很好的表现出了橙色「朝气蓬勃」的感觉。

将橙色的明度适当降低，搭配上「厚重」的红褐色，很好的展现除了橙色鲜明的个性。

饱和度高的色彩难免会表现出「廉价」的气息，画面中的橙色、黄色、蓝色、紫色，饱和度都偏高，很好的展现了作品的「销售属性」。

3. 黄色

谁都无法否定黄色带来的温暖，因为它就是太阳发出的光，黄色就是光，它也被称为「光之色彩」。而作为光的颜色，黄色可以作为挽救黯淡色调的救世主，赋予画面更多活力。

属于黄色的关键词有：明亮的、集中精神的、健康的、幽默的、希望、开放感、未来、宽厚的、轻快的、幸福、纯洁、明快、知识、权威、非正式的、可爱的、繁华的；幼稚、不成熟、警戒等等。

泛橙色的黄色比原色黄更能营造柔和温暖的氛围，这种平和积极的印象更能表现亲切多情的感觉。

泛绿的黄色偏冷，给人感觉冷漠。在原黄中加入白色和黑色的话，黄色本身的明亮的光感和暖意就会消失，变成偏冷的色彩。

下面举几个黄色配色的案例。

黄色的最「暖」的颜色，它很好的体现了色彩的「轻快感」，采用黄色为主色调，使得整个画面都「明亮起来」了。

这是一个以黄色为主，黑色为点睛色的配色，使用黄色超强的表现力，和黑色这种冷色搭配表现出「强烈刺激」的对比。

黄色同时也是小朋友最喜爱的颜色之一，高明度的配色，整体呈现出「可爱」和「童稚」的感觉。

4. 绿色

绿色作为大自然的主旋律，能带给人安宁舒适、生机勃勃的感觉。同时，绿色也是一种存在感极强的颜色，虽然是最为普遍的存在，但也是很难和其他的颜色搭配。

属于绿色的关键词有：自然、和谐、平衡、健康的、和平、治疗、新鲜、安逸、安心、安定、和煦的、诚实的、朴素的、放松的、年轻的、平等、公平、安全；不成熟、带有乡土气息的等等。

自然界的绿色是多种多样的，虽然看上去都是绿色，却可以有青葱的嫩绿，松针的草绿，清亮深邃的青绿色，落叶的橄榄绿等。这些颜色各有各的感觉。

下面举几个绿色配色的案例。

绿色是最「自然」的颜色，会让人不禁想起田园和植物，绿色和蓝色的搭配，没有强烈的对比感，倒显得画面更加「朴素」。

绿色搭配黑白灰，毫无异议的显得干净利落，上图中的绿色作为点睛色，平衡了黑白的单调，而这里的白色和绿色都趋向于轻薄，因此需要用深黑，以加强色彩的力量感。

绿色与偏暖的黄色搭配时，重要的是要强调两者之中的一个，在上图中的主色为绿色，点睛色为黄色，突出强调作品中的画面感。绿色的饱和度较低，与部分黄色相得益彰地变为了背景，辅助突出了点睛色。

5. 蓝色

在很多最爱颜色的民意调查中，蓝色都是最受大家喜欢的颜色。蓝色的原始记忆来自天空的广阔和大海的深邃。它有凉爽、神秘和寂静的感觉，同时又能塑造出特别的亲和力。

属于蓝色的关键词有：稳重、镇静、冷静、爽快、清爽、清凉感、信赖感、沉着、知识性、清洁的、成功的、男性的、理性、诚实；忧郁、孤独、荒凉、悲伤的、保守的、消极的等等。

如果要强调蓝色的积极印象，越贴近绿色的蓝色越好。但是，即便纯度较低，明度高的蓝色也能表现出明朗和积极的氛围。

下面举几个蓝色配色的案例。

提起夏天，我猜你想到的肯定是蓝天、大海，明度稍高的天蓝色，搭配深蓝色，充分体现了夏天的「爽快」与「清凉感」。

同时，蓝色也是极具商务个性的颜色，很多企业都选择蓝色做为品牌色，它也代表着「信赖感」和「成功」。

「蓝色是忧郁的」，静谧的夜晚，带来「孤独」与「荒凉」。

6. 紫色

在商业设计中，紫色被认为是一种优雅高档的色彩，常用于表现商品的奢华和高贵，同时也是很多艺术家喜爱的颜色。

属于紫色的关键词有：高贵、典雅、高尚、优美、风度、尊严、干练、神秘、秘密、心性、性感的、豪华的、华丽的、改观的；不安的、悲伤、孤独、嫉妒、自负、不健康、病弱等等。

紫色带有暗色的特质，所以明度稍微低一点就容易给人以沉闷的感觉。因此，紫色在与其他色彩配色时，尽量选择明度较高的紫色。

下面举几个紫色配色的案例。

紫色是「神秘」的，紫色本身是「冷暗」的颜色，所以与纯度高的色彩配色会强化紫色的冷暗感。

要用紫色来表现优雅、高贵等积极印象时，要特别注意纯度的把握。这种情况下，低纯度的暗紫色比高纯度的亮紫色更能传达积极的印象。

紫色靠近蓝色，所以紫色也有带有「孤独」和「悲伤」的调性，蓝紫色系的紫色更容易传达消极的感觉。

7. 白色

提起白色首先想到的纯洁，给人干净的感觉，它不会有强烈的个性，但是白色是永远的流行色。

属于白色的关键词有：清洁、纯净、清澈、正义、善良、和平、净化、诚实、胜利、真实、简约；空虚、变幻无常的、孤独、失败、离别、死亡、寒冷。

无印良品的产品一直注重「纯朴」、「简洁」、「环保」、以人为本等理念，在包装与产品设计上皆无品牌标注，但是却让人牢牢的记住了它。

大面积的白色显得「空虚」，加上蓝色的点缀，画面更显得「孤独」和「寒冷」，将白色的负面情绪表现的更淋漓尽致。

8. 黑色

当所有的光线都被吸收了，感觉就是黑色， 是一种具有多种不同文化意义的颜色，和白色一样也是永不过时的颜色。

属于黑色的关键词有：严肃、厚重、威严、神秘、高级感、充实、富裕、正式的、时髦的、硬的、重的；收缩、黑暗的、阴郁、邪恶、黑夜、恐怖、压抑、绝望、死亡、自卑、不安。

在画面中以黑灰色为底色，加上磨砂质感，突出了自行车的「高级感」。

黑色的背景加上压暗的人物形象，一种「力量感」油然而生，人物的形象也是凸显了整体画面的氛围。

总结

颜色无所谓美丑，我们对于颜色的判断完全是一种主观的经验，这个作品配色的好坏，并不是取决于这个颜色的好不好看，而是这个颜色适合不适合这个作品要传达的意境。

我们必须摒弃旧有的对颜色的判断，排除自身受到的社会文化的观念影响，从一个全新的眼光来研究色彩。只有在充分了解每一种颜色的色彩印象，才能消除你对配色的迷惑与不安。

蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

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

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

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

清晰思考

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

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

哲学

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

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

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

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

与媒体的深层联系

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

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

一个好网站的定义

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

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

蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

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

筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时，通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏，本文暂不分析。

组件包括筛选按钮与筛选器，筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。

01

位于 Tab 栏的筛选组件

组件样式

筛选按钮位置：一般位于Tab栏最右侧视觉薄弱区域。

筛选器形式：点击按钮，筛选器以抽屉形式从Tab栏底部向下展开筛选条件，或以浮层形式从屏幕最右侧向左滑出筛选条件。

样式分析

当界面使用Tab栏时，已为内容做了第一层筛选，多数情况下已满足用户对内容的筛选需求。

当筛选类别较多且复杂时，就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低，屏幕右侧为视觉薄弱区域，这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。

案例一

案例来源于美团App

此页是对美食品类的选择，这里的筛选组件在Tab中是最常见的样式。对于用户而言，选择商家店铺优先考虑地域、美食类别、价格及综合评价，而用餐人数与餐厅服务等只是辅助选择条件。

筛选器使用了抽屉形式，如要选择此样式，建议在筛选条件不多且不超过一屏的场景使用。

案例二

案例来源于淘宝App

当用户从首页全局搜索后，出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后，由于筛选条件较多，很难一页展示完，用户往往需要上下滑动屏幕查看全部，因此使用右侧浮层展开的形式较适合。

案例三

案例来源于哔哩哔哩App

全局搜索后，Tab栏默认展开综合tab内容，用户对排序、时长、分区的筛选需求较高，因此直接把筛选类别放在了二级Tab栏，相比通过点击筛选按钮再展开类别的交互方式更简单直白。

点击筛选类别后，筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少（不超过4项），筛选项数量不多的场景。

02

底部按钮型筛选组件

组件样式

筛选按钮位置：以按钮或浮层形式固定在界面底部，便于用户操作。

筛选器形式：点击按钮，筛选器以抽屉形式从按钮底部向上展开筛选条件，或以界面浮层形式从底部向上展开筛选条件。

样式分析

使用底部筛选按钮的界面，内容区类别相对单一，通过筛选组件就能满足筛选需求，并对筛选的需求较大。而底部按钮作为常见的按钮形式，用户点击更方便，因此承载筛选组件较合适。

若使用此样式，点击筛选按钮后，筛选器的出现优先考虑从底部向上出现的抽屉式浮层。

案例一

案例来源于旅游类App Expedia

输入旅游目的地后进入此列表页，用户目的性明确，就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果，方便用户触达。并且筛选条件较多，无法一页展示完，使用了界面浮层的形式。

这里还有2个细节：

1、由于筛选类别较多，手动清除单个筛选条件太过繁琐，于是筛选器底部增加了清除按钮，操作更简便。但底部按钮一般为“确定”操作，“清除”放在底部样式上没有做误操作提示，可能会增加误操作机率。

2、筛选后，筛选按钮处会显示已选择的筛选类别数量，给用户带来良好的使用反馈。

案例二

案例来源于dribbble

当前页为地点搜索。需要先进行筛选操作，内容区再出现结果。筛选按钮位于底部浮层，筛选类别代替筛选按钮平铺展现，筛选器使用抽屉式从浮层底部向上展开。

此样式一般适合筛选类别较少，并且每个类别的筛选项不多的场景。优点是减少操作步骤，提高用户操作效率。并且可以学习一些体验细节：在筛选器中选择一个选项后，在其筛选类别处同步修改为该选项；筛选项与筛选类别选中状态一致，增加关联度。

03

浮层按钮型筛选组件

组件样式

筛选按钮位置：以浮层按钮的形式位于界面右下方，占用空间较少。

筛选器形式：点击按钮，筛选器以浮层形式为主，或在筛选按钮下方展开筛选条件。

样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间，比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时，它的位置也便于用户点击。

设计时按钮用色需要区别于内容区，内容形式尽量精简直观。若使用案例3中的扇形筛选器，则要求筛选类别为1-2类，筛选项数量少切文案精简。

案例一

案例来源于dribbble

筛选按钮位于界面右下方紧贴于右侧屏边，浮于被筛选内容上层，滑动屏幕时消失。点击筛选按钮后，从屏幕右侧展开筛选浮层，原筛选按钮变为确认按钮。

此按钮形式最大限度的让出空间留给内容区，且右下角为用户关注薄弱区，这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过，适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高，相对符合用户认知。体验细节上可学习的点还有按钮功能的改变，使得体验更便捷。

案例二

案例来源于dribbble

筛选按钮位于界面右下方但没有贴屏边，筛选器以底部分层形式从底部向上展开。这里的筛选条件不多，因此使用了底部分层形式。

案例三

案例来源于dribbble

筛选按钮形式与上一案例相似，不同的是筛选按钮处直接显示筛选条件，可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。

点击按钮后，从按钮下层展开扇形筛选器，滑动选择筛选条件。此种筛选器样式使用场景较局限，多为选择时长或数量，并且单选居多。因此筛选器不需要“确定按钮”，只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。

04

举一反三

接下来我们拿个案例练练手。

下图界面中内容区为概览与各监控数据图表，需要设计一个筛选组件对内容区进行不同时段的筛选。

在设计之前需要确定几个需求：筛选组件的使用频次、筛选类别的数量、筛选项的数量，单复选关系、筛选条件之间的优先级。

进一步明确需求

筛选类别只有时间段1项，筛选数量不固定，为多项，单选关系。当用户进入此页，根据用户使用需求判断“1小时”基本满足用户查看数据的需求，默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求，可判断用户使用筛选组件的频次不高。

方案解析

方案一，Tab栏形式

Tab是对整页的筛选，多为不同维度，而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近，但用户对筛选组件的需求并不高，放在此位置占用了概览区空间。

方案二，底部按钮形式

底部按钮位于用户的习惯操作区，放这里使用层级略高，并且会使内容区的整体高度减少。

方案三，浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域，可以使用户浏览时不受按钮影响；但按钮拥有强对比色，在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现，可满足筛选项数量较多的场景。

05

小结

以上内容是我对常见筛选组件的思考，每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息，决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。

本文作者：TXD技术体验团队-喻杰（阿里巴巴视觉设计师）

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

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

令人上瘾的数字内容，让我们一刻都离不开智能手机，从某种意义上，它彻底改变了我们的生活，工作，甚至思考的方式。现如今，越来越多的人开始尝试戒除令人上瘾的智能手机，寻找更加健康自由的人机关系。根据今天的调研，过度使用智能手机，确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初，直到10年后的现在，在数字产品上瘾和用户注意力的控制这件事情上，开发团队本身就没有放松过。这次，Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司，并且很快就出任了公司的人机交互界面组的设计总监，在2006年前后，他也是作为 iPhone 项目核心的6人团的一员，加入到项目当中来。

待在苹果的20多年时间里，他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计，直到他开始追求创造属于自己的公司和事业，才正式从苹果离职。也正是因为这样的契机，才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去，以及他留给苹果的那些遗产。

和许多设计师一样，他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息，他现在依然还不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型设计阶段，他就已经意识到了，这款产品最大的缺陷之一，就是它注定会分散甚至垄断用户的注意力。而与此同时，苹果也有意识的没有给予用户，对于iPhone 完全的控制权。下面，是访谈中能够对外公布的几个重要的内容摘录：

设计「请勿打扰」的功能

「我认为，从某种意义上来说，真正洞悉设计的设计师，大都能够预见到手机对于注意力的影响。在使用手机的时候，我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候，当我刚刚开始制作 iPhone 的原型之时，管束还不是那么多，我们当中有几个人还有幸把原型机带回家，这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系，iPhone 几乎隔一会儿就会亮一下，显示有新消息，叮叮咚咚响个不停，于是我意识到，和我们朝夕相处的手机需要一个管控功能。所以，在很早的阶段，我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事，苹果的内部产生了分歧

「其实，在苹果公司内部，想要大家都理解分心是一个影响用户生活的问题，还挺难的。乔布斯倒是很能理解的，但是公司内其他的同事，对于用户对于手机的控制权多少，其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权，不过这个事情对产品的营销和市场运作是有影响的。所以，当时内部也有声音说，如果真的给用户太多的控制权，那么这款手机就不酷了。」

「其实直到今天，iPhone 当中绝大多数的功能都是可控的，但是其中很多功能隐藏的比较深，彻底的掌控它们是比较困难的，如果你真得想让那些整天都在轰炸你的信息彻底远离，你需要花费很长的时间来摸索，用独特的方式逐个调整或者关闭才行。因此，对于那些熟练使用iPhone 的重度用户而言，确实是可以如臂使指地掌控这台设备，但是对于更换壁纸都不太会的用户，想要搞清楚iPhone ，让它如意随心，真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用，然后你不停地会收到提醒和通知，是否要授权使用相机，是否要授权获取你的位置，是否允许它给你发送通知，每个都要做决定。稍后，你可能会发现，Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了，总会有信息大半夜地推送到你的眼前，让你无法安生地休息。实际上，借助请勿打扰的功能，你可以一早上再查看它们。这套系统足够智能，能够判断出哪些应用之前就已经获得了许可，哪些仍然在后台获取数据，哪些通知实际上你并不关心。所以，这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系，手机会询问用户，你真的需要这些通知吗？或者是，你真的需要Facebook 使用你的电话簿的信息吗（因为你已经很久没有登录了）？等等。正确地设计了这套系统之后，提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情？

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量，它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨，而媒体和用户都发文吐槽，在呼声和压力之下，它们最终在iOS 12 中呈现了出来。这个局面之下，苹果没有选择的余地，必须对于舆论有回应。这对于每个人都是好事，因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品？当然算不上，因为现在的iOS系统是为了应对舆论和负面新闻而设计的，设计的意图并不对。如果是苹果主动作出这样的决策，才算得上是好产品。」

「对于苹果这种体量的大公司而言，产品设计其实复杂性非常的高。真的是这样。作为设计师，你需要服务于你的用户，你还得和公司的利益保持一致，同时，还需要对得起自己的底线和道德。服务于一个大型的企业，确实非常的难做抉择。对于用户而言，可以很轻松的直接怼苹果，说它没有做对的事情。但是身为其中的设计师，要平衡各方面的需求也压力，经常会进退维谷。有些用户因为iPhone 的一些功能，受到了负面的影响，有些人受到的影响比另一部分人更多。但是身为设计师，一个受到各方面制衡的设计师，即使是作出了改变，在很多时候也远远不够。至少在我看来，现在的改变还不够大。」

管理数字化的生活，就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起，我就用着黑色的壁纸。我不会将一大堆的东西塞进手机，减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要，或者说我推荐这么做，对于人和手机之间的关系，每个人都不一样，处理方式也都很个人。对于如何处理自己和手机之间的关系，有人让我提一些建议，我觉得没有必要，因为我的办法并不适合所有人。一天喝多少咖啡，抽几包烟，每个人的情况都不一样，没法一概而论。不过，心理健康是一件大事，你和你的智能设备之间，应该保持着平等的关系。这至少是一个大的设计趋势，是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样，你无法忽视认知压力的存在，认知设计也势在必行。」

界面设计的未来，以及不可避免的问题

「我观察到，界面设计在很自然地进化和发展着，从按钮到旋钮，从点击到手势操作，从语音交互到情感化设计，均是如此。无论是考虑到用户的情感诉求，还是进入语音交互的领域，都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题，点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互，都一定都会遭遇不自然的状况和问题，就这么简单。身为设计师，需要足够的预见性，才能真正领先于用户，预测到可能会遭遇的问题。」

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