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
8652f8e26c
commit
34c1dadacb
@ -4,9 +4,13 @@ order: 4
|
||||
title: 图标
|
||||
---
|
||||
|
||||
图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义,是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。在我们的企业级应用设计范围中,图标在界面设计的诸多元素中往往只占了很小的比重,在调用时也会被缩到比设计稿小很多倍的尺寸,加上在图形素材极度丰富并且便于获取的今天,在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对与设计质量的影响是非常巨大的,这考验着设计师的协作能力,以及对图形塑造的系统性思维,同时也能反映一个团队对于细节的追求。
|
||||
图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义,是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。在我们的企业级应用设计范围中,图标在界面设计的诸多元素中往往只占了很小的比重,在调用时也会被缩到比设计稿小很多倍的尺寸,加上在图形素材极度丰富并且便于获取的今天,在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。
|
||||
|
||||
设计师们在 “确定“ 和 “自然“ 的设计价值观的影响之下,对全套的基础系统图标进行了改造,现在大家可以在我们的网站上直接查看并使用新版的图标,同时在这里将我们的系统性思路分享给大家,抛砖引玉,期待有更多的设计师参与到这个寂寞的微观世界中来,一起把图形设计这件事做好。
|
||||
Ant Design 相信一整套优质的图标对与设计质量的影响是非常巨大的,这考验着设计师的协作能力,以及对图形塑造的系统性思维,同时也能反映一个团队对于细节的追求。
|
||||
|
||||
我们在"确定"和"自然"的设计价值观的影响之下,对全套的基础系统图标进行了改造,现在大家可以在直接查看并使用新版的图标,同时在这里将我们的系统性思路分享给大家,抛砖引玉。
|
||||
|
||||
[查看图标库](/components/icon/)
|
||||
|
||||
---
|
||||
|
||||
@ -16,13 +20,12 @@ title: 图标
|
||||
|
||||
## 设计原则
|
||||
|
||||
Ant Design 的图标设计原则源自 “确定“ 和 “自然“ ,落实到图标设计领域,一共有四个,他们分别为:
|
||||
Ant Design 的图标设计原则源自"确定"和"自然",落实到图标设计领域,一共有四个,他们分别为:
|
||||
|
||||
- **准 确 :** 设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。
|
||||
- **简 单 :** 在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。
|
||||
- **有节奏:** 挖掘构图中的秩序之美。
|
||||
- **愉悦感:** 赋予与适度的情感。
|
||||
- [查看图标库](/components/icon/)
|
||||
|
||||
## 设计规格
|
||||
|
||||
@ -32,7 +35,7 @@ Ant Design 的图标设计原则源自 “确定“ 和 “自然“ ,落实
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/kkRpJTFNUWJIhOjqIaWa.png">
|
||||
</div>
|
||||
|
||||
- **出血位:** 在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64 的出血位,多数的图标在设计中我们都不建议超过这个区域。
|
||||
- **出血位:** 在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位,多数的图标在设计中我们都不建议超过这个区域。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/HLsEIXbchlgjNPrfQdXj.png">
|
||||
@ -48,7 +51,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求,其目
|
||||
|
||||
### 轮廓线与模版
|
||||
|
||||
在前一个版本的基础上,我们对设计模版进行了优化,根据出血位的尺寸,调整轮廓线的宽高,同时增加两个等边三角形和一个圆,这些都是图标设计中最常用的基本形式,设计师可以快速的调用并在此基础上做变形。
|
||||
我们对设计模版进行了优化,根据出血位的尺寸,调整轮廓线的宽高,同时增加两个等边三角形和一个圆,这些都是图标设计中最常用的基本形式,设计师可以快速的调用并在此基础上做变形。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WmpdWNmcjyJTPcvNczNJ.png">
|
||||
@ -56,7 +59,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求,其目
|
||||
|
||||
### 图标设计指引
|
||||
|
||||
根据 "确定性" 和 "自然" 的价值观,当构图含义明确之后,图标设计所追求的便秩序之美。Ant Design 的图标主要通过四方面去实现"秩序美",分别是:形式、韵律、平衡以及辨识。
|
||||
根据"确定性"和"自然"的价值观,当构图含义明确之后,图标设计所追求的便秩序之美。Ant Design 的图标主要通过四方面去实现"秩序美",分别是:形式、韵律、平衡以及辨识。
|
||||
|
||||
#### 1、形式
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user