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

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

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

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

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

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

明暗

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

去色检查画面明暗关系

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

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

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

视觉焦点

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

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

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

高斯模糊法看视觉焦点

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

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

色彩

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

色彩插件检查配色

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

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

今天分享软件后台界面设计，

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

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

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

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

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

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

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

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

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

UXRen

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

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

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

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

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

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

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

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

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

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

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

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