web端常见导航设计

一、导航的定义
导航作为网站或者平台的骨架，是产品设计中不容忽视的一环导航是内容或者功能的定位、导向与通道。

二、导航分类
遵循导航层级结构，包括全局导航和局部导航
全局导航往往指页眉和页脚，存在于网站的大部分页面，便于用户随时跳转
局部导航是是更深层级的导航，不作用于全局，存在于特定的功能区，可分布在页面各部分

三、常见导航

1.顶部导航-标签式

说明：导航水平分布；导航区域固定；标签平铺展示，点击进入相应界面；

2、顶部导航-下拉式


说明：导航水平分布；鼠标悬浮下拉，可选择二级导航或三级导航，跳转相应的界面

3、顶部导航-瞄点定位式

说明：1、点击顶部导航菜单，页面快速滚动到对应的位置
2、回显效果：页面滚动到对应内容时，在顶部导航菜单中显示，可以清晰的知道阅读的位置。

4、左侧导航-抽屉式


说明：点击左上方折叠按钮，左侧划出导航栏

5、左侧导航-瞄点定位


说明：1、点击左侧导航菜单，页面快速滚动到对应的位置
2、回显效果：页面滚动到对应内容时，左侧导航菜单中显示，可以清晰的知道阅读的位置。

6、底部导航-标签式

说明：导航平铺于页面底部，适用于趣味性较强，用户操作性较强的网站

7、全屏导航-抽屉式

说明：点击上方折叠按钮，下拉展开导航（全屏显示）；

预览更多的导航模式