mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
update docs
This commit is contained in:
hi-caicai
parent
ff1d507d77
commit
7b13bf5f6e
@ -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>
|
||||
|
||||
---
|
||||
|
||||
## 直接选择（敬请期待）
|
||||
|
||||
|
||||
@ -16,6 +16,10 @@
|
||||
|
||||
>可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 静态邀请
|
||||
|
||||
指通过可视化技术在页面上提供引导交互的邀请。
|
||||
@ -42,6 +46,10 @@
|
||||
>注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 动态邀请
|
||||
|
||||
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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="根据用户的输入，提供关于密码强度和有效性的实时反馈。
|
||||
|
||||
@ -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>
|
||||
|
||||
---
|
||||
|
||||
## 流程处理
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
---
|
||||
|
||||
## 改善感知性能
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user