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

该报告是百度人工智能交互设计院基于过去一年多对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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

欣赏优秀作品的习惯

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

1. 提升审美

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

2. 培养兴趣

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

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

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

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

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

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

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

如何欣赏作品

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案例演示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

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

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

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

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

作者： John Saito | 翻译： 正_青_春 审校： 凌艺蜻

我从设计中学到的一件事是你无法取悦所有人。你可以尝试，但你最终会得到一个大打折扣的设计，而且无法让任何人满意。

当你试图让所有人满意时，你会失去你的重点，你会开发一些人们不需要的功能，你所写的用户也根本不会去读。

好的设计就是完全围绕一个清晰的目标。这一点非常重要！

过去的一个月里，我一直在和在设计中有明确清晰目标的设计师交流，他们来自Google，Airbnb，Slack, Dropbox等等, 我想窥视他们的内心，看看是什么驱动他们做出决定以及是什么在指引他们的设计，以下是我学到的一些内容。

UXRen

1、从问题开始，而不是答案

 你是否注册了新产品，然后第二天就忘记密码？这已经无数次地发生在我身上。如果我向你求助，你会建议我做什么？

 有些人可能会建议我直接写下密码，轻松，问题解决了。但是安全专家不会推荐写下密码，因为那并不安全。

好的设计师不会直接跳到解决方案，他们会花时间去理解问题。

 那么，好的设计师会怎么做？好的设计师不会直接跳到解决方案。他们会花时间去了解问题。他们提出问题并找出原因、背景和限制：你一般怎么记录你的密码？你总是随身携带手机吗？你有多少密码？

你越了解问题，你越能找到解决问题的切入点。深入理解给你自信，深入理解就是把你的初步想法转化为实际深入的观点。

我询问了Google 智能助理的产品设计师Adriana Olmos关于她解决问题的方法。当她的利益相关者提出需求时，他们经常根据解决方案而不是问题来定位他们的想法。“我试图去了解他们解决问题的理论基础是什么”她说，从那时起，我与他们一起去了解用户最底层的需求，并了解背后的原因，然后来做优化迭代。了解了原因，如何去做就顺理成章了。

了解了问题的来龙去脉，你就可以找到解决问题的方法了。 评论(0) 浏览(3373)

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

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

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

网络上有很多关于Icon设计的文章，一些文章从部分维度切入讲述Icon的设计理念，但大部分缺乏整体性。

所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则，通过简单易懂的描述语言，并且结合设计案例呈现出来，希望能够对大家有所帮助。文章使用的案例只代表个人观点，并不代表相关产品。

本文重点讲述Icon设计思维，关于Icon的具体定义以及具体的制作过程就不再赘述，网络上有很多相关文章都有讲述。

从不同维度对Icon设计进行解析，整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon，产品通过Icon可以快速的向用户传递语意，通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。

ICON的设计法则-菱形设计法则，主要包括语意、层级、设计形式、风格、一致性、范围。而其他的设计思考也是这个设计法则的变体，中心思想没有发生变化。通过对以上设计思考点的聚合，来设计能够传递Icon语意，并且能够清晰展现产品结构和信息层级的Icon系统，通过差异化的设计形式展现产品设计的独特风格，让具有一致性的设计语言传递信息，和用户形成共鸣。

层级

第一层级Icon

第二级别Icon

第三层级Icon

第一层级的Icon一般指首页的井字入口Icon，让用户快速获取入口信息，完成对产品流量的分流，让用户快速完成自己的任务。这种类型的Icon是级别最高的，无论是面积、形式感、视觉冲击力都应该是最突出的，这种高层级的Icon可以简单通过一下三种方法表现，1、拟物化的设计方式增加视觉重心和吸引力。2、通过细节的增加呈现Icon设计的复杂形式感。3、采用冲击力强的色彩对比，抓住用户的关注点。除此之外具体的思考过程，后文也会详细讲述。

下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon，分别采用了拟物化设计，细节添加，色彩对比的设计方法。

第二级Icon归纳为导航类型的Icon，引导用户操作产品，完成用户的任务，同时传递品牌特色。这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重，能够让用户认知到，并且了解Icon传递的信息，在操作行为上产生预期就可以。通常的设计样式是线型Icon或者是面型Icon。

下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统

第三类Icon是语意型Icon，主要是向用户传递信息，烘托信息氛围，并且引导用户浏览信息。这种类型的Icon视觉相对较轻，且不可点击，具体的设计思考在后续的内容展开。

下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统

以上三级的划分并不是说Icon只有这几种类型，这样划分是从功能和视觉上进行区分便于设计同学理解，当然在具体的设计过程中也可以对Icon进行更细化的区分，最主要根据具体的需求去定义Icon的层级，然后再采用对应层级的设计语言。

语意    

1）、Icon背后的语意(Icon的特性归纳）

2）、Icon的可识别性(Icon的特点表现)

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。所以在Icon的设计之前，需要思考Icon背后传递的文字语意，理解语意，构建对于语意的多维拆解（比如沙发是由靠背、两个扶手、四条腿构成，重心要稳，和床有哪些区别等等）。同时还需要思考Icon图形化之后的可识别性，基于对用户认知的了解，归纳Icon设计中需要具体表达的几个关键特点，迎合用户的认知心里。帮助用户快速的获取Icon想要传递的信息，如果不能快速的获取，反而增加了用户获取信息的成本，那就本末倒置，削弱了用户的使用体验。

例：下图是“大众点评”二级Icon设计的语意表现思考方法

设计形式

1）、外形

2）、表达方式

3）、色彩组合

4）、Icon特色

外形是Icon 的基本形态，不同的形态传递不同的视觉感受，构建不同的心智。同时Icon的外形决定了内部元素的设计。

Icon的表达方式主要两种，分别是线型Icon，面型Icon。线型Icon形式抽象、简洁，便于用户识别，用户认知成本较低，缺点是Icon容易极简，造成了似是而非，可识别性降低。面性Icon相对线型Icon视觉重心更突出，便于用户聚焦，设计表现形式会更丰富，缺点是可能会过于复杂，造成信息层级混乱，增加了用户的认知成本。

色彩组合，就是Icon中的色彩语言，在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质，在设计Icon的过程中，尤其是导航Icon的过程中不建议使用超过两种颜色的Icon，这样容易使用户视觉疲劳。

Icon特色是Icon在设计过程中的细节，这些细节是体现Icon自身精致的部分，同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。

例：下图以“大众点评”中的“拍视频”icon做举例说明

风格

1）、品牌理念

2）、产品特色

3）、视觉特色

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造，和用户在感性层面形成共鸣。融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品，深入理解业务，总结出关键词语表达品牌，最终和业务团队达成统一共识。

产品特色指产品在同行业中的定位差异，核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体，使用场景，产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词，进一步具象化。

视觉特色指在竞品分析中，总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点，而差异化的视觉表现可突出自己产品的特色和竞争力。

例：继续以“拍视频”Icon为例子进一步解释说明

一致性

一致性的综合表现在圆角、透明度、线条粗细 、间距、颜色、层级、渐变、特色细节。

Icon的一致性有利于降低用户的认知成本，便于品牌传递，而Icon的非一致性会增加用户的跳出感，降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。重点解释一下第八个维度“特色细节”，特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点，增加产品一致性的基因，可能是断线，尖角，原点等等标志性元素。

例：下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性（并不是说每一个icon的设计必须包含八个维度）

范围

视觉范围和热区范围

随着Sketch的普及，更多的设计师开始采用一倍的设计画布输出设计方案，但在设计的过程中需要注意视觉面积和物理面积，两个Icon的物理尺寸大小是一样的，视觉感性的面积偶尔会变化。所以需要在设计完Icon之后，对Icon进行排列，进行视觉对比，发现视觉的不一致性。

热区范围是代码定义的用户可操作的交互面积，视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同，增加后续沟通的成本。通常情况下会出现的问题就是

1、界面开发的还原度低

2、热区范围过小，用户无法点击

3、Icon的热区范围不一致。

总结

在设计的过程中，Icon的样式可以借鉴，但要根据自己的产品做形式上的调整，具体可以通过上述谈到的几个维度作为切入点调整Icon。同时在设计的过程中避免无穷的细化，因为有些细节用户根本不会观察到，这样做只能是设计师的自嗨。设计师容易漏掉的是热区范围的确定，尽管Ios平台和Android平台都有对于Icon范围的定义，但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值，也更符合产品自身的特色。

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

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

飞猪首页的历史

我在2015年毕业后，就来到了飞猪。其实当时还没有飞猪的概念，那时候的 app 叫「阿里旅行·去啊」，后来了解到我们还有过「淘宝旅行」、「阿里旅行」、「去啊」等这些曾用名。

说起名字还有个故事。我刚工作那会打Uber，司机们都特热情，打车能和你聊一路。

有个司机问我：「你是在阿里哪个部门工作呀？」，我就说：「去啊」。司机很激动，马上说：「哦哦，我知道，那个去哪儿网，头像是绿色骆驼的那个！我老婆手机里就装了一个！」

我连忙说：「不是的不是的，我们叫去啊，不叫去哪儿。我们也叫阿里旅行，或者淘宝旅行，你知道吧…」

然后我们讨论了一路「去啊」和「去哪儿」的区别。

虽然直到我下车，我也不知道司机老哥有没有弄明白。

这个事其实很有代表性。在当时，旅行市场最大的品牌就两个，携程和去哪儿。虽然市场上还有同程、穷游、蚂蜂窝、驴妈妈、艺龙等旅行相关的app，但我们就叫「去啊」，其实已经暴露了我们的目的（并不是为了让大家想下「去哪儿」的时候，不小心下载了「去啊」），而是我们当时的目标就是要做一个对标OTA 的旅行预订工具。

这时候我们的首页和他们比起来，简直满分。当然，我指的是相似度，满分。

这其实就是飞猪的起源版本首页。在这里我们可以看到巨大的机票、酒店这样的旅行类目预订的入口，其实就是为了让用户有「预订」的认知。

直到有一天，产品经理在压榨设计师出图，我隐约听到「我们是平台，不是OTA」这样的说法。那个设计师熬掉好几根头发之后，方案确定了，我们便有了下面这个版本的首页。

我们看到，这个版本的首页看起来不像携程了，更像是当时的淘宝。那个产品经理把他的 iphone5s 擦得锃亮，非常兴奋地给我展示：「你看，这个首页，改得太棒了！比以前好多了！」

其实以我当时的聪明才智，真没看出来。但后来想想，这个改版其实是一次觉醒。这个改版意味着，我们要在平台的业务模式下，在机票酒店这样的预订心智之外，找到自己的特色。

而这种差异化的思维模式影响了接下来一年多的首页设计。

刚开始接首页时，我们尝试从内容进行突破，将商品罗列升级为旅行内容。

同时，在品牌升级为飞猪之后，我们尝试为用户提供更个性的服务，基于用户可能想去、准备出发、正在旅行等不同阶段，设计了「目的地个性化」模块，让有不同需求的用户可以看到不一样的目的地、玩法、商品。

后来我们新起了场景化项目，有个业务小组产出了全球第一站、周边好去处这两个出境、周边的导购场景。

并且我们将首页所有的信息都进行了个性化处理，让每个人每天可以看到不一样的内容。

当然，首页的样式看起来越来越美好了，但我们仍然不满意。

历史版本首页的问题

上面这些版本的首页，有一个共性：我们一直围绕着业务的布局，在首页上设计业务模块。比如下面的这些模块：

而体现在数据上，也有这么几个共性：

• 用户最主要的点击发生在头部类目预订；
• 用户在页面中尾部的点击非常低；
• 用户可能看到了页面中尾部，但仍不点击。

用一句话来总结，就是用户对排列业务模块搭出的首页没有建立认知。

2018年4月开始，我们着手对飞猪首页进行一轮整体的改版。在改版之前，我们首先需要对之前首页进行一次全面的体检。

在这里，我们使用 NLP 理解层次，来深入理解飞猪首页到底发生了什么。

简单介绍一下 NLP 理解层次：我们一般可以通过6个层次理解事物，由低到高分别是：环境、行为、能力、BVR（信念/价值观/原则）、身份、精神。这套框架几乎可以帮我们分析理解一切问题。

△ 用NLP分析问题背后的原因

1. 环境：飞猪业务主导的环境

飞猪的整体环境核心是以业务为导向的，设计的大部分工作是属于支持性质的。在首页工作中，我们做得更主动一些，常给一些提案，也可以算作是共创。但核心的决策权是属于业务和产品的，所以这就导致，飞猪最后上线的东西，往往优先考虑的是业务的重要性。

2. 行为：首页根据业务调整不断改版

我们始终在跟踪首页的数据，并根据数据的变化、业务的倾向性对首页进行日常的调整。

3. 能力：设想的场景没有做好，维度少/内容欠佳

我们希望做场景化，其实是很好的想法。但业务前期只尝试了周边、出境两个场景，这很难匹配旅行用户各种各样的偏好。

同时，飞猪在生产高质量内容的方面做得不够，产出的内容没有让用户产生兴趣。

4. BVR：内容数量>内容质量

因为飞猪的内容起步晚，在起步初期的目标是提高内容的数量，而非生产高质量的爆款文章。所以当后续我们需要用到内容时，常常担心取到一些充数的质量不高的内容。

5. 身份：售卖平台

飞猪以往的定位仍然是旅行商品预订平台，这也会在一定程度上，导致我们不会在提升内容质量上投入太多。

6. 精神：？

这个层面我只能说我个人的理解：我希望飞猪能让旅行者享受更多旅行的快乐。

2018年飞猪首页做的改变和突破

通过分析我们发现，飞猪的身份定位，对我们设计产品会有从表及里的深度影响。如果我们定位是旅行预订工具，必然只能做出小的创新。所以如果要做大改变，首先要定义飞猪的新身份。

而恰巧，2018年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型，试图建立新的在线旅游生态。

在这个身份转变的契机下，我们在2018年对首页进行了升级。

1. 矫正目标

飞猪的新目标叫「全球fun肆玩」，关键在fun。我们需要通过设计，激发用户旅行的欲望。

2. 重构框架

旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中，我们希望基于每一个普通旅行者的视角，来建立新的首页框架。

在建立框架之前，我们需要挖掘的是，旅行是什么？

有人说旅行是机酒火汽的预订，其实不是。我理解的旅行指的是人，花一段时间，离开现在的位置，去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同，每个人在旅行上作出的决定也是不同的，所以「人」是旅行真正的内在因素。

而我们认知里零散的旅行方式，如：跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。

而偏偏旅行还要求我们产生玩的想法，留出足够的时间，从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候，我们决策困难的原因更多是在自身：我不知道自己想要什么样的旅行。

所以我们解析了用户的旅行特性，发现每个用户喜欢的内容、商品，都是不同，且是特色鲜明的。所以我们的核心需要做到的，就是让这些无数的普通人，都能感知自己的内在，并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。

我对主题这两个字的定义是：一句话描述你想要的旅行。这句话可以是：情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。

我们初步将主题组织成了灵感、计划、商品三个维度，希望能在玩什么、什么时间去、买什么等旅行决策上，对用户由内而外地产生帮助。

3. 培养能力

在搭建好了框架后，我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。

为了让用户看到更好的内容，我们使用了新的后台，可以通过算法，动态选出具有相似主题的无数商品，搭建频道，并进行投放，做到千人千面。

在内容质量上，我们还将继续寻找突破口，进行新的升级。

飞猪2018的首页，我们也在视觉上打破传统，做了很多突破。

突破空间 – 打破「屏效比」的伪命题

在移动端设计的时候，设计师往往被要求利用屏幕的空间。

而业务方和 PD 也非常机智，总能有一些金点子，例如：「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。

在这样的诉求下，我们的界面设计常常会失去很多留白空间，导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望，甚至降低用户的阅读效率。

而随着设计影响力的增加，大家认识到了一个更美的、更能讨人喜欢的界面，不是什么都放上来的界面。

图片 – 大图凸显内容品质

由于以往对空间利用的苛刻，我们的图片常常会被压缩得很窄、很矮，有时甚至无法形成系统的图片比例。而在解决了空间的问题后，我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。

文字 – 不是装饰，更不仅是内容

随着iOS11的推出，大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试，使用简短有力的大标题和留白作为每个模块的区隔，让用户的视线可以从一个模块自然地过渡到下一个模块。

同时，我们尽量保证内容是简短有力的，这样就可以用更大的字号，减少用户阅读的成本。

色彩 – 来自于旅行的颜色

以往在猜你喜欢中，我们的标签都是用黄色或者黑色底，盖在图上来做的。但这会影响图片的品质，同时较小的标签文字盖在图上，其实并不适合用户阅读。

所以我们优化了方案，让小文字和图片不要重叠，提升了文字的阅读性。同时通过改变标签文字的颜色，让标签成为了商品卡片的点缀。

未来的首页

我们回顾了飞猪首页的设计历史，并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化，提醒着我们需要把产品设计得更优秀，来面对无尽的挑战。

2018年飞猪首页的改版，也代表着首页设计模式的转变，从业务争夺入口转型为基于用户体验，设计师、产品经理、业务方、技术团队协同作战的模式。

而作为设计师，更需要始终围绕着用户，在桎梏中跳舞，做出好体验的设计。

2018飞猪首页的改版只是开始，飞猪才刚刚转型，未来我们将更加紧密地围绕用户，提供质的服务。

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

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

背景，应该很好理解，我相信应该没有人会不清楚，比如这里我们做的这个案例，很明显白色的底就是背景。如果让大家填充背景色，我相信大部分人的本能反应就是填充基本色相。

比如这里的背景我们填充了红色。

当然其他任何色相在原则上都是可以的，因为都是背景色。

但是我们本期教程所要探讨的不是这种在色相上的背景色，那我们所要总结的背景色规律是什么呢？我们先来看图。

大家可以思考一下，看看能不能发现这其中的规律。这里的背景色类型并不是我们通常所认为的具体色相，也不是在色调上的划分，而是从更宽泛的角度去探索背景色的规律，然后更好的运用到我们的设计当中。

那我们就来看看背景色的四种类型是如何划分的：分别是白底型、淡色型、深色型、黑底型。

白底型

首先我们来看白底型。

说到白底不能不说白色，白色是没有任何色彩的颜色，是非常好的调和色，可以和任何色彩搭配。

而研究色彩最重要的就是要了解它的属性和气质，而任何色彩都有两面性，白色最突出的属性就是干净、简洁、纯洁等等，再结合相应的设计内容和题材也可以传递出非常多的属性，只要和这些属性相吻合都可以使用白色。

而白底型又分为大白底和小白底，比如画面中的这个就属于小白底，也就是说虽然是白色背景，但是内容信息比较多留白比较少，就属于小白底型。小白底型具有的意象是实用、干净、知性以及舒畅、通透、简洁等等。

大白底型也很容易理解，就是类似这种留白较多内容或元素较少的版面，我们平时说的比较多的极简和留白风格，基本上都是这种大白底型的。大白底型具有的明显属性是简约、朴素、开放、文艺、雅致、清淡等等。下面我们来看看白底型的相关作品。

这是一个美食招贴，画面以白色为背景，通过文字的编排以及不同色彩的食品来丰富版面，干净、简洁的同时又能够很好的让人关注食品的本身，而且这里使用的就是小白底型。

这个海报也是小白底型，像这种在白色背景上使用黑色文字、淡色图形或插画的设计也很多，给人的感觉非常干净，直接。

这种纯文字的海报相信大家也肯定见过不少，就是白色背景上方黑色的纯文字编排，看似简单其实是非常难的一种形式，难的地方不是色彩，而在于对版式能力的考验。

这个海报虽然也是白底黑字的纯文字编排，但是也属于大白底型，文字信息量非常少，属于极简留白的风格，给人的感觉就是简约、雅致甚至是文艺和艺术。

这是一个纯净水的海报，也是采用的白底型，上方的文字和图形以蓝色为主、红色为辅，蓝色代表水，红色是印章的颜色，通过元素之间合理的空间以及整体的白色背景，体现出了纯净水产品的天然、健康、纯净，没有任何其他杂质。

淡色型

我们再来看看第二种背景型，淡色型。

淡色是比较冷静的色调，没有什么很强的主张，给人冷淡的感觉，所以淡色的使用范围就有局限，但是只要合理的运用淡色的特点，就可以发挥出淡色的最大优势。

淡色最适合表现纤细、优雅、温柔等属性，淡色会让人产生幸福温柔的情绪，让人们进入没有刺激感的色彩世界，但是淡色调没有积极性，太过温柔反而给人冷淡的印象。

背景用淡色调虽然也可以体现白色的简洁、干净，但是却多了些色彩本身的倾向性，无论用什么色相都可以给人优雅、简洁的印象，淡色最适合表现女性、优雅、平和等印象，富有情绪变化，轻柔、轻快。下面我们还是来看看相关设计。

这个海报的背景就是采用的淡色型，背景是比较淡的黄色，海报中唯一色彩比较丰富的元素就是五个小人的插画，而且以暖色调为主，所以背景使用暖色调的黄色可以让整体版面的色彩很均衡，结合人物的卡通插画给人一种纯真、轻柔，以及淡雅的恬静风格。

这个海报是关于美食产品的，典型的日式风格，包括书法字、樱花等等，这里的背景虽然带有微弱的渐变和纹理，但是并不影响整体的淡粉色调，虽然是美食主题，但是这种淡雅、清新、柔软的风格一点都不会影响到人的食欲。

这个海报虽然是关于文化的，但是整体的风格偏向这种卡通、插画的感觉，而且色彩使用的也比较丰富，纯度和明度都控制的很好，整体协调统一，背景色使用了淡色的黄色，统一了整体画面的色调，充满了可爱、童趣。

深色型

第三种背景类型就是深色型。

深色就是在纯色中加入大量的黑色，从而让纯色变得内敛了许多，而且增添了力量感，更加严肃庄重。

深色可以表现强力感和深度，这是其他色调所不具备的，如果说淡色是女性的颜色，深色就是男性的颜色，充满了力量和阳刚，当然这并不是绝对的。

深色融合了纯色和黑色的特点，可以有效的突显位于背景之上的元素和色彩，同时又带有强烈的情绪，具有高格调。深色型最大的特点就是深沉，给人坚实可靠的感觉，并且还带有神秘和幻想，配合适当的色相可以充满激情。

美食相关的海报很多都喜欢用深色型背景，尤其是传统类美食，还有就是巧克力、咖啡相关的主题。这个海报的背景就是使用了深色调，给人一种高档感和格调感。

这个海报的背景色使用了深色调的蓝色，结合白色的线稿画，充满了神秘感，而且很有深度，同时又不失传统和古典的韵味。

这是一个酒类招贴海报，深色的背景没有任何其他颜色的干扰，纯白色的文字，使得整个版面干净利落，同时背景的深色又为画面带来力量感、强劲而有力，正符合了酒品类的风格和属性。

黑底型

最后一种背景型就是黑底型。

黑色代表什么都看不见，是抑制力很强的颜色，与黑色组合的颜色都会被很好的衬托出来。

黑色最适合用来表现奢华、男性和神秘，也可以表现幻想性、神秘性和强大的力量，同时黑色也代表了闭锁，是带有不安和恐惧的颜色，而且还代表犯罪和暴力。

黑色作为背景的时候，会激发观者的想象力，让其他色彩看上去更加鲜艳。任何元素在黑色的背景上都富有神秘感和幻想，黑色面积越大这种感觉越明显，此外黑底型最突出的特点就是力量感、高级、内敛和庄重。

这是张艺谋导演的电影《影》的其中一款海报，并没有使用太过复杂的背景，就是采用纯黑色为底色，上方水墨武侠的人物以及书法字，带有传统、古典、深沉的韵味，如果是看过这部电影的同学回过头来看这个海报，你会发现其实电影中的尔虞我诈、人心险恶也都蕴藏在黑色的世界里。

这个海报的主体人物是日本拳击手村田谅太，也就是和体育、运动相关的内容，而背景正是使用了黑底型配色，体现出男性的阳刚以及拳击的力量感。

这个电影海报也是大面积的黑色背景，上方的元素很简单，就是地球和文字，通过光影的处理和深邃的黑色，给人的感觉很直接，神秘、恐怖、遥不可及。

这个海报相对来说比较偏艺术化，纯黑色的背景，各种几何图形，简单的文字内容，给人一种高级感和格调感。

这个海报从字面意思以及图形来看应该是与地震相关的主题，那么自然灾害肯定是非常严肃的话题，所以设计者也很简单直接，黑底白字，让人有效的阅读文字信息，充满了正式感和庄重感。

案例演示

最后我们来看看案例演示，这里我们设计一个书籍封面，书籍的名称是无声告白。

首先我们创建出网格，根据网格来编排文字信息，这里我们创建的是横向八栏，竖向五栏的模块网格。

然后先将书籍名称编排到版面两侧，各占一个格子，中间放置引言信息，同样占据一个网格宽度，标题放在版面上方可能会显得有些重。

所以这里我们可以将标题下移，然后顶部编排作者名和书籍的英文名。

然后将其他文字内容编排到版面的最下方。因为我们主要是讲色彩，所以文字编排这块就不过多讲解了。

然后将书脊部分加入进来，将书籍名称、作者以及出版社的相关信息编排好，版式部分基本就差不多了。

下面我们根据本期教程所讲的背景类型来配色，而这里应该使用哪种背景型呢？这个要根据设计的内容来决定，因为这本小说的名字叫做无声告白，而且小说的故事内容也比较压抑充满悲剧色彩，所以这里我决定使用黑底型的配色。

将背景填充黑色，文字反白。但如果是现在这样单纯的黑色，可能看上去会显得有些单调。

所以这里我们从书籍名字中的无声来找灵感，为背景填充象征声波的抽象图形来丰富版面。

最后添加书籍的腰封，使用白色来形成对比，腰封上的文字填充黑色，这个书籍封面就设计完成了。

我们来看下效果图，整体的黑色调还是比较有这种阴暗、忧郁、孤独的感觉的。

那有的人可能会有疑问，其他三种背景色就不可以么？当然也可以，配色在很多情况下并不是对错的问题，而是要看你想通过色彩传递出什么样的感觉。所以这里我也做了其他三种背景型的配色，如果单从版面的整体配色感觉来看，也是没有任何问题的。

还是那句话，关键点是你想让这个设计给人什么样的感觉，如果想传递白底型所代表的印象，那么你就可以使用白底型。

同样的道理，如果你想传递淡色型的色彩印象，当然你也可以使用淡色型。

如果想传递深色型的意象那就使用深色型，这个逻辑应该很容易理解。

本期教程到这里就结束了，我们主要从白底型、淡色型、深色型、黑底型这四个角度出发，来探讨不同的背景型所传递出的不同感受。这四种背景类型属于大的范围，如果想对配色深入研究，当然背景色不可能就四种，理论上来讲任何色彩都可以充当设计的背景，所以除了要掌握好这四种背景型，还要做到兼顾色相的属性和色调的属性，这样才是一个多维度视角的配色，就像我们开头讲到的，配色就是一座高山，你知道通往山顶的道路越多，你就可能比别人更快地到达山顶。

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