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

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

蓝蓝设计( 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) 浏览(2747)

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

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