图标
图标是具有指代意义的图形，也是一种标识。其中桌面图标是软件标识，界面中的图标是功能标识。它源自生活中的各个图形标识，是计算机应用图形的重要组成部分。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致。Proding 的图标在设计和使用时有以下两个原则点需要注意：
- 简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
- 保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
系统图标#
网格和关键轮廓线
系统图标通常用来表示常用的操作，比如：删除、保存、编辑，也可以用来表示一个文件或者状态。 查看图标库
- 方向性图标
- 提示建议性图标
- 通用图标
- 品牌和标识
TODO：构建自己的图标库关键轮廓线#
网格和关键轮廓线
正方形外轮廓
横向矩形外轮廓
圆形外轮廓
纵向矩形外轮廓
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
细节#
笔画#
正确示例
icon 的线条粗细统一保持为 18 px
错误示例
icon 的线条粗细不统一
一致的笔画权重是保持整个图标系统视觉统一的关键。
边角#
正确示例
错误示例
线条的终端并不是圆角
视觉修正#
正确示例
对于图标内较复杂的 “PDF” 字母在笔画权重上进行了微调，让图标看上去更和谐。
错误示例
在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
透视角度#
正确示例
保持平面、简洁的风格
错误示例
图标具有俯视角度，并不是在一个维度空间内始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
图标尺寸#
应用于页面时请使用 Proding 的规范尺寸，与字体搭配时和字体的尺寸保持一致。 例如：和 12pt 字体搭配时，图标使用 12px，图标与文字的间距为 8px。
颜色#
图标的颜色需要与搭配文案的色值保持一致。
业务图标#
业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
注：业务图标的设计原则与系统图标基本一致，在细节处理上（如笔画权重、圆角大小等）可视具体场景而定。
图标尺寸#
在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
颜色#
业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。
命名规范#
相同图标会在多个开发组（iOS、Android、H5等）中使用，一个统一、表意清晰的命名规范会降低沟通的成本，减少出错概率。
规范#
- 要做到见名知意，要能表达图标的图案或业务意义。
- 命名顺序：
图标名_形状_描线_方向_颜色Web 项目中要求均使用矢量图标，原生移动项目（Adnroid、iOS）现阶段还是使用非矢量图标，故必要场合需用颜色加以区分。
- 只能含有小写英文字符和
_、且不能以_开头结尾。
命名元素#
| 图标名 | 描述 |
|---|---|
| 图标名 | 要能表达图标的图案或业务意义。如表达图案：arrow、question；表达业务意义：rollback、share |
| 形状 | square（方）、circle（圆）、triangle（三角） |
| 描线 | 实心和描线图标保持同名，用 _o 来区分。如：question_circle（实心） 和 question_circle_o（描线） |
| 方向 | up（上）、down（下）、left（左）、right（右） |
| 颜色 | red（红）、green（绿）、blue（蓝）、pink（粉）、orange（橙）、purple（紫）、yellow（黄）、cyan（青）、grey（灰） |