图标绘制基础指南，一篇就够了！

对于刚接触UI相关的同学来说，绘制图标是占界面问题比重较大的一块内容，虽然网络资源已经有很多，但仍旧做不好一套统一风格及趣味性的界面功能图标。

图标绘制基础指南，一篇就够了！

—— 欢迎关注我的公众号【 UX设计笔记】，每天推送设计知识！或加我微信 justifify 交流哦

主要四个要点：

-

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设计笔记】，每天推送小知识