Icon 图标
图标作为界面构成中重要的元素，是用于表示想法、对象或动作的视觉符号。能更直观地传达信息，并引起用户对重要信息的注意。
设计原则
从简
设计时保证参数的简化，尽量消除小数点以及非整数的角度。
处理线条以及轮廓时删除多余的锚点，输出时应避免出现不必要的装饰，保持图标的简洁。
精确
设计时避免使用那些含义模糊的图形，当同个事物存在多个图形表述时，应选取最为流行的样式，必要时进行针对性的强化。
在图标输出时也应遵守命名规范，精确的文字描述便于他人查找。
适度
单个图标作为独立的视觉个体，在线条的疏密以及图形的搭配上要呈现适度感。
在处理一些必要的高密度图标时也要考虑线条的节奏感，让其舒适不压迫。
系列图标要遵守适度原则，将变化控制在一定范围内。
图标交付
图标链接
产品中所有的图标都存放在这里管理
https://codesign.qq.com/app/icon/
图标格式
请使用 .svg 格式，这样在任何屏幕下面都不会出现模糊不清的情况。
图标类型
通用图标
界面中最常用的，也是用于大多数的场景下。
业务图标
通常用于表示产品中特定的对象，例如：商品、用户等。
文件图标
代表文档的文件格式，方便用户识别和记忆，常见的文件格式图标有：doc、excel、pdf。
社交图标
界面中分享功能所需要的表示社交产品的图标。
支付图标
界面中支付功能所需要的表示支付产品的图标。
国家图标
界面中多语言模块，以及适配国家化时表示各个国家和地区的图标。
图标风格
通用图标
通用图标的设计通常会有两个版本，一个是线条版，一个是填充版。
- 线条版：在大多数情况下，使用图标的线条版，因为在视觉上会更有识别性。
- 填充版：可用于表示已执行的操作和命令，例如，当文章被 “收藏” 时，使用填充版的图标，可以使用填充颜色来进一步加强这种交互的变化。
业务图标
为了降低设计成本，提高设计效率，业务图标的设计大多数情况下用通用图标的形状进行嵌套。
业务图标结构：
- 形状：主要来源于通用图标。
- 背景：主要来源于色板中的颜色，默认有定义好的几种颜色。
图标尺寸
设计系统有二种图标尺寸：
16px（小）
在网页中，使用场景最多。
24px（中）
图标设计的基准尺寸，往上往下都可以方便适配。
图标规范
栅格规范
栅格作为图表绘制的底层结构，是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。
图标常见尺寸为 16x16、20x20、24x24、32x32 这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。
产品选择以 24x24px 的尺寸作为图标绘制的统一栅格尺寸。
画布
画布作为图标设计的实际操作区域，起到控制画面、限制图标大小、调整间距等作用。
图标的设计区域应控制在 20x20px 。在一些特殊情况下如图标过长或有突出的边角等，允许内容适当延展，以确保图标视觉重量上的统一。
辅助线
辅助线有助于约束图标的大小以及一些线条的走向，在设计图标时应尽可能根据辅助线进行绘制以保持各图标间视觉重量的统一。
我们将栅格内的圆形、方形、斜线等作为关键图形，在图标设计的过程中应根据设计对象的特性选取对应的辅助线来控制图形样式，这有助于保持图标视觉上的对齐和统一风格。
关键形状
关键形状基于网格。通过这些核心形状作为基线，可以保持整个产品图标中保持一致的视觉比例。
几何学
次要元素
此区域允许以一致的方式补充额外的重要信息，如加号或减号。仅图标需要区别于其他元素，才使用此元素。一般用于一系列图标的某些部分区分。
解剖学
线条
在图标设计中的所有形状上保持 2px 的内部描边,确保整个图标的视觉一致性。当图标的内结构较为复杂时，可以调整复杂线条到 1.5px。
角度
线条如需倾斜最好对齐栅格内 45° 辅助线，或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。
像素对齐
由于屏幕像素的特性，非整数像素将会以灰度显示，那样将影响图标清晰度以及整体含义表达，所以在栅格内绘制时应尽量对齐像素点，最大程度上保证图标的清晰度。
居中
在处理一些对称图形时要居中处理，不应为了对齐栅格而打破画面平衡。
复杂的图形
如果图标设计需要复杂的细节，可以进行细微的调整以提高其易读性，即为光学校正。
任何光学校正都应使用所有图形所基于的几何形状，而不会过分扭曲形状。
可触范围
图标周围应保留足够的空间，以保证易读性和可触范围。
24px 的图标可以使用 48px 的可触范围。尤其是正在步行或行动不便的人使用时，较小的可触范围使得图标的交互变得困难。
组合
图标应该垂直或水平居中对齐，具体取决于它们的堆叠方式。这确保了图标与相邻图标看起来视觉视觉上是平衡的。当文本伴随图标时，也要遵循相同的规则。
