# 图标
**系统图标** 是指具有明确指代含义的图形符号，是常用操作、文件、设备、目录等功能的图形化表现形式，用于触发界面中的局部操作，是界面设计中的重要组成部分。
## 设计原则
系统图标在设计表达上**简洁直观**，避免复杂的结构，保证图标**表意清晰**，确保在各个尺寸下图标的**可读性**和**识别性**。具体原则包括准确性原则、简洁性原则、一致性原则和愉悦原则。
### 准确性原则
图标的准确原则为图标设计的第一优先原则，具体是指表意准确，没有歧义，不对用户认知造成困扰，效率优先，使用约定俗成的表意图形。
 |  
---|---
**正确：**
收藏：「星星」代表收藏为普遍认知 | **避免：**
收藏：「爱心」在某些场景下为「点赞」
### 简洁性原则
图标的简洁是指在保证识别性的基础上不额外增加多余的元素来描述图形，同时避免过于抽象。
 |  
---|---
**正确：**
相机：图标简洁直观。 | **避免：**
相机：不要额外的元素堆砌。
### 一致性原则
图标的一致性原则是指风格一致，使用相同的圆角和几何形状。
 |  
---|---
**正确：**
点赞：使用符合规范的几何形 | **避免：**
点赞：不要使用不符合规范的松散随意的几何形
### 愉悦原则
图标的愉悦原则是指：在平衡图标识别性的基础上，使用情感化表达以更生动形象传达含义。
 | 
---|---
**正确：**
发送：寓意着用纸飞机投送信息。 | **避免：**
发送：普通发送样式。
## 层级分类
### 第一层级：导航类图标
**图标形态：** 以使用面型图标为主，常出现彩色面型图标和单色面型图标。
**放置位置**：主导航栏位置。
**图标属性：** 图标同时具有功能性和交互性。
**1.客户端_导航栏**
---
### 第二层级：引导操作类图标
**图标形态：** 以使用线型图标为主，常出现彩色线型图标和单色线型图标。
**放置位置**：侧导航、工具栏、页头、局部工具栏。
**图标属性：** 图标同时具有功能性和交互性。
**1.客户端_二级导航栏**
---
**2.客户端_二级导航栏**
**3.Top bar顶部栏-全局工具栏**
**4.Pageheader功能栏**
**5.局部功能栏**
### 第三层级：语义型图标
**图标形态：** 以使用线型图标为主，常出现单色线型图标，且颜色对比度较弱。
**放置位置**：输入框旁示意图标、原子组件和基础内容模块中。
**图标属性：** 突出语义即可，有可配置交互性。
**1.语义型图标**
---
## 图标特征
### 基础规范
栅格作为图表绘制的底层结构，是一切特征设计的基础。图标常见尺寸为16×16、20×20、24×24、32×32 这四种输出尺寸。
这些尺寸均可以清晰的显示在常规的显示器上。符合图标常见尺寸也为兼顾各端的图标尺寸特性，24×24px 的尺寸作为图标绘制的统一基础栅格尺寸。
---
24*24px
### 活动区域与空隙区域
---
活动区域 22px*22px 空隙区域 1px
### 关键形状
---
**正方：** **正圆：**
标准尺寸：20×20px 标准尺寸：22×22px
容差范围：18～20px 容差范围：20～22px;
**垂直矩形：** **水平矩形：**
标准尺寸：18×22px 标准尺寸：22×18px
宽度容差范围：18~20px 高度容差范围： 18~20px
### 图标样式
 |  |  |  | 
---|---|---|---|---
**1.面型图标** | **2.线型图标** | **3.线 + 面结合型图标** | **4.线 + 虚线结合型图标** | **5.面 + 虚线结合型图标**
### 像素对齐
为了避免图标出现模糊，绝大部分情况下需保证坐标设置为整数，边缘紧贴单元格使之占满像素。
 | 
---|---
**正确：**
使用整数绘制，紧贴单元格，占满像素。 | **避免：**
小数点绘制会出现最终呈现效果模糊与虚边。需要紧贴单元格，尽量占满一侧像素。
### 图形重心
**视觉校准**：在绘制图标的时候，不应追求绝对的几何对称，应在适当的时候手动校准以保证图标内元素视觉对齐：
 | 
---|---
**正确：**
将中心元素稍微向右调整以达到视觉重心平衡。 | **避免：**
由于三角形较宽的部分会引导视觉中心向左倾斜导致重心偏移，因此尽管三角形处于中心位置，看上去并不平衡。
### 图标体量感占比
45° 的图标所占面积比 90° 和 180° 的更大，视觉上更加饱满方正，与其他图标的一致性更高。
正面案例 | 负面案例 |
---|---|---
45° | 
90° | 
180°
图标空间占比需要二次校验，绘制的图标需要自行与库中已有图标比对，依次进行“横向连贯性校验”、“纵向连贯性校验”。
---
### 线条
**推荐**：图标线条采用 **2px** 宽度绘制，包括曲线、内部笔画、外部笔画等。
---
24×24px 画布下为 **2px** 宽度。
需要将线型图标做成面型的线条为 4px 宽度。
---
24×24px 画布下线型图标的面型变体为 4px 宽度。
在特殊情况下如复杂图形，由于该类图标结构更为复杂，线条的粗细可以适当调整
---
24×24px 画布下复杂图标推荐 1.5px 宽度，并且尽可能满足紧贴一侧网格的条件，保证有一侧足够填充像素
### 端点与角度样式
 | 
---|---
样式1：圆头 | 样式2：直径2px圆
2px线条使用 | 大于2px线条使用
### 圆角值
**外圆角**
---
样式1：外角半径为 2px 样式2：外角半径为 1px 样式3：外角半径为 0.5px
单独大元素 配小元素/辅助元素 搭配小元素/辅助元素
**内圆角**
---
内角半径为 0px（直角）
---
推荐使用Inside路径
> inside 路径可更容易达到圆角规范的要求标准
### 三角箭头定义
---
线段粗细度2px; 顶端圆角为直径2px圆 线段粗细度3px; 顶端圆角为直径4px圆 | 线段粗细度4px; 顶端圆角为直径6px圆
---
**夹角角度**：顶头夹角90° **圆角大小**：直径2px圆
---
**圆角大小**：直径2px圆 **夹角角度**：圆角1夹角45°
圆角2夹角45°
圆角3夹角90°
---
**圆角大小**：直径2px圆 **夹角角度**：圆角夹角45°
### 禁用切割定义
- 切断效果
---
**自定义** **端点**
1.被截断的端点不做圆角
2. 被裁切元素与裁切元素保持2px的轮廓描边裁切宽度
3. 切线段宽度：2px
4. 断口宽度：2px
5. 切线角度：从左到右45度
### 图形叠加
---
**自定义断点** **直角断点**
1.裁切图标轮廓为规则形状时， 1.裁切图标轮廓为不规则形状时，
2.被裁切元素与裁切元素保持2px的轮廓描边裁切宽度; 2.被裁切元素与裁切元素保持2px的边距宽度;
3.且被裁切的断口为直角;
---
**自定义断点**
1.裁切图标轮廓为规则形状时，
2. 被裁切元素与裁切元素保持2px的轮廓描边裁切宽
---
叠加图形优先放置在右下角。 如被裁切图形右下角结构复杂，可放置在右上角。
---
1.主体与叠加图形保持2px的间距， 1.附属元素可相对缩小，但依然保持2px的粗细度
2.外圆角需保持2px。 2.被裁切元素与裁切元素保持2px的轮廓描边裁切宽度
## 清理图层
最后输出交付的图标应保证图层的简洁，删除不必要的空图层、蒙版、背景或者组，将图标转化为轮廓，并确定好切片大小。
## 图标颜色规范
### 文档类型图标
文档类型颜色的定义逻辑为：「用户普遍认知」、「巨头规范」和「历史经验」，例如：PDF 定义为红色，文档定义为蓝色。
### 提示图标
### 系统图标
- 系统图标的色彩选择基本原则是：当图标与文字一起排版布局时，图标的明度须低于文字的明度
- 默认图标的颜色为 N800（#2B2F36）
- 如果有需要特殊处理的地方，可以定义其他色值，例如虚线定义为 N400（#BBBFC4）
