# 图标
图标是文字意义的视觉符号表达，能直接表达操作的含义。可以一目了然地传达信息，提供交互性，并引起对重要信息的注意。从而帮助用户更快地理解操作。Qi Design 基于"有意义"和"有效"“幸福感”价值观，对基础通用 icon 做了统一。技术上实现可配置 icon，可以灵活调整颜色，大小，描边粗细等配置项供不同场景使用，欢迎来探索。
# 资源
通用图标库 Sketch源文件：点击下载 (opens new window)
# 设计原则
图标设计原则源自"有意义"和"有效"“幸福感”，落实到图标设计领域，一共有以下 4 个：
- 准确：设计造型表意准确的图标，不对用户造成认知困扰
- 平衡：视觉一致，不同造型的图标不会让用户感到明显偏差，图标之间特征之间要保持统一
- 适度：在表意准确的前提下，不做多余装饰。保证图形简洁，不做过度设计
- 亲和：造型专业但不呆板，保持科技理性的同时具备亲和的感觉
# 设计规范
# 基础网格
图标以 48px * 48px 为基础网格画板进行制作，使用网格来将笔画对齐到位，建议在绘制过程中部分笔画微调来达到最佳效果。
# 安全区
安全区域是 44px * 44px。icon 主要部分需绘制在安全区域内部。可以避免某些造型因为临近边界，具体使用的时候形状不全的风险；建议绘制icon多数情况下不要超过安全区。
# 关键线
关键线为整个图标集的基本形状或比例提供一致的大小。在绘制相似比例的图标时可以方便地保持一致性，达到平衡的效果。特殊形状图标的部分笔画可以超出关键基线，不强制必须重合关键线。
# 基础形状
基础图标基本上都是由圆形、矩形、正方形、三角形这样的图形演变而成的。复杂的图标也是由基础图形构建的，理性设计代替感性设计。
# 大小尺寸
基础图标基于 48px * 48px 画布绘制，居中描边形式，默认线宽4PX。不同场景等比缩放使用。
实际使用过程中，根据具体场景使用合适的尺寸。
# 绘制指引
# 点
当端点为圆时，有些情况为保证视觉统一，圆形直径需比线段宽度略大。建议点填充，直径大小根据实际情况在4.5、5.25、6中选择。
# 线
一般情况线的描边粗细为 4px 需要保持一致，在无法避免复杂细节的情况下，使用描边粗细3PX。线段端点和可编辑节点坐标以整数坐标为佳。端点默认选择圆。
# 圆角
通用图标默认圆角1PX，保持科技理性的同时具备亲和的感觉。具体绘制根据实际情况必要时可以将增加 4 的倍数，以便图标的隐喻易于理解，反映对象的真实形式。拐点默认选择圆角，（隐喻的真实形式需直角可选直角）。
# 角度
通用图标中的线段倾斜角度大部分以45°角为基准保持统一。根据实际情况为了更好的创建易识别的图形应使用15°的倍数。
# 端口与间距
元素之间的间距不能小于4px,相对复杂的特殊图标元素之间间距最小为线宽1/2px（对应到默认4px的线粗是不得小于2px）；在间距上建议使用偶数，可以用2的倍数作为参考。
# 面
一般情况绘制图标描边的形式，当在图标实际绘制过程中需包含面的元素的时，根据亲和设计原则，需要把棱角根据实际情况增加圆角。
# 输出规范
# 整洁的图层管理
# 端点拐点
默认选择圆形的端点和拐点。
# 封闭与非封闭
如需转换面型icon需要封闭路径。无需求可不封闭路径。
# 命名规范
- 中文命名：中文名称要中文名称、易理解、无歧义的原则，当表达状态时用“-”连接。
- 英文命名：英文命名应为小写，多个单词之间用横杠分割，不能有大写字母、空格、特殊符号，长单词、复合单词视 情况可采取首字母缩写的命名方式。
- 相同含义图标命名：相同含义图标的多个图标，通过后缀加数字方式区别。