组件规范-图标
图标是透过符号来简化文字，主要是用来指示或者暗示行为，在界面设计上我们用图标来节省空间，不受地域、文化、语言等差异的影响
做为设计师，我们的目标之一是减少用户的认知负担。心理记忆是一项巨大的资源消耗。记忆以两种方式起作用：识别和记忆。识别是您立即熟悉的。像一个人的脸。您看着朋友的脸，就知道自己曾经见过他们。例如：分享、点赞、搜索、地图等等。大家听到这些词的时候，脑海中就会浮现出我们常用那些图标。另一方面，识别是即时的。我们希望在用户界面中获得更多认可，并减少召回。所以这些约定俗成的图标最好不要去打破，因为这些已经成为用户的习惯。而且，如果必须设计大多数人以前从未见过的新图标，最好使用文本描述符来澄清和减轻认知负担。
要设计出一套高质量的图标体系，需要遵循：清晰，易读，平衡，简洁，一致性，个性，易用性，这几个原则。
1.清晰：图标的主要目标是快速表达一个概念。
2.易读：在不同的环境中图标是代替语言的一种形式，小尺寸的情况下也可确保可读性和清晰度。
总之清晰和易读这2个特点都是为了让用户一眼即能识别出图标的意义，无需过多思考，在不同文化，年龄和背景下都是通用的。若考虑到目标用户，即是能够引起他们共鸣的隐喻和颜色。
3.平衡
为了确保每个图标视觉平衡，需要在视觉上对齐它的元素。
4.简洁
在界面中，一种简化的风格能让人容易理解，并能弱化自己的存在，从而凸显内容。
5.一致性
5.1.线条一致性。
线的粗细保持一致，一般情况下是一种，有时候会根据视觉层级进行调整，可能是2种或者3种。
5.2.风格一致性。
统一的元素能够使你的图标看起来是一个整体。例如有的有笑脸有的没有，有的断口有的没有，不具备风格的统一。
5.3.色彩一致性
统一的色彩能够使你的图标看起来是一个整体。线性以单色或者双色为主，扁平化图标制作时可以定义出几种颜色进行搭配。图标使用光影、渐变要注意角度问题。
5.4.光影一致性
5.5.面积的统一性
图标的风格
1.线性图标；2.面性图标；3.填充图标（线面结合性图标）；4.扁平化；5.拟物化；6.手绘型
以上不管何种图标风格都包括色彩，色彩在手绘中包含上色手法，这里相对于图标也是一样的，如果你在做图标时考虑到颜色这一块，请保持色系统一即使不统一也要和谐，但是手法一定要一致，例如这个图标的某一块有渐变，而有几个图标没有，这是很明显不一致。如果有圆角，请保持圆角视觉上一致。例如光影角度等等。请让他们看起来一致。因为所有的元素都是视觉语言，所以我们不要简单地相信数字，要用眼睛来检查。
6.个性
每个图标集都有自己的风格。它的独特之处是什么?关于这个品牌它表达了什么?它创造了什么氛围?
7.易用性
一个图标设计的终点并不是单纯的好看。它还需要进一步的测试和准备，以确保后续能够轻松的设计出新的图标，并运用与各种场景，比如手机上，打印出来等等，然后开发也能够轻松地将图标写到代码里去。（这一点类似于设计与商业价值的结合，商业价值的第一步是给人用的。）
有组织保持主文件的整洁，图标命名逻辑清晰，便于搜索。需要考虑最好的分类方式，是按字母顺序？按大小？还是按类型？
下面来说说我在项目中的运用
所有的图标在 1024×1024（16×16 的 64 倍）的画板内制作。
线条宽度为6pt
圆角：4pt
B端产品终端产品基本都是PC机，所以这里只需考虑在网页设计中图标的主流尺寸有16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128, 256×256, 512×512。
写的不好的地方，欢迎大家来拍砖。
所有配图来源网络，如有侵权请联系我。
参考：
https://www.jianshu.com/p/b978c4897567
https://zhuanlan.zhihu.com/p/112103479
https://tob.design/#/experience/detail/186
https://uxdesign.cc/10-interaction-design-rules-you-must-never-break-82a048b0240e
https://uxdesign.cc/the-4px-baseline-grid-89485012dea6
