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

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

三、常见导航

1.顶部导航-标签式

swift 导航栏高度适配 web端导航栏尺寸_导航设计

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

2、顶部导航-下拉式

swift 导航栏高度适配 web端导航栏尺寸_导航设计_02


swift 导航栏高度适配 web端导航栏尺寸_常见导航_03


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

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

swift 导航栏高度适配 web端导航栏尺寸_web端导航_04


swift 导航栏高度适配 web端导航栏尺寸_导航设计_05

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

4、左侧导航-抽屉式

swift 导航栏高度适配 web端导航栏尺寸_导航设计_06


swift 导航栏高度适配 web端导航栏尺寸_常见导航设计_07


说明:点击左上方折叠按钮,左侧划出导航栏5、左侧导航-瞄点定位

swift 导航栏高度适配 web端导航栏尺寸_常见导航_08


swift 导航栏高度适配 web端导航栏尺寸_web端导航_09


说明:1、点击左侧导航菜单,页面快速滚动到对应的位置

2、回显效果:页面滚动到对应内容时,左侧导航菜单中显示,可以清晰的知道阅读的位置。

6、底部导航-标签式

swift 导航栏高度适配 web端导航栏尺寸_常见导航_10


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

7、全屏导航-抽屉式

swift 导航栏高度适配 web端导航栏尺寸_swift 导航栏高度适配_11


swift 导航栏高度适配 web端导航栏尺寸_常见导航_12

说明:点击上方折叠按钮,下拉展开导航(全屏显示);