From baf25b5da842c751cd9a6c45d769fe6ce4843410 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=B9=E5=B0=94?= Date: Sat, 29 Sep 2018 17:38:50 +0800 Subject: [PATCH] Update icon.zh-CN.md --- docs/spec/icon.zh-CN.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index 37a9275ef1..ff6a4ae035 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -6,7 +6,7 @@ title: 图标 图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对与设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。 -Ant Design 在"确定"和"自然"的设计价值观的影响之下，对全套的基础系统图标进行了改造，现在大家可以在直接查看并使用新版的图标，同时在这里将我们的系统性思路分享给大家，抛砖引玉，期待有更多的设计师参与到这个寂寞的微观世界中来，一起把图形设计这件事做好。 +Ant Design 在"确定"和"自然"的设计价值观的影响之下，对全套的基础系统图标进行了改造，现在大家可以在我们网站上直接查看并使用新版的图标，同时在这里将我们的系统性思路分享给大家，抛砖引玉，期待有更多的设计师参与到这个寂寞的微观世界中来，一起把图形设计这件事做好。 [查看图标库](/components/icon/) @@ -22,8 +22,8 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设 - **准 确 ：** 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。 - **简 单 ：** 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。 -- **有节奏：** 挖掘构图中的秩序之美。 -- **愉悦感：** 赋予与适度的情感。 +- **节 奏 ：** 挖掘构图中的秩序之美。 +- **愉 悦 ：** 赋予与适度的情感。 ## 设计规格 @@ -41,7 +41,7 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设 -### 分层 +## 分层 Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目的除了让设计师实现有序的文档管理之外，更多的是便于团队间文档的传递，统一的设计框架像是无形的共识，可以让彼此间的理解得到进一步的提升。 @@ -49,7 +49,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目 -### 轮廓线与模版 +## 轮廓线与模版 我们对设计模版进行了优化，根据出血位的尺寸，调整轮廓线的宽高，同时增加两个等边三角形和一个圆，这些都是图标设计中最常用的基本形式，设计师可以快速的调用并在此基础上做变形。 @@ -57,7 +57,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目 -### 图标设计指引 +## 图标设计指引 根据"确定性"和"自然"的价值观，当构图含义明确之后，图标设计所追求的便是秩序之美。Ant Design 的图标主要通过四方面去实现"秩序美"，分别是：形式、韵律、平衡以及辨识。 @@ -126,7 +126,7 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构 -- 此外，在单个图标的设计过程中，也建议适当的理性的看待各元素间的比例关系，而非直觉式的开展绘制。 +- 此外，在单个图标的设计过程中，也建议适当理性的看待各元素间的比例关系，而非直觉式的开展绘制。
@@ -136,13 +136,13 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构 要保持整套图标在视觉重量上的平衡，是一件不太容易的事并且是一件需要大量实践的工作。图标的造型、线条摆放的角度甚至是留白空间等，都是会影响视觉平衡的因素，因此需要设计师适时的通过对基本元素规格上的微调来达到图标的平衡感。 -- 弯曲的线条会比竖直的线条看起来细。因此在圆形的外边框上我们会适当的对 72 的规格进行 4 像素的微调。 +- 弯曲的线条会比竖直的线条看起来细。因此在圆形的外边框上我们会适当的对 72px 的规格进行 4 px 的微调。
-- 倾斜的线条也会比竖直的线条看起来细。因此给倾斜的线条也会进行 4 像素的微调。 +- 倾斜的线条也会比竖直的线条看起来细。因此倾斜的线条也会进行 4 px 的微调。
@@ -156,7 +156,7 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构 #### 4、辨识 -辨识度是一套图标具备的可被感知的特色，通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一次除了遵循"确定"和"自然"这两块价值观，也适度的在辨识度这一块主要做了小尝试。 +辨识度是一套图标具备的可被感知的特色，通常和系统本身的品牌基因相关。Ant Design 的系统图标在这一次除了遵循"确定"和"自然"这两块价值观，在辨识度这一块也做了两处小尝试。 - **让科技有温度：** 通过对于图形圆角的定义，将过于圆润的圆角（72）调整至（32），在视觉效果上令图标看起来更为坚硬和理性（对应科技感），但又不至于太过尖锐（有温度）。 @@ -170,7 +170,7 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
-### 给设计师的一些建议 +## 给设计师的一些建议 在完成图标设计后，保持图形的整洁，图层结构的清晰，也是构筑图标体系必不可少的部分，Ant Design 对设计师有几点建议如下： @@ -198,6 +198,6 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
-### 写在最后 +## 写在最后 图标的设计是 UI 设计中非常容易被忽略的环节，建立优秀的图形体系也不是一、二个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。本次图标的升级，仅仅是一个开始。我们会建议在调用图标时，考虑具体业务对于图形化寄予的期望，以及用户操作时的心智模型等因素，结合实际情况做调用和适当的二次设计。