对于刚接触UI相关的同学来说，绘制图标是占界面问题比重较大的一块内容，虽然网络资源已经有很多，但仍旧做不好一套统一风格及趣味性的界面功能图标。
图标绘制基础指南，一篇就够了！
主要分成4个要点：
- 1、确定风格特征
- 2、提取共同DNA
- 3、造型绘制
- 4、细节技巧
一、如何确定图标风格？
我们先了解有哪几种风格：
1、面性图标（一）
稳定、安全、分量感、体量较重
使用时需考虑信息层级与其他元素的体量比例
2、面性图标（二）
特征鲜明、结构复杂、体量较重
使用搭配需谨慎，不实用于轻盈优雅的页面
3、线性图标（1）
轻盈、连贯、优雅、体量轻
常用语整体气质偏有人简洁页面，但不宜大面使用，可能会造成页面的轻浮，没有重心的感觉。
4、线性图标（2）
层次感、主次分明、强化品牌色
图标中的核心元素适用品牌色突出
5、线+面图标
个性、年轻化、灵动
较为复杂，适合装饰和强调，适用于个人性化比较强的个人作品集或展览。
6、2.5D图标
立体感、表意更清晰、装饰
适用于较大图形、装饰图片、不适用于较小元素和功能图标
7、拟物图标
真实、映射生活
模拟真实场景，用以教育智能手机初期用户，目前更多用于游戏
二、什么是共同的DNA？
拥有一致的特征
如：表现手法、颜色、粗细、角度…
一样的风格
单色扁平线性图标
彩色平面图标
同色系深浅叠加
一样的圆角角度
圆角传达什么感受
圆润可爱，轻松活泼，热情
直角传达什么感受
理性工整，严谨可靠
一样的线条粗细
细线有什么气质
细线条的感受，轻盈，精致，女性化
粗线有什么气质
硬朗、敦厚
一样的特征
断线
断线的方向、大小、出现的规律
双色拼接、色彩叠加
固定搭配、叠加规律透明度、错位留白空间
三、造型绘制
几何造型
通用的造型方法，一切不规则形状，都源自于规则形状
象形造型
适用于含义单纯的图标，通过形状相似性或物理对象的引用
表意造型法
含义复合型图标，无法直接使用象形的造型法造型。
四、实战技巧，注意细节
多用布尔运算
- 1、让你的图标更加规范
- 2、对图形结构理解更加深刻
- 3、后期更改形状更加方便
视觉重量一致
不能追求物理尺寸的绝对一致，视觉重量会带来错觉
同样尺寸下，方形会比圆形看起来更大，为了达到视觉重量的一致，需要缩小方形，或放大圆形。
规范图形设计大小
1、物理尺寸的一致性
2、视觉重量的一致性/正负空间的比例一致性
图标出血
- 1、保持图标的透气感
- 2、容差，为斜角图标留溢出的空间
- 3、防止图标贴边切，可能会明显的切割痕迹
如下例子：
1、统一风格
2、统一光源
3、统一线条粗细
4、统一正负空间比例
5、统一圆角/直角
6、统一倾斜角度
感谢您耐心的读完，真心希望你能获得新知哦～
原文地址：UX设计笔记（公众号）
作者：UX设计笔记
