Merge pull request ant-design#1197 from ant-design/new-design-language

New design language docs

docs/pattern/advanced-search.md

@@ -3,10 +3,10 @@
 - category: 6
 - order: 6
 
----
-
 借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
 
+---
+
 ## 常规型
 
 ### 交互
@@ -53,4 +53,4 @@
 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
 
 
-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>

docs/pattern/complex-table.md

@@ -3,10 +3,10 @@
 - category: 5
 - order: 5
 
----
-
 表格也用于展示复杂和高度结构化数据。
 
+---
+
 ## 案例
 
 ### 多列数据

docs/pattern/form.md

@@ -3,8 +3,6 @@
 - category: 2
 - order: 2
 
----
-
 作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
 
 设计者进行表单设计时，应当注意这几点：
@@ -23,6 +21,8 @@
 
 4. 不要提出不必要的问题。
 
+---
+
 ## 内容
 
 <img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
@@ -106,7 +106,7 @@
 
 ### 字数校验框
 
-<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
+<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
 
 用于统计当前输入长度，以及是否超过系统阈值。
 

docs/pattern/list.md

@@ -3,8 +3,6 @@
 - category: 3
 - order: 3
 
----
-
 列表是非常常见的界面元素，有多种使用场景：
 
 - 获取概览
@@ -13,6 +11,8 @@
 - 排序与过滤
 - 重新安排、添加、删除或重新分类列表项
 
+---
+
 ## 交互
 
 ### 显示详情信息
@@ -98,4 +98,4 @@
 
 <br />
 
-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>

docs/pattern/navigation.md

@@ -3,14 +3,14 @@
 - category: 1
 - order: 1
 
----
-
 在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
 
 1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
 2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
 3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
 
+---
+
 ## 常见导航
 
 <Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">

docs/pattern/table.md

@@ -3,10 +3,10 @@
 - category: 4
 - order: 4
 
----
-
 表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
 
+---
+
 ## 内容
 
 <img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
@@ -154,4 +154,4 @@
 数值右对齐（带小数则按小数点对齐），其余左对齐。
 
 
-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>

docs/practice/cases.md

@@ -5,9 +5,9 @@
 
 ---
 
-Ant Design 是面向中后台的 UI 设计语言。
+Ant Design 是面向中台的 UI 设计语言。
 
-从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
 
 Ant Design 目前在外部也有 [许多产品实践](https://github.com/ant-design/ant-design/issues/477)，如果你的公司和产品从中受益，欢迎留言。
 

docs/react/getting-started.md

@@ -3,10 +3,10 @@
 - category: 1
 - order: 1
 
----
-
 Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
+---
+
 ## 第一个例子
 
 最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。

docs/react/introduce.md

@@ -3,8 +3,6 @@
 - category: 0
 - order: 0
 
----
-
 这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
 
 <div class="pic-plus">
@@ -24,6 +22,7 @@
 }
 </style>
 
+---
 
 ## 特性
 
@@ -78,7 +77,10 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ## 谁在使用
 
 - 蚂蚁金服
+- 阿里巴巴
 - 口碑
+- 新美大
+- 滴滴
 
 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
 

docs/spec/alignment.md

@@ -0,0 +1,37 @@
+# 对齐
+
+- category: 十大原则
+- order: 2
+- subtitle: Alignment
+
+正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
+
+> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
+
+---
+
+## 文案类对齐
+
+<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
+<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
+
+如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
+
+---
+
+## 表单类对齐
+
+<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png">
+
+冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
+
+更多对齐方式，请查看[『模式／表单／规格／对齐方式』](../pattern/form#对齐方式)。
+
+---
+
+## 数字类对齐
+
+<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
+<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
+
+为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

docs/spec/colors.md

@@ -1,6 +1,6 @@
 # 色彩
 
-- category: 基础
+- category: 设计基础
 - order: 2
 
 ---
@@ -9,7 +9,7 @@
 
 色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。
 
-## ANTD Color
+## Ant Design Colors
 
 Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。
 

docs/spec/contrast.md

@@ -0,0 +1,48 @@
+# 对比
+
+- category: 十大原则
+- order: 3
+- subtitle: Contrast
+
+对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
+
+> 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
+
+---
+
+## 主次关系对比
+
+<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
+<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
+
+为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
+
+> 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
+
+<br>
+
+<img class="preview-img" align="right" alt="不区分主次的示例" decription="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
+
+在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
+
+---
+
+## 总分关系对比
+
+<img class="preview-img" align="right" alt="总分关系示例 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
+
+<img class="preview-img" align="right" alt="总分关系示例 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
+
+通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
+
+---
+
+## 状态关系对比
+
+<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
+
+<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
+
+通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
+
+常见类型有『静态对比』、『动态对比』。

docs/spec/direct.md

@@ -0,0 +1,70 @@
+# 直截了当
+
+- category: 十大原则
+- order: 5
+- subtitle: Make it Direct
+
+正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
+
+---
+
+## 页内编辑
+
+<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>
+状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>
+状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png">
+
+单字段行内编辑
+
+当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
+
+<br>
+
+<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>
+状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png">
+
+当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
+
+<br>
+
+<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://os.alipayobjects.com/rmsportal/hGXGErepBnrwqzj.png">
+
+多字段行内编辑
+
+>注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../spec/transition#解释刚刚发生了什么)来消除这种视觉影响。
+
+<br>
+
+更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](../pattern/table#模块编辑)中的内容。
+
+<br>
+
+---
+
+## 利用拖放
+
+<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>
+状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>
+状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png">
+
+拖放列表
+
+只能限制在一个维度（上/下或者左/右）进行拖放。
+
+<br>
+
+<img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://os.alipayobjects.com/rmsportal/KVhqdSoLUjXPXuN.png">
+
+拖放图片/文件
+
+<br>
+
+<span class="waiting">拖放对象（敬请期待）</span>
+
+<span class="waiting">拖放多个对象（敬请期待）</span>
+
+<br>
+
+---
+
+## <span class="waiting">直接选择（敬请期待）</span>

docs/spec/easing.md

@@ -14,7 +14,7 @@
 当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。
 
 
-### 质量和重量
+## 质量和重量
 
 在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。