导航

可以说是整个后台的地图，它会告诉你在这个产品中，你在哪？可以去哪？所以导航设计的目的是为了让用户明确知道自己在当前产品中的哪个位置，同时能够快捷的去到用户想去的地方，找到想要用的功能。
在整个Web界面中存在多种导航类型，其中最常用的是
导航组件的样式分析，需要考虑的点和按钮的有所区别
1.Nav顶部导航；2.Sidebar侧边栏导航；3.Dropdown下拉菜单；4.Breadcrumb面包屑导航；5.Back返回按钮；6.Tab标签导航；7.Pagination分页导航；8.Step步骤条；
在应用场景中，Dropdown下拉菜单常常搭配其他导航组件使用，也可以单独使用。它既是其他导航的补充，也是可以被单独分为一类的导航组件。所以我在这里为它单独列出来。

1.Nav顶部导航

作为全局通用的顶部导航，用来明确告知用户当前所处产品中的位置。需要体现网站的核心组织结构。

• 各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次；
• 建议 2~7 项内容使用；
• 建议 1-2 个层级；

通常在网站的右上角会有一组工具，用户习惯在这个位置找到登录注册等内容。
可能还包括：

• 全局搜索
• 登录工具
• 通知中心、消息、收件箱
• 网站帮助、语言切换
• 收藏夹、购物车

所以在NAV顶部导航的主要结构设计为：LOGO(折叠侧边栏菜单按钮)+导航菜单+实用工具。在规划顶部导航时，建议每项菜单对应产品的每个业务场景。如果业务场景少的情况下可以将菜单项移到侧边栏导航中。

顶部导航的所有样式可拆解为：

2.Sidebar侧边栏导航

可以说是最常用的导航工具了，基本上将当前页面的全部功能罗列在侧边栏导航中。

侧边栏导航的所有样式可拆解为：

考虑到顶部菜单有折叠侧边栏菜单按钮的功能，
（折叠后的顶部导航）
那么侧边栏菜单就会有一个被折叠的样式。侧边栏被折叠后就不再适合显示菜单文字了，仅仅用图标表示菜单选项。作为后台操作用户是后台系统的最常使用者，能通过图标快速确定该菜单选项的含义。确定好每个菜单项的icon后尽量避免更换。

折叠后的侧边栏菜单仅显示Icon，那么原侧边栏导航的子菜单就不适合按原样式进行展示了。这时通过Dropdown下拉菜单来替代。
折叠后的子菜单样式只需要三种，如下：

3.Dropdown下拉菜单

Dropdown下拉菜单是一个既可以在表单中使用也可以作为补充Nav顶部导航和Sidebar侧边栏导航的辅助型导航工具。在辅助Nav顶部导航中，下拉菜单可以作为实用工具的菜单选项

4.Breadcrumb面包屑导航

面包屑导航用于反映当前页面在网站结构中的位置，此时用户可通过面包屑了解当前页面所在的网站位置，协助用户决策用哪种导航工具去到目的页面。一般情况下在少于三个层级可以无需展示。

5.Back返回按钮

一般返回按钮会在面包屑导航前面，用于返回上一层级页面。如果面包屑导航做了直接跳转链接，那么返回按钮就没有必要和面包屑一起出现了。在少于三个层级的结构中，不展示面包屑导航的情况下，可以使用返回按钮+页面标题的方式。这时返回按钮相当于一个短面包屑。

6.Tab标签导航

Tab标签使内容在一个较高的层级被组织起来。一般一个标签里需要展示与该标签相关的内容。标签的名字需要清楚地描述该标签里所包含的内容。

7.Pagination分页导航

分页导航用于将信息分页显示，这样可以减少页面大小，进而提高页面的加载速度。分页显示后，就需要通过分页导航来告诉用户要浏览的信息量，方便用户快速跳过一些不想看的信息，也便于定位和查找。

8.Step步骤条

步骤条的作用主要是导航，拆分某项流程的步骤，引导用户按照流程完成任务。在需要用户完成相对复杂的任务时，步骤条能清楚的告诉用户：这一步在完成什么内容，已经完成了什么内容和还需要完成多少内容。