Add new pages

docs/spec/alignment.md

@@ -0,0 +1,25 @@
+# 对齐
+
+- category: 设计原则
+- order: 2
+- subtitle: Alignment
+
+---
+
+正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。
+
+> 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
+
+## 文案类对齐
+
+如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
+
+## 表单类对齐
+
+冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
+
+更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。
+
+## 数字类对齐
+
+为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

docs/spec/contrast.md

@@ -0,0 +1,29 @@
+# 对比
+
+- category: 设计原则
+- order: 3
+- subtitle: Contrast
+
+---
+
+对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
+
+> 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
+
+## 主次关系对比
+
+为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
+
+> 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
+
+在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
+
+## 总分关系对比
+
+通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
+
+### 状态关系对比
+
+通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
+
+常见类型有『静态对比』、『动态对比』。

docs/spec/direct.md

@@ -0,0 +1,24 @@
+# 直截了当
+
+- category: 设计原则
+- order: 5
+- subtitle: Make it Direct
+
+---
+
+正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
+
+## 页内编辑
+
+单字段行内编辑
+
+当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
+
+当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
+
+
+多字段行内编辑
+
+注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
+
+更多有关『页内编辑』的模式，可查看『模式』-『表格』-『交互』中的内容。

docs/spec/feature.md

@@ -0,0 +1,91 @@
+# 特性
+
+- category: 1
+- order: 1
+
+---
+
+Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。
+
+在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。
+
+## 三大特性
+
+<div class="row" style="margin-left: -12px; margin-right: -12px;">
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+    <h5>微小</h5>
+    <div>致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。</div>
+  </div>
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+    <h5>确定</h5>
+    <div>通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
+  </div>
+  <div class="col-8 features">
+    <img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+    <h5>幸福</h5>
+    <div>不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。</div>
+  </div>
+</div>
+
+<style>
+.features {
+  padding: 12px;
+  font-size: 12px;
+}
+.features h5 {
+  font-size: 14px;
+  margin-top: 24px;
+}
+</style>
+
+## 微小
+
+### 微创新
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。
+
+### 集成创新
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。
+
+---
+
+## 确定
+
+### 面向对象的方法
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。
+
+### 通俗科学的规则
+
+详见『十大原则』。
+
+---
+
+## 幸福
+
+### 用户的幸福
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应；
+
+良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应；
+
+自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。
+
+### 设计者的幸福
+
+<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。
+
+从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。

docs/spec/introduce.md

@@ -5,11 +5,9 @@
 
 ---
 
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
+Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。
 
-<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-
-Ant Design 源自蚂蚁金服体验技术部的后台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
+Ant Design 源自蚂蚁金服体验技术部的中台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
 
 整套设计规范还在持续整理和完善中。
 

docs/spec/invitation.md

@@ -0,0 +1,7 @@
+# 提供邀请
+
+- category: 设计原则
+- order: 8
+- subtitle: Provide Invitation
+
+---

docs/spec/lightweight.md

@@ -0,0 +1,34 @@
+# 简化交互
+
+- category: 设计原则
+- order: 6
+- subtitle: Keep it Lightweight
+
+---
+
+根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
+
+> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：t = a + b log2 (D / S + 1）。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（S）。距离越长，所用时间越长；目标越大，所用时间越短。
+
+## 实时可见工具
+
+如果某个操作非常重要，就应该把它放在界面中，并实时可见。
+
+## 悬停即现工具
+
+如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
+
+## 开关显示工具
+
+如果某些操作只需要在特定模式时显示，可以通过开关来实现。
+
+
+## 交互中的工具
+
+如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
+
+此处也可以运用『提供邀请』相关的知识点。
+
+## 可视区域 ≠ 可点击区域
+
+注：在移动端尤其适用。

docs/spec/principle.md

@@ -0,0 +1,25 @@
+# 十大原则
+
+- category: 设计原则
+- order: 0
+
+---
+
+『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
+
+我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。
+
+> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
+
+我们总结了中台十大设计原则：
+
+- [亲密性 Proximity]()
+- [对齐 Alignment]()
+- [对比 Contrast]()
+- [重复 Repetition]()
+- [直截了当 Make it Direct]()
+- [简化交互 Keep it Lightweight]()
+- [足不出户 Stay on The Page]()
+- [提供邀请 Provide Invitation]()
+- [巧用过渡 Use Transition]()
+- [即时反应 React Immediately]()

docs/spec/proximity.md

@@ -0,0 +1,23 @@
+# 亲密性
+
+- category: 设计原则
+- order: 1
+- subtitle: Proximity
+
+---
+
+『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离越接近，也越像一个视觉单元；反之，则它们的距离越远，越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。
+
+## 纵向间距关系
+
+通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
+
+在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
+
+> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
+
+## 横向间距关系
+
+为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
+
+在一个组件内部，元素的横向间距也应该有所不同。

docs/spec/reaction.md

@@ -0,0 +1,7 @@
+# 即时反应
+
+- category: 设计原则
+- order: 10
+- subtitle: Stay in the Page
+
+---

docs/spec/repetition.md

@@ -0,0 +1,11 @@
+# 重复
+
+- category: 设计原则
+- order: 4
+- subtitle: Repetition
+
+---
+
+相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
+
+重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

docs/spec/stay.md

@@ -0,0 +1,7 @@
+# 足不出户
+
+- category: 设计原则
+- order: 6
+- subtitle: Stay in the Page
+
+---

docs/spec/transition.md

@@ -0,0 +1,7 @@
+# 巧用过渡
+
+- category: 设计原则
+- order: 9
+- subtitle: Use Transition
+
+---

site/templates/aside.html

@@ -10,6 +10,7 @@
            class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
           {{item.title}}
           <span class="chinese">{{item.meta.chinese}}</span>
+          <span class="chinese">{{item.meta.subtitle}}</span>
         </a>
       </li>
       {%- endfor %}

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>