update docs

docs/spec/direct.md

@@ -8,6 +8,10 @@
 
 正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
 
+<br>
+
+---
+
 ## 页内编辑
 
 <img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>
@@ -37,6 +41,10 @@
 
 更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。
 
+<br>
+
+---
+
 ## 利用拖放
 
 <img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>
@@ -59,6 +67,9 @@
  
 拖放多个对象（敬请期待）
 
+<br>
+
+---
 
 ## 直接选择（敬请期待）
 

docs/spec/invitation.md

@@ -16,6 +16,10 @@
 
 >可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
 
+<br>
+
+---
+
 ## 静态邀请
 
 指通过可视化技术在页面上提供引导交互的邀请。
@@ -42,6 +46,10 @@
 >注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
 
 
+<br>
+
+---
+
 ## 动态邀请
 
 指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。

docs/spec/lightweight.md

@@ -10,27 +10,46 @@
 
 > 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
 
+<br>
+
+---
+
 ## 实时可见工具
 
+
 <img class="preview-img" align="right" alt="实时可见工具示例--摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>
 状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。<br>
 状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/LjiLNKRAYqrsfLa.png">
 
 如果某个操作非常重要，就应该把它放在界面中，并实时可见。
 
+<br>
+
+---
+
 ## 悬停即现工具
 
+
 <img class="preview-img" align="right" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://os.alipayobjects.com/rmsportal/lmwWqVvUBsaOsyY.png">
 
 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
 
+<br>
+
+---
+
 ## 开关显示工具
 
+
 <img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击『修改』后，Table 中『文本』变成『输入框』，开启编辑功能。" src="https://os.alipayobjects.com/rmsportal/bgTbVqVWJVeIere.png">
 
 如果某些操作只需要在特定模式时显示，可以通过开关来实现。
 
 
+<br>
+
+---
+
 ## 交互中的工具
 
 <img class="preview-img" align="right" alt="推荐示例" description="鼠标悬停时，出现 Tooltips 进行提示，用户点击内容直接复制。" src="https://os.alipayobjects.com/rmsportal/OyrIdrsFqBUiZGv.png" good>
@@ -44,6 +63,10 @@
 
 此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。
 
+<br>
+
+---
+
 ## 可视区域 ≠ 可点击区域
 
 <img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标『指针』随即变为『手型』，单击即可跳转。" src="https://os.alipayobjects.com/rmsportal/AOioZkUAdyFamcR.png">

docs/spec/reaction.md

@@ -14,11 +14,15 @@
 
 > 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
 
+<br>
+
+---
+
 ## 查询模式
 
 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。
 
-<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『问题广场』、『报告广场』、『用户声音』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/aqLuHYzLAXiMVbo.png">
+<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/aqLuHYzLAXiMVbo.png">
 
 <img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://os.alipayobjects.com/rmsportal/XFfjaNslhLTKPBF.png">
 
@@ -35,7 +39,9 @@
 
 微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。
 
+<br>
 
+---
 ## 反馈模式
 
 <img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。

docs/spec/stay.md

@@ -12,6 +12,10 @@
 
 >心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
 
+<br>
+
+---
+
 ## 覆盖层
 
 <img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；并出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/kOTEwKQBwgjkWEt.png" good>
@@ -36,6 +40,10 @@
 
 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
 
+<br>
+
+---
+
 ## 嵌入层
 
 <img class="preview-img" align="right" alt="列表嵌入层示例" src="https://os.alipayobjects.com/rmsportal/gfxhzaJdPuNoClu.png">
@@ -53,6 +61,10 @@
 
 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
 
+<br>
+
+---
+
 ## 虚拟页面
 
 在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
@@ -65,6 +77,9 @@
 
 伸缩式用户界面（敬请期待）
 
+<br>
+
+---
 
 ##  流程处理
 

docs/spec/transition.md

@@ -8,6 +8,9 @@
 
 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
 
+<br>
+
+---
 
 ## 在视图变化时保持上下文
 
@@ -34,6 +37,10 @@
 
 视图定位：在视图切换时，保持定位。
 
+<br>
+
+---
+
 ## 解释刚刚发生了什么
 
 <img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/RMKPlMuRPGIXJEv.png">
@@ -53,6 +60,9 @@
 
 对象更改：在列表/表格中，更改了一个对象。
 
+<br>
+
+---
 
 ## 改善感知性能