mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
docs: update spec/lightweight (#42952)
This commit is contained in:
Leon Lin
GitHub
parent
e119236b94
commit
0e520f730a
@ -14,8 +14,9 @@ Fitts's Law is an ergonomic principle that ties the size of a target and its con
|
||||
|
||||
## Always-Visible Tools
|
||||
|
||||
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
If an action is critical, expose it directly in the interface and keep it always visible.
|
||||
|
||||
<br>
|
||||
@ -24,7 +25,9 @@ If an action is critical, expose it directly in the interface and keep it always
|
||||
|
||||
## Hover-Reveal Tools
|
||||
|
||||
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
|
||||
Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.
|
||||
|
||||
@ -34,7 +37,9 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
|
||||
|
||||
## Toggle-Reveal Tools
|
||||
|
||||
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
|
||||
|
||||
@ -44,13 +49,17 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T
|
||||
|
||||
## Visible Area ≠ Clickable Area
|
||||
|
||||
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
|
||||
|
||||
|
||||
@ -13,8 +13,9 @@ title: 简化交互
|
||||
|
||||
## 实时可见工具
|
||||
|
||||
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
|
||||
|
||||
<br>
|
||||
@ -23,8 +24,9 @@ title: 简化交互
|
||||
|
||||
## 悬停即现工具
|
||||
|
||||
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
|
||||
|
||||
<br>
|
||||
@ -33,7 +35,9 @@ title: 简化交互
|
||||
|
||||
## 开关显示工具
|
||||
|
||||
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
|
||||
|
||||
@ -43,13 +47,17 @@ title: 简化交互
|
||||
|
||||
## 可视区域 ≠ 可点击区域
|
||||
|
||||
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user