Merge branch 'new-design-language' of github.com:ant-design/ant-design into new-design-language

docs/spec/direct.md

@@ -8,17 +8,68 @@
 
 正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
 
+<br>
+
+---
+
 ## 页内编辑
 
+<img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>
+状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>
+状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/yjUGgnILhqtdOrS.png">
+
 单字段行内编辑
 
 当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
 
+<br>
+
+<img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>
+状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/eMdHYiRLAgwaoEk.png">
+
 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
 
+<br>
+
+<img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://os.alipayobjects.com/rmsportal/LLlsPevGNQpPLdm.png">
 
 多字段行内编辑
 
-注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
+>注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../spec/transition#解释刚刚发生了什么)来消除这种视觉影响。
+
+<br>
+
+更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。
+
+<br>
+
+---
+
+## 利用拖放
+
+<img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>
+状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>
+状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/wmfXPNgumDMfTaG.png">
+
+拖放列表
+
+只能限制在一个维度（上/下或者左/右）进行拖放。
+
+<br>
+
+<img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://os.alipayobjects.com/rmsportal/uhdJSImmOLaIsLw.png">
+
+拖放图片/文件
+
+<br>
+
+拖放对象（敬请期待）
+ 
+拖放多个对象（敬请期待）
+
+<br>
+
+---
+
+## 直接选择（敬请期待）
 
-更多有关『页内编辑』的模式，可查看『模式』-『表格』-『交互』中的内容。

docs/spec/invitation.md

@@ -5,3 +5,83 @@
 - subtitle: Provide Invitation
 
 ---
+
+
+很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
+
+邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
+ 
+
+> 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
+
+>可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
+
+<br>
+
+---
+
+## 静态邀请
+
+指通过可视化技术在页面上提供引导交互的邀请。
+
+<br>
+
+<img class="preview-img" align="right" alt="文本邀请示例" src="https://os.alipayobjects.com/rmsportal/qKxYgYcEootkefa.png">
+
+<img class="preview-img" align="right" alt="白板式邀请示例" src="https://os.alipayobjects.com/rmsportal/ricqInwKsckNQlZ.png">
+
+<img class="preview-img" align="right" alt="未完成邀请示例" src="https://os.alipayobjects.com/rmsportal/aSrLKqNCgSlCgTH.png">
+
+引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。
+常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
+
+<br>
+
+<img class="preview-img" align="right" alt="漫游探索邀请示例 1" description="在用户首次登陆时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://os.alipayobjects.com/rmsportal/eHiStEMmfIOteKX.png">
+
+<img class="preview-img" align="right" alt="漫游探索邀请示例 2" src="https://os.alipayobjects.com/rmsportal/zGYzpHLGSqZfGxK.png">
+
+漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
+
+>注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
+
+
+<br>
+
+---
+
+## 动态邀请
+
+指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
+
+<br>
+
+<img class="preview-img" align="right" alt="悬停邀请示例 1" description="鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。" src="https://os.alipayobjects.com/rmsportal/YZSAitPpAiXOIfS.png">
+
+<img class="preview-img" align="right" alt="悬停邀请示例 2" description="鼠标『悬停』时，出现『选择此模板』的按钮。" src="https://os.alipayobjects.com/rmsportal/pAHyGAVbIbzImhX.png">
+
+悬停邀请：在鼠标悬停期间提供邀请。
+
+
+<br>
+
+<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://os.alipayobjects.com/rmsportal/iuRXFUXiuNNHwhL.png">
+
+推论邀请：用于交互期间，合理推断用户可能产生的需求。
+
+<br>
+
+<img class="preview-img" align="right" alt="更多内容邀请示例" description="在 Modal 中会出现前后切换的箭头。
+" src="https://os.alipayobjects.com/rmsportal/GLRxgXllHaetpFB.png">
+
+更多内容邀请：用于邀请用户查看更多内容。
+
+
+<br>
+
+预期功能邀请 (敬请期待)
+
+<br>
+
+拖放邀请 (敬请期待)
+

docs/spec/lightweight.md

@@ -10,25 +10,73 @@
 
 > 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：<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>
+
+<img class="preview-img" align="right" alt="推荐示例" description="鼠标滑选/双击时，系统自动复制该部分内容。通过大胆猜测用户的行为，并帮助完成，给用户小惊喜。" src="https://os.alipayobjects.com/rmsportal/QpjnfgpVthGjItr.png" good>
+
+<img class="preview-img" align="right" alt="不推荐示例" description="在可复制内容的附近出现『图标』，点击后复制。" src="https://os.alipayobjects.com/rmsportal/lbViPktgdiGXOCN.png" bad>
+
+
 如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
 
-此处也可以运用『提供邀请』相关的知识点。
+此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。
+
+<br>
+
+---
 
 ## 可视区域 ≠ 可点击区域
 
-注：在移动端尤其适用。
+<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标『指针』随即变为『手型』，单击即可跳转。" src="https://os.alipayobjects.com/rmsportal/AOioZkUAdyFamcR.png">
+
+在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
+
+<br>
+
+<img class="preview-img" align="right" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://os.alipayobjects.com/rmsportal/RZxaqzuzmQxAjBw.png">
+
+当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
+
+>注：在移动端尤其适用。

docs/spec/reaction.md

@@ -2,6 +2,81 @@
 
 - category: 十大原则
 - order: 10
-- subtitle: Stay in the Page
+- subtitle: React Immediately
 
 ---
+
+『提供邀请』的强大体现在**交互之前**给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。
+
+就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
+
+虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
+
+> 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
+
+<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="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://os.alipayobjects.com/rmsportal/XFfjaNslhLTKPBF.png">
+
+根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
+
+<br>
+
+<img class="preview-img" align="right" alt="实时搜索示例" description="用户输入一个搜索值，系统随即显示查询结果。
+" src="https://os.alipayobjects.com/rmsportal/wzManNXzJlVjjYf.png">
+
+实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
+
+<br>
+
+微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。
+
+<br>
+
+---
+## 反馈模式
+
+<img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。
+" src="https://os.alipayobjects.com/rmsportal/GSJwgYCffMHXZBp.png">
+
+实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
+
+>注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。
+
+<br>
+
+渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户』-『渐进式展现』](../spec/stay#流程处理)。
+
+<br>
+
+<img class="preview-img" align="right" alt="按钮加载示例" src="https://os.alipayobjects.com/rmsportal/pGiCbTHbwjqiWkp.png">
+
+<img class="preview-img" align="right" alt="表格加载示例" src="https://os.alipayobjects.com/rmsportal/WRCeBEZQqWLmjKw.png">
+
+<img class="preview-img" align="right" alt="富列表加载示例" src="https://os.alipayobjects.com/rmsportal/ixEHkTtfczFFLYy.png">
+
+<img class="preview-img" align="right" alt="页面加载示例" src="https://os.alipayobjects.com/rmsportal/OuEHxrkmIrYNKhN.png">
+
+
+进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。
+常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
+
+<br>
+
+<img class="preview-img" align="right" alt="点击刷新示例" src="https://os.alipayobjects.com/rmsportal/MGFgiXdiJQLzNrm.png">
+
+点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
+
+<br>
+
+<img class="preview-img" align="right" alt="定时示例"  description="新增的列表项『高亮』，持续几秒后恢复正常。" src="https://os.alipayobjects.com/rmsportal/XcdyTEKIdjCjaQs.png">
+
+定时刷新：无需用户介入，定时展示新内容。

docs/spec/stay.md

@@ -5,3 +5,100 @@
 - subtitle: Stay in the Page
 
 ---
+
+能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
+
+> 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
+
+>心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
+
+<br>
+
+---
+
+## 覆盖层
+
+<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；并出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/kOTEwKQBwgjkWEt.png" good>
+
+<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤消』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://os.alipayobjects.com/rmsportal/fAEspQchavUXloc.png" good>
+
+<img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像『狼来了』一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://os.alipayobjects.com/rmsportal/QhELLxUUzJmCqUn.png" bad>
+
+二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
+
+<br>
+
+<img class="preview-img" align="right" alt="详情覆盖层示例" description="通过『点击』图标查看更多详情信息。" src="https://os.alipayobjects.com/rmsportal/DUMDUBYhrBLaGsP.png">
+
+详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
+
+> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
+
+<br>
+
+<img class="preview-img" align="right" alt="输入覆盖层示例" description="鼠标『点击』图标触发；鼠标『点击』悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://os.alipayobjects.com/rmsportal/FgHAOGpdVABhMJJ.png">
+
+输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
+
+<br>
+
+---
+
+## 嵌入层
+
+<img class="preview-img" align="right" alt="列表嵌入层示例" src="https://os.alipayobjects.com/rmsportal/gfxhzaJdPuNoClu.png">
+
+列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
+
+<br>
+
+
+详情嵌入层(敬请期待)
+
+<br>
+
+<img class="preview-img" align="right" alt="标签页示例" src="https://os.alipayobjects.com/rmsportal/LLfIvbRqkSUtXYB.png">
+
+标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
+
+<br>
+
+---
+
+## 虚拟页面
+
+在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
+
+无限加载和分页器，详见[『模式』-『列表』-『显示长列表』](../pattern/list#显示长列表)
+
+走马灯，详见[『模式』-『列表』-『显示图片』](../pattern/list#显示图片)
+
+<br>
+
+伸缩式用户界面（敬请期待）
+
+<br>
+
+---
+
+##  流程处理
+
+长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
+
+<br>
+
+<img class="preview-img" align="right" alt="渐进式展现示例" src="https://os.alipayobjects.com/rmsportal/seKtkrMxlksTxuP.png">
+
+渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
+
+<br>
+
+<img class="preview-img" align="right" alt="配置程序示例" src="https://os.alipayobjects.com/rmsportal/jreIHRyLRrkaBWn.png">
+
+配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
+
+<br>
+
+<img class="preview-img" align="right" alt="弹出框覆盖层示例" src="https://os.alipayobjects.com/rmsportal/NOuwKozvRTSevUP.png">
+
+弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
\ No newline at end of file

docs/spec/transition.md

@@ -5,3 +5,75 @@
 - subtitle: Use Transition
 
 ---
+
+人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
+
+<br>
+
+---
+
+## 在视图变化时保持上下文
+
+<img class="preview-img" align="right" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+滑入与滑出：可以有效构建虚拟空间。
+
+<br>
+
+<img class="preview-img" align="right" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+传送带：可极大地扩展虚拟空间。
+
+<br>
+
+<img class="preview-img" align="right" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
+
+<br>
+
+<img class="preview-img" align="right" alt="视图定位示例" description="点击评论 A 的『查看对话』时，系统随即跳转至新界面，置顶并高亮评论 A ，以便用户快速识别评论 A 在该对话中的位置。" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+
+视图定位：在视图切换时，保持定位。
+
+<br>
+
+---
+
+## 解释刚刚发生了什么
+
+<img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/RMKPlMuRPGIXJEv.png">
+
+对象增加：在列表/表格中，新增了一个对象。
+
+<br>
+
+<img class="preview-img" align="right" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/hgCtbpIeZIATKYo.png">
+
+对象删除：在列表/表格中，删除了一个对象。
+
+<br>
+
+<img class="preview-img" align="right" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>
+状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。" src="https://os.alipayobjects.com/rmsportal/OjFXjyZTyiOTlMh.png">
+
+对象更改：在列表/表格中，更改了一个对象。
+
+<br>
+
+---
+
+## 改善感知性能
+
+当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
+
+<br>
+
+<img class="preview-img" align="right" alt="按钮过渡示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+<img class="preview-img" align="right" alt="页面过渡示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
+
+
+常见过渡效果：『按钮过渡』、『页面过渡』。
+