Update icon.zh-CN.md

docs/spec/icon.zh-CN.md

@@ -4,10 +4,9 @@ order: 4
 title: 图标
 ---
 
-图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
+图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对与设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。
 
-- 简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
-- 保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
+设计师们在 “确定“ 和 “自然“ 的设计价值观的影响之下，对全套的基础系统图标进行了改造，现在大家可以在我们的网站上直接查看并使用新版的图标，同时在这里将我们的系统性思路分享给大家，抛砖引玉，期待有更多的设计师参与到这个寂寞的微观世界中来，一起把图形设计这件事做好。
 
 ---
 
@@ -15,98 +14,155 @@ title: 图标
 
 安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
 
-## 系统图标
+## 设计原则
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
-
-系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
+Ant Design 的图标设计原则源自 “确定“ 和 “自然“ ，落实到图标设计领域，一共有四个，他们分别为：
 
+- **准  确 ：**设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
+- **简  单 ：**在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
+- **有节奏：**挖掘构图中的秩序之美。
+- **愉悦感：**赋予与适度的情感。
 - [查看图标库](/components/icon/)
 
-### 关键轮廓线
+## 设计规格
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="网格和关键轮廓线">
+- **Artboard：**Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的，画板的规格同 iconfont 的设计标准保持一致。
 
-根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525830345361-eeb1000f-c687-4263-bda4-4b2e4bc25760.png">
+</div>
 
-请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
+- **出血位：**在图标的设计过程中预留出血位的做法，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64 的出血位，多数的图标在设计中我们都不建议超过这个区域。
 
-- [制作小技巧](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525830413827-a82238ac-129b-4e0e-a21c-feafd71d9013.png">
+</div>
 
-<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rxuHAKGEGLuqBJAAhnSm.png" alt="正方形外轮廓">
-<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/fhkmysGZiTkPVszWHgUy.png" alt="横向矩形外轮廓">
+### 分层
 
-<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/BiraoJgbXokyzmUFqVuf.png" alt="圆形外轮廓">
-<img class="preview-img no-padding inline" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wgQLwFnPaeEalmmSuBMO.png" alt="纵向矩形外轮廓">
+Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目的除了让设计师实现有序的文档管理之外，更多的是便于团队间文档的有序传递，统一的设计框架像是无形的共识，可以让彼此间的理解得到进一步的提升。
 
-### 笔画
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525835044610-74293bd7-aabb-4047-b450-1edd9e3a88d7.png">
+</div>
 
-<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png" alt="正确示范" description="icon 的线条粗细统一保持为 72px">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png" alt="错误示范" description="icon 的线条粗细不统一">
+### 轮廓线与模版
 
-一致的笔画权重是保持整个图标系统视觉统一的关键，Ant Design 系统图标的线条统一为 72px 宽度。
+在前一个版本的基础上，我们对设计模版进行了优化，根据出血位的尺寸，调整轮廓线的宽高，同时增加两个等边三角形和一个圆，这些都是图标设计中最常用的基本形式，设计师可以快速的调用并在此基础上做变形。
 
-### 边角
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525835869294-a06a1286-db96-4813-9119-ac69555fde6e.png">
+</div>
 
-<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png" alt="正确示范" description="图标的边角设计都遵循了 Ant Design 的规范">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png" alt="错误示范" description="线条的终端并不是圆角">
+### 图标设计指引
 
-一致的角度半径也是保持整个图标系统视觉统一的重要元素。
+根据 "确定性" 和 "自然" 的价值观，当构图含义明确之后，图标设计所追求的便秩序之美。Ant Design 的图标主要通过四方面去实现"秩序美"，分别是：形式、韵律、平衡以及辨识。
 
-Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
+#### 1、形式
 
-### 视觉修正
+形式，是构成一个图形最初始的结构。Ant Design 近 300 个基础图标基本上都是由圆、方、三角这样的图形演变而成的。追求图形初始结构的理性，而非凭直觉式的设计，是秩序之美的第一步。 
 
-<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png" alt="正确示范" description="对于图标内较复杂的『JPG』字母在笔画权重上进行了微调，让图标看上去更和谐">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png" alt="错误示范" description="icon 图形太复杂，空间显得拥挤">
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525840497714-f3752016-f22d-4043-874b-6521402241a2.png">
+</div>
 
-在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
+#### 2、韵律
 
-### 透视角度
+Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构图的韵律。系统图标中最常见的元素基本上可以归纳称为：圆、线、圆角、三角。
 
-<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png" alt="正确示范" description="保持平面、简洁的风格">
-<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png" alt="错误示范" description="图标具有俯视角度，并不是在一个维度空间内">
+#### 2-1. 元素的韵律
 
-始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
+- **圆：**圆是很多图形中都会出现的元素。Ant Design 会在一套图标中挖掘同一元素的规律，同时对其进行克制的运用。我们对于圆的尺寸选择上会保持 16 的倍数这一原则。比如，在圆点的选择中，新版的图标最常用的是四种尺寸的圆点，分别为 80、96、112、128。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。
 
-### 命名规则
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525847360066-2cf3a903-a55e-439a-82ef-344d41393a35.png">
+</div>
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
+- **线：**线条也是非常通用的元素之一。新版图标在线条之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。
 
-统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525847369873-d793e4ae-4777-4356-80b3-55387517bc70.png">
+</div>
 
-### 图标尺寸
+- **圆角：**圆角的规格采取的也是 8 倍数原则，最常用的依然是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角依然保持直角的处理方式。
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525848815415-0a63a1c9-6e96-4753-a35e-0968a474e6a6.png">
+</div>
 
-应用于页面时请使用 Ant Design 的规范尺寸，与字体搭配时和字体的尺寸保持一致。
+- **三角：**新版图标的角度受到美式战斗机 F-14 tomcat 的启发，将常用的角度定在大约 76 度这个数值上。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
 
-例如：和 12pt 字体搭配时，图标使用 12px，图标与文字的间距为 8px。
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525858630811-aedeb6d7-c301-4d3e-8240-789833decbaf.png">
+</div>
 
-### 颜色
+除了定义角度，我们对新图标中的实心箭头的规格也做了收敛，在顶角大约保持 76 度的基础上，最常用的为 4 种，他们的宽度保持 8 倍数的原则，间隔为 24 ：
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525931505040-c91c2317-eb56-4cbb-a733-4daa2c9ecaad.png">
+</div>
 
-图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
+基本元素在使用上的规格可以用下面的表格来总结，建议设计师在一套图标的设计中尽量保持克制的态度。 
 
----
+| 点  | 线  | 圆角 | 三角 |
+|-----|-----|------|------|
+| ... | ... | /    | ...  |
+| 80  | 56  | 8    | 144  |
+| 96  | 64  | 16   | 216  |
+| 112 | 72  | 32   | 240  |
+| 128 | 80  | ...  | 264  |
+| ... | ... |      | ...  |
 
-## 业务图标
+#### 2-2、构图的韵律
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
+在图标体系中，除了对重复出现的元素进行管理之外，我们还建议通盘的去考虑设计构图上的节奏感。
 
-业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525933358066-c95909ce-8a79-478a-abe8-51b02d4266d2.png">  
+</div>
 
-> 注：业务图标的设计原则与系统图标基本一致，在细节处理上（如笔画权重、圆角大小等）可视具体场景而定。
+保持类似图标在构造上的一致性也是建立图标体系节奏感的一种方法。
 
-### 图标尺寸
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525933499825-411638ce-5e08-49c5-8ccd-5ba600c40329.png">  
+</div>
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
+此外，在单个图标的设计过程中，也建立适当的理性的看待各元素间的比例关系，而非直觉式的开展绘制。
 
-在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
+#### 3、平衡
 
-### 颜色
+要保持整套图标在视觉重量上的平衡，是一件不太容易的事并且是一件需要大量实践的工作。图标的造型、线条摆放的角度甚至是留白空间等，都是会影响视觉平衡的因素，因此需要设计师适时的通过对基本元素规格上的微调来达到图标的平衡感。
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png">
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525934114172-df740d5d-40c5-434c-a6d2-fdb7f7e7db19.png">  
+</div>
 
-业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。
+弯曲的线条会比竖直的线条看起来细。因此在圆形的外边框上我们会适当的对 72 的规格进行 4 像素的微调。
+
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525934126301-e1717ab8-baf5-4154-8f39-8d4497f5ee05.png">  
+</div>
+
+倾斜的线条也是。
+
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525934135590-2659e016-7f24-4f89-9b9c-e8c263756e9e.png">  
+</div>
+
+图形的留白空间也是值得推敲的课题，当某些图形的留白不足时，可以通过调节线条的粗细来达到视觉重量上的平衡。
+
+#### 4、辨识
+
+辨识度是一套图标具备的可被感知的特色，通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一块并没有做太多的挖掘，更多是希望把这个课题留给具体产品的设计师去做考虑。除了新版的图标除了遵循 “确定“ 和 “自然“ 这两块价值观，也适度的融入团队的基因和文化，在辨识度这一块主要做了三部分的小尝试。
+
+- **有温度的技术：**通过对于图形圆角的定义，将过于圆润的圆角（72）调整至（32），在视觉效果上令图标看起来更为坚硬和理性，但又不至于太过尖锐。
+
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525935408104-c04a7e60-76a3-44cb-a13e-5ca566206092.png">
+</div>
+
+- **生命力：**在部分图标设计中，会适度的注入拟人化的元素，令图标具备生命力。
+
+<div>
+<img class="preview-img no-padding" align="right" src="https://cdn.yuque.com/lark/0/2018/png/1682/1525935428893-e33b0530-dc9d-4f34-aaf4-7b5be6955b17.png">
+</div>