图标造型时，你是否考虑过这两个问题？

图标，又是一个老生常谈的问题了。作为UI设计师的我们无时无刻不在绘制图标以及准备绘制图标，在一些分类墙等多图标界面，图标的好坏还能直接影响整个界面。

图标的好坏除了我们在绘制过程中对整体统一感的把控（包括但不限于渐变角度、线的粗细、圆角大小等），还有一点就是对图标的造型思考。这里我总结了两个平时容易忽视的问题，第一是否考虑图标大小？第二图标造型是否饱满？

 

是否考虑图标大小

图标造型前，图标的大小是明确的。在绘制图标时我们是放大仔细绘制，不会受限于图标尺寸大小，但真实落地则不然，尤其是那些尺寸小的图标。举个例子，设计师画图标好比是拿着一个放大镜，要力争做好每个细节；而用户的真实界面中，细节太多并不利于用户对图标的识别。

 

小图标

以下尺寸均为2倍率下的大小目前我看见的最小功能性图标大致在36px左右，用户界面中常见的小图标尺寸大致是36px~44px（辅助矩形大小、非绘制大小）。看过《最好的UI设计师》的小伙伴应该记得范例那一章作者根据Aubrey Johnson的相关实验，得出图标的直观表现力与细节的多少呈反比的结论。

在绘制小图标时，由于受限于尺寸，我们更应该尽量减少图标中的细节，便于用户在真实界面下识别小图标的含义。

上图两个列子中，左图爱奇艺个人中心中的“签到抽大奖”、“黄金会员”以及”勋章“均采用了直观表现力更强的面型图标，风格上也选择了不会带来视觉负担的微渐变。右图的网易云音乐动态页中的”分享“、”评论“、”点赞“小图标，则是采用了2px的线型图标，线条轻量，造型精简。

 

大图标

以下尺寸均为2倍率下的大小

界面中功能性大图标的尺寸大致是60px~120px（不绝对，更大的可以作为小插图而非图标），多以宫格图标与金刚区图标为主。与小图标相反，绘制大的图标要增加图标细节，不然会很空泛。

上两个例子是以线为主的大图标。采用线面图标的波洞，线条造型丰富，以颜色点缀；采用线性图标的虾米音乐，则是多线条绘制形成小场景。以线为主的大图标线条造型都更加丰富，细节更多，在保证识别度的同时也不至于视觉空泛。而以面为主的大图标，则会从光影、色彩等方面丰富图标造型。如下图：

马蜂窝采用的微渐变面型图标无论是何种尺寸的图标效果都是不错的，再增加一些颜色投影，是对新手设计师非常友好的图标风格。

而业务繁多的电商产品之所以偏爱背景栏面型图标作为金刚区图标，也正是因为背景底板图形天然的统一大小

 

图标造型是否饱满

所谓图标造型是否饱满，是指整个图标占辅助矩形的面积是否饱满。如下图：

更加饱满的图标在视觉上大小会更加均衡，图标辅助线的存在也正是为了这点。我们以MD经典的“铅笔”图标为例，看一看造型饱满对整体图标视觉大小的影响。经典的MD铅笔编辑图标为一个倾斜45°的简易铅笔。为什么一定是倾斜45°呢？为了解答这个问题，我把这个铅笔分别旋转至90°、180°，与45°进行对比。

通过对比我们不难发现，45°的铅笔图标所占的面积是最多的，更加饱满且方正（无左重右轻、上重下轻的感受），与同系列其他图标放置在一些查看，视觉大小的统一性也更高。

 

划重点

对图标造型的思考是我们绘制图标的第一步，针对不同尺寸的图标我们在细节的绘制上要做出区分，小的图标要减少细节，大的图标则要丰富细节。图标造型时也要从各个方向保证图标的饱满，以此做好整体图标的视觉统一。

 

参考引文：

《最好的UI设计师》颜伟  电子工业出版社 2018年6月第一版

 

原文地址：海盐社（公众号）

作者：人类君