update new design spec style

2024-11-24 02:59:58 +08:00 · 2016-01-12 15:51:44 +08:00 · 2016-01-12 15:51:44 +08:00 · 33f2863e68
commit 33f2863e68
parent 8d14469293
17 changed files with 195 additions and 112 deletions
--- a/components/icon/index.md
+++ b/components/icon/index.md
@ -50,7 +50,6 @@
 ul.anticons-list {
  margin: 20px 0;
  list-style: none;
-  width: 120%;
  overflow: hidden;
 }
 ul.anticons-list li {
--- a/docs/pattern/advanced-search.md
+++ b/docs/pattern/advanced-search.md
@ -11,33 +11,36 @@

 ### 交互

-<img class="preview-img" align="right" description="在收起状态时，用户点击“高级搜索”展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
+<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">

 常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。

-“高级搜索”功能一般开放给中间用户／专家用户使用，一般通过点击“高级搜索”触发；如果非常高频使用，可以默认展开“高级搜索”。
+『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。

 <br>

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
+<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开高级搜索。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">

-当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。
+当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。

 ### 排列规则

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
+<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">

 搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。

 ### 规格

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
+<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
+<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">

 - 横向排版
+
  在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
+
 - 纵向排版
+
  使用 `16px` 作为间距。


@ -45,7 +48,7 @@

 ### 交互

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png">
+<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png">

 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。

--- a/docs/pattern/complex-table.md
+++ b/docs/pattern/complex-table.md
@ -1,4 +1,4 @@
-# 复杂数据表格
+# 表格：复杂数据

 - category: 5
 - order: 5
@ -11,42 +11,42 @@

 ### 多列数据

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
+<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">

 通过按钮，可实现更多列数据的加载以及左右切换。

 <br>

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
+<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">

 提供用户自定义列的功能，方便用户查看需要的列。

 <br>

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
+<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">

 固定表头列，通过横向滚动条来查看剩余内容。

 ### 带图标的表格

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
+<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">

 通过图标强化信息的传递，适用在表达数据变化趋势。

 ### 带图表的表格

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
+<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">

 通过图表来强化信息的传递，适用在表达数据变化趋势。

 ### 二维表格

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
+<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">

 横向和纵向各一个标题来展现数据。

 ### 小表格

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
+<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">

 适用在卡片、弹出框等空间较小的场景中。
--- a/docs/pattern/form.md
+++ b/docs/pattern/form.md
@ -25,14 +25,14 @@

 ## 内容

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/RSeLkJwbpYNLDHd.png">
+<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">

 通常表单会有四个部分组成。

 1. 标签
 2. 输入框
-3. 动作
-4. 校验反馈
+3. 校验反馈
+4. 动作

 > 注：`*` 表明该项为必填项。

@ -70,20 +70,20 @@

 <br>

-<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/BwFnQjZkHtigQGd.png">
+<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">

 当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。

 ### 结构化的格式

-<img class="preview-img" align="right" alt="输入格式化的数据" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
+<img class="preview-img" align="right" alt="结构化的格式示例" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">

 用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。

 ### 输入提示 & 输入提醒

-<img class="preview-img" align="right" alt="输入提示" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
-<img class="preview-img" align="right" alt="输入提醒" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
+<img class="preview-img" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
+<img class="preview-img" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">

 输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。

@ -91,16 +91,16 @@

 ### 密码加强计

-<img class="preview-img" align="right" alt="密码强度" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
+<img class="preview-img" align="right" alt="密码强度示例" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">

 提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。

 ### 校验

-<img class="preview-img" align="right" alt="输入时的实时校验" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
-<img class="preview-img" align="right" alt="输入框失去焦点后的校验" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
+<img class="preview-img" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
+<img class="preview-img" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">

-<img class="preview-img" align="right" alt="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://os.alipayobjects.com/rmsportal/xSxzKxNMqQyIcXr.png">
+<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://os.alipayobjects.com/rmsportal/PLdlPvaebRdJOgu.png">

 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。

@ -121,8 +121,8 @@

 ### 输入框宽度

-<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png" good>
-<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png" bad>
+<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png" good>
+<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png" bad>

 当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。

@ -130,23 +130,21 @@

 ### 对齐方式

-<img class="preview-img" align="right" alt="间隔示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
-
 无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。

 <br>

-<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/UxGJfenYBKvkEEB.png">

 右对齐（推荐）。

- 优点：减少垂直空间。
+- 优点：节约垂直空间。
 - 缺点：降低可读性；标签长度和输入框弹性小。
 - 场景：既要减少垂直空间，又要加快填写速度。

 <br>

-<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/AsyyNKormNdEMLi.png">

 顶部对齐。

@ -156,10 +154,10 @@

 <br>

-<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/eqUyDExbRlAQoas.png">

 左对齐。

- 优点：容易浏览；减少垂直空间。
+- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
 - 缺点：填写速度慢；标签长度和输入框弹性小。
 - 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
--- a/docs/pattern/index.md
+++ b/docs/pattern/index.md
@ -6,4 +6,4 @@

 ---

-占位。
+敬请期待。
--- a/docs/pattern/list.md
+++ b/docs/pattern/list.md
@ -17,14 +17,10 @@

 ### 显示详情信息

-<img class="preview-img" align="right" alt="气泡显示示例" src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">
+<img class="preview-img" align="right" alt="气泡显示示例" description="使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。<hr>使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/WQDeiqTIDGFGnOQ.png">

 气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。

-使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。
-
-使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。
-
 <br />

 <img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
@ -37,43 +33,43 @@

 <br />

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/iVbJiWqvXIswNWP.png">
+<img class="preview-img" align="right" alt="弹出层显示示例" src="https://os.alipayobjects.com/rmsportal/iVbJiWqvXIswNWP.png">

 弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。

 <br />

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/hEGPuWWOEvvbZLw.png">
+<img class="preview-img" align="right" alt="双面板选择器示例" src="https://os.alipayobjects.com/rmsportal/hEGPuWWOEvvbZLw.png">

 双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。

 <br />

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/JRuDZoiPEskztoi.png">
+<img class="preview-img" align="right" alt="单窗口深入示例" description="用户通过点击，该列表项的详情信息会替换列表所在的显示区域；用户通过『面包屑』、按钮或者浏览器自带返回按钮，从详情返回列表。" src="https://os.alipayobjects.com/rmsportal/JRuDZoiPEskztoi.png">

 单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。

 ### 显示更多文本

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
+<img class="preview-img" align="right" alt="宽行示例" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">

 宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。

 <br />

-<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
+<img class="preview-img" align="right" alt="对等网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">

 对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。

 ### 显示图片

-<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
+<img class="preview-img" align="right" alt="走马灯示例" noPadding src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">

 走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。

 <br />

-<img class="preview-img" align="right" noPadding src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
+<img class="preview-img" align="right" alt="缩略图网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">

 缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。

@ -85,7 +81,7 @@

 <br />

-<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的“个人所有”的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
+<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的个人所有的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">

 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。

--- a/docs/pattern/navigation.md
+++ b/docs/pattern/navigation.md
@ -44,7 +44,7 @@

 ---

-<img class="preview-img" noPadding align="right" src="https://os.alipayobjects.com/rmsportal/BywMIfnGDOyWivF.png">
+<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/DKtNtqOckLayIpj.png">

 导航的结构由以下几部分组成。

@ -53,8 +53,7 @@
 3. 登陆工具
 4. 面包屑（可选）

-> 注：
-> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时；
+> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
 > 2. 面包屑可以分为这几类：
 >   - 路径型：是一个动态显示用户到达页面经过的途径。
 >   - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
@ -64,7 +63,9 @@

 <img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/GsVlBheKLGHCRLe.png">

-<img class="preview-img" noPadding align="right" alt="多级类目展开" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
+<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
+
+<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">

 我们定义了不同类目层级所对应的导航样式。

@ -73,19 +74,19 @@

 ---

-<img class="preview-img" noPadding align="right" alt="顶部导航结构" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
+<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">

 结构如右图所示：

-1. 产品 Logo 和名称。
-2. 业务类目。
-3. 登陆工具。
-4. 面包屑（可选）。
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）

 <br>

 <img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">

-<img class="preview-img" noPadding align="right" alt="四级类目" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
+<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">

 不同类目层级。
--- a/docs/pattern/table.md
+++ b/docs/pattern/table.md
@ -9,21 +9,21 @@

 ## 内容

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
+<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">

 通常表格的组成元素以及相关元素会有，这几部分组成。

 1. 按钮组
 2. 搜索条件
-3. 筛选
-4. 排序
+3. 排序
+4. 筛选
 5. 状态点
 6. 单行操作
 7. 分页器／无限加载（可选）

 ### 筛选

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
+<img class="preview-img" align="right" alt="筛选示例" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">

 当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。

@ -35,7 +35,7 @@

 ### 更多操作

-<img class="preview-img" align="right" alt="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
+<img class="preview-img" align="right" alt="更多操作示例" description="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">

 该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。

@ -43,10 +43,10 @@

 <img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">

-把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
+把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。

 - 优点：节省空间；
- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况
+- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。

 <br>

@ -69,11 +69,11 @@

 ### 全选数据

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
+<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
+<img class="preview-img" align="right" alt="点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
+<img class="preview-img" align="right" alt="点击『选择全部』" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">

 当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。

@ -93,33 +93,33 @@

 ### 固定按钮组

-<img class="preview-img" align="right" alt="顶部固定按钮" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
+<img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">

-<img class="preview-img" align="right" alt="底部固定按钮" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
+<img class="preview-img" align="right" alt="底部固定示例" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">

-用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
+用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。

 ### 某一项内容过长

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
+<img class="preview-img" align="right" alt="气泡显示示例" description="当过长信息可以被隐藏时，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">

 某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。

 ### 模块编辑

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
+<img class="preview-img" align="right" alt="模块编辑示例" description="启动和禁用要尽可能相似（对称性交互）；保证启用和禁用切换时，页面不在水平方向不错位。" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">

 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。

 ### 直接编辑

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
+<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">

 适用在易编辑性高于易读性时。

 ### 悬浮层编辑

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
+<img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">

 悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。

@ -149,7 +149,7 @@

 ### 对齐方式

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">
+<img class="preview-img" align="right" alt="对齐示例" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">

 数值右对齐（带小数则按小数点对齐），其余左对齐。

--- a/docs/practice/cases.md
+++ b/docs/practice/cases.md
@ -7,7 +7,7 @@

 Ant Design 是面向中后台的 UI 设计语言。

-从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。

 ## 最佳实践

@ -19,7 +19,7 @@ Ant Design 是面向中后台的 UI 设计语言。
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">

-是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
+金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。

 <a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a>

@ -31,7 +31,9 @@ Ant Design 是面向中后台的 UI 设计语言。
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">

-OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
+OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
+
+<a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">立即访问</a>

 ---

@ -43,7 +45,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">

-体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。
+体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
+
+<a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">立即访问</a>

 ---

@ -53,7 +57,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
 <img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">

-AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。
+AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
+
+<a class="outside-link internal" href="http://antv.alipay.net/" target="_blank">立即访问</a>

 <style>
 .preview-image-boxes {
@ -66,4 +72,44 @@ AntV 是把这几年来数据图形组在探索数据可视化过程中有价值
 .toc {
  display: none;
 }
+.outside-link.internal {
+  display: none;
+}
 </style>
+
+<script>
+(function() {
+  var links = Array.apply(null, document.querySelectorAll('.outside-link.internal'));
+  var checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
+  ping(checkImgUrl, function(status) {
+    if (status === 'responded') {
+      links.forEach(function(link) {
+        link.style.display = 'block';
+      });
+    }
+  });
+
+  function ping(url, callback) {
+    var img = new Image();
+    var done;
+    var finish = function(status) {
+      if (!done) {
+        done = true;
+        img.src = '';
+        callback(status);
+      }
+    }
+    img.onload = function() {
+      finish('responded');
+    };
+    img.onerror = function(e) {
+      finish('error');
+    };
+    img.src = url;
+    setTimeout(function() {
+      console.log('timeout');
+      finish('timeout');
+    }, 1500);
+  }
+})();
+</script>
--- a/docs/react/getting-started.md
+++ b/docs/react/getting-started.md
@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。

 ## 第一个例子

-最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
+最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。

 - [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)

--- a/docs/react/introduce.md
+++ b/docs/react/introduce.md
@ -27,7 +27,7 @@

 ## 特性

- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
 - [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
 - 基于 npm + webpack + babel 的工作流，支持 ES2015。

--- a/docs/resource/download.md
+++ b/docs/resource/download.md
@ -8,7 +8,7 @@
 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。

 <a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/bAfRYPEppiuUQjR.png">
+  <img src="https://os.alipayobjects.com/rmsportal/cnmjGfbBWUZPFiO.png">
  <span class="resource-card-content">
    <span class="resource-card-title">Axure Components</span>
    <span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
@ -22,7 +22,7 @@
  </span>
 </a>
 <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/0.11.2/AntD_Box_v1.2.rp" class="resource-card">
-  <img src="https://os.alipayobjects.com/rmsportal/QCKTwaWQLEOXtgL.png">
+  <img src="https://os.alipayobjects.com/rmsportal/UuYRXxndGMKdaiE.png">
  <span class="resource-card-content">
    <span class="resource-card-title">Axure Box</span>
    <span class="resource-card-description">强大的 Ant Design 组件拼装方式</span>
@ -38,16 +38,19 @@

 <style>
 .resource-card {
-  width: 350px;
+  max-width: 350px;
+  width: 40%;
  height: 130px;
  border: 1px solid #e9e9e9;
-  border-radius: 12px;
+  border-radius: 6px;
  font-size: 12px;
  color: #777;
  display: inline-block;
  margin: 20px 40px 10px 0;
  vertical-align: middle;
  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }

 .resource-card:hover {
@ -68,19 +71,27 @@
  vertical-align: middle;
  width: 50px;
  margin: 0 20px 0 24px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }

 .resource-card-content {
  display: inline-block;
  vertical-align: middle;
-  height: 130px;
-  padding-top: 36px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 92px;
 }

 .resource-card-title {
  display: block;
  font-size: 16px;
  color: #666;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

 .resource-card-description {
--- a/docs/resource/reference.md
+++ b/docs/resource/reference.md
@ -5,7 +5,7 @@

 ---

-在进行模式、组件和语言的整理中，《交互设计精髓》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。

 <a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
@ -66,16 +66,19 @@

 <style>
 .resource-card {
-  width: 350px;
+  max-width: 350px;
+  width: 40%;
  height: 130px;
  border: 1px solid #e9e9e9;
-  border-radius: 12px;
+  border-radius: 6px;
  font-size: 12px;
  color: #777;
  display: inline-block;
  margin: 20px 40px 10px 0;
  vertical-align: middle;
  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }

 .resource-card:hover {
@ -96,13 +99,18 @@
  vertical-align: middle;
  width: 64px;
  margin: 0 20px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }

 .resource-card-content {
  display: inline-block;
  vertical-align: middle;
-  height: 130px;
-  padding-top: 24px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 106px;
 }

 .resource-card-title {
--- a/scripts/demo.js
+++ b/scripts/demo.js
@ -179,15 +179,17 @@ const PriviewImg = React.createClass({
      imgStyle.background = 'none';
    }
    const current = this.state.current;
+    const arrows = imgsPack.length > 1;
+    const createMarkup = () => { return { __html: this.props.description } };
    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>
        <div className="preview-image-title">{this.props.alt}</div>
-        <div className="preview-image-description">{this.props.description}</div>
+        <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()} />
        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
-          <Carousel afterChange={this.handleImgChange} adaptiveHeight arrows>
+          <Carousel afterChange={this.handleImgChange} adaptiveHeight arrows={arrows}>
            {
              imgsPack.map((img, i) =>
                <div key={i}>
--- a/scripts/home.js
+++ b/scripts/home.js
@ -2,7 +2,6 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 import { QueueAnim, Icon, Button } from '../index';
 import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher';
 import TweenOne from 'rc-tween-one';

 // 导航处理
@ -16,7 +15,8 @@ function scrollNavEvent() {
  }
 }

-EventDispatcher.addEventListener('scroll.scrollNavEvent', scrollNavEvent);
+$(window).off('scroll.scrollNavEvent');
+$(window).on('scroll.scrollNavEvent', scrollNavEvent);

 class Banner extends React.Component {
  constructor() {
--- a/site/static/style.css
+++ b/site/static/style.css
@ -551,8 +551,8 @@ footer ul li > a {
 .markdown > ul li,
 .markdown blockquote ul > li {
  list-style: circle;
-  margin-left: 1em;
-  padding-left: 0.4em;
+  margin-left: 20px;
+  padding-left: 4px;
 }

 .markdown > ul li p,
@ -563,8 +563,8 @@ footer ul li > a {
 .markdown > ol li,
 .markdown blockquote ol > li {
  list-style: decimal;
-  margin-left: 1em;
-  padding-left: 0.4em;
+  margin-left: 20px;
+  padding-left: 4px;
 }

 .markdown code {
@ -1248,6 +1248,11 @@ a.entry-link:hover .anticon-smile {

 .demos-anchor a {
  padding-left: 8px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 90px;
 }

 .demos-anchor.toc.sticky {
@ -1260,10 +1265,14 @@ a.entry-link:hover .anticon-smile {

 .preview-image-boxes {
  float: right;
-  margin: 0 0 30px 60px;
+  margin: 0 0 110px 60px;
  width: 616px;
 }

+.preview-image-boxes + .preview-image-boxes {
+  margin-top: -75px;
+}
+
 .preview-image-box {
  width: 100%;
  float: left;
@ -1314,6 +1323,12 @@ a.entry-link:hover .anticon-smile {
  line-height: 1.5;
 }

+.preview-image-description hr {
+  margin: 2px 0;
+  border: 0;
+  background: none;
+}
+
 .preview-image-box img {
  cursor: pointer;
  max-width: 100%;
@ -1389,7 +1404,9 @@ a.entry-link:hover .anticon-smile {
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
-  margin-left: 24px;
+  position: absolute;
+  top: 220px;
+  right: 24px;
 }

 .image-modal .slick-prev:hover:after {
@ -1412,7 +1429,9 @@ a.entry-link:hover .anticon-smile {
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
-  margin-right: 24px;
+  position: absolute;
+  top: 220px;
+  right: 24px;
 }

 .image-modal .slick-next:hover:after {
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@ -64,7 +64,7 @@
        <span class="bar"></span>
        <ul>
          <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-            <a href="{{static_url('../')}}" data-no-instant>首页</a>
+            <a href="{{static_url('../')}}">首页</a>
          </li>
          <li class="{%- if post.directory|rootDirectoryIn(['docs/practice']) %}current{%- endif %}">
            <a href="{{static_url('../docs/practice/cases')}}">实践</a>
@ -72,12 +72,12 @@
          <li class="{%- if post.directory|rootDirectoryIn(['docs/pattern']) %}current{%- endif %}">
            <a href="{{static_url('../docs/pattern/navigation')}}">模式</a>
          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/spec/introduce')}}">语言</a>
-          </li>
          <li class="{%- if post.directory|rootDirectoryIn(['docs/react','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
            <a href="{{static_url('../docs/react/introduce')}}">组件</a>
          </li>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}">
+            <a href="{{static_url('../docs/spec/introduce')}}">语言</a>
+          </li>
          <li class="{%- if post.directory|rootDirectoryIn(['docs/resource']) %}current{%- endif %}">
            <a href="{{static_url('../docs/resource/download')}}">资源</a>
          </li>