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

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

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

那么在对比了几个常用的组件库（Ant Design / Element / iView）并结合自身的工作经验之后，我选择了一些常用的组件，来和大家简单总结下它们的使用场景以及可能出现的误区。

在Ant Design 的组件库中，分为了通用、布局、导航、数据录入、数据展示、反馈、其他这七大类组件。今天先来看看数据录入中的相关组件，我将其又分为了手动输入以及点击选择两大类。（评分、上传等特征明显的组件就不在此赘述了。）

手动输入

1. 输入框Input

输入框是数据录入中最常见也是最基础的组件，在需要用户输入内容的时候即可选用。

除了常规的输入框，带前/后缀、带图标、带按钮的输入框也是较常用到的。

在输入内容中头/尾是相对固定的时候，我们就可以采用带前/后缀的输入框来减少用户手动输入，比如网址输入框就可以加上后缀。

有时候为了帮助用户了解输入内容的类型，可以在输入框中加上图标，比如输入用户名或密码的时候。

带按钮的输入框最常使用的场景就是搜索框了。

2. 自动完成AutoComplete

自动完成其实是输入框Input 的一项功能，但是 Ant Design 和 iView 中将其单独拎出来了，为了避免大家搞混，我们这儿也单独讲。（Element中在输入框 – 带输入建议）

顾名思义，自动完成就是辅助用户输入。在输入一部分内容后，提供相关的备选项，不仅可以减少手动输入，还能更精准的输入。常见的使用场景就是搜索框了。

3. 数字输入框InputNumber

数字输入框特用于需要输入范围数值的场景（电话QQ等号码不宜使用）。右侧的步进器则可以帮助用户精准控制数值的增减。

当然作为输入框的一种，也可以加上前/后缀来减少固定内容的输入，比如%或者货币单位（¥、$、元、円）。

点击选择

1. 单选框Radio

单选框顾名思义就是在一组选项中仅可选择一个时使用。

由于单选框的选项都是平铺展示的，所以选项不宜过多，当选项较多时建议采用选择器Select（后文会提到）。

按钮形式的单选框也可以被当作标签页Tabs 来使用（标签页Tabs的本质其实就是单选框）。

2. 多选框Checkbox

多选框则是在一组选项中需要选择多个时使用。

同样，由于是平铺展示，选项不宜过多。

多选框不同于单选框Radio 的是，它可以单独使用，来表示两种状态之间的切换，类似于开关Switch。区别在于开关Switch 会直接触发改变状态，多选框则一般用于状态标记，需要配合提交操作使用。

3. 选择器Select

选择器也是数据录入中很常见的组件，它以下拉菜单的形式来呈现选项（选项较少时建议采用单选框Radio 或多选框Checkbox 平铺展示）。

除了单选，还有多选的形式。

上文输入组件中提到的自动完成AutoComplete，其实也是选择器的一种衍生方式──带输入的选择器。

4. 级联选择Cascader

级联选择是指，在选择器Select 选项数量较大时，采用多级分类的方式将选项进行分隔，便于用户选择。比如地址选择，就可以按省市区一层层分类。

5. 穿梭框Transfer

当多选框Checkbox 选项过多时，除了选择器Select 的多选形式，还可以用穿梭框的形式来呈现。相比于选择器Select，穿梭框占据更大的空间，当然也可以展示选项的更多信息。

6. 日期选择器DatePicker

当需要录入日期的时候，可以选用日期选择器。用户从弹出的日历面板中直接选取即可。

当然，需要录入一段时间的时候，也可以同时选择开始日期和结束日期。

7. 时间选择器TimePicker

时间选择器与日期选择器DatePicker 几乎一样，从弹出面板中选择时间即可。

时间选择器和日期选择器DatePicker 还可以组合使用。

8. 滑块Slider

滑块的使用场景类似于数字输入框InputNumber，需要在某个范围内录入数值。不同的是，它可以直接选取而不用手动输入。

当然，也可以和数字输入框InputNumber 配合使用。

还可以选择某个区间，比如价格区间。

当数据选项较少或者离散（不连续）时，还可以采用分段的形式。

总结

今天主要讲了数据录入的相关组件，共11个：

• 输入框Input：最基础组件，除常规外，还有带前/后缀、带图标、带按钮的形式。
• 自动完成AutoComplete：输入框Input 的一项功能，提供备选项辅助输入。
• 数字输入框InputNumber：录入范围数值，带步进器精准控制，还可带前/后缀。
• 单选框Radio：只能选择一个，选项不宜过多，按钮形式可做标签页Tabs。
• 多选框Checkbox：可多选，选项不宜过多，单个使用可做开关Switch。
• 选择器Select：以下拉菜单的形式呈现更多选项，可单选/多选，可带输入。
• 级联选择Cascader：选项数量较大，采用分类的方式将选项分隔。
• 穿梭框Transfer：可多选，展示选项更多的信息。
• 日期选择器DatePicker：选择日期，可以选择一段日期。
• 时间选择器TimePicker：选择时间，可以与日期选择器DatePicker 组合使用。
• 滑块Slider：录入范围数值，可与数字输入框InputNumber 组合使用，可选择区间，可用分段的形式。

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

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

插画一方面富于灵活表现，可根据设计师思维和想法进行各类创意，适用于各类视觉主题，另一方面又与严选简约、精致的品牌形象契合度较高，因而是严选专题设计的一个主要表达方向，经常在严选各类专题设计中得到应用，受到广大用户的喜爱与推崇。

许多刚入行的视觉设计师认为插画风格专题设计需要非常专业的插画功底才能完成，因而尽管觉得插画风格专题唯美、形象却敬而远之不敢轻易尝试，今天个人从以下五个步骤去解构插画风格专题设计，通过相对简单易学的基本操作，让没接触过插画风格的设计师也能轻松驾驭与运用。

严选插画风格设计五部曲

整体构思

和所有风格的视觉设计一样，插画风格设计首先也需要进行整体的需求分析，主要进行以下方面工作。

1. 分析受众与目标

首先需要对专题的受众进行简单的社会化分析，通过分析大体了解受众的年龄层次、收入水平、审美品味、兴趣爱好等，根据社会化特征信息建立用户画像，有利于设计方向与基调的确定。比如严选的目标用户定位于20-35岁，具有稳定的工作与收入，追求高品质生活的都市白领。

其次需要深入分析专题所需要表达的目标和信息，通过色调、版式、字体、元素等设计手法准确传达信息内容的同时，带给用户更多美的感受，升华主题思想，强化品牌概念与服务。

2. 确定情感关键词

所谓情感关键词，就是我们产品的视觉所要表达的情感感受，比如情人节专题确定的「浪漫」、「温馨」、「甜蜜」，新年专题的「喜庆」、「欢快」、「热烈」，父亲节的「责任」、「担当」、「感恩」等等。确定好专题活动的关键词后，将有助于我们进行整体风格的把握与塑造。

3. 整体意境构思

确定好专题的方向后，接下来就可以构思整体的意境以及挑选合适的素材，如新年专题我们会想到用大面积红色作为主色调的布局，结合鞭炮、春联、灯笼、年画等中国传统元素，通过合理的组织和编排，加上中国风的字体设计与适当的细节完善，共同勾勒营造一派喜庆祥和的气象。

提取轮廓

基于前一步骤的构思的整体意境，我们需要对挑选的现实素材进行插画化改造。通常我们通过鼠标勾选的形式，将素材的轮廓勾勒出来并填充相应的颜色，使写实的风格形象化、概括化和扁平化。

简化图形

插画风格相对实物风格，去掉了大量的写实细节，只保留主要的特征信息因而显得扁平简约但不失形象生动。因此在这个步骤我们需要将勾勒好的图形进行简化操作，以简单图形代替写实描绘、多以面和色块去代替原有的细节，简化后的图形具有高度的概括性。

完善细节

除了保证插画的形象性与直观性外，我们需要进一步对素材进行细节上的完善，以满足进一步的审美性与趣味性，同时赋予元素一些创造性，可以尝试通过以下方法进一步完善。

1. 移花接木

移花接木指将现实中不同时间和空间各类元素进行解构和重组，创造出一些妙趣横生的新事物，增加插画内容的趣味性。

2. 区分主次

将重要的、核心的元素进行强调刻画、次要的元素进行弱化处理，从而拉开主次元素的层次关系，使画面更加具有层次感和空间感。

3. 突破现实

通过调整元素间的比例关系，夸张的创造现实中并不存在的事物，更加容易吸引用户的目光焦点。

优化整体

经过以上的步骤，我们的素材基本已完成插画风格的改造，但插画素材在整体专题界面中并非孤立的存在，而是和整体色调风格、版式、字体设计形成一套有机和谐的整体，共同去呈现专题需要表达的信息与目标。

案例分析

1. 千万和春住专题

整体构思

情感关键词：清新、唯美

整体意境构思：以嫩绿色作为主色调，结合桃花、阳光、汽车、风筝营造轻松出游踏青的欢快意境。

提取轮廓

从田野、桃花等几张现实图片中将页面需求的主体元素进行提取，作为背影进行主体页面的大面积辅色，将整体的色调感觉搭建出来。

简化图形

初步提取的轮廓由于过于具象，与唯美的主题风格不太协调，在这一步我们将主体元素进行简化处理，用圆润、可爱的几何图形加上明快的色块去代替树木，整体更加扁平、卡通化，营造更加轻松、自由的氛围。

完善细节

为了更好的体现春天外出郊游的意境，我们对细节进行完善，增加了汽车、风筝等小元素，将桃花进行树枝刻画、太阳光芒的刻画等处理，同时将远处山景进行虚化，形成层峦叠障的连绵山脉，拉开了画面的层次空间。

优化整体

最后我们根据主题进行专题的字体设计，将常规的宋体进行变形处理，部分笔划好似春风轻抚而飘逸，又加上了象征春天生机勃勃的嫩芽，富有生活趣味。通过一片桃花作为主体分别呈放若遇到新欢、若重拾旧爱的对应专题好礼，使页面整体和谐统一。

2. 爱恋物语专题

目标：呈现出情人节情侣间的爱情的甜蜜与浪漫。

情感关键词：浪漫、甜蜜

整体意境构思：以甜美暖色作为主色调，通过主体元素礼物盒与情侣间夸张的比例关系抓住用户眼球，浪漫甜美同时不失趣味性。

3. 新春集市新年专题

目标：呈现出春节喜庆热闹与琳琅满目的商品。

情感关键词：喜庆、热闹

整体意境构思：以中国传统舞狮、牌楼、鞭炮等作为主体元素，谷仓作为次要元素，前后对比主次分明、空间感强，呈现了新春集市的纵深与五谷丰登的产品，整体氛围热烈喜庆，激发用户的购买欲望。

总结

插画风格的表达，既遵循着艺术设计的通用规则，又具备自身独特的审核特征，需要设计师更多去发现生活中的美，通过以上五部曲将生活中各类元素进行不断的重组、创造，在专题中进行特有的形象性、生动性、趣味性、创造性的艺术表达，从而丰富专题内容，更好传达专题思想。

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

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

但殊不知其实我们每个人的色感，正是在儿童时期形成的，因为儿童时期的认知更加纯粹，对于色彩的想象力以及受到的限制要比成人少得多，所以赋予色彩的深度和广度也就比成年人更加丰富。

这也是为什么很多人看到小朋友的绘画，会觉得他们很有配色天赋了。

所以我们要做的就是打破对色彩的固有认知，让自己回归到一种单纯的状态，来重新认识色彩。

比如现在给你一个苹果，可能我们的第一反应就是直接把它吃了，事后要你回忆对苹果这个物体的印象，也许你体会的并不深刻。

而如果我们改变条件，假设你从未见过苹果，这一次你不仅要吃掉苹果，还要说出你的感受。

根据你的五官对其进行认知，这时你对苹果的体会将和前一次大不相同。

比如通过视觉我们可以看到绿色，通过嗅觉可以闻到果香，通过触觉可以感受到坚硬，通过味觉可以品尝到酸甜，通过听觉可以听到清脆声。

而重新认识色彩也是同样的道理，就像我们从未见过苹果一样去体验一个假设我们从未见过的色彩，然后通过不同的角度去对色彩进行拆解，最后组合在一起形成属于我们自己的配色体系。

赋予色彩名称

创建个人色彩体系的第一步，就是为色彩命名。

比如我们随便找一个颜色，就拿这个黄色来举例。

根据自己对这个色彩的感觉来命名，可以随意发挥，你想到什么就可以说什么，没有限制。

比如从最基本的色相角度出发，我们可以叫它鲜黄色。

根据这个颜色我们可以联想到向日葵，所以也可以命名为向日葵。

我们还可以联想到月亮，所以也可以起名叫月亮黄。

那我们还可以联想到《变形金刚》里的大黄蜂，所以也可以给这个颜色起名叫做大黄蜂。

还能联想到麦当劳的阳光橙，所以也可以命名为阳光橙。总之当你看到这个颜色时，脑海中能够联想到的词汇都可以使用，哪怕是跟这个颜色相差很多也没关系，最重要的是你自己的感受。

对色彩进行理性分析

对色彩进行命名之后，第二步要做的就是对色彩进行理性分析。

我们还是拿这个颜色来进行练习，先来找出它的色相、明度和饱和度。

首先根据色相环的大致位置，确定这个色彩的色相。

然后通过纯度和明度的调整来找到与右侧颜色相符的色值，这里我们得到了一个数值。

然后用吸管工具吸取右侧的黄色，得到的结果和我们猜测的做比较，只要结果不是相差很大都是可以的，如果相差很多那就说明你对色彩的敏感度还有欠缺。

HSB色值猜想完之后我们再来看看它的RGB色值。

根据RGB原理很明显黄色是由红色和绿色混合得到的。

但是我们对比来看很明显这两个黄色还是有差别的，所以还需要进一步分析。

我们调出RGB色相环，我们看采样的这个黄色是偏向红色多一些还是偏向绿色多一些，很明显是偏红一些，因为它比较偏橙色。

所以我们就可以适当的减少绿色的成分。

我们来看一下对比，已经接近了。

最后我们通过RGB色值来对照一下，虽然红色和绿色的色值相差不多，但是我们采样的颜色中还有少部分蓝色，肉眼其实很难看出来，但是我们可以自己去模拟一下。

这三个成分的三原色混合之后，得到的就是我们采样的颜色了。

△ http://www.rgbchallenge.com/

如果想提升对RGB的敏感度，可以通过这个小游戏来练习一下。

玩法很简单，根据画面中给出的RGB色值来选择你认为相对应的颜色，选对了继续下一关，选错了GAME OVER重来。

接下来我们来看CMYK色值。

黄色是CMY其中的一个原色，所以首先黄色肯定是最多的。

对比来看一下，很明显采样的黄色中还有其他颜色成分。

我们调出CMYK色相环，同样也是看采样的黄色偏向哪个方向，也是偏红色多一些。

所以我们得到这个颜色中需要加入红色，但是应该加多少呢？

这里我们加入了20%的红，同时将黄色的含量降到80%，这个是根据经验和感觉来的。

这时将两个颜色对比来看一下，已经相差不多了。

最后通过数值来比对，可以说几乎已经很接近了。

只不过采样的颜色中还带有少量的青色，但是影响不大。

然后我们再来看看色调。关于色调这种老生常谈的问题这里就不多讲了，因为之前我专门写过一篇关于色调的文章《高手的平面课堂！最容易上手的配色方法》，里面已经讲的很详细了。如果你看过这篇文章，那么当你得到了一个颜色的CMYK色值时，就已经可以判断出是什么色调了。

如果没看过也没关系，我带大家来区分一下，白色和纯色之间是明色和淡色，纯色和灰色之间是浊色和淡浊色，纯色和黑色之间是暗色。

将这些代表性色调提取出来一比对，就可以知道这个色彩的大致色调是什么了。

很明显我们采样的这个颜色是介于纯色调和明色调之间，你可以叫它纯色也可以叫它明色。

色调看完之后我们再来看看它的色彩家族，也就是这五大色相关系。

首先我们来看看它的同类色是什么，如果大家刚开始比较困难可以偷个懒，调出色相环。

这样找到相应的色相就非常简单了，但是不建议大家这样做，除非是新手或刚入门的同学。

然后是近似色，相距45度的颜色。

然后是中差色，距离在90度左右。

接着是对比色，120度左右。

最后是互补色，对比最强烈，也就是相距180度左右的颜色。

这五大色相关系是最基本也是搭配起来最常见的，一般不太容易出问题。这里需要说明一点就是我们在对色值进行猜测的时候，不需要要求太高必须要完全一致，只要差不多就可以。并且大家在看教程的时候可能会觉得有些复杂佷麻烦，我做这些为了给大家演示看上去是花了些时间，但是当你自己在猜想的时候可能只是一瞬间的事情。

对色彩进行感性分析

下面我们再来看看第三步，对色彩的感性分析，所谓感性分析也就是说这个色彩给你什么感觉。

比如这个黄色给我们的正面意象有：阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开放、快乐；负面意象有吵闹、廉价、不雅、软弱、浮躁、轻浮、稚嫩、散漫、不安。注意在提炼感觉的时候不要约束自己，能够联想到的都可以记下来。

对色彩进行行业分析

然后是第四步对色彩进行行业分析，也就是说你认为这个色彩适合哪些行业或者你见过哪些行业使用过这个色彩。

比如最明显的就是儿童、宠物、游戏、时尚、运动、促销、餐饮、农业、传统、汽车等等。

对色彩进行设计应用

以上这些训练做完之后就进入到了最后一步，也就是用这个色彩进行任意内容的设计。

这是我们的文案，这里我们要设计的是关于詹姆斯十六代战靴的三个Banner。

1. 案例一

首先根据尺寸创建版面，找到一张詹姆斯的图片去底之后放到版面中，然后将主题信息放大并选择一款具有力量感的字体编排到版面的中上位置，将中文标题和LOGO做重复编排。

将文字信息放置到人物下方，底部信息做描边和变形处理为画面增加形式感，最后将其他信息编排到空余的左侧。

最后在主标题下方添加色块来丰富一下版面，版式部分就完成了，接下来开始配色。

因为我们要用到采样的这个黄色所以主色已经确定了，但是这个画面只用一个颜色显然是不够的，所以我们还需要其他颜色。

因为考虑到设计的内容和风格所以我觉得配色上应该有一些对比，但是又不想使用对比很强的互补色，所以这里我选择对比色，但是黄色的对比色有两个应该选择哪个呢，这里我选择了紫色。

因为如果了解NBA的话应该知道，湖人队的球衣本身就是黄色和紫色，也就是人们所谓的紫金战袍。

但是这个紫色有些偏红，所以我们可以调整成偏蓝一些。这也是我想告诉大家的一点就是配色是灵活的，千万不要死脑筋。

辅色确定了之后就可以为画面填充颜色了，但是我们看填充完颜色之后人物图片的颜色有些不协调，所以人物的颜色也需要调整。

这样看上去就会好很多，那么第一个案例就完成了。

2. 案例二

第二个案例我们选择鞋子来当主体，然后编排主标题。

将其余信息围绕主体鞋子来编排，通过适当的变形角度来为画面增加灵动。

但是两侧很明显太空了所以可以添加色块和文字，版式部分就完成了。

因为我们设计的这三个Banner是一个系列的，所以配色也应该是统一的不需要改动。

3. 案例三

我们再来看看最后一个案例，前两个案例分别是以人物为主体和以产品为主体，所以第三个案例我就直接用文字编排，将文字信息进行分组给图片留好位置。

为了增加一些形式感，下方的标题同样进行描边处理并进行裁剪。

那么同样使用这组配色，将图片放置到预先留好的位置上，这个案例也就完成了。

最后我们来看一下整体效果和效果图。

本期教程到这里就结束了，我们从几个不同的角度去对色彩进行拆解，大家回去之后可以自己多加练习，每天解构一个色彩，这样长期积累下来，你就会在不知不觉中创建了一套属于你自己的配色体系。

但是我相信肯定会有人有疑问，如果照这样做那纠错机制在哪？因为这些都是大家自己去创建的很多内容不一定对，如果你有这样的疑问那说明你是认真学习的人，但是我这套方法并不是没有纠错机制，这个纠错机制就是你自己，在漫长的时间里你的成长、历练、感受、学习都会影响你对一个色彩的认知，可能几个月甚至几天之后你看待同一个色彩的感觉都是不同的。所以放心大胆的去做吧，只要你肯坚持，火候到的时候自然就会有所收获。

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

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

阴影是什么呢？阴影是光带给这个世界的礼物。

阴影的概念

还是正经解释一下什么是阴影？

在客观世界中，光线总是从光源沿着直线方向发散。

在光线的照射下，受光部分称为亮面，仅次于亮面的受光是灰面，而光线无法照射到的部分，称为暗面；由于被受光面遮挡，物体所在环境中出现的阴暗部分称为影，阴与影的总和就是阴影。

阴影的要素

阴影形成的要素有哪些呢？

首先要有光源，光源就是光点，光点向下的垂线与承接面的焦点就是光足，阳光的光足在地平线上，灯光的光足在照射的基面上，然后是要有物体，光点发出的光线，经过物体上阴点，光足与物体底点也就是阴足连线，与光线相交的点就是影点，阴影就是阴足到影点的部分。

画阴影时，一般是先定光点和光足，然后是阴点阴足，光点连接阴点，光足连接阴足，这样阴影自然就画出来了。

用这张照片来做个简单说明：

光源的位置，就是太阳，向下垂线交于海平线于一点，这个就是光足。

然后，定出一些椅子上的阴点和阴足。

光点连接阴点，光足连接阴足，这样就能画出阴影的大致形状了。

光源的分类

光源总体上可以分为两大类，一类是自然光，比如：太阳光、月光。一类是人造光，比如：灯光、烛光。

1. 自然光

自然光有两个特点：光线平行；随着时间的变化而变化，不会为⼈的意志所转移。

光线平行

因为太阳、月亮这样的发光体离我们太过遥远，所以可以把它发散的光线视为平行的。

再来说下这张图片，同样是自然光，为什么它的光线不是平行的？

这是因为透视的现象，就像这个地板，不也是平行的吗？但是因为透视的关系，它们会相交于一点，光线也是同样道理，因为我们以这个角度观察，所以光线会出现透视现象。

也就是说，当我们从侧面观察的话，就很明显看到光线是平行的。

随着时间的变化而变化，不会为人的意志所转移

日升日落，阴晴圆缺，都是自然的规律，不会为我们的意志所改变。

2. 人造光

人造光有两个特点：光线不平行，呈放射状；根据需要变换位置。

光线不平行，呈放射状

用这张图片来举例，画面中光源是路灯，物体是消防栓，我们对它进行一个简单的分析：

它的光点是路灯，向下的垂线，到地面上的光足，然后是消防栓，光点连接阴点，光足连接阴足，画出阴影，可以看出，因为与光源距离近，所以光线是不平行的，呈现一种放射状，并且影子也会呈现放射状。

根据需要变换位置

为了呈现想要的视觉效果，可以随意移动光源的位置，甚至调整它的颜色、明暗等，可以人为改变。

灯光属于电光源，它可以是单一光源或者组合光源，常见的像这样的白炽灯，还有日光灯等等。

当各个方向都有光源的时候，投影就会消失。在医学上，用的无影灯就是根据这个原理制成的，因为医生做手术的时候，手和器械都有可能对手术部位造成干扰的阴影，所以无影灯就能尽量消除阴影。

阴影规律及其特点

我们模拟一个太阳移动的轨迹，当太阳位置比较低的时候，光线与地面的夹角就会比较小，影子会很长；升高一些，夹角就稍微大了些，影子缩短了点；再升高一些，夹角更大，影子很短了。然后当太阳在物体正上方的时候，与地面的夹角接近90度，影子基本就是一个点。那另一边，基本就是相同的情况，所以，光源离照射物体越高、越远、光线角度越大，阴影越短。

我们再通过几张图片来进一步了解阴影规律及特点。

我们看到人物的影子非常的长，光线与地面夹角比较小，说明它的光源在一个比较低的位置上。

这个正俯视的图片，影子也很长，说明它的光源也在一个较低的位置。

影子的长度也不算短，但是看光线与它的夹角比较大，证明它的光源在相对比较高的位置上。

这张照片比较明显了，影子比较短，接近中午的阳光。

△ 接近中午的阳光

我们之前在透视的那篇教程里说过，物体的透视线，最终都会消失在视平线上，所以，当画面中先有一条视平线，我们同样可以画出一个立方体。

当物体有一个阴影，我们可以通过影点与阴点和阴足的连线，找到光点和光足。这样也就找到光源的位置。

这张图片，我们就可以通过倒推的方式找到光点，如果画面中再放入其他物体，就可以用光点和光足对其连线，从而做出投影。

正常情况下，物体在光源下的投影，如果在其中出现一个台阶会怎样？

影子就会随着阶梯的形状而产生变化，也就是说阴影投在不同的承影面上，会随着受影面的变化而变化。

这两张图片就明显看出阴影根据地面起伏的形状而变化。

阴影在设计中的应用

第一个是接触阴影，是物体与物体之间接触所产生的阴影，一般这种我们都可以用图层样式当中的阴影来设置。

还有一种接触阴影，是物体立面与承影面之间的投影关系。

第二种是悬空式投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。

第三种是倒影，针对反光较强的面会有，比如镜面、水面、琉璃台面等，并且在表现一些高端产品设计时候经常会使用到。

第四种是长投影，也是这几年扁平化流行起来，带动的一种投影形式。

第五种合成设计中的投影，和实际照片中的场景是一样道理的，这也是所有投影当中比较难操作的。

最后一个创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，当然，这个主要靠大家发散思维的联想了。

案例时间

用两个简单的小案例，来给大家讲解一下如何做投影。

给下面右侧的书籍做一个和左边一样的投影：

给图层添加投影图层样式，不透明度调整到45，角度137，距离26，扩展10，大小35。

我们把外围一圈的投影已经设置好，下面就再添加一个投影，也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影，是近光量最少的地方。

再添加一个投影，不透明度33，角度不变，距离5，扩展10，大小10。

利用图层样式的投影就完成了，大家在调整的时候可以边调整边观察，以达到一个自然的效果。

第二个方案，是给画面中的立方体添加一个投影，要符合光影关系。

第一步要按照透视关系，把立方体看不到的面给画出来。

根据之前我们学到的知识点和画面中其他阴影来进行分析：

先连接几个人物的影点和阴点，我们知道自然光的光线是平行的，并且我们标记出来的也确实近乎平行的光线，既然这样，我们就不需要找到光点的位置。

只要复制其中一条光线到立方体上的阴点即可，然后我们再去找光足的位置。

为了找光足，可以先把画面扩展一下，然后连接影点和阴足，三个参照物连线的延长线会相交于一点，这个点就是光足。

从光足往回连线，与阴足的延长线，相交于影点，这里为了区分，三条线我用三个不同的颜色，然后我们把三点连线，就是阴影的区域了。

可以发现绿色和蓝色是基本重合了，我们就可以忽略蓝色的那条线了。

立方体阴影的范围与形状，然后再进一步刻画。

做个高斯模糊处理，数值2。

在阴影上方新建一个图层，用钢笔工具勾勒一个闭塞阴影，不要太大哦，填充深灰色，模式正片叠底。

做高斯模糊，数值1.4。

为了不让影子边缘太生硬，选择滤镜 – 扭曲 – 波纹 – 41%。

用吸管工具吸一下旁边影子的颜色，填充到立方体影子。

如果影子太重，可以适当降低不透明度，再统一暗部的色调，这样阴影就做完了。

最后总结

• 阴影的反向就是光源的位置；
• 根据项目需要，选择用图层样式做投影或用钢笔/画笔工具画投影；
• 学会在画面中找参考；
• 阴影不是一片死黑，要有环境光和地面的颜色；
• 地面起伏会影响影子形状；
• 画影子时要考虑到看不见的面，它也是投影的一部分；
• 闭塞区域是近光量最少的地方，也是最暗的地方，要柔和，不能太锐利；
• 多看摄影照片会提升你的敏感度。

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

   

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

用户使用App时需要穿越层层页面，在穿越这些页面时需要消耗时间和精力，称之为阻力。

首先探讨一下品类方面的阻力。

如图，这是几个电商App界面，一眼望过去并不知道哪个页面是哪家电商，其实这个并不重要。如果你到一个平台购物，往往不是因为线上产品用户体验不一样，而是因为卖的商品不一样，或者商品的价格亦或配送速度不一样。所以这里它们长的一样我觉得没有太大问题，甚至我认为他们之间雷同是一件好事，用户省去了切换的成本，尤其是新平台跟老平台长得像都是没什么问题的，这样用户切换新平台阻力就小了很多。

但是当我们需要定义一个新品类时，这个思路就会不一样。

定义新品类

举个例子，国际化品牌Airbnb，在2014年的改版中做了很大的调整，这次改版后发现，要找房子下单，搜索浏览和操作效率并不是很高，但是他们还是做了这种低效高颜值的选择。

对大多数人来说，私人房屋短租给其他人的这种服务是个新产品，是高端还是低端用户其实没有概念。所以在2014年Airbnb重新推广的时候，他的设计理念是各位房客先别管这个产品是什么样的模式，先说这个事情是不是看起来很酷。是不是酷这件事对于一个新产品是重要的，如果我用过一个酷的产品，分享给朋友。对方往往也会因为我分享的产品酷而觉得我这个人很酷。有些实用性还不错但是品牌调性没那么高的产品，用户使用完后会觉得“把这个产品分享给别人，并不会给我加分”而止步分享。鉴于此，我认为Airbnb高颜值虽然一定程度上牺牲了效率，但是拔高了品牌调性，也就提高了产品的推荐值，是一个正确的选择。

那么当我们需要重新定义一个已有品类时，我们的思路是什么呢？

重新定义品类

这是我们2016年发版的首页设计，自如和跟之前的租房平台不太一样，所以我们的首页设计要重新定义一个品类。以前，尤其是我们80后对于租房会有什么样的感受都是有一些认知的，比如说黑中介…其实大家都有一些印象，被坑过的80后不在少数。自如出现的时候可能就需要重新整理大家对于这个品类的认知。所以我们在设计首页的时候，先用一个高颜值大图展现一下房子是什么样子（因为我们的房子确实颜值很高品质不错），搜索按纽也不是很大。所传达的思路是我们希望用户在找房子之前对我们的平台有些认知，或者说对租房这个品类，打破固有的刻板印象，有重新的认知。我把这种重新定义已有品类的设计方法定义为“我们不一样”。

在今年，自如的影响力大了很多，在这个背景下我们进行了新一轮的改版。虽然从用户的角度讲可能进APP第一件事是要找房子，但是从企业的角度，企业有很多想要传达给用户的信息，这个页面也是让用户知晓其他业务的入口（自如给大多数人的印象是一个租房平台，但是我们也有像保洁，搬家这类的服务）这些入口也许用户当时不会点击，可是当他需要用保洁，或者搬家的时候就会想到好像自如有这么一个业务，之后他会去自如的首页找。所以多条业务线的并列呈现，也有类似广告曝光的作用。

我用这张图来代替我们的原型图，我们要展现多条用户线的时候很依赖于这个界面上的多个按纽，当时就想能不能顺着这个思路在尽可能的情况下做的好看一点。我们之所以觉得这个界面给你的感觉没那么好，是因为这个界面信息量太大了，还有色彩的冲撞过猛了。 

我觉得色彩的间隙太小了，应该加大，所以加了一些白框，让这些颜色之间离的更远，颜色间的冲撞也就比较小。

然后再看这个颜色本身，我们是不是可以选一些相对共性的颜色，比如把标准的红绿蓝改成红，暖绿，和偏绿的蓝（暖蓝），然后把选中的颜色找他的扩展色，用扩展色画出一些按纽。

这就是我们后来首页的样子。

低频应用的阻力设计

作为一个低频使用的App，跟高频使用的App阻力设计思路最重要的不同点是什么呢？我从学习成本这点来切入。

学习成本

微信的聊天记录删除功能，有一点学习成本。

用户在使用中偶尔向左滑发现了可以删除聊天记录，通过偶尔的触发，用户学会了这样删除聊天记录。通过后期每天不断地使用强化了对这个功能点的记忆。

但是我们的低频App似乎没有这个机会，由于使用次数比较少，有些功能隐藏起来的话用户大概率永远都不会去用。设计时不但要把点赞的按纽放出来，而且点赞的时候还要告诉用户，点赞后飘在右上角。

告诉用户收藏之后，收藏列表可以点击右上角这个按钮查看。我们不但要把所有的功能摆出来，而且还要告诉用户这个功能下一步怎么走。因为他如果这次没学会，以后可能也不会用这个App了，这点跟高频的产品不一样。

点击数据

我们设计首页的时候对于点击数据会有一个预期和目标，但是往往数据反馈会跟设计初衷多少有些不相符。大家可以猜一下哪是点击率最高的…在这里我只能告诉大家一个大概的排名。我们当初希望是租房的点击高一些，因为用户点击后可以了解我们有多少个租房产品，所以我们把它在视觉上设计的重了一些。但是其实搜索是排在他前面的，用户对于大面积的区域像banner这类东西是有免疫力的，所以不管做的多花哨其实用户会习惯性的忽略掉，也就是视觉中心和实际的交互中心不见得一样。合租在租房的前面，整租都可以在前面，看来用户还是比较仔细的看了我们的界面，而且可以断定大家对于合租是什么东西了解的很清晰。

可以看到，“租房”这个按纽我们刚开始设计的时候，感觉应该是高的，因为这个是总集，我们在后期的访问中发现用户认为这个是表示分类，所以设计的虽然明显，但是用户仍然认为这个不可点。

减少阻力

减少阻力，需要跟用户的预期相符。

租房按纽怎么做交互才能让用户感到顺畅？租房的按纽包括右边的四种，其实是个1.5级（介于一级页面和二级页面之间）的界面，所以点击左侧的租房，用户会进入“租房”页面。而右边的这四个Button应该还在，只是这四个按纽变成放大精细版。包括租房Button的底图，也是放大放在页面最上面，这跟用户的预期才比较一致。

从首页到列表，到详情再到下单及更深层的页面，页面的ICON和精细程度和用力程度都不一样，层级越深视觉冲击越轻。

如图，最右侧预约那一列，假设设计师有足够精力和时间，是否可以把最右侧的页面做的视觉更丰富，甚至跟首页一样？然而我们现在的规范里面仍然不允许做的更花哨，原因是我们认为在前半段的时候，用户需要一些阻力来提升注意力，从首页先认知这个租房APP跟他平时认知的不一样，接下来有一些信息的输入比如图片，再往后，如果一旦点约看或者是点签约，这时他的决策做好了，产品要做的事就是一步步往以最快的速度，完成这个事情，不要让他有任何的犹豫，不要让他分心，任何的分心都有一定的概率让这个流程中止甚至是终止。

如图，我把整个流程的信息阻力画了一个曲线，首页阻力是最大的，越往后越小，实质性的信息越多。决策前需要让用户提升注意力，所以信息量要大，表达要丰富。一旦决策后，信息的传达以最简洁的排他形式存在，让用户路径尽可能的缩短也让信息阻力尽可能的变小。

以上就是是我对信息阻力设计的整理，希望大家能够有所收获。

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

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

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