Merge pull request #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

+# 对齐
+
+- 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

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

docs/spec/contrast.md

+# 对比
+
+- 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

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

docs/spec/feature.md

+# 三大特性
+
+- category: 1
+- order: 1
+
+与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
+
+<div style="margin-left:-40px;margin-right:-40px;overflow:hidden;">
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
+    <h5>微小</h5>
+    <div>致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。</div>
+  </div>
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
+    <h5>确定</h5>
+    <div>制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
+  </div>
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
+    <h5>幸福</h5>
+    <div>不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。</div>
+  </div>
+</div>
+
+<style>
+.features {
+  padding: 0 40px;
+  font-size: 12px;
+}
+.features h5 {
+  font-size: 14px;
+  margin-top: 16px;
+}
+</style>
+
+---
+
+## 微小
+
+### 微创新
+
+<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">
+
+选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。
+
+---
+
+## 确定
+
+### 面向对象的方法
+
+<img class="preview-img" align="right" alt="色值换算工具示例" description="定义『原色』后，用『加黑』和『加白』的方式快速、科学的得出 Normal、Hover 等多个『状态色』。" src="https://os.alipayobjects.com/rmsportal/MqsXoBBSDmoEDqn.png">
+
+<img class="preview-img" align="right" alt="排版规则示例" description="运用『亲密性』原则，只需定义 n 的值，就可以得出确定的间距。" src="https://os.alipayobjects.com/rmsportal/WNEbRORxzEvvFKy.png">
+
+<img class="preview-img" noPadding align="right" alt="操作反馈 - 正确示例" description="将可被通用的文案抽象成『确定』、『操作』等通用术语，集中进行调用和维护。虽然『用户』体验 -1 分，但是『设计者』体验 +5 分。" good src="https://os.alipayobjects.com/rmsportal/rtbYGKfPOpWRJID.png">
+
+<img class="preview-img" noPadding align="right" alt="操作反馈 - 错误示例" bad description="这是体验更好的反馈方式，但是对『设计者』来说是灾难。因为这些『删除』文案只能通过人肉维护，难免产生遗漏和错别字，增大了系统的不确定性，这在多人合作和需求变更时尤为明显。" src="https://os.alipayobjects.com/rmsportal/OWLtvGCGmqawyPt.png">
+
+探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。
+
+### 通俗而科学的设计原则
+
+详见[『十大原则』](./principle)。
+
+---
+
+## 幸福
+
+### 用户的幸福
+
+<img class="preview-img" noPadding align="right" alt="用户的幸福示例" description="想了解更多内容，可阅读唐纳德•A•诺曼所著的 《设计心理学 3》。" src="https://os.alipayobjects.com/rmsportal/sBjNEGgHEpNfqTs.png">
+
+漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应；
+
+良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应；
+
+自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。
+
+### 设计者的幸福
+
+<img class="preview-img" noPadding align="right" alt="设计者的幸福示例" description="Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。" src="https://os.alipayobjects.com/rmsportal/eMcdBWuZxRbvlvW.png">
+
+从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。
+
+从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。

docs/spec/font.md

 # 字体
 
-- category: 基础
+- category: 设计基础
 - order: 0
 
----
-
 跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
 
+---
+
 ## 字体家族
 
 - 中文字体族：

docs/spec/introduce.md

@@ -3,20 +3,23 @@
 - category: 0
 - order: 0
 
----
-
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
+<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
+  <img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+</div>
 
-<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
 
-Ant Design 源自蚂蚁金服体验技术部的后台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
+Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
 
-整套设计规范还在持续整理和完善中。
+---
 
 ## 谁在使用
 
 - 蚂蚁金服
+- 阿里巴巴
 - 口碑
+- 新美大
+- 滴滴
 
 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
 

docs/spec/invitation.md

+# 提供邀请
+
+- category: 十大原则
+- order: 8
+- subtitle: Provide Invitation
+
+很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
+
+邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
+
+> ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
+
+> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
+
+---
+
+
+## 静态邀请
+
+指通过可视化技术在页面上提供引导交互的邀请。
+
+<br>
+
+<img class="preview-img" align="right" alt="文本邀请示例" src="https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png">
+
+<img class="preview-img" align="right" alt="白板式邀请示例" src="https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png">
+
+<img class="preview-img" align="right" alt="未完成邀请示例" src="https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png">
+
+引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。
+常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
+
+<br>
+
+<img class="preview-img" align="right" alt="漫游探索邀请示例 1" description="在用户首次登陆时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
+
+<img class="preview-img" align="right" alt="漫游探索邀请示例 2" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">
+
+漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
+
+>注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
+
+
+<br>
+
+---
+
+## 动态邀请
+
+指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
+
+<br>
+
+<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。" src="https://os.alipayobjects.com/rmsportal/gzfDJLcETyTOfFg.png">
+
+<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标『悬停』时，出现『选择此模板』的按钮。" src="https://os.alipayobjects.com/rmsportal/tdJWZFIDWYuMVIe.png">
+
+悬停邀请：在鼠标悬停期间提供邀请。
+
+
+<br>
+
+<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png">
+
+推论邀请：用于交互期间，合理推断用户可能产生的需求。
+
+<br>
+
+<img class="preview-img" align="right" alt="更多内容邀请示例" description="在 Modal 中会出现前后切换的箭头。
+" src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
+
+更多内容邀请：用于邀请用户查看更多内容。
+
+
+<br>
+
+<br>
+
+<span class="waiting">预期功能邀请 (敬请期待)</span>
+
+<br>
+
+<span class="waiting">拖放邀请 (敬请期待)</span>

docs/spec/layout/index.md

 # 常用布局
 
 - template: component
-- category: 基础
+- category: 设计基础
 - order: 4
 - cols: 1
 

docs/spec/lightweight.md

+# 简化交互
+
+- category: 十大原则
+- order: 6
+- subtitle: Keep it Lightweight
+
+根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
+
+> ** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
+
+---
+
+## 实时可见工具
+
+
+<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>
+状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。<br>
+状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png">
+
+如果某个操作非常重要，就应该把它放在界面中，并实时可见。
+
+<br>
+
+---
+
+## 悬停即现工具
+
+
+<img class="preview-img" align="right" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://os.alipayobjects.com/rmsportal/AUiWMlbxCvpBFyA.png">
+
+如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
+
+<br>
+
+---
+
+## 开关显示工具
+
+
+<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击『修改』后，Table 中『文本』变成『输入框』，开启编辑功能。" src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png">
+
+如果某些操作只需要在特定模式时显示，可以通过开关来实现。
+
+
+<br>
+
+---
+
+## 交互中的工具
+
+<img class="preview-img" align="right" alt="推荐示例" description="鼠标悬停时，出现 Tooltips 进行提示，用户点击内容直接复制。" src="https://os.alipayobjects.com/rmsportal/STvIHSgnVAHOVHl.png" good>
+
+<img class="preview-img" align="right" alt="推荐示例" description="鼠标滑选/双击时，系统自动复制该部分内容。通过大胆猜测用户的行为，并帮助完成，给用户小惊喜。" src="https://os.alipayobjects.com/rmsportal/aRihOoBCQHGATBA.png" good>
+
+<img class="preview-img" align="right" alt="不推荐示例" description="在可复制内容的附近出现『图标』，点击后复制。" src="https://os.alipayobjects.com/rmsportal/MfbnQfAJhQfIODY.png" bad>
+
+
+如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
+
+此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。
+
+<br>
+
+---
+
+## 可视区域 ≠ 可点击区域
+
+<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标『指针』随即变为『手型』，单击即可跳转。" src="https://os.alipayobjects.com/rmsportal/bCrBxGPJiDvkyOH.png">
+
+在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
+
+<br>
+
+<img class="preview-img" align="right" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://os.alipayobjects.com/rmsportal/dSehXwUuXDFDhJO.png">
+
+当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
+
+>注：在移动端尤其适用。

docs/spec/motion.md

@@ -9,8 +9,6 @@ Ant Design 提供了一些预设的组件动画样式。
 
 <div id="components-motion-demo-basic"></div>
 
-## 组件动画
-
 通过设置组件的 `transitionName` 指定组件动画。
 
 | 组件         | 中文名              | 采用动画                                        |
@@ -255,4 +253,3 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
   width:180px;
 }
 </style>
-

docs/spec/page-transition.md

-# 互动转换
-
-- category: 动画
-- order: 1
-
----
-
-## 响应互动
-
-响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
-
-比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
-
-### 按钮反馈
-
-<div class="video-player">
-</div>
-
-
-## 转换动画
-
-### 视觉连贯性三元素
-
-- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
-
-- Receding:  与当前页无关的信息元素应采用适当方式移除。
-
-- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
-
-### 可折叠面板
-
-对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
-
- - 被展开的信息区域内容按照一定的路径依次进场。
-
-
-<link rel="stylesheet" href="../../static/motionDemo.css">
-<div class="video-player">
-</div>
-
-
-### 弹出框动效
-
-从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
-
-<div class="video-player">
-
-</div>
-
-
-### 页面转场
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
-
- - 大页面转场可采用左出右入的形式。
-
- - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
-
-<script src="/static/motionDemoLoad.js"></script>
-
-<div class="video-player">
-
-</div>
-
-> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/)

docs/spec/principle.md

+# 引言
+
+- category: 十大原则
+- order: 0
+- subtitle: Introduction
+
+『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
+
+我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。
+
+> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
+
+---
+
+<div class="resource-cards">
+<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">写给大家看的设计书</span>
+    <span class="resource-card-description">作者: Robin Williams</span>
+    <span class="resource-card-description">出版社: 人民邮电出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web 界面设计</span>
+    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+</div>
+
+#### Ant Design 十大设计原则
+
+- [亲密性 Proximity](./proximity)
+- [对齐 Alignment](./alignment)
+- [对比 Contrast](./contrast)
+- [重复 Repetition](./repetition)
+- [直截了当 Make it Direct](./direct)
+- [简化交互 Keep it Lightweight](./lightweight)
+- [足不出户 Stay in the Page](./stay)
+- [提供邀请 Provide Invitation](./invitation)
+- [巧用过渡 Use Transition](./transition)
+- [即时反应 React Immediately](./reaction)

docs/spec/proximity.md

+# 亲密性
+
+- category: 十大原则
+- order: 1
+- subtitle: Proximity
+
+如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
+
+---
+
+## 纵向间距关系
+
+<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/blBCqHsUJhKxxAU.png">
+
+通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
+
+<br>
+
+<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/EWpTfSlQzueWlbp.png">
+
+在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
+
+> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
+
+---
+
+## 横向间距关系
+
+<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/LdomydjSKKlFhiv.png">
+
+为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
+
+<br>
+
+<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/DxzQXtIEnFcFxGY.png">
+
+在一个组件内部，元素的横向间距也应该有所不同。

docs/spec/reaction.md

+# 即时反应
+
+- category: 十大原则
+- order: 10
+- subtitle: React Immediately
+
+『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。
+
+就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
+
+虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
+
+> ** 牛顿第三定律 ** ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
+
+---
+
+## 查询模式
+
+
+<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png">
+
+<img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">
+
+自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。
+根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
+
+<br>
+
+<img class="preview-img" align="right" alt="实时搜索示例" description="用户输入一个搜索值，系统随即显示查询结果。
+" src="https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png">
+
+实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
+
+<br>
+
+微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式／高级搜索』](../pattern/advanced-search)。
+
+<br>
+
+---
+## 反馈模式
+
+<img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。
+" src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png">
+
+实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
+
+>注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。
+
+<br>
+
+渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](../spec/stay#流程处理)。
+
+<br>
+
+<img class="preview-img" align="right" alt="按钮加载示例" src="https://os.alipayobjects.com/rmsportal/FBAZGqfeUnDlUtw.png">
+
+<img class="preview-img" align="right" alt="表格加载示例" src="https://os.alipayobjects.com/rmsportal/FPXsINbTgsuSStI.png">
+
+<img class="preview-img" align="right" alt="富列表加载示例" src="https://os.alipayobjects.com/rmsportal/WJqeUHzthTXaHnW.png">
+
+<img class="preview-img" align="right" alt="页面加载示例" src="https://os.alipayobjects.com/rmsportal/qPWjexSmFfCiLVJ.png">
+
+
+进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。
+常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
+
+<br>
+
+<img class="preview-img" align="right" alt="点击刷新示例" src="https://os.alipayobjects.com/rmsportal/DdmWqoqIFSCSAvq.png">
+
+点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
+
+<br>
+
+<img class="preview-img" align="right" alt="定时示例"  description="新增的列表项『高亮』，持续几秒后恢复正常。" src="https://os.alipayobjects.com/rmsportal/guiuShsfpJzxZQx.png">
+
+定时刷新：无需用户介入，定时展示新内容。

docs/spec/repetition.md

+# 重复
+
+- category: 十大原则
+- order: 4
+- subtitle: Repetition
+
+相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
+
+---
+
+## 重复元素
+
+<img class="preview-img" align="right" alt="线框重复示例" src="https://os.alipayobjects.com/rmsportal/SREcKOUMmiWPQNO.png">
+
+<img class="preview-img" align="right" alt="设计要素重复示例" src="https://os.alipayobjects.com/rmsportal/ZjFUWyPHGzyQJYD.png">
+
+<img class="preview-img" align="right" alt="文案格式重复示例" src="https://os.alipayobjects.com/rmsportal/mveDxAdjucdJDll.png">
+
+重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

docs/spec/stay.md

+# 足不出户
+
+- category: 十大原则
+- order: 6
+- subtitle: Stay in the Page
+
+能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
+
+> ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
+
+> ** 心流（Flow）** ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
+
+---
+
+## 覆盖层
+
+<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png" good>
+
+<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤消』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://os.alipayobjects.com/rmsportal/hDlhNscVtHdvvgu.png" good>
+
+<img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像『狼来了』一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://os.alipayobjects.com/rmsportal/JEcWKBYlMcYIowX.png" bad>
+
+二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
+
+<br>
+
+<img class="preview-img" align="right" alt="详情覆盖层示例" description="通过『点击』图标查看更多详情信息。" src="https://os.alipayobjects.com/rmsportal/WIhhhXExyQBsZwj.png">
+
+详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
+
+> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
+
+<br>
+
+<img class="preview-img" align="right" alt="输入覆盖层示例" description="鼠标『点击』图标触发；鼠标『点击』悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://os.alipayobjects.com/rmsportal/YehbrRkldqWsezo.png">
+
+输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
+
+<br>
+
+---
+
+## 嵌入层
+
+<img class="preview-img" align="right" alt="列表嵌入层示例" src="https://os.alipayobjects.com/rmsportal/bHCqDMqXhZvKbve.png">
+
+列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
+
+<br>
+
+<span class="waiting">详情嵌入层 (敬请期待)</span>
+
+<br>
+
+<img class="preview-img" align="right" alt="标签页示例" src="https://os.alipayobjects.com/rmsportal/MsVyvEIJtlxZWBL.png">
+
+标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
+
+<br>
+
+---
+
+## 虚拟页面
+
+在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
+
+无限加载和分页器，详见[『模式／列表／显示长列表』](../pattern/list#显示长列表)
+
+走马灯，详见[『模式／列表／显示图片』](../pattern/list#显示图片)
+
+<br>
+
+<span class="waiting">伸缩式用户界面（敬请期待）</span>
+
+<br>
+
+---
+
+##  流程处理
+
+长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
+
+<br>
+
+<img class="preview-img" align="right" alt="渐进式展现示例" src="https://os.alipayobjects.com/rmsportal/xpynnwXnfCpGHvn.png">
+
+渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
+
+<br>
+
+<img class="preview-img" align="right" alt="配置程序示例" src="https://os.alipayobjects.com/rmsportal/EBVLFAwHHjiXtIJ.png">
+
+配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
+
+<br>
+
+<img class="preview-img" align="right" alt="弹出框覆盖层示例" src="https://os.alipayobjects.com/rmsportal/xcYosQncDPuFxhS.png">
+
+弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。

docs/spec/transition.md

+# 巧用过渡
+
+- category: 十大原则
+- order: 9
+- subtitle: Use Transition
+
+人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
+
+- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
+- Receding: 与当前页无关的信息元素应采用适当方式移除。
+- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
+
+---
+
+## 在视图变化时保持上下文
+
+<img class="preview-img" align="right" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" type="video" />
+
+滑入与滑出：可以有效构建虚拟空间。
+
+<br>
+
+<img class="preview-img" align="right" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" type="video" />
+
+
+传送带：可极大地扩展虚拟空间。
+
+<br>
+
+<img class="preview-img" align="right" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" type="video" />
+
+
+折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
+
+<br>
+
+<span class="waiting">视图定位 (敬请期待)</span>
+
+<br>
+
+---
+
+## 解释刚刚发生了什么
+
+
+<img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" type="video" />
+
+
+对象增加：在列表/表格中，新增了一个对象。
+
+<br>
+
+<img class="preview-img" align="right" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" type="video" />
+
+对象删除：在列表/表格中，删除了一个对象。
+
+<br>
+
+<img class="preview-img" align="right" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" type="video" />
+
+对象更改：在列表/表格中，更改了一个对象。
+
+<br>
+
+<img class="preview-img" align="right" alt="对象呼出示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" type="video" />
+
+对象呼出：点击页面中元素，呼出一个新对象。
+
+---
+
+## 改善感知性能
+
+当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
+
+<br>
+
+
+<span class="waiting">图片（敬请期待）</span>
+
+
+<script src="/static/motionDemoLoad.js"></script>

docs/spec/typography.md

 # 排版
 
-- category: 基础
+- category: 设计基础
 - order: 1
 
----
-
 良好的排版规范能大大提升用户的视觉体验。
 
+---
+
 ## 行高和段落
 
 考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距決定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距決定了段落上下的间距，一般为字号的一倍宽。

package.json

@@ -104,7 +104,7 @@
     "less-loader": "^2.2.0",
     "lesshint": "^1.2.1",
     "lodash": "^4.1.0",
-    "nico-jsx": "~0.8.2",
+    "nico-jsx": "~0.9.0",
     "postcss-loader": "^0.8.0",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",

scripts/demo.js

@@ -193,10 +193,20 @@ const PriviewImg = React.createClass({
     const createMarkup = () => {
       return {__html: this.props.description}
     };
+
+    let node = <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />;
+    if (this.props.type === 'video') {
+      node = (
+        <video preload loop style={imgStyle}>
+          <source src={this.props.src} type="video/mp4" />
+        </video>
+      );
+    }
+
     return (
       <div className="preview-image-box" style={{ width: this.props.width }}>
-        <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
-          <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture"/>
+        <div className={`preview-image-wrapper ${this.props.type} ${goodCls} ${badCls}`}>
+          {node}
         </div>
         <div className="preview-image-title">{this.props.alt}</div>
         <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()}/>
@@ -245,7 +255,9 @@ InstantClickChangeFns.push(function () {
       priviewImgNodes.each(function (i, img) {
         priviewImgs.push(
           <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
-                      noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
+                      noPadding={img.hasAttribute('noPadding')}
+                      description={img.getAttribute('description')}
+                      type={img.getAttribute('type')}
                       good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')}/>
         );
       });
@@ -273,7 +285,7 @@ InstantClickChangeFns.push(function() {
   if (window.location.href.indexOf('#') > 0) {
     setTimeout(function() {
       window.location.href = window.location.href;
-    }, 0);
+    }, 30);
   }
 
   $('.component-demos .icon-all').off('click');

scripts/home.js

@@ -99,7 +99,7 @@ module.exports = function() {
             <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
                        hideProps={{child: null}}>
               <h2 key="h2">最佳实践</h2>
-              <p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
+              <p key="p" style={{maxWidth: 310}}>近一年的中台设计实践，积累了大量的优秀案例。</p>
               <div key="button"><Button type="primary" size="large"
                                         onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
                 type="right"/></Button></div>
@@ -119,7 +119,7 @@ module.exports = function() {
                        leaveReverse
                        hideProps={{child: null}}>
               <h2 key="h2">设计模式</h2>
-              <p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
+              <p key="p" style={{maxWidth: 260}}>总结中台设计中反复出现的问题，并提供相应的解决方案。</p>
               <div key="button"><Button type="primary" size="large"
                                         onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon
                 type="right"/></Button>
@@ -162,7 +162,7 @@ module.exports = function() {
             <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
                        hideProps={{child: null}}>
               <h2 key="h2">微小·确定·幸福</h2>
-              <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
+              <p key="p">这是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。</p>
             </QueueAnim>
             <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
                       style={{transform: 'translateY(50px)', opacity: 0}} hideProps={{type: 'reverse'}}/>

site/static/motion.js

@@ -839,30 +839,17 @@ $(function() {
   window.Motion = newMotion;
 
   var motionVideo = {
-    video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'],
-    videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'],
+    video: [
+      'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4',
+      'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4',
+      'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4',
+      'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4',
+    ],
     init: function() {
-      var self = this;
-      self.videoBox = $(".video-player");
-      $('<video preload loop></video>').appendTo(self.videoBox);
-      for (var i = 0; i < self.videoBox.length; i++) {
+      $(".preview-image-box video").each(function(i, video) {
         var svg = new SVG();
-        self.videoBox.eq(i).append(svg.node);
-        var video = self.videoBox.eq(i).find("video");
-        if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) {
-          $('<source src="' + self.video[i] + '" type="video/webm">').appendTo(video);
-        } else {
-          $('<source src="' + self.videoMp4[i] + '" type="video/mp4">').appendTo(video);
-        }
-        video.css({
-          "width": "100%"
-        });
-        video.append(svg);
-        svg.css({
-          "position": "absolute",
-          "top": 0,
-          "left": 0
-        });
+        video = $(video);
+        video.parent().append(svg.node);
         var playBox = _playBox(svg);
         svg.addChild(playBox);
         playBox.addEventListener("click", function(e) {
@@ -877,11 +864,10 @@ $(function() {
             this.setTimeout = setTimeout(function() {
               video[0].play();
             }, 500);
-
             m.attr("play", "true")
           }
-        })
-      }
+        });
+      });
     }
   };
   window.Motion.motionVideo = motionVideo;

site/static/style.less

@@ -628,6 +628,7 @@ footer ul li > a {
   border-left: 4px solid #e9e9e9;
   padding-left: 0.8em;
   margin: 1em 0;
+  font-style: italic;
 }
 
 .markdown blockquote p {
@@ -640,6 +641,10 @@ footer ul li > a {
   margin-left: 8px;
 }
 
+.markdown .waiting {
+  color: #ccc;
+}
+
 .markdown h1:hover .anchor,
 .markdown h2:hover .anchor,
 .markdown h3:hover .anchor,
@@ -701,9 +706,15 @@ footer ul li > a {
   margin-left: 1em;
 }
 
+.subtitle {
+  font-size: 80%;
+  font-weight: normal;
+  font-family: "Helvetica Neue", Helvetica;
+}
+
 .toc {
   font-size: 14px;
-  margin-bottom: 20px;
+  margin: 36px 0 24px;
   background: #fbfbfb;
   border-left: 2px solid #eee;
 }
@@ -1176,12 +1187,13 @@ a.entry-link:hover .anticon-smile {
 
 .preview-image-boxes {
   float: right;
-  margin: 0 0 110px 60px;
+  margin: 0 0 70px 28px;
   width: 616px;
+  clear: both;
 }
 
 .preview-image-boxes + .preview-image-boxes {
-  margin-top: -75px;
+  margin-top: -35px;
 }
 
 .preview-image-box {
@@ -1199,6 +1211,22 @@ a.entry-link:hover .anticon-smile {
   position: relative;
 }
 
+.preview-image-wrapper.video {
+  padding: 0;
+  background: 0;
+  display: block;
+}
+
+.preview-image-wrapper video {
+  width: 100%;
+  display: block;
+  + svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
 .preview-image-wrapper.good:after {
   content: '';
   width: 100%;

site/templates/component.html

@@ -4,7 +4,7 @@
 <section class="main-container">
   <article class="markdown">
     <h1>
-      {{ post.title }} {{ post.meta.chinese }}
+      {{ post.title }} {{ post.meta.chinese }}{{ post.meta.subtitle }}
       {%- if post.meta.API %}
       <a class="api-link" href="http://{{ post.meta.API }}" target="_blank">
         <i class="anticon anticon-link"></i>

site/templates/page.html

@@ -17,7 +17,8 @@
 {% block content %}
 <section class="main-container">
   <article class="markdown">
-    <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
+    <h1>{{ post.title }} <span class="subtitle">{{ post.meta.subtitle }}</span></h1>
+    {{ post.meta.description }}
     <div class="toc">{{ post.toc }}</div>
     {{ post.html|add_anchor }}
   </article>