diff --git a/docs/pattern/form.md b/docs/pattern/form.md
index b5a9f69a1f..a2248bacf3 100644
--- a/docs/pattern/form.md
+++ b/docs/pattern/form.md
@@ -5,4 +5,115 @@
---
-占位。
+作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
+
+设计者进行表单设计时，应当注意这几点：
+
+1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
+
+ 为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
+
+2. 让用户能在上下文中获取信息，帮助他完成输入。
+
+ 使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
+
+3. 对错误敏感，并尽可能宽容。
+
+ 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
+
+4. 不要提出不必要的问题。
+
+## 内容
+
+
+
+通常表单会有四个部分组成。
+
+1. 标签。
+2. 输入框。
+3. 动作。
+4. 校验反馈。
+
+> 注：`*` 表明该项为必填项。
+
+## 交互
+
+### 填空
+
+
+
+在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
+
+### 组合输入框
+
+
+
+当两个输入框关联性很强时，可以前后拼接，减少页面空间。
+
+### 对齐方式
+
+
+
+在页面设计表单时，按钮组必须和输入框左对齐。
+
+### 禁用主按钮
+
+
+
+
+当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
+
+### 结构化的格式
+
+
+
+用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
+
+### 输入提示 & 输入提醒
+
+
+
+
+输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
+
+输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
+
+### 密码加强计
+
+
+
+提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
+
+### 校验
+
+
+
+
+
+
+
+
+
+通过不同的“校验”规则和形式进行反馈，避免用户在点击提交后才刚刚开始“校验”，让用户提前纠正错误。
+
+### 字数校验框
+
+
+
+用于统计当前输入长度，以及是否超过系统阈值。
+
+### 容错格式
+
+待补充。
+
+### 自动完成
+
+待补充。
+
+### 列表构造器
+
+待补充。
+
+### 良好的默认值
+
+待补充。
diff --git a/docs/pattern/list.md b/docs/pattern/list.md
index 507b0861e9..6a3e2ee2da 100644
--- a/docs/pattern/list.md
+++ b/docs/pattern/list.md
@@ -5,4 +5,113 @@
---
-占位。
+
+列表是非常常见的界面元素，有多种使用场景：
+
+- 获取概览
+- 逐项浏览
+- 查找特定列表项
+- 排序与过滤
+- 重新安排、添加、删除或重新分类列表项
+
+## 交互
+
+### 显示详情信息
+
+
+
+气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
+
+
+
+
+
+列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
+
+
+
+
+
+弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
+
+
+
+
+
+双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
+
+
+
+
+
+单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
+
+### 显示更多文本
+
+
+
+宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
+
+
+
+
+
+对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
+
+### 显示图片
+
+
+
+走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
+
+
+
+
+
+缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
+
+### 显示长列表
+
+
+
+分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
+
+
+
+
+
+无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
+
+### 显示分类或者层级的列表
+
+
+
+
+两层结构。
+
+
+
+
+
+
+多层结构。
+
+
+
+## 案例
+
+
+
+功能可有批操作，升序降序，分页，单条操作。
+
+
+
+
+
+列表各项的合并、详情展开。
+
+
+
+
+
+卡片网格。
diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md
index 0ece3858fe..59fa7ef47c 100644
--- a/docs/pattern/navigation.md
+++ b/docs/pattern/navigation.md
@@ -5,14 +5,66 @@
---
-占位。
+在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
-
+1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
+2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
+3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
-占位。
+## 常见导航
-占位。
+
-占位。
+我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
-占位。
+## 侧栏导航
+
+
+
+导航的结构由以下几部分组成。
+
+
+1. 产品 Logo 和名称。
+2. 业务类目。
+3. 登陆工具。
+4. 面包屑（可选）。
+
+> 注：
+> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时；
+> 2. 面包屑可以分为这几类：
+> - 路径型：路径型面包屑是一个动态显示用户到达页面经过的途径。
+> - 位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置。
+> - 属性型：属性型面包屑给出的当前页面的分类信息。
+
+
+
+
+
+
+
+我们定义了不同类目层级所对应的导航样式。
+
+
+## 顶部导航
+
+
+
+
+
+结构如右图所示：
+
+1. 产品 Logo 和名称。
+2. 业务类目。
+3. 登陆工具。
+4. 面包屑（可选）。
+
+
+
+
+
+
+
+
+
+
+不同类目层级。
diff --git a/scripts/demo.js b/scripts/demo.js
index d6fecb172d..3698be048a 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -149,7 +149,8 @@ var Modal = antd.Modal;
var PriviewImg = React.createClass({
getInitialState() {
return {
- visible: false
+ visible: false,
+ boxLength: 1,
};
},
showImageModal() {
@@ -163,21 +164,40 @@ var PriviewImg = React.createClass({
});
},
render() {
+ const width = (100.0 / this.props.boxLength) + '%';
+ const goodCls = this.props.good ? 'good' : '';
+ const badCls = this.props.bad ? 'bad' : '';
return (
-
- 
+
+
+
+
+
{this.props.alt}
-
+
+ {this.props.alt}
-
+