mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
Update icon.zh-CN.md
This commit is contained in:
parent
01f739dfbe
commit
9b5931a914
@ -18,21 +18,21 @@ title: 图标
|
||||
|
||||
Ant Design 的图标设计原则源自 “确定“ 和 “自然“ ,落实到图标设计领域,一共有四个,他们分别为:
|
||||
|
||||
- **准 确 :**设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。
|
||||
- **简 单 :**在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。
|
||||
- **有节奏:**挖掘构图中的秩序之美。
|
||||
- **愉悦感:**赋予与适度的情感。
|
||||
- **准 确 :** 设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。
|
||||
- **简 单 :** 在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。
|
||||
- **有节奏:** 挖掘构图中的秩序之美。
|
||||
- **愉悦感:** 赋予与适度的情感。
|
||||
- [查看图标库](/components/icon/)
|
||||
|
||||
## 设计规格
|
||||
|
||||
- **Artboard:**Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的,画板的规格同 iconfont 的设计标准保持一致。
|
||||
- **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>
|
||||
|
||||
- **出血位:**在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64 的出血位,多数的图标在设计中我们都不建议超过这个区域。
|
||||
- **出血位:** 在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64 的出血位,多数的图标在设计中我们都不建议超过这个区域。
|
||||
|
||||
<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">
|
||||
@ -72,25 +72,25 @@ Ant Design 图标的韵律感通过两个方面来体现:元素的韵律和构
|
||||
|
||||
#### 2-1. 元素的韵律
|
||||
|
||||
- **圆:**圆是很多图形中都会出现的元素。Ant Design 会在一套图标中挖掘同一元素的规律,同时对其进行克制的运用。我们对于圆的尺寸选择上会保持 16 的倍数这一原则。比如,在圆点的选择中,新版的图标最常用的是四种尺寸的圆点,分别为 80、96、112、128。当出现特殊尺寸的需求时,会按照 16 的倍数进行延展。
|
||||
- **圆:** 圆是很多图形中都会出现的元素。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>
|
||||
|
||||
- **线:**线条也是非常通用的元素之一。新版图标在线条之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56、64、72、80。
|
||||
- **线:** 线条也是非常通用的元素之一。新版图标在线条之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56、64、72、80。
|
||||
|
||||
<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,它们之间是两倍数的关系。而图标内部空间的圆角依然保持直角的处理方式。
|
||||
- **圆角:** 圆角的规格采取的也是 8 倍数原则,最常用的依然是 3 种,分别是 8,16、32,它们之间是两倍数的关系。而图标内部空间的圆角依然保持直角的处理方式。
|
||||
|
||||
<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>
|
||||
|
||||
- **三角:**新版图标的角度受到美式战斗机 F-14 tomcat 的启发,将常用的角度定在大约 76 度这个数值上。在日常设计中,多数系统图标的角度都可以从 76 度这个数值出发,根据实际情况进行灵活的应用。
|
||||
- **三角:** 新版图标的角度受到美式战斗机 F-14 tomcat 的启发,将常用的角度定在大约 76 度这个数值上。在日常设计中,多数系统图标的角度都可以从 76 度这个数值出发,根据实际情况进行灵活的应用。
|
||||
|
||||
<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">
|
||||
@ -155,13 +155,13 @@ Ant Design 图标的韵律感通过两个方面来体现:元素的韵律和构
|
||||
|
||||
辨识度是一套图标具备的可被感知的特色,通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一块并没有做太多的挖掘,更多是希望把这个课题留给具体产品的设计师去做考虑。除了新版的图标除了遵循 “确定“ 和 “自然“ 这两块价值观,也适度的融入团队的基因和文化,在辨识度这一块主要做了三部分的小尝试。
|
||||
|
||||
- **有温度的技术:**通过对于图形圆角的定义,将过于圆润的圆角(72)调整至(32),在视觉效果上令图标看起来更为坚硬和理性,但又不至于太过尖锐。
|
||||
- **有温度的技术:** 通过对于图形圆角的定义,将过于圆润的圆角(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">
|
||||
|
Loading…
Reference in New Issue
Block a user