mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-09 12:59:12 +08:00
71 lines
2.6 KiB
Markdown
71 lines
2.6 KiB
Markdown
# 导航
|
||
|
||
- category: 1
|
||
- order: 1
|
||
|
||
---
|
||
|
||
在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装,帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时,请注意:
|
||
|
||
1. 尽可能提供标示、上下文线索以及网站地图,避免用户迷路;
|
||
2. 保持导航样式和行为一致或者减少导航数量,降低用户学习成本;
|
||
3. 尽可能减少页面间的跳转(eg:一个常见任务需要多个页面跳转时,请减少至一至两次),让用户移动距离保持简短。
|
||
|
||
## 常见导航
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
我们将常见的导航模式分为:侧栏导航和顶部导航,两者各有优缺点,设计者可以根据各自的业务需求进行选择。
|
||
|
||
## 侧栏导航
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
导航的结构由以下几部分组成。
|
||
|
||
1. 产品 Logo 和名称。
|
||
2. 业务类目。
|
||
3. 登陆工具。
|
||
4. 面包屑(可选)。
|
||
|
||
> 注:
|
||
> 1. 尽可能不使用面包屑,尤其是当前页面的导航能清晰的告诉用户他在哪里时;
|
||
> 2. 面包屑可以分为这几类:
|
||
> - 路径型:是一个动态显示用户到达页面经过的途径。
|
||
> - 位置型:位置型是固定的,显示了页面在网站结构中的位置。
|
||
> - 属性型:属性型给出当前页面的分类信息。
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
我们定义了不同类目层级所对应的导航样式。
|
||
|
||
|
||
## 顶部导航
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
结构如右图所示:
|
||
|
||
1. 产品 Logo 和名称。
|
||
2. 业务类目。
|
||
3. 登陆工具。
|
||
4. 面包屑(可选)。
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||
|
||
不同类目层级。
|