01 常见图标风格汇总
- 线性
- 面型
- 线面
1、 线性
1.1单色
单色线性拥有简洁、清晰的特性，在视觉层级上较低，适用于基础功能图标。b端较为常见，移动端常见在设置页面或导航栏通知、分享等图标设计上。
1.2双色
双色线性在单色的基础上丰富配色，解决了单色线性原本过于单调的问题，在提升趣味性的同时，也将视觉层级进行了提高，同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化，需要考虑是否符合产品风格及主流目标用户审美。
1.3渐变
线性渐变还可以在用色上进行区分，简洁的用色可以给人带来科技、炫酷感，在车载ui中较常见。丰富的渐变配色则更适合运营入口设计，有着年轻化、热烈的氛围。
1.4断点
断点风格有线性单色&双色该有的个性，并且在线性双色基础上继续提升趣味性，使用需要注意产品目标人群年龄段。
2、面性
面性与线性的区别在于前置视觉面积更大，整体视觉层级比线性高。下面部分和线性风格重叠的内容就不赘述。
2.1单色
2.2双色
2.3不透明度
面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。
2.4晶白
晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。
2.5磨砂玻璃
又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。
2.6等轴侧
也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。
2.7渐变
这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。
2.8新拟态
新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。
2.9轻质感
通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。
2.10写实
这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。
2.11抽象
通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。
2.12卡通插画
这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。
2.13像素风格
这类移动端界面较少见，，还有就是一些像素游戏中，比如「我的世界」。
3、线面
3.1线面
和线性双色图标类似，趣味性较强，具备个性化特点，可以做Tab选中状态。
3.2描边插画
类似卡通插画，在卡通插画基础上加入描边。同样颜色，在一些特定的前后交接处利用线条做区分，算是多一种设计表现形式，同样美观有特色即可。
02 图标设计流程
1、明确语义
图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。
在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。
2、关键词详解发散
这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。
3、确定风格
我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。
4、提取造型
经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式
5、创意输出
输出具有创意且美观的图标
