UI基础之图标设计

一.扁平化图标的分类

1.纯平面

特点:纯色、剪影

优点:简洁，清新，舒服，视觉识别度较好，色彩明朗，设计感强烈，图形表现高度概括

2.轻折叠

特点:纯色、折痕、轻投影

优点:比纯平面丰富，有轻微视觉空间感，色彩明朗，轻投影，营造出轻盈的感觉，视觉统一性好

3.轻质感

特点:轻渐变、层次简单、轻投影

优点:简洁、干净、明朗，有一定的精致感，有简单的层次，轻投影创造轻度立体感而又轻盈清新，内容相对丰富

4.折纸风

特点:折叠、投影、结构

优点:层次丰富、结构明显，易于创造空间立体感，几何感明显，复杂和简洁结合，挑战了扁平化的立体性。

5.长投影

特点:投影、层次

优点:色彩对比度大，有明显而单纯的投影，创造鲜明的层次感和空间感，视觉冲击强烈。

二.扁平化图标三种绘制技法:

1.通过现实物品绘制

2.通过拟物化图标绘制

3.通过剪影图标绘制

1)通过现实物品绘制

1.观察现实参照物
​ ⒉.重新描绘图形
​ 3.去除多余元素
​ 4.将图形抽象化
​ 5.使用鲜艳色彩
​ 6.增添一些细节

2）通过拟物化图标绘制

1.观察拟物化图标

⒉.绘制底部轮廓

3.绘制主元素轮廓

4.增添细节

3)通过剪影图标绘制

1.收集剪影图标

⒉.绘制基础形状

3.给形状填充颜色

4.增添细节

三.如何绘制好的图标?

1.可识别性——一眼看出来是什么

2差异性——同类产品体现差异性

3.一致性——主色调保持一致

4.突出品牌——看到就知道什么品牌

5.色彩鲜活

6.慎用白色——识别度低，淹没在鲜艳的色彩里

7.多场景测试——多背景测试

8.高品质感

GET新技能

1.填充为0

2.透明渐变：同色渐变，最后一个色标调整透明度0%

3.四色渐变：角度，最后一个吸取第一个颜色，避免第一个与最后一个颜色过渡生硬

4.半透明效果：投影+白色内反光
图标线条粗细统一化（AI）：

1. 对象>路径>偏移路径
2. 对象>剪贴蒙版>释放>取消编组