作者：山岩视觉

这一期我想跟大家聊一聊页面中的图标应用。这里的图标不是UI类目的图标，请不要搞混哦。图标的应用在页面设计中有两个比较重要的作用：

 

1、节省寻找大量不太好找的配图的时间，快速明确的制作页面

2、让没有多少阅读欲望的长篇文案具有直观的识别性，明确内容

①、9个功能如果都做配图展示，要罗列非常长的页面，且配图不好寻找，费时费力

②、上半部分文字让人提不起阅读兴趣，下半部分用图标提取主要部分，表达直观

可是很多设计师往往会由于图标的体积较小而不去重视它，应用起来非常随意，使它的作用变得弱化，甚至变成画面中不忍直视的部分。图标的合理应用是可以给图片加不少分数的，而图标应用最为核心的部分就是它的统一性。

 

常见图标统一性

1、外围轮廓统一

2、图标轮廓统一

3、文字提取统一

4、单一图标统一

图标的外轮廓可以分为线（描边）、面（填充）、线面结合三种。我们用圆角矩形来做例子，如下图。

所以我们在应用图标的时候一定要让同一版块中多个图标的外轮廓是统一的，如果混合起来应用会让图片的统一性受到破坏，视觉上是比较别扭的。

 

线（描边）的统一性

 

面（填充）的统一性

 

线面结合的统一性

图标的应用中，针对轮廓的视觉感受，可以有渐变、图案、具象图形、具象物体等不同的手法去做设计性，下图为例。

图标轮廓的应用可以分两种，一种是带外轮廓的图标，一种是没有外轮廓的图标，带外轮廓的图标要在注意外轮廓线、面、具象化统一性的同时，还要注意图标本身的线、面、具象化统一性。

 

可以通过更换图标或改变线的粗细的方式变为线的外轮廓 + 面的图标

外轮廓由于是复制应用的原因，他的形状统一是很容易满足的，但是图标是需要每个针对的去寻找相应的样子，所以很容易忽略他的外形统一性，下图为例：

做了渐变效果的面（填充）的外轮廓是很统一的，但是图标部分，第四个是面（填充）的结构，前面三个是线（描边）的结构。

把最后一个改为线的结构，但还是会感觉有些不舒服，主要原因是因为前面三个图标都是偏圆形的，最后一个是偏三角形的，所以尽量让图标的形状结构相似一些。

这里要说的一个点是，如果你做的图标中有超过两个不同的形状结构，是可以不去做统一的。比如下图中的图标有宽矩形、窄矩形、倒三角、正三角四种形状结构。

没有外轮廓的图标有形状类型和非形状类型两种，因为没有轮廓的限制，在注意上边的统一性问题的同时还要注意高度的统一感，而有些图标由于结构问题，在同样高度的情况下比另一个看起来更大，这种时候需要缩小一些，然后让这些图标在垂直中心上是一条线。

文字提取是图标中较为简便和应用较为广泛的一种形式，通过提取需要表达的文字部分的第一个字、主要的字或能够概括其含义的词语，应用一个外轮廓进行统一。这种方式不容易出现太大的错误，当然也相较于图形应用方式来说有些单调。

 

提取文案中一个字作为图标

 

文案概括成几个字作为图标

针对文案概括部分我要说一个设计师的通病，设计师很多时候都不注意文案的内容，有些人也根本不去阅读自己要做的这部分文案，这是很不好的习惯，即便是为了做统一感我们也要具备一定的文案识别和应用能力，如下图中的应用。

第一个框中的结构跟后边不一样，很不舒服，这里完全可以去掉“外表”直接写“不起皮”，如果客户需求必须保留“外表”，那么相应的后边四个就要增加前缀词，比如“无气味”可以写成“烤漆无气味”、“不怕水”可以写成“琴身不怕水”等等。最后一个框中的“耐磨”也是一个道理，前面既然都是三个字，这里可以用三个字就尽量用三个字，可以用“耐磨损”等。

文字的外轮廓应用跟前面的外轮廓应用是一样的，可以有线、面、具象化等多种表达。

利用完全一样的一个图标进行统一表达，也是图标应用中较为普遍的应用方式，这种方式可以使画面统一性、整体性更强，显得更加规范，不过在一个图片中大量出现这种形式会显得比较单调。

希望大家在之后的图标应用中，能够有更好的思路，争取把图标用对，用好。