如何增强图标在界面设计中的特色？

版权申明：本文原创作者“风尾竹”，感谢“风尾竹”的原创经验分享！

打开一些App，我们会发现App的图标设计的非常普通，没有任何特色，在素材网站上都可以下载到这样的图标贴合上去。例如微信的底部导航栏图标（图1-1），对于超级App的图标，因为本身已经具有足够的用户量，已经不需要通过特别的视觉设计手段去提升用户的认知度。另外微信需要面对的人群更加广泛，此时图标设计功能识别性是更加重要，所以采取保守了设计策略，图标设计看起来普适性，缺乏个性的设计。但一般的App的图标设计如果也采用这种普适性设计策略，那么界面设计将缺乏特色，看起来非常的普通。那么如何设计非常有特色的图标设计了？这时候我们需要引入品牌设计的理念。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

（图1-1）微信主界面

通常意义的品牌包括了理念、视觉、行为三个部分，而我这里所讲的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。

图标的属性构成

图标设计视觉形式多样，新人经常陷入临摹各种海量图标中。事实上这是没有必要的，我们只需要总结好图标的属性规则，通过组合每个属性的变化，就可以构成无数种风格组合，也就可以得到无数种图标视觉风格。下面是我归纳构成图标的一些属性。每个属性可以有多种变化方法。

元素的设计

元素（单元素）

图标设计用一种事物暗喻另一种事物。例如用"相机"表达照相功能，构成图标的寓意一般使用单一元素去表达一个功能，这也是主流的图标设计形式。例如ENJOY（图1-2）的个人中心功能图标，全部使用了单一元素去表达相应的功能。

（图1-2）单元素图标

元素（双元素）

有时候为了同组图形有所区分，会增加一个元素，用双元素构成新一个图标图形。双元素会显得图标表达拖沓，属于一组图标，图形之间单一元素无法区分，才会使用的设计策略。例如最美有物的（图1-3）个人中心的表单功能图标，"我的画报"和"心愿清单"使用矩形框只能表达一个纸质读物的含义，必须附加另外的图形，才能让这两个图标有所区分。

（图1-3）双元素图标

面的设计

面（剪影）

在App中使用的图标常见的两种风格就是剪影和线性风格，剪影图标通过面来塑造形体的图标，例如良仓（图1-4）的底部标签栏图标采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了剪影图标设计感的差别。

（图1-4）剪影图标

面（线性）

线性图标与剪影图标不同的是，线性图标通过线来塑造形体的轮廓。线也是一种面，只不过线是比较细的面。例如落网（图1-5）底部标签栏图标采用了线性设计。App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外最新的苹果iOS11系统倾向于使用剪影图标，所以线性图标风格可能会使用越来越少。

（图1-5）线性图标

面（混合）

在App中如个人中心的表单栏，可能使用的风格不限于剪影或者线性，而是两种风格混合在一起使用。例如良仓（图1-6）首页的功能图标采用剪影线性混合设计形式，面一般选择整个图形的阴影面填充。

（图1-6）填充阴影面剪影线性混合图标

除了填充阴影面外，还可以线框内再寻找一个面填充，如男衣邦首页的功能图标（图1-7）。因为外描边线+图标中间填色的做法很像卡通漫画，所以此类风格如果搭配大圆角，会显得图标非常的卡通化。

（图1-7）剪影线性混合图标

线的设计

线（粗、细）

图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX两种。线条的粗细可以带来不一样的视觉效果。例如淘宝（图1-8）采用了2PX的细线设计，而京东（图1-9）采用了3PX的粗线设计。

（图1-8）2PX细线图标

（图1-9）3PX粗线图标

细线显得精致，粗线视觉面积大，显得厚重敦实。最美有物（图1-10）的底部标签栏图标采用粗线条设计，线条使用了夸张的5PX，这个必须图形极简才适合使用。

（图1-10）最美有物粗线图标

有一种特殊做法（图1-11）为了增加图标的设计丰富度，可以采用外粗内细的手法取得不一样的视觉效果。由于这种特殊的纹理感，适合风格特立独行的应用。需要注意的是由于采用双线设计，如果图标的图形本身线条比较多，那么会显得图标设计非常的复杂拖沓。

（图1-11）粗细线图标