source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add new design guide

Browse Source
This commit is contained in:
Wei Zhu
2017-12-25 22:15:35 +08:00
parent f9a3d419cd
commit 0fbd1b4080
14 changed files with 210 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/spec/cases.zh-CN.md
View File

@@ -4,63 +4,32 @@ order: 2
title: 实践案例
---
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 400 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
Ant Design 目前在外部也有 [许多产品实践](https://github.com/ant-design/ant-design/issues/477)，如果你的公司和产品从中受益，欢迎留言。
Ant Design 目前在外部也有许多产品实践，如果你的公司和产品从中受益，[欢迎留言](https://github.com/ant-design/ant-design/issues/477)。
## 最佳实践
---
### 金融云
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
### 蚂蚁金融云
金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
<p><a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a></p>
[立即访问](https://www.cloud.alipay.com)
---
![蚂蚁金融云](https://gw.alipayobjects.com/zos/rmsportal/KtMLtXsTucsJLWgfwZcw.png)
### OceanBase Cloud Platform
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
### OceanBase 云平台
OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
<p><a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">立即访问</a></p>
[立即访问](http://oceanbase.alipay.com)
---
![OceanBase 云平台](https://gw.alipayobjects.com/zos/rmsportal/hhtmRPAtPsUhwHpULFuu.png)
### 服务宝体验平台
### Ant Design Pro
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
Ant Design Pro 是一个企业级中后台前端/设计解决方案，秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
[立即访问](https://pro.ant.design)
<p><a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">立即访问</a></p>
---
更多 [社区案例](https://github.com/ant-design/ant-design/issues/477)。
<style>
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
background: #fff;
}
.toc {
display: none;
}
</style>
![Ant Design Pro](https://gw.alipayobjects.com/zos/rmsportal/KZIUjJJZTEqMOgBHQkCb.png)

70
docs/spec/colors.zh-CN.md
View File

@@ -4,23 +4,23 @@ order: 0
title: 色彩
---
设计中对色彩的运用不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向简洁实用一些。在选择色彩时有以下三个注意点：
Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
- 色彩应与产品定位相匹配，且符合用户心理认知；
- 视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；
- 遵守 WCAG 2.0 的 标准，保证足够的对比度，让色彩更容易被视障碍（色盲）用户识别。
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
---
## 色板
## 色彩模型
Ant Design PC 端的色板由 10 个由浅至深的色彩单元格组成，我们为部分色彩格定义了默认使用场景，用户在进行色彩配色时只需根据关键词选择一条色板即可得到一套完整的系统配色方案。在理论上，在 UI 设计中的色彩都应取自这份色板。
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
经过设计师和程序员的精心调教，总结出一套 [色板生成算法](https://github.com/ant-design/ant-design/blob/244a2fd2da5561dc13a32ea894ba1bdbd13421aa/components/style/color/colorPalette.less)（用以取代 1.x 的 tint/shade 色彩系统和 2.x 的贝塞尔曲线色彩算法）。使用者只需指定主色，便可导出一条完整的渐变色板。
## 系统级色彩体系
Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）又按上述算法衍生出 10 种渐变色。
Ant Design 系统级色彩体系同样源于『自然』的设计语言。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
> 注：在由浅至深的色板里，第 6 格色彩单元格普遍满足 [WCAG 2.0](http://leaverou.github.io/contrast-ratio/) 的 4.5:1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。（黄色用于搭配黑色字体/背景，故不满足和白色的对比度）
### 基础色板
Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及它们衍生色。这些颜色基本可以包含中后台设计中对于颜色的需求。
`````__react
import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
@@ -28,7 +28,15 @@ import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
ReactDOM.render(<ColorPalettes />, mountNode);
`````
为了考虑文本在不同颜色背景下的呈现，我们选择了『White #FFFFFF』和『Black #000000』并配以透明度来区分文本的等级层次。详情请查看 [字体颜色](/docs/spec/font#字体颜色)。
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
### 中性色板
todo...
### 数据可视化色板
数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。数据可视化色板详见[链接](todo...)。
### 色板生成工具
@@ -42,45 +50,29 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
---
## 色彩应用
## 产品级色彩体系
### 品牌色的应用
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/lVKfKMuLmaTlnTDitPEJ.png" alt="Ant Design 品牌色常用色值">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/diEtYItrQZpqsiPsadeU.png">
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需先了解品牌色在界面中的使用场景及选色范围。以 Ant Design 网页组件的默认样式为例，品牌色主要体现在关键行动点及操作状态、重要信息高亮等场景。
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。
Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
> 注：图形插画和 logo 可以不必遵循色板，但需保持相近的色系。
### 功能色
### 中性色的应用
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/rfkSGJhMIhnUYILGIlrh.png">
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AmXwsVOWrLxDfwLNlyvL.png" alt="Ant Design 中性色常用色值">
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：
灰色作为中性色在 Ant Design 的网页设计中被大量使用到，它的使用有利于关键内容的衬托和功能的引导。这类色彩主要体现在导航框架、背景底色、描边、或次级操作等等。
### 中性色
### 功能色的应用
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkaVzBvUUEcTKeUxhgpN.png">
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/mewwdThVwyTQzpZQtYXw.png" alt="Ant Design 功能色卡">
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结 WCAG 2.0 的 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：
UI 设计中，比较稳定的色彩除了中性色外还有具备特定含义的功能色，这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。
---
### 视觉层次
## 企业级产品设计中的色彩应用
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ADUfVlZwjziJRUQSMbMt.png" alt="正确示例" description="通过品牌色引导用户的视线路径">
将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。
<br />
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/RmSDSeAAYphuiDFszIMa.png" alt="错误示例" description="操作界面使用的色彩应尽量避免面积过大或种类过多而造成用户视觉疲劳">
> 注：界面用色建议不超过三种（数据图表和图形类插画除外）。
### 色彩的易识别性
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jeyvhMIQgoPUotNerRGy.png" alt="正确示例">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ppdlrVnFCsYVicjDrnzi.png" alt="错误示例" description="当对比度数值低于 3:1 时，弱视用户将很难识别">
Ant Design 的色板颜色遵守 WCAG 2.0 的标准，操作类的色彩搭配都应满足颜色对比值 3:1 的最低标准。
- [色彩对比值校验工具](http://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff)
在蚂蚁中后台的设计中，我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。

2
docs/spec/direct.en-US.md
View File

@@ -10,7 +10,7 @@ As Alan Cooper states：『Where there is output, let there be input』. This is
## In-Page Editing
<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to “Click to edit”；<br>Status 3: Once the user clicks on the title, the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』." src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png">
<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 『Input box』, 『Ok』 and 『Cancel』 appear, and the cursor is positioned in the 『input box』." src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png">
Single-Field Inline Edit

106
docs/spec/feature.zh-CN.md
View File

@@ -3,108 +3,28 @@ category: Ant Design
order: 1
title: 设计价值观
---
与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。
设计价值观（Design Values）为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。
<div style="margin-left:-40px;margin-right:-40px;overflow:hidden;margin-top:30px;">
<div class="ant-col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
<h5>微小</h5>
<div>致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。</div>
</div>
<div class="ant-col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
<h5>确定</h5>
<div>制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
</div>
<div class="ant-col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
<h5>幸福</h5>
<div>不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。</div>
</div>
</div>
todo...
<style>
.features {
padding: 0 40px;
font-size: 12px;
}
.features h5 {
font-size: 14px;
margin-top: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.features {
width: 100%;
text-align: center;
margin-bottom: 20px;;
}
.features img {
width: 80%;
}
}
</style>
在设计价值观坚持上，Ant Design 有三点与众不同：
---
## 自然
## 微小
todo...
### 微创新
作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。
<img class="preview-img" align="right" alt="数值输入框示例" description="鼠标『悬停』时，可点击区域会放大。" src="https://os.alipayobjects.com/rmsportal/GGXdyrOtvUtOKXe.png">
<img class="preview-img" align="right" alt="分页示例" description="鼠标点击省略符，可以实现批量切换。" src="https://os.alipayobjects.com/rmsportal/UEYPnVhQsOjytSa.png">
<img class="preview-img" align="right" alt="字数校验框示例" description="使用颜色和下划线标注超出的文案，系统即时反应，以便用户进行调整。" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的更好。
### 集成创新
<img class="preview-img" align="right" alt="填空示例" description="组合了标签和输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。" src="https://os.alipayobjects.com/rmsportal/RGFMJRSgCAVCKOl.png">
<img class="preview-img" align="right" alt="带图表的表格" description="组合了 Table 和 Chart ，鼠标『悬停』时展现更多详情内容。" src="https://os.alipayobjects.com/rmsportal/hjHOMRIbvIUUBXS.png">
选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。
---
- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实产品体验。详见视觉语言
- 在行为的执行中，利用行为分析、人工智能、传感器等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。
## 确定
### 面向对象的方法
todo...
<img class="preview-img" align="right" alt="色值换算工具示例" description="定义『原色』后，用『加黑』和『加白』的方式快速、科学的得出 Normal、Hover 等多个『状态色』。" src="https://os.alipayobjects.com/rmsportal/MqsXoBBSDmoEDqn.png">
『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。
<img class="preview-img" align="right" alt="排版规则示例" description="运用『亲密性』原则，只需定义 n 的值，就可以得出确定的间距。" src="https://os.alipayobjects.com/rmsportal/WNEbRORxzEvvFKy.png">
<img class="preview-img no-padding good" align="right" alt="操作反馈 - 正确示例" description="将可被通用的文案抽象成『确定』、『操作』等通用术语，集中进行调用和维护。虽然『用户』体验 -1 分，但是『设计者』体验 +5 分。" src="https://os.alipayobjects.com/rmsportal/rtbYGKfPOpWRJID.png">
<img class="preview-img no-padding bad" align="right" alt="操作反馈 - 错误示例" description="这是体验更好的反馈方式，但是对『设计者』来说是灾难。因为这些『删除』文案只能通过人肉维护，难免产生遗漏和错别字，增大了系统的不确定性，这在多人合作和需求变更时尤为明显。" src="https://os.alipayobjects.com/rmsportal/OWLtvGCGmqawyPt.png">
探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。
### 通俗而科学的设计原则
详见[『设计原则』](/docs/spec/proximity)。
---
## 幸福
### 用户的幸福
<img class="preview-img no-padding" align="right" alt="用户的幸福示例" description="想了解更多内容，可阅读唐纳德•A•诺曼所著的 《设计心理学 3》。" src="https://os.alipayobjects.com/rmsportal/sBjNEGgHEpNfqTs.png">
漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应；
良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应；
自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。
### 设计者的幸福
<img class="preview-img no-padding" align="right" alt="设计者的幸福示例" description="Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。" src="https://os.alipayobjects.com/rmsportal/eMcdBWuZxRbvlvW.png">
从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。
从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。
- **保持克制：**能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。
- **面向对象的方法：**探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版
- **模块化设计：**将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件、模板或者自行抽象可复用的组件、模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。

79
docs/spec/font.md
View File

@@ -6,21 +6,22 @@ title:
en-US: Font
---
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
字体是体系化界面设计中最基本的构成之一。
字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案，在满足不同终端始终保持良好的阅读体验的同时，使页面的视觉层次更加清晰。使用时有以下三点需要注意：
我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案，是基于''动态秩序''的设计原则，结合了自然对数以及音律的规则得出的，再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。
在中后台视觉体系中定义字体系统，我们建议从 5 几个方面出发：
- 合理的使用不同的字重、字号和颜色来强调界面中最重要的信息；
- 尽可能的使用单种字体，混合使用多种字体会让界面看起来零散和草率；
- 遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。
1. 字体家族
1. 主字体
1. 字阶与行高
1. 字重
1. 字体颜色
---
## 字体家族
字体家族 css 代码如下：
优秀的字体系统的核心是选择一个好的字体。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。
优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性，体现了友好，稳定和专业的特性。此外，考虑到中后台产品常常会有大量的数字对比展示的诉求，我们单独将数字的字体定义为等宽的 Helvatica Neue，以便于提升数字间纵向比较时的阅读体验。
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -34,26 +35,66 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
> 技术方案：http://stackoverflow.com/questions/13611420/set-a-font-specifically-for-all-numbers-on-the-page
## 字号
## 主字体
Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`，展示型页面可以设置为 `14pt`，其他字体字号相应升级。
我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。
![](https://zos.alipayobjects.com/rmsportal/UkvKkdJgvFqlewCWFyQE.png)
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png" />
</div>
## 行高
## 字阶与行高
行高会影响阅读的体验，西文的基本行高通常是字号的 `1.2em` 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，`1.5em` 至 `1.8em` 之间是一个比较好的视觉阅读效果，Ant Design 规定默认文案字体行高为 `1.5em`，展示型页面可根据实际情况调整行高。
字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
### 行高公式
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/ZgQWUJvIQGumfibqSzVz.png" />
</div>
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/qFKnfXanJURiDsjJTKDP.png">
Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 `18px`，14 号字体的行高为 `21px`。
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/oAPYYRGryJzdOawgVVLm.png" />
</div>
在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。
## 字重
字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的600。
<div>
<div class="sample" style="text-align: left;">
<img width="272" src="https://gw.alipayobjects.com/zos/rmsportal/orIVrEOZIpjMbqZGiXEi.png" />
</div>
<div class="sample">
<img width="272" src="https://gw.alipayobjects.com/zos/rmsportal/sasWhUzTGjlZKftukraH.png" />
</div>
<div class="sample" style="text-align: right;">
<img width="272" src="https://gw.alipayobjects.com/zos/rmsportal/QqxifAZlISrSUwnlonyx.png" />
</div>
</div>
<style>
.sample {
text-align: center;
width: 33.33%;
display: inline-block;
}
</style>
## 字体颜色
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/kNFpUKqccPYxzfiQlFTh.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
文本颜色如果和背景颜色太接近就会很难以阅读，这对于深色背景和浅色背景同样适用。
<div>
<img src="https://gw.alipayobjects.com/zos/rmsportal/XaLviGPkcGkOcezaZSYd.png" />
</div>
考虑到无障碍设计的需求，帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字，我们参考了 WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。
## 建议
字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：
1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、自重强调视觉重点或对比关系。
1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会另字阶之间产生一种微妙的韵律感。

2
docs/spec/icon.en-US.md
View File

@@ -55,7 +55,7 @@ Icons that follow Ant Design should have rounded corners and edges using a 72px
#### Visual correction
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="Correct example" description="For the intricate 'JPG' lettering, an outline is added for readability">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability.

48
docs/spec/icon.zh-CN.md
View File

@@ -14,7 +14,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
## 系统图标
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
@@ -22,7 +22,7 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
### 关键轮廓线
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="网格和关键轮廓线">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="网格和关键轮廓线">
根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
@@ -30,53 +30,51 @@ Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
- [制作小技巧](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="正方形外轮廓">
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="横向矩形外轮廓">
<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://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="圆形外轮廓">
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.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="纵向矩形外轮廓">
### 细节
### 笔画
#### 笔画
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="正确示范" description="icon 的线条粗细统一保持为 72px">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="错误示范" description="icon 的线条粗细不统一">
<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 宽度。
#### 边角
### 边角
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="正确示范" description="图标的边角设计都遵循了 Ant Design 的规范">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="错误示范" description="线条的终端并不是圆角">
<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 的图标设计中，外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
#### 视觉修正
### 视觉修正
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="正确示范" description="对于图标内较复杂的 “JPG” 字母在笔画权重上进行了微调，让图标看上去更和谐">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="错误示范" description="icon 图形太复杂，空间显得拥挤">
<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 图形太复杂，空间显得拥挤">
在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
### 透视角度
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="正确示范" description="保持平面、简洁的风格">
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="错误示范" description="图标具有俯视角度，并不是在一个维度空间内">
<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="图标具有俯视角度，并不是在一个维度空间内">
始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
### 命名规则
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
### 图标尺寸
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
应用于页面时请使用 Ant Design 的规范尺寸，与字体搭配时和字体的尺寸保持一致。
@@ -84,7 +82,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
### 颜色
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/POLtbudedSVkOBEtNedn.png" description="表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
@@ -92,7 +90,7 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
## 业务图标
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sBoyTTymmdhEuYUPEGAd.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
@@ -100,12 +98,12 @@ Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，ico
### 图标尺寸
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
### 颜色
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/KjXUhatKsjtoigPcLSbm.png">
业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。

12
docs/spec/introduce.zh-CN.md
View File

@@ -4,13 +4,13 @@ order: 0
title: Introduction
---
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
<img width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
<div style="text-align:center;margin:40px 0;">
<img width="600" src="https://gw.alipayobjects.com/zos/rmsportal/lcamFWetlMgLkLmDUgmZ.png">
</div>
不同的设计规范和实现方式会给企业中后台产品研发的设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。在大量真实项目研发实践中，我们建设了一套中后台设计体系 Ant Design，旨在统一中后台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中后台设计语言，利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能，全面提高中后台产品体验和研发效率。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
---
@@ -19,8 +19,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
我们提供完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型。
- [设计原则](/docs/spec/proximity)
- [设计模式](/docs/pattern/navigation)
- [设计资源](/docs/resource/download)
- [设计模式](/docs/spec/overview)
- [设计资源](/docs/spec/download)
## 前端实现

4
docs/spec/invitation.en-US.md
View File

@@ -31,7 +31,7 @@ Call to Action Invitations are generally provided as static instructions on the
<br>
<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the “Got It” button leads the user to the next tour step." src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the 'Got It' button leads the user to the next tour step." src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
<img class="preview-img" align="right" alt="example 2 of Tour Invitation" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">
@@ -70,4 +70,4 @@ Inference Invitation: Use visual inferences during interaction to cue users as t
More Content Invitation: Indicate that there is more content on the page.
<br>
<br>

2
docs/spec/layout.en-US.md
View File

@@ -105,7 +105,7 @@ It is recommended that the number of blocks arranged in the horizontal direction
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/htXqyMPydaagYLdAGEJK.png">
The `Gutter` value in ant design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged.
The `Gutter` value in Ant Design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged.
There are two `Gutter`s in Ant Design

115
docs/spec/layout.zh-CN.md
View File

@@ -4,110 +4,63 @@ order: 2
title: 布局
---
布局是页面构成的前提，是后续展开交互和视觉设计的基础。Ant Design 提供了常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：
空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。
- 明确用户在此场景中完成的主要任务和需获取的决策信息。
- 明确决策信息和操作的优先级及内容特点，选择合理布局。
在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：
---
1. 统一的画板尺寸
1. 适配方案
1. 网格单位
1. 栅格
1. 常用模度
## 常用布局
## 统一画板
通过大量的中台设计实践，Ant Design 总结了六类常用的页面布局模板：网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计设计团队统一的画板尺寸为1440。
### 网站展示页
## 适配
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/olHkTiGQqfwThlgPIXzx.png">
在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440和 1366，个别系统还存在 1280 的显示设备。
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uxbNrsFCmPFjYdhDowky.png">
Ant Design 两种较为典型的适配方案：
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
### 一、左右布局的适配方案
- 明确你要传达的内容，保持简短而清晰的文案。
- 搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。
### 控制台页
![左右布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/xQRlXSOwrRonMOIYXeRZ.png)
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fCVwqOiItdbzyZkQOOiQ.png">
### 二、上下布局的适配方案
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/LvYKhbKsPzIRLGsBxUJA.png">
常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
![上下布局的适配方案](https://gw.alipayobjects.com/zos/rmsportal/XzcyeBnPowMqKStoDHMk.png)
- 按照信息的重要程度来组织页面排版，突出展示关键信息。
- 将数据可视化，让用户可以直观地了解关键信息及整体情况。
- 合理地使用颜色及栅格排版，减轻用户的视觉负担。
这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。
### 列表页
## 网格单位
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/GSIyiSRJmxUhmxpMoyrj.png">
Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/VyFWYXzkQYYzMzqBXfzO.png">
## 关于栅格
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：
Ant Design 采用 24 栅格体系。以 1440 上下布局的结构为例，对宽度为 1168 的内容区域 进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
- 根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
- 当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
![栅格 layout](https://gw.alipayobjects.com/zos/rmsportal/TGgqrjNNHljnktGrafre.png)
## 表格页
对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ArRESSbBrLJWhjscKiZh.png">
Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通：
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gDwAZagDBphbcePRDnBZ.png">
1. 清晰的定义动态布局范围
1. 尽量保持偶数思维
1. 关键数据的交付（Gutter、Column）
1. 区块的定义要从 column 开始到 column 结束
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
## 常用模度
- 构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
- 更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
- 当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。在大量的实践中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。
### 详情页
## 是启发，而非限制
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/wRdLpkIoTNfxOvNOqKyf.png">
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/IWXpmErtdIHzDYbtNohi.png">
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
- 清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
- 图文搭配比单文本展示信息能更好地提高用户的理解。
### 表单页
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AVxFnNgjBPIaxLnCOxJv.png">
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sqeTZuWlqiGboOITncCh.png">
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
- 考虑用户的浏览方式，提供清晰的用户视线浏览路径；
- 内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
- 标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
- 醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
---
## 栅格
我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按『页面总宽 1440px，内容区 1208px』来设定，并在此基础上以 24 等分的栅格来划分整个设计建议区域。
![](https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png)
建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
![](https://os.alipayobjects.com/rmsportal/JmrNLpHxwcLebVpBIGqD.png)
> 注：图中灰色部分为栅格的列，定义为『Column』，白色部分为栅格的间隔，定义为『Gutter』。
### 栅格公式
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/htXqyMPydaagYLdAGEJK.png">
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
在 Ant Design 中，我们定义了两种 Gutter：
- 网站展示页和 Dashboard 的 Gutter 宽度为 24px。
- 列表、表格、详情和表单页面的 Gutter 宽度为 16px。
> [设置栅格的小技巧](https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png)。
Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到『更好』。8 倍数的双数组通过排列组合的方式可以形成千变万化种可能性，但在无限的可能性之中依然存在着『只是简单的套用数据组合』同『看起来很精妙』的差别。实现合理优雅的界面布局，在对美感的追求之上，还应当结合可用性来看待，对于企业级应用界面布局的探索，我们依然在路上。

27
docs/spec/overview.md
View File

@@ -6,4 +6,29 @@ title:
en-US: Overview
---
Coming soon.
在企业级业务中使用设计模式，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
设计模式秉承 Ant Design 设计价值观，针对企业级产品中反复出现的设计问题给出一般解决方案。设计者可直接使用设计模式完成界面设计；也可以设计模式为起点，衍生出更具业务特性的解决方案满足个性化设计需求。
同时，这是一份动态更新的设计文档，你的阅读和反馈正是我们不断前进的动力，[Github 反馈地址](https://github.com/ant-design/ant-design/issues)。
## 信息框架
todo...
完整的设计模式将会包含 ETC 三大实体部分，以及 Genneral Concepts 这样的黏合剂：
- **Examples 产品范例：**由多张模板构成，启发用户如何使用和搭建出一个常见系统
- **Templates 模板：**页面级示例，启发用户如何通过组件搭建出系统中的典型页面，eg：详情页
- **Components 组件**
- Examples of Components 业务组件/模块：区块级示例，一般由多个组件构成，eg：PageHeader
- Basic Components 基础组件：构成系统最基础的元素，eg：Button、Pagination
- **Genneral Concepts 通用概念：**一些保证 ETC 体系化的约定，eg：文案
## 资源
我们和工程师通力合作，将设计模式转换为可重用代码，最大程度提升你们的工作效率和沟通效率。
- [Ant Design Pro](https://pro.ant.design)：开箱即用的解决方案，包含 20+ 模板以及 10+ 业务组件
- [Ant Design Components](https://ant.design/docs/react/introduce)：Ant Design 的 React 实现，是风靡全球的组件库，包含 50+ 基础组件
- [Ant Design Library](http://library.ant.design/)：和代码配套 Axure 资源包，让你的原型精美得像视觉稿，包含模板、组件等元素

1
site/theme/static/markdown.less
View File

@@ -13,7 +13,6 @@
}
.markdown p > img {
margin: 2.4em 1em;
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}

6
site/theme/template/Color/ColorPalettes.jsx
View File

@@ -143,12 +143,6 @@ const ColorPalettes = () => {
chinese: '法式洋红',
description: '明快、感性',
},
{
name: 'grey',
english: 'Grey',
chinese: '灰',
description: '平稳、中性',
},
];
return (
<div className="color-palettes">