Add design principles

docs/spec/alignment.md

@@ -12,14 +12,22 @@
 
 ## 文案类对齐
 
+<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
 
 ## 表单类对齐
 
+<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
 
 更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。
 
 ## 数字类对齐
 
+<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

docs/spec/contrast.md

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

docs/spec/principle.md

@@ -11,9 +11,28 @@
 
 > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
 
-我们总结了中台十大设计原则：
+<div class="resource-cards">
+<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>
+<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>
+</div>
 
-- [亲密性 Proximity]()
+#### 中台十大设计原则
+
+- [亲密性 Proximity](./proximity)
 - [对齐 Alignment]()
 - [对比 Contrast]()
 - [重复 Repetition]()

docs/spec/proximity.md

@@ -10,14 +10,22 @@
 
 ## 纵向间距关系
 
+<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
 
+<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
 
 > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
 
 ## 横向间距关系
 
+<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
 
+<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
 在一个组件内部，元素的横向间距也应该有所不同。

docs/spec/repetition.md

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

site/templates/aside.html

@@ -10,7 +10,6 @@
            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/page.html

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