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

 回执单的界面设计；

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

该报告是百度人工智能交互设计院基于过去一年多对AI领域前沿技术、产品和设计的深入研究和洞察，结合产业界和学术界的经验探析而来。AI赋能的人机交互革新了大众的生活形态，未来，AI加持的人机交互模式又会呈现出什么样的态势呢？

《报告》从“人机交互介质”、“交互对象”、“AI应用场景”、“人机关系”等方面总结了AI人机交互的八大趋势。

趋势一：语音交互技术进步，更趋向人类自然对话体验

研究公司Ovum预测称，到2021年，地球上的语音助手的数量会和人类一样多，人们会越来越倾向于向语音助手寻求情感上的帮助。在AI人机交互中，语音交互技术在用户终端上的覆盖最为广泛。

以智能音箱为例，有数据显示，2018年全球智能音箱市场同比增长200%。其中，中国智能音箱市场增速达到罕见的5370%。谷歌、亚马逊、苹果等全球巨头企业均加速了用语音交互技术开启大众智能生活的步伐。截止2018年12月31日，搭载百度对话式人工智能操作系统DuerOS的智能设备激活量也已超2亿。

目前，语音交互技术已经加速在智能家居、手机、车载、智能穿戴、机器人等行业的渗透和落地。《报告》指出，未来随着语音技术的不断完善，语音交互的自然度将进一步提升，并愈加趋向人类自然对话的体验。具体表现为：语音交互将从机械的单轮对话进阶到更流畅的多轮对话；合成语音更自然、真实，接近真人水平；语音交互具备听觉选择能力，提升多人对话体验；语音交互将支持多种方言，并针对细分群体进行差异化设计。

趋势二：人脸、手势等通道更多出现在产品中，多通道融合交互成为主流交互形式

媒介学家雷吉斯·德布雷（Régis Debray)曾提出：“技术能实现不同区域里不同文化的人之间的连接”。随着技术的发展，人与人之间的连接早已不成问题。当前，AI技术更是拓展了人与智能体交互的通道。除语音交互外，计算机视觉技术的发展已使得智能体实现了通过识别人脸、指纹、面部表情、肢体动作等人体信息，而更加快捷多元地与人类进行交互。但是不同的交互通道在有其独特优势和场景适用性外，也有一定的局限性。

《报告》认为，未来，人与智能体的交互将融合语音、人脸、手势、生理信号等多种方式，为人类打开更多的交互空间和应用场景。具体表现为：人脸检测及识别聚集更细维度的面部特征，拓展更多的交互空间和场景；空中手势交互将成为新热点；触控、语音、手势、人脸最有可能成为多通道融合的主流通道；生理信号、触觉、嗅觉等也将成为辅助通道融入多通道交互中。

趋势三：智能体开始拥有明确的人设

近期，明星“人设”崩塌已成大家茶余饭后的热门话题。但是你想过，智能体也将拥有明确的“人设”么？《报告》认为，未来，用户可以更加明显地感知到智能体鲜活的“人设”。

所谓智能体的“人设”是指，用户在与智能体的互动过程中，根据感知到的综合特征推断出一种具有一致性的角色形象，一般由性格（如外向、善良等）、关系（如助手、朋友等）和基本属性（如性别、年龄等）构成。《报告》指出，目前，智能体人设的设计和表达主要聚焦在语音（如音色、语调等）和语言层面（如表达方式），并且通常局限在部分场景、部分话术上，缺少一致性和全局感。

《报告》提出，未来，智能体人设将从语音、产品外观、虚拟形象等多维度进行设计，甚至聘用编剧设计具有统一形象特点的话术，利用混合现实（MR）、全息投影等技术将人设具象化，让用户在不同场景下均感受到智能体一致、明显的人设特征。换句话说，未来，智能体的人设会具有很明显的特征，但不会轻易崩塌。

此外，《报告》还认为，打造用户喜爱的人设也将成为企业在市场竞争中形成差异化、吸引更多用户的重要方式。

趋势四：智能体在被动交互外，开始出现主动交互行为

技术的发展虽然革新了我们的生活方式，但是长久以来，人机交互一直延续着人类“输入”，机器“反馈”的循环模式，人类始终是主动的，机器始终是被动的。

《报告》认为，人工智能赋予了机器情境感知和自主认知能力，使我们有机会构建机器主动服务于人的交互模型。智能体出现主动交互行为的具体表现为：主动交互越来越“贴心”；主动交互在“家”和“车”的场景下率先商用落地；主动交互将提升公共场景下人机协同的效率。

趋势五：智能体开始拥有情感判断及反馈智能

2014年在北美上映的动画片《超能陆战队》中的机器人大白，以对主人公关怀备至的暖萌形象收获了大批影迷的喜爱。观影后的每个人都希望自己能够拥有一台如大白一样忠心耿耿又温柔体贴的机器人。令人欣喜的是，具有情感判断和应对能力的智能体正逐渐成为现实。

过去20年，在人机交互中，机器基于表情、文本等方式的的情感识别能力已有很大的提升。目前市面上出现的如情感陪护机器人、智能音箱、智能汽车等已经初步具备一些情感识别能力，可以根据不同的场景、对象，进行适当的情感交互。

《报告》指出，未来，情感计算技术的提升及硬件升级将赋予智能体在“视”“听”等方面更强的情感识别能力；同时智能体对于人类思维理解、情景理解能力也将更加完善，情感交互能力将更智能、更体贴。

趋势六：AI对特定人群的关怀得到快速发展和应用

人机交互的发展为儿童、老人、残障人士等群体更便捷地利用机器获得服务，提供了充分可能。当前市面上已经出现大量针对儿童教育的AI产品。搭载DuerOS的小度智能音箱也针对以儿童为中心的家庭语音互动需求，特别开发了儿童语音识别引擎，并定制儿童语音播报音色及对话逻辑，陪伴儿童一起成长。在养老领域，为老人提供陪聊、提醒等陪护服务的智能产品也被AI企业提上了日程。此外，少数AI产品也开始专注残障、病患等更加细分的人群，如2018年11月，百度推出了AI眼底筛查一体机，帮助患者快速筛查眼底疾病，为基层医疗带去了极大的便利。

《报告》提出，未来，AI对人类的关怀将得到快速发展和应用，覆盖更加细分的人群和更深入的场景。为儿童，AI将从易于交互到提供心智陪伴的服务；为老人，AI将缩小他们与科技的鸿沟，助推他们开启品质生活；为感官残障人士，AI将帮助他们重获对世界的立体感知；为特殊疾病人群，AI将提供预测、诊断和康复服务。

趋势七：智能设备互联互通，多场景衔接

以BAT为首的互联网企业，在2018年纷纷调整组织架构，转向To B。巨头重提产业互联网战略成为当前市场新现象。此现象背后，正是AI、5G、云计算等新兴技术的发展与升级。2018年的政府工作报告，进一步强调了“产业升级的人工智能应用”。“产业化”和“应用化”成为未来几年人工智能的两大发展方向。

《报告》指出，随着AI技术的进一步成熟和落地，及其与大数据、IoT的结合，AI将从单品智能、独立场景到互联智能，场景融合进阶。智能设备将互联互通，场景将进一步融合，实现多场景衔接；VR/AR将促进线上和线下、虚拟和现实的联结，未来，VR会加速拓展到更多的产业和实体，AR中的现实与虚拟将从简单叠加到有机融合，实现用户可以源自自然意识进行人机互动。

趋势八：人机开始走向深度协同，信任构建成为首要突破点

2018年6月，百度研究院发布并开源“神经条件随机场”的AI算法。该算法拥有强大的肿瘤病理切片检测能力，可以大幅提升医生阅读病理切皮的效率和准确率。人机协同即，通过人工智能增强人类智能，让人工智能成为人类智能的自然延伸和扩展。

目前，人机协同已在工业领域初步实现，而随着智能体从工业生产领域向商业服务、社会服务和家居服务领域拓展，人机将走向深度协同。《报告》认为，人机深度协同可以最大化发挥双方优势，实现合作共赢。

而人们对AI的信任，是智能体全面进入人类工作和生活，实现真正人机协同的前提。即，信任构建成为了实现人机深度协同的首要突破点。与此同时，AI伦理道德将更加细化，成为所有从业者需遵守的行业准绳。AI行业的发展在带给大众便利生活之时，避免算法歧视、保护人类隐私、尊重人类价值等也变成了从业者们亟需重视的问题。

最后，《报告》指出，AI时代的人因工程是一个真正的系统工程。而每个人机交互行业的从业者都需要拥有AI思维。最重要的是，中国的人机交互设计和研究者们将首次和发达国家站在同一起跑线上，我们有机会去定义这些体验标准，而不再是追随或遵守。

AI时代大门缓缓开启，属于中国和中国企业引领世界前沿的新时机已到来。

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

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

分享车内交互界面设计

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

之前听一位同学在公司看国外作品学习的时候，公司的一个老员工发现了，就过来语重心长地和他说，你看这些东西没用的，学不到东西，就是在浪费时间等等，类似这样的话说了一堆。听到这个话题的时候就特别的亲切，因为在开始接触设计的时候，和那位老员工的想法一样。但是随着对设计的理解越来越深，接触的项目多了以后，这种想法慢慢就淡化了。

其实新人对研究国外作品这件事存在误区是很正常的，毕竟应用的文字不一样，内容多数我们也看不懂，把时间花在这上面给人的第一感觉确实有点不合适，哪有直接去看国内的作品来得过瘾。我们暂时抛开作品的数量与质量不谈，来聊聊这个话题。

我们平时在工作中完成的作品，里面基本都会包含文字、图片或图形、色彩这几种基本元素，不管你做的是海报、logo还是画册都离不开它们，比如纯文字类型的海报、公告、条幅。

纯图片形式的灯箱、画册、展板、品大片。

纯图形的UI图标、布展装饰、logo徽章。

包括纯颜色的手机屏保、背景墙之类的设计，这些基本的设计元素，会在设计作品中单独出现。

而更多的设计作品都是这几种元素同时出现的结果，这些海报中，文字、图片、图形、色彩这几种元素都占全了。注意，这些海报用的都是中文，属于国内的海报对吧？也能够在这上面学到一些东西，那我们换几张国外的作品看看，有什么不一样的地方。

日本的、欧洲的等等都是优质的设计作品，我们可以来分析一下这些作品，风格、技法、表现形式暂时可以抛开。

构成他们的元素和国产海报有什么区别？都存在文字、图片、图形包括色彩，唯一的区别就是上面说的，不同的国家，使用的文字会不太一样。那么这种文字上的差异真的会影响到我们对这个作品的研究、欣赏吗？

答案很明显，不会的。了解一些构成知识的同学都知道，构成版面的基本元素就是点、线、面，而文字、图片、图形包括色彩，他们在版面中整体来看，本质上就是点线面的具象表现。那我们在欣赏这些作品的时候，完全可以把文字看成是点线面的存在，这样的话也就没有必要纠结他用的是哪个国家的文字了。

像这张国外的海报，我们把这里存在的视觉元素标注出来，他们本质上就是这些东西。

国内的也一样，如果你看到的是这些东西，还需要纠结这是哪个国家的作品吗？

版面中的所有视觉元素，都可以看成是点线面的存在。

来做一组实验，这张英文海报，我们把这里面的英文，替换成汉字。前后对比一下，海报的整体感觉，基本没有出现什么变化。

再换一组，感觉基本一致。

再来一组，这回我们把英文替换成日文。类似这个版面构成的形式，我们把文字替换成英文、汉字，变化也不会很多，依然很美观。我们研究、学习、欣赏优秀作品的时候，一定不能受到类似「看国外的设计没用」这类思维的束缚，不然的话你会错过很多的。

不光从构成的角度看这个问题是这样，其实从设计发展的角度来看，也能得出同样的结论。因为现代设计教育的起源来自德国的包豪斯，后来包豪斯的理念传到了美国，又通过美国传遍了整个世界。包括我们现在学习的平面设计体系，都是一脉相承的。从这个起源的角度来看，也不存在国内、国外那么大的差别。都是一个门派的，只要做的好，那看谁的都一样。说了这么多，应该能看出来，我们是鼓励大家去多看优秀作品的。那么坚持做这件事，又能得到什么呢？下面就来说一下，为什么要养成欣赏优秀作品的习惯？

欣赏优秀作品的习惯

先来看看这个习惯能给我们带来的好处有哪些。

1. 提升审美

长时间欣赏优秀的作品，会对我们个人的审美能力有质的提升，帮助我们开阔眼界。眼高手低虽然是个贬义词，不过这对于正在成长的我们来说是好事，最起码能让自己对自己的能力有一个比较清晰的认知，知道自己做的不够好，这样会有动力不断的鞭策自己学习新的东西，把专业做到更好。

2. 培养兴趣

如果我们对这个行业没兴趣的话，就算你再有设计天赋，也很难做好的。坚持看优秀的作品给我们提供持续的刺激，说不定哪幅作品就非常合你的胃口，勾起你的兴趣，让你花时间去研究。

3. 利用碎片化的时间学习

平时都很忙很累，再懒一点，就没什么完整的时间学习。这个时候如果能把碎片化的时间利用上，我们坐地铁、坐公交、午休、睡觉前，包括上厕所的时候都是可以通过欣赏这些优秀的作品提升自己的，这也是一个提升学习效率的习惯。

4. 为设计提供灵感和参照

这也是最重要的一点，不知道你有没有一接到项目，大脑就一片空白的感觉，是因为你干活干的太少的原因吗？不一定，有不少人每天不停的干活还这样。其实出现这种状况的主要原因就是看东西看的太少。很多好的形式我们见都没有见过，怎么可能有印象，没印象就更不可能把他们应用到我们平时的工作中了。

所以说，我们想有好的想法、无尽的灵感，必须通过看优秀作品这个成本低、见效快的方式来提升了，并且通过我们持续不断的积累，得到的东西会越来越多，这是一种可以不断提升自己的方式。

当然了，欣赏优秀作品也是有方法的，走马观花的看一大堆，最后能得到的可能只有审美的提升。就是感觉自己周围的人做的东西都是垃圾，轮到自己做，发现自己也很垃圾。那为了避免这个悲剧发生在你的身上，下面分享一些欣赏优秀作品的正确方法。

如何欣赏作品

我们欣赏作品的场景主要有两种，第一种是有目的、有针对性的去看；第二种是没有针对性的看。这两种场景要看的东西差不多，细节上会有一些差异，我们先来了解一下有针对性的。一般来说，有目的有针对性指的是我们接到了具体的项目，但是这个项目以前没有接触过，需要了解一下别人都是怎么做的，然后带着问题去寻找答案。

先从项目要求入手，就是看看你做的内容是关于什么的，比如你要做日本寿司海报，就去搜集这方面的作品。有些同学在搜索的时候很实在，要做关于寿司的海报就专门去找日本寿司的作品，这种方式的缺陷特别明显，如果你要做的这个项目品类能找到的优秀作品很多还好，不过多数情况下，优秀作品是不那么好找的。这个时候把思路打开，选择的余地就会大很多。

比如把日本寿司海报这个关键词缩减成日本料理海报，优秀作品的数量会成倍的增加。

或者你要做的是海报，那我们搜索的时候除了海报，还可以找日式的包装、画册。

网站、插画等等作品，都会给我们带来很多的思路。

数量的问题，这也是我们推荐看国外优秀作品的一个原因，光去找中文的作品，在一个小品类里，很难找到足够多的优秀作品，一般的东西又没有什么学习的价值，这时候加入国外的东西会让我们的选择余地更大、思路更广。我们在搜集作品的同时，连带关于项目的一些图片、文字材料都可以一起搜索，这样能帮助我们更深的理解这个项目，学到更多的知识。

其实学习这个行为不是非得上学、看书才能学，我们设计师在接触各种项目的时候，通过与客户沟通和查阅项目相关资料的过程也是在学习，而且我觉得这种学习方式比我们单纯的去上学读书更深刻、实用。学到的东西也是在工作中甚至生活中用得上。

在找到这些优秀作品以后，就可以尝试去寻找这些作品共同的规律。

比如文字，如果文字属于同一种题材的设计，就算是不同国家的作品，我们也会在里面找到一些共同的特征。比如这些关于食品的字体，都会表现出属于食物的那份圆润的特征，这就是一种规律。这些规律性的东西总结出来，就可以尝试应用到自己的作品中。这个是学习大的规律，在这个大规律的基础上，再去关注这里面的一些小的细节。想做好东西，稍小的细节也很重要。

再比如文字组的形式。文字的主要作用是传递信息，那么如何、美观的把文字表现出来就要靠文字组了。一款作品做的是否优秀，通过观察文字组的处理是否细致，很容易看出来。信息的层级关系需要文字组来表现，主标题、副标题、段落文字、时间、装饰性的文字等等，这些文字可不是随便扔到版面中就行了，它们都是通过设计师的处理，以文字组合的形式分布在版面的各个位置。

这里面每一个文字组合都是一个小的个体，比如很常见的日期的处理方式就有很多，像这张海报里日期文字组合的处理方式。

我们看到了觉得这个形式不错，就可以记下来。那这些处理方式我们见过了，遇到合适的项目，换一个字体，或者调整一下数字，就能应用到自己的项目中了，这些组合形式，你没看见、没有印象，自己拍脑袋是很难想出来的。

包括这种产品或图形的表现排列形式，在做画册、杂志、头图、详情页、海报、展板的时候经常会碰到。

自己排不好的话，就可以借鉴这些作品的形式和规律，再上手就轻松多了。如果你想做的是logo设计，也可以去观察优秀作品的细节，比如字体与图形的比例、文字与图形的间距是多少、文字与文字的间距如何控制，包括别人的创意点在哪，这些东西都是可以在别人的作品中学到的。

△ 《高手的平面课堂！解锁LOGO设计新技巧》

就像异形同构这篇文章，你看到了这类作品，就能回忆起这款 logo 使用的是异形同构中的边线同构这个方式设计的，这种方式有哪些特点？如何能设计出类似的作品？教程里都讲过了，这样又把之前学到东西巩固了一遍。

△ 《平面设计中，如何通过“抄袭”优秀的作品成为高手？》

包括你看过的作品，他们的网格是怎么划分的。使用的是什么样的字体、构图如何都可以作为我们思考学习的方向，关于这几点的详细内容，在之前的文章里很细致的讲过，没看过的同学可以去看看。

如果是没有针对性的看作品，和上面的思考路径是一致的，只不过是利用碎片化的时间来学习而已，更灵活一些，可以快速浏览，也可以观察细节。如果你有收藏整理这些材料的习惯会更好，拿出来就能用，收集整理的越多、越细致，以后工作起来越轻松。

案例演示

所谓的创意就是我们把不同的元素重新发散、打散、重组呈现的过程。能够保证有想法、思路的前提就是见识，要见过很多好东西，有了很深的印象以后才能凭借这些印象，学到的东西设计成新的、属于你自己的作品。下面给大家演示一遍，我们看多了优秀作品以后，再去做设计的时候会发生什么变化。

比如我们要用这些材料来设计一款网页头图。

看到这些材料，可能会想到以前在哪见过，类似这种左右放置的图配文形式。

产品价格的处理方式见过这样的。

文字的形式全部使用黑体和无衬线字体，很多作品都是这样处理的，放在一起很和谐。

还见过所有的文字组，都以左对齐的形式进行排列的作品。

只要有印象，我们在设计的过程中就会下意识的往这些方向上靠，设计出的作品也会接近前面的那些规则。

在这些规则影响的基础上，如果我们还见过衬线体搭配无衬线体的作品，图叠字的形式，也能做出接近的风格作品。

同样内容，不同的表现形式。你看过的优秀作品越多，选择的空间就越大。

我们再来看这个案例，一张艺术展的海报。

整体的骨架是这样的，这种骨架布局的方式来自于左边这个案例，类似的形式有很多。

主体文字组合的结构是因为见过类似的组合方式，在文字量近似的情况下，我们的文字组合也可以设计成类似的形式。

如果说我们设计的这个文字组合之间，距离稍远，也有很多的作品会使用线的分割来解决这个问题。

包括其他文字组合的布局方式，也是参照这种轴线式的排列方法。文字使用的是宋体搭配西文衬线体的方式，中文的宋体和西文的衬线体具有类似的笔画特征，基础文字的统一性能够得到保障。

将和主题相关的照片填充到划分好的网格中，这里面使用的照片是同一张照片的不同局部，这种对照片重复的处理方式也很常见，在给版面增加变化的同时，也会制造出一定的故事性，引发受众的联想。

一张海报从无到有的创作过程。

想设计出不错的作品，没有大量的积累，对优秀的作品没有印象是肯定行不通的。

总结

怎么样，是不是觉得多看看优秀的作品还是有用的？不管是国外的、国内的都一样能学到很多。类似我是做电商的，看印刷品的设计没用；我是做包装的，看版式的作品没用；我专门做商业项目的，看艺术类的项目没用；我们公司是做金融产品的，那看其他行业的东西都没用。遇到这种言论，我们可以冷静的思考一下，是真的没用，还是这个人，他不会用。

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

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

 排行榜干货集合。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

图片相较于纯文字具备更强的视觉性，所以选择合适的好图片就至关重要，下面为大家介绍三种思路。

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

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

为什么你的设计看起来很乱？在此之前我们先了解一个概念，我们怎样看这个世界？

我们通过眼睛看世界，眼（又称眼睛，目）是一个可以感知光线的器官。那么结论来了，我们看到这个世界，其实本质就是看到了光。举个例子，晴空万里时我们可以看到很远很远的距离，反之在漆黑的屋子里，我们什么都看不见。

我们再来了解第二个问题，眼睛是怎样成像的？眼睛通过调节晶状体的弯曲程度（屈光）来改变晶状体焦距获得倒立的、缩小的实像。简单来说，成像原理就是晶状体来改变焦距，简单一点解释决定成像的重要因素是焦距。

你的设计看起来很乱，往往在这几个方面出了问题：

• 明暗关系紊乱；
• 视觉焦点不明确，画面没有重点；
• 颜色杂乱，毫无章法。

明暗

明暗是指画中物体受光、背光和反光部分的明暗度变化以及对这种变化的表现方法。明暗分亮面，灰面，暗面，以及明暗交界线，反光五大调子。单个物体明暗关系，暗部（反光，投影）＞灰面＞亮面。整体关系，靠近光源暗部＞远离光源……画画核心画的是光，遵循光照的自然规律即可。

去色检查画面明暗关系

从上至下三张图依次是去色之后的黑白图；运用色相和饱和度给画面赋予一个颜色的单色图；原图。

从下图可以粗略得出结论，明暗（光源色）+固有色=色彩。调色之前先处理明暗，画面颜色处理起来就非常简单了。

最近火爆的国产硬核科幻片海报，即使去掉颜色，黑白关系依旧明确清楚。好的设计即使没有任何颜色，依旧是一副好的素描画。我所理解的明暗关系与色彩的关系相当于人体与衣服妆容的关系，对于一个美女是否漂亮，衣服妆容的搭配是你能达到漂亮的上限，然而你的脸型，身高，气质，皮肤才是你能达到的惊为天人的基础。

视觉焦点

视觉焦点究其概念，是让我们的视线多停留几秒的视觉元素，我们在画面中第一眼就能看到的元素，画面中的「主角」。

对画面的视觉漏斗进行分类：

• 视觉焦点：想看不见都很难，表现突出；
• 重要元素：不经意就能看见；
• 辅助元素：仔细看看也能看见（类似买理财产品的最右下角的小标注，「投资有风险，理财需谨慎」）

高斯模糊法看视觉焦点

眯着眼睛看形，睁着眼睛看细节。把画面模糊调到一定程度，然后看画面，如果画面仍然能看清楚「主角」，那么画面的视觉中心就是可以的。下图画面即使模糊了，我们依然能看清「男主角」沈腾以及飞驰人生四个大字，虽然原图背景复杂以及其他装饰物很多，依然不影响画面的整体协调感，元素多且杂而不乱。

这上面的两个例子看出，即使画面模糊了，还是能清晰看到画面表达的主题。那么模糊度多少合适呢，一般调整到上面所说的视觉漏斗中重要元素看起来刚好模糊到看不清就可以了。

色彩

色彩是附着在物品上由于光的照射产品漫反射的颜色，可以粗略按色彩元素分为光源色，固有色和漫反射产生的环境色。按照长期的实践经验来看，通常比较和谐的配色方式是除了产品的固有色之外，尽量把光源色和环境色统一在三种颜色（黑白灰不算颜色）之内，颜色比例尽量类光源色的主色调占据画面百分之八十的面积，其他环境色作为补充。

色彩插件检查配色

谷歌插件 palette.site 能分析出画面颜色的状态以及画面中几种主要的颜色，借助这个插件能很轻松检查画面是否超过了3种颜色（黑白灰不算颜色），如果超过三种颜色，那么页面就需要做减法，或者将颜色统一在一个色系里，用明度以及饱和度区分。

插件的使用方法：可以直接使用浏览器下载，然后也可以在浏览器中选择一张图片，右键「在新标签中打开图片」，然后再「点击右上角的插件按钮」分析颜色状态。

从上面的两个案例中可以看出，两个 banner 的颜色分析基本都在三种颜色以内，特别是下面的看起来比较复杂的颜色，总共分析的颜色也就红黄蓝，其中蓝色还是点缀色的存在。

今天的内容就说到这里了，我们回顾一下重点内容，解决画面看起来很乱可以有以下方法：

• 去色检查画面明暗关系
• 高斯模糊法看视觉焦点
• 色彩插件检查配色

设计虽没有近路，但可以少走弯路。

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

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

刚入行的新手设计师容易出现一个问题，接到需求就开始设计，最后出现的界面和原型几乎一模一样，唯一的区别就是上了色，加了图片和图标，最后提交审核时老板反馈，“这个界面看上去太“平”了，你在这里加个背景色吧；这个图标太小，你再放大一点；这个位置你在加点装饰……”。

这主要原因还是界面没层次导致的，虽然老板对设计不太清楚，但是关于业务逻辑我们的设计稿是否表达清楚，重点是否突出这个他最清楚了。

那么如何才能提高界面层次呢？我们可以从两个方面入手，在设计前我们需要考虑突出内容层次的方法；在设计中需要考虑突出视觉层次的方法。

目录

一、突出内容层次的方法

• 将相关联的元素进行组合

• 确认内容优先级，将优先级高的放在前面

• 确认重要内容，将其差异化设计

二、提高视觉层次的方法

• 利用线、面、留白将模块进行分割

• 利用大小、投影、背景图突出视觉层次

• 利用颜色对比提高视觉感受

• 利用文字对比提高界面的可阅读性

  
  

  
  

一、突出内容层次的方法

当一个界面信息量比较大时，层次感好的界面用户进来能快速的获得想要的信息，同时最终达到产品的目的。而层次感差的界面用户看半天也不知道要做什么，看一会也就走了。因此良好的视觉层级是界面成功的关键。在设计前我们需要将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，并将其差异化设计。

1.将相关联的元素进行组合

在设计前，产品原型图已经将我们的元素进行了分类组合，但是他们更多的是考虑逻辑、功能上的层次，而如何有一个清晰的内容层次呢？设计师可以利用《格式塔心理学》中的接近性原则将相关联的元素组合在一起，不相关的拉开距离，同时形成一定的规律和节奏，这样会让用户阅读起来更轻松。

需要注意的是，界面中的间距需要满足一定的规律和节奏，比如模块之间的间距大于标题到内容的间距；在内容中不相关联的内容间距大于相关联的间距，如下图所示。              

     

天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。

京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。

2.确认内容优先级，将优先级高的放在前面

将相关联的信息整理之后就需要确认模块的优先级了，由于用户的浏览顺序是自上而下的，因此我们需要将优先级高的模块放到前面。

那么优先级如何判断呢？大家可以从三个方面去考虑，第一是遵循用户的浏览习惯；第二是用户想看的内容；第三是产品想要用户看的内容，如下图所示。

天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。

京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。

3.确认重要内容，将其差异化设计

在设计时我们需要知道，优先级高的模块不一定重要程度就高，因此我们还需要确认模块的重要层级，同时利用背景、布局等方式进行差异化设计，用起用户注意，如下图所示。

网易严选中的新人专享礼和品牌制造商直供就采用了差异化设计，职工类模块采用的是普通的宫格式布局，新人专享礼采用添加背景的方式，加深了模块的纵深感，对比其他模块更加突出。

大麦网中的特色模块和其他模块也采用了差异化设计，特色模块采用拼图的方式设计，其他模块采用列表的方式进行设计，用户进入页面首先就能够看到这个模块，提高用户接受信息的效率。

土豆视频个人主页的列表部分也采用了差异化设计，消息提醒、我的收藏、观看记录、我的缓存这四个用户常用的功能采用宫格式布局，其他不常用的我的会员、客户与反馈、设置采用列表式结构，这样也能够提高用户操作速度。

二、提高视觉层次的方法

当然内容层级确定了显然不够，我们还需要考虑突出界面的视觉层次，这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢？在设计中，我们可以利用线、面、留白将模块进行分割；利用大小、投影、背景图等突出视觉层次；利用颜色对比提高视觉感受；利用文字对比提高界面的可阅读性。

1.利用线、面、留白将模块进行分割

大家记得在设计前我们已经对界面中相关联的元素进行了组合，组合之后就可以利用线、面、留白的方式，将不相关联的元素进行分割，提高界面的视觉层次，从而提高用户的浏览和操作效率。

线分割：是最为基础的分割方式，其优势是占用空间小、分割感弱，多用于列表、Feed流中。需要注意的是，分割线颜色设置需要非常浅，避免模块之间强烈的分割感，比如橘子娱乐的列表就是采用若隐若现的线，让列表中的内容更规整。

面分割：也可叫背景栏分割，其优势是占用空间小、可操作性高，同时能够更好的区分不同模块之间的关系，多用于模块和模块之间的分割，比如转转个人主页的模块采用面分割浏览性更强。

留白分割：是iOS11发布之后兴起的以留白或间距的方式进行分割，其优势是无强烈的分割感，界面清爽，多用于比较有规律或以大图为主的模块之间的分割，比如转转主页下方的卖二手还钱、买实惠好货等，其内容部分都较为规则，采用该方式较为合适。

2.利用投影、大小、背景图突出视觉层次

为了突出界面的视觉层次，我们还可以通过投影、大小、布局等增加界面的对比，从而突出重要信息。

投影：是界面对比较常用的一种方式，其优势是提升界面的空间感，改变视觉次序，通过投影大小的变化还可营造不同的空间关系，多用于卡片风格的设计中，比如Keep均是采用卡片风格的设计，添加投影后让界面视觉层次更突出了。

大小：是大众最为熟知的对比方式，其优势是通过大小对比能够很快的拉开视觉层次，同时能够很好的引导用户浏览路径，比如ofo黄色的大按钮远远都能看见，该页面就一个目的扫码用车。

背景图：往往不如投影和大小常用，但是它的使用可以将模块从其他样式中年凸现出来，多用于banner、推荐等重要模块中，比如美图秀秀的推荐模块，该模块可以说是美图的核心模块。

3.利用颜色对比提高视觉感受

颜色是最容易感知到的对比方式，通过颜色我们可以明确哪些是重要信息，在使用中我们可以通过色相、明暗、饱和度上进行对比，其多用在按钮、重要信息、导航、背景板中。

自如首页上的租房、服务、旅行采用对比色进行强调对比，进入页面用户就能够清楚这三块是是界面的核心功能，同时引导用户关注右侧的具体服务信息。

淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比，很容易引起用户的注意，让用户看一眼就知道如何操作。

招商银行首页中的话题PK采用对比色进行强调对比，很容易引起用户操作的兴趣。

4.利用文字对比提高界面的可阅读性

文字的层次感往往和字体大小和明暗有关，其中字体大小是提高文字信息层级的重要手段，在文字排版中如果文字之间的层次不清晰，那么一定是大小的对比不够，在UI中字体大小对比往往在4-8px较为适合，如下图所示。

当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息，弱化次要信息，从而提高界面的可阅读性，如下图所示。

在UI设计中我们往往都设定了字体规范，这样不仅能够达到设计统一，同时也有很好的对比性，常用字号为40, 36, 32,28,24, 22(px)，比如优酷的星球页面，通过字体大小，颜色深浅的对比，让用户首先看到重要信息，弱化次要信息。

三、总结

在界面设计中为了降低用户的理解成本，突出重点内容，让用户使用起来舒适，就需要有个清晰的内容层次和视觉层次。

在设计前我们需要考虑将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，将其差异化设计。

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

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

Tooltips并不新鲜，但它们仍然被误用。

定义：Tooltip是当用户与图形用户界面中的元素交互时出现的简短、信息丰富的消息。Tooltips通常会在两种情况下出现，鼠标悬停时或键盘悬停。(以防万一你不知道键盘悬停是什么: 为了使用页面中激活的元素，用户通常需要用鼠标移上去或使用键盘上的tab键切换上去。键盘悬停指的是保持键盘聚焦在同一个元素上一段时间。)

工具提示(Tooltips)可以依附于页面中任何激活的元素（图标、文字链接、按钮，等等）。它们为配对的元素提供描述或解释。因此，tooltips与界面中的元素相关联并具有特定性，并不会用它来解释大图或整个的任务流。

有一个很重要的地方是，tooltips是用户触发的。因此，在页面中主动弹出来告知用户新的功能或如何使用一个具体的功能的提示不是tooltips。

由于tooltips是由悬停手势触发出来的，他们只能在设备上通过鼠标或键盘触发。在触摸屏上通常不可用。（将来，tooltips可以在眼控设备上触发，当用户将视线聚焦在界面某个特定元素一段时间便可触发）

Tooltips vs. Popup Tips

尽管tooltips主要是限于桌面电脑和笔记本，但是在触摸屏上，它们还有一个类似姊妹元素：popup Tips。Tooltips和Popup Tips都有相同的目标：提供有用的、更多的内容。下面这个表格展现了二者主要的相似点和不同点。

本文将重点介绍tooltips及其在桌面网站上的使用。

Tooltip使用指南

1.不要在任务的关键信息处使用tooltips

用户不需要找到工具提示即可完成任务。当Tooltips为一些用户不熟悉的表单字段提供额外的解释，或者解释一些看起来不寻常的需求时，它是最好用的。请记住，tooltips会消失，因此指令或其它可直接操作的信息，比如字段需求，不应该出现在tooltip中。（如果是的话，用户就不得不在他的工作记忆中记住，以便顺利使用）

Don't:

Amtrak网站将密码要求放在Tooltips中（通过鼠标悬停访问）。这类信息对于用户成功完成“创建账户”流程至关重要，因此应始终显示在屏幕上。

Do:

FedEx使02-用tooltips为运输表单字段提供额外信息。比如，电子邮件字段中有一个tooltip，说明列出该字段的原因（此tooltip通过鼠标悬停访问）

2.在tooltip内提供简短有用的内容

明显的或有冗余文本的tooltips对用户无益。如果你无法想到特别有用的内容，就不要提供Tooltip。否则，只会给UI增加无用信息，并且浪费任何一个看到该工具提示的用户。

此外，长内容也不再是“提示”，所以请保持简短。Tooltips是微内容的——短文本旨在自给自足。你的文本可以是单行或者多行，只要它是有关联的并且不会遮挡相关内容。

Don't:

在Sprint网站上，带有“添加新行”的按钮上还有文本“添加新行”的tooltip。这个tooltip是重复且没必要的。

Do:

阿里巴巴的搜索框里有一个无标签的相机图标。当用户鼠标悬停到这个图标上时，会出现“通过图片搜索”的tooltip。这个功能对很多用户来说都不熟悉，因此这里描述图标用途的tooltip很有帮助

3.支持鼠标和键盘悬停

Tooltips只在鼠标悬停时出现的话，对于依赖于键盘导航的用户来说不够易用。确保在你的设计中tooltips可以通过键盘无障碍访问。

Don't:

麦当劳的网站不支持通过键盘触发tooltip。当用户选中同一个页面（底部)时，鼠标悬停启动的tooltip（顶部）不可用。

Do:

维基百科支持键盘触发tooltips。鼠标悬停和键盘悬停时会出现相同的tooltips。

4.当附近有多个元素时使用箭头指示

箭头有助于清楚的识别工具提示和哪个元素相关联。当附近有几个元素时，箭头有助于避免混淆。

Don't:

PowerPoint有几个图标彼此靠近。如果没有工具提示箭头，则很难知道哪个工具提示对应哪个工具。

Do:

Whiteboard使用工具提示箭头来提示所选图标。尽管图标间距很大，但手型指针的提示能让指示更清晰，视觉噪音最小。

5.在网页中使用统一的Tooltips

Tooltips很难发现，因为它们通常缺乏视觉线索。如果tooltips在你的网站中没有规律的出现，用户将永远不会发现它们。保持一致并为设计中的所有元素，而不是只针对某些元素提供工具提示非常重要。如果只有一些元素需要额外的解释，使用弹出提示而不是工具提示。

Don't:

Business Insider网站为其导航菜单里3个图标的其中两个提供了tooltips。（注：在网站的主页上，Globe图标确实有一个读取Globe图标的工具提示，但是这个标签没有任何帮助，没有说明它的功能：语言选择器）一般来说，我们建议不要使用没有标签的图标和隐藏标签的tooltips，但是当工具提示不一致时，这种问题更严重。

Do:

Todolist始终如一的使用tooltips。主要部分的三个图标都有tooltips.通过一致性来实现用户的潜在期望。

更多推荐

• 为无标签的图标提供tooltips

大多数图标都有一定程度的概念模糊，这就是我们为所有图标推荐文本标签的原因。如果你坚持不为网站中的图标提供文本标签，至少你可以给用户提供一个描述性的工具提示。

• 确保tooltips和背景有一定的对比

用户通常会查看他们点击或悬停的位置。然而，由于tooltips的隐蔽性，一定对比度对于确保用户能看到工具提示中的文字很重要。此外，对于有视力障碍的用户，在白色页面中使用浅灰色tooltips会很难阅读。

• 定位tooltips，以便他们不会遮挡相关内容

当tooltips遮挡了与它们相关的内容时，会导致用户重复操作（即移动鼠标关闭工具提示，再次读取信息或字段，悬停以显示工具提示）。测试你的工具提示位置确保不会挡到与用户目标相关的其它内容。

结论

当用户无法理解某项功能时，tooltips是一种防错方式。如果用户遵循其它的设计指南（比如，文本标签加图标），那么今天的很多tooltips用例都可以忽略。重要的信息应始终在页面上显示。因此，tooltips对于用户完成重要的任务并不是必不可少的。

我们越是追求极简主义，我们需要的tooltips就越多，我们的用户就需要越多的学习成本。下次，当你考虑tooltips的时候，问一下自己：为了用户完成某个任务，这个信息是否需要？如果答案是否定的，那么工具提示非常合适。否则，信息应直接出现在页面中。

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