emengweb
写在前面
图标承载了App大部分功能的引导入口，是设计中是相当重要的一环，也是UI设计师的必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。用什么风格、什么元素、是否会影响产品的统一性，多少会有这样的小纠结，这种纠结在初代产品设计中表现尤为明显！也许很多设计师并没有太完整的方法论，只是凭经验和感觉，这样就任意造成输出结果不稳定、页面杂乱等不良的后果。
下面根据视觉重量分享一下系统图标从风格定位到使用维护再到后期维护的全过程的一些思考。
分享目录
01、视觉重量；
02、不同风格图标的视觉重量；
03、在页面不同位置使用不同视觉重量的图标；
04、怎样确定整个项目的图标基因与风格；
05、进一步统一；
06、添加个性；
07、后期维护；
01、视觉重量
视觉重量是对元素吸引人眼球力量的度量，二维的物体都能够吸引人的注意力。一个元素吸引力越强，其视觉重量也就越大。
举例来说，两个元素一个很大一个很小就能形成鲜明的对比。
而通过组合不同元素的特性，我们就可以控制视觉重量。红色比蓝色更加吸引人，大的元素比小的元素更加吸引人，所以说，一个大的红色物体所具有的视觉重量就要大于小的蓝色物体。
本篇将从图标的大小、颜色、位置、形状来衡量图标的重量，下面是前人通过分离和测试得出的关于几个元素特征对视觉重量的影响说明。
面积：面积大的元素相比小元素的视觉重量要高。
颜色：饱和的颜色比不饱和颜重量高；彩色比单色重量高；白色背景下较暗的元素视觉重量较高；暖色比冷色重量高，红色是一般认为是重量最大的颜色，黄色则为最轻。
位置：在作品中所处位置较高的元素重量较高；APP内距离屏幕黄金位置越近的原色视觉重量越高；前景元素所的重量要比背景元素高。
形状：依据复杂程度，复杂的形状要比简单形状的视觉重量高；同样面积，形状规则的物体比不规则的物体重量较高。
02、不同风格图标的视觉重量分级
根据以上元素的面积、形状、颜色等可以简单将不同风格图标元素拆分组合并按照视觉重量由轻到重的顺序进行排序，如下图：
将图标按照上图的方式进行拆分组合，可以得出无限多类别，为了方便快速识别与设计选择，我们可以大致的将线性图标的重量定级为：2星以下；线面结合图标为：3星；面性图标为：4星以上 。以下进行部分距离说明：
视觉重量：
线性图标(线+单色)：这是最基础、最常用也是APP内部使用数量最多的图标类型之一，但不一定是使用在很重要的位置。使用时需要确定线条粗细和圆角弧度并一以贯之（如何选择请看第三、第四部分）
视觉重量：
断线图标(断线+单色)：在局部进行断开呈开放路径，选择角落作为断线位置，不破坏原本造型，最短断线长度为线条粗细的2倍。使用此类图标比较考验设计师的功底，处理不好会显得比较杂乱，而且也不是所有图标都适合作断线处理
线性图标(线性+双色/渐变)：双色与渐变图标在实际应用中非常广泛。一种可以灰色跟有彩色结合，有彩色的颜色可以是企业色，可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是同色系色系组合而成的渐变，组合使用时可以选择多种色彩，单个图标进行单色渐变。运用灵活，可以用在金刚区、列表或者作为装饰，但必须注意当前页的颜色不一过多，多了就容易花。
还有线性与多色搭配，但是没见过用的比较好的，APP页面内也不建议尝试。
视觉重量：
线面结合(线性+小面)：这是相对艺术化的图标风格，面更多的是充当装饰点缀的作用。面的表现方式也有很多种，可以是单色的，渐变色的，也可以像 MBE风格（如下图）那样提取主体结构形成的面，也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。
很少用去承载功能入口。当需要作为入口使用时限制也比较大，辅助面的面积不宜过大，且页面要轻量化。
线面结合(线性+大面)：大面积是指辅助图形的总面积一般超过主要线性结构的面积，多用于装饰。也可以用在缺省页面作更大面积情感化插画使用。
视觉重量：
面性图标(形状+单色)：同基础的线性图标一样，这类图标也是基础、最常用、APP内部使用数量最多的图标类型之一。一般用于页面次级模块承载功能或业务的入口，也多用于APP个人中心功能列表类似的位置。
面性图标(底板+线性)：一般用在复杂结构APP的次要位置或是用在轻量化APP的金刚区。属于不常用的类型。
视觉重量：
面性图标(底板+形状)：最具代表性的金刚区图标用法。带渐变的异形背景与带有阴影的反白概括图形，等于是面+面的组合，已经是常规图标类型中视觉重量最重的类型了。多用于业务复杂的电商、旅游、社交、生活服务、外卖等平台型的APP，也将是整个APP的唯一模块。
视觉重量： 五星+
面性图标(等轴侧图标)：2.5D轴测图的形式做的立体图标。与常规图标不同，这样的设计手法会展示图标3个不同的面，细节丰富设计感强，能在同类竞品中脱颖而出。
这算是比较个性化的做法，诸如实拍图、节日运营主体风格图都带有各自业务的属性，不能算在常规图标类型中，以下就不再一一列举。
03、在页面不同位置使用不同视觉重量的图标
图标在页面不同位置有其不同的功能作用和视不同程度的觉重量，根据页面模块的重要程度确定使用类型的图标。以下将APP可能用到图标的模块按照重要性的由低到高大致分为四个类别，并从这四个类别出发详细介绍图标在APP常见的使用位置。
注：底部导航按照页面层级的概念来讲，他的层级应该是居于所有层级之上，但从视觉重量上来讲应该归属于栏目图标一类。因为经过多年的用户教育，用户很清楚底部导航的作用；从另一方面来讲我们页不至于将导航图标做的比用于实现价值变现的业务入口更重要吧。
而且导航作为APP必备模块甚至可以放进进本功能模块里，但因为有些APP会多在导航图标做品宣、个性化设计和节日主题设计等等，因此暂时放在栏目图标分区类。
基本功能区
一星图标。一部分作为入口是APP必备的功能，诸如返回、删除、查找、提示等等，也是所有APP必定会出现线性图标的位置；另一类配合文案装饰使用，一般与文案行高等大。大概两年前还有这类入口为主使用面性图标，随着轻量化设计越来越被大众所喜爱，现在基本上都是使用线性图标。
常规模块：这是基本功能中的基础图标，不重要但又必不可少，多用在内页特别是信息交互的表单页面。
社交、帖子：用户熟知的功能，也多用线性风格。
顶部导航：扫一扫、搜索、识别等等，还有诸如返回、下一页、选择、转发等等。
上图饿了么首页的定位图标使用了面性图标，这是受业务影响，外卖配送范围有限，需要用户给与一定的关注。这属于个性化的问题，将会在第6部分详细说明。
辅助说明类和栏目图标
二星或四星，三星很少。
纯辅助说明类的图标，一般使用二星或三星。
辅助解释入口文案的类别，图标为辅；还有作为入口集合的栏目图标，图标为主，功用有些许区别，但在设计的视觉权重上可以视为一类。展示方式一般为列表或宫格。
具体使用一个级别的图标还是使用多种级别的图标，还要根据具体的业务去选择（将在第四部分详说）。下面大致是部分具体的模块类型。
纯辅助说明，一般是二星或三星：这类页面更重信息内容，图标一般不容易准确的表达文案内容，只是作为丰富页面并带有主题相应的特性，比如VIP的尊享感和金融APP的安全感，一般没有入口或者不会在视觉上突出可点击。
有入口的二星用法：上图是比较合适的用法。值得注意的是，使用宫格展示的时候需要注意页面信息的丰富程度，信息比较丰富时可以像上图支付宝一样的做法，甚至信息量跟大需要突出信息本身的时候可以用列表也可以用一星图标；信息比较简单的时候建议用四星图标，或者图标要饱满一些，做的不好就会跟纯辅助说明类图标一样（百度有钱花产品介绍）。
有入口的三星用法：很少用而且要用很少。很少用是因为很难用，要继承APP图标基因，又要在线性与面性图标中保持平衡与统一，很考验设计功底。要用很少是指这类风格要较少的使用，APP内图标的使用种类也不宜过多。这种算是比较个性化的设计，用的好能为APP增色不少（微医APP），用不好页面就显得比较花，总之，新手不建议尝试。
有入口的四星用法：比较常见，不多说什么
金刚区图标
绝大部分使用五星及五星以上图标。金刚区是一个页面中头部的重要位置、是页面的核心功能区域，为各个子版块分发内容引导流量，是价值变现的主要入口。
五星级五星以上：绝大部分有金刚区模块的APP（电商、旅游、社交、教育等几乎除工具类以外的APP）使用五星及五星以上图标吸引刺激用户，有较强的引导性，且用户群体比较广泛。五星的比较常见，五星以上是比较个性的相对比较少，做的好的有：饿了么、途牛、盒马鲜生、小米有品等等。
五星以下：支付宝使用线性图标主要有三点，第一，作为钱包级别的应用要给用户带来安全、可靠的感觉；第二，支付宝并不直接依赖收付款工具来赚钱，不需要过度设计；第三，该图标配合底色仍是当前页面的视觉重心，所以在金刚区的视觉上的设计尽量克制、简洁。
虾米音乐的金刚区并不是主业务，只是为营造页面的丰富结构而刻意构建，与其他模块并无本质区别；从设计上讲，追求轻量与简洁，整个APP只用了一星图标。
以下情况的APP金刚区可以使用五星以下的图标：
·从行业考虑，金融类工具特别是钱包类工具；
·从价值考虑，放在banner下方非核心模块的工具入口；
·从设计考虑，极简工具类应用，只用到一类或两类图标，如虾米音乐、Airbnb、网易云音乐；
所以，APP使用图标与行业属性、体量大小、设计方向有很大关系，这些将在第四部分详细说明。那么关于金刚区你清楚了吗？还有更多关于金刚区的讲解与设计原则请看（金刚区设计的四步法则：https://www.toutiao.com/i6612804672124092941）
04、怎样确定整个项目的图标基因与视重
图标的基因来源包含两个方面：
统一性：诸如边角弧度、线条粗细、渐变角度等贯穿所有整个项目图标设计的始末。源于APP行业属性、目标人群、产品定位、品牌基因里的基本特性；
个性化：能让用户快速识别的图标元素，更多源于品牌基因（具体请看第六部分：添加个性）；
图标的视重源于图标在APP中所处的位置，上文已经讲过。
图标的种类数量源于产品定位
确定图标基因
统一性性质的图标基因应该从形状、角度、颜色等三个方面进行考虑，如下图：
边角弧度：边角弧度大小最能决定图标气质。大圆角造型圆润，可爱活泼；小圆角造型简洁，亲和而不失稳重；尖角造型直接，严肃庄重。
电商购物类产品需要亲近用户，需要吸引、鼓励用户做购买决策，按钮、图标、甚至整体设计语言需要传达出足够的亲和力。与之相反，金融类或者纯工具类产品需要方便用户简单而直接的操作，不需要过多的讨好用户，图标的设计需要突出产品的专业、安全、稳重等属性。
线条粗细：同样没有标准答案，基于二倍图，常用2px、3px、4px。与边角弧度类似，
2px线性图标轻盈活泼，适用于绝大部分APP类型，特别适用于女性APP。3px粗细适中，没有突出特征，理论上任何APP都可以使用，但是往上往下适配的时候会出现半像素的情况，只能使用矢量或上传到iconfont上使用，比较麻烦。4px线性图标稳定厚重，很适合金融类产品与主体用户是男性的APP。
随着iOS12的大标题风格普及，屏幕面积越来越大，APP设计留白更多、更注重突出内容本身，4px图标的图标因其厚重饱满，会得到越来越大范围的应用。
线是否断线：品牌基因里有就用，没有就不要。设计得当将是个性化的设计点之一。
线面倾斜角度：保持与品牌基因一致，品牌基因里没有就尽量使用45°倾斜角。
锯齿走向可以看出明显的区别，45度角，锯齿的走势是可以接受的，而别的角度锯齿就没有那么整齐了，会有边缘的透明度。
整体视图角度：图标的整体视图氛围正面和侧面，通常会统一使用正面视图，造型简单直观，方便用户快速识别。非正面视图设计页是个性化的设计点之一，例如：饿了么金刚区轴测图标。
渐变角度：与品牌基因保持一致，否则可以不用，也可以自行拓展，也是个性化设计点之一。
统一色系：与品牌基因保持一致。
确定图标的种类数量
选用图标数量与图标各类图标视觉重量和产品体量大小有关。上图已经为各种图标粗略定好视觉重量，为进一步方便理解，这里引入家装的增选配概念来解释。另外将数量繁多的产品类型简化为单一业务工具到复杂业务平台的区间。
图标的增选配：标配是指必不可少，每个APP必备的类型；选配是指根据业务量、体量的大小适当选择利于传达运营要求的个性化类型；增配是指进一步增强个性化的类型。
那么，上图左右部门相结合。可得：
纯工具、单一业务产品—只需1星图标。例如：Airbnb、虾米音乐（吐槽：国外，国外产品业务大都比较单一，设计比较专注、克制，图标类型也相对比较单一。国内的APP不管什么产品都会趋向于平台化方向发展，APP内部架构层叠，非常复杂）
业务最为复杂的APP（例如：天猫）使用了三种，国内大部分APP也都只是使用2-3种图标类型。下面分别看一下两个极端的标杆产品，虾米音乐APP和天猫APP。
虾米音乐是一款功能比较单一的产品，设计比较轻量化。从logo到整个系统图标的设计语言基本上都是线性，属于一星图标。
播放界面虽然使用了三个面性的播放控制按钮，按道理讲这里只是系统功能图标不需要强调，只需把不常用的功能，比如：取关、找相似、漫游找相似等功能做删减，然后适当隐藏。不需要过度突出用户所熟知的内容，给产品区别于竞品的特色功能更多的展示空间，播放控制相对于其他功能使用大小的对比就够了。
所以，勉强可以算是只使用了一星图标
天猫APP在国内来说，业务算是最为复杂的产品之一，业务越复杂的产品，图标其实就不好控制，天猫这里使用了一星、四星、五星三种图标。首页金刚区是一般的五星图标，带有运营属性的都用了面性或底板+面的图标属于四星图标（在多种业务APP中，这类图标使用量最大），其余顶部和底部导航以及个人中心都采用一星图标。总共用了三种不同视重的图标。
综上：一星是标配，在单一业务APP在使用量最大；四星是选配，在多种业务APP中使用量最大，一星与四星的搭配最为常见。金刚区5星或者5星+并不是所有APP都会用到，作为升配可多选。那么，可以粗略的得出种类梳理的搭配选择：
1~2种最能保持页面图标的统一性。业务种类多可以使用三种，比如行业标杆天猫与支付宝（支付宝本身是个钱包工具，但加了个口碑外卖，所以整体性没那么强）。超过三种就很难控制了，新手不建议尝试。
05、进一步统一
上文了解了图标的分类、使用位置、基础基因统一性及常规选择，下面将继续介绍图标的视觉统一性。
基础基因前文已经讲过，以下以网格为基础来讲如何保持视觉均衡。
建立Keyline模板
Keyline网格模板最早应该是2014年Material Design提出的，一直是UI设计师统一两个平台系统图标的最好参考，苹果设计规范相对没有很克制，单适配苹果机型是完全没问题。
图标网格已经有三四年的时间了，网上各种教程也是层出不穷。我们这里不作探讨，结合两种图标设计规范给以iOS设计稿为主的设计师一个最合适的参考（如下图），深入研究请看谷歌设计规范。
第一、图标切图尺寸保证为8的倍数（至于为什么请看：UI中8像素规则https://www.douban.com/note/606177704/），再不济也得是4的倍数。
第二、保证对其像素，然后切图大小为48px，网格最大长宽对齐边缘（如下图），这样做的好处是方便苹果设计高中纵向对齐，可以根据你自己的需要自行调整。
第三、设置触控区域大小，对于单独使用图标的入口，需要保证一定的触控区域以方便用户操作。一般1cm的物理面积的触控区域足够用了，简单点，iOS设置的触控区域为44pt，安卓为48pt（详情请看https://www.25xt.com/appdesign/3789.html）
第四、内圆角规范，内圆角半径=外圆角半径-线条粗细值。
不同尺寸的构成元素的统一
以8的倍数创建多个图标尺寸的已经能满足单一业务APP的正常使用，多业务无法满足需要时可以适量使用4的倍数图标。
同尺寸的均衡问题
弯曲的线条会比竖直的线条看起来细。 圆形的外边框上应适当的加粗（小尺寸可以忽略）。
倾斜的线条也会比竖直的线条看起来细。 倾斜的线条也应适当的微调（小尺寸可以忽略）。
留白不足时，适当调节线条的粗细。 留白过少，呼吸感不足时可以适当调整内部元素的粗细。
06、添加个性
上文讲的都是统一性的东西，如果想让你的设计有更好的体验，更强的识别性，你可以从以下几个方面着手：
融入品牌基因
品牌基因括品牌核心价值和品牌个性，不同的品牌基因，是各品牌之间形成差异化的根本原因。可以在图标的运用场景中融入品牌基因，让用户一眼就能看出这就是你的产品。
品牌故事：通过对品牌的定位梳理出品牌故事，从而推导出品牌性格，最后提取出视觉语言，辅助图形。这里比较抽象，依赖于整个团队的努力，没有概括性的方法论。（更多请看https://www.uisdc.com/brand-genes-integrated-into-product-design）
品牌logo：源于品牌，是品牌的高度概括。在图标中融入品牌基因最简单的方法还是要从logo入手，主要有以下三点：
直接使用：这是最常见也是应用最广泛的方法。需要注意的是logo作为小图标使用，需要做一定的减法，使其与模块其他元素尽量保证视觉均衡。
提取logo某一特点：如上图唯物APP提取的双色调特征。还有很多诸如优酷APP的渐变叠层的基因、有道精品课的绿色和半透明的基因、知识星球APP的断线基因等等，就不再一一举例。
提取品牌色：这是最常见也是应用最广泛的方法。需要注意的是logo作为小图标使用，需要做一定的减法，使其与模块其他元素尽量保证视觉均衡。
运用主题
通过换装来渲染新年的气氛，引起用户的关注，激发用户和产品之间的互动，进而提高产品的用户活跃度，多见于电商产品APP。（有一篇设计执行好文http://www.woshipm.com/ucd/1040729.html）
趣味性设计与动效
趣味是指能带给人愉悦的感受，小图标的趣味性一般要与动效配合。
QQ底部条的图标，Tab切换时通过图标线面变化和图标视觉引导的方向变化，给人一种依依不舍、想要召唤你回来的感觉，很是好玩、有趣。
07、后期维护
输出上传到iconfont，方便管理，也方便前端开发。使用字体图标防止不规范设计图标上线后会虚化