一. 导航的作用

1. 导航存在的概念

①引导使用者查找信息，通过简单查看分类来选择自己所需要的内容

②清晰整个网站的目录结构和信息关系，层次分明，方便查看

③作为整个页面的向导，通过简单分类指引用户

2. 导航常见类型

2.1 横向导航（顶部水平栏导航）

内容查看相对直观，可镶嵌在banner中也可单独分开

2.2 纵向导航

承载信息多，设计感强，左右分隔布局，可镶嵌在banner中

2.3 混合导航

同一页面使用两种以上导航设计，通常用于电商页面

2.4 折叠导航

交互性增强，所占页面面积较小

需选择展开才能看到具体内容，是未来的设计趋势

2.5 面包屑导航

常用于页面层级分类指向

举例：腾讯首页>我的>历史记录

二. 导航设计规范

1.导航基础数值

①网页中最小字号为12px，导航文字一般为14——20px

②导航栏尺寸为80——100px

③导航有效区为1200px

④全屏页面类导航多为自适应网站，有效区可留可不留

所有数值保持偶数

三. 基础设计流程

1. 新建矩形来定界，用参考线来划分区域

举例：左右各留300px，即可用300px宽度的矩形块来定界

2.新建矩形框来确定顶部导航栏位置

举例：新建高度为80px的矩形，来确定顶部栏的具体位置

顶部字体这里选择的是18px

3. 通过甲方给的产品内容，来决定页面中元素的去留

反复参考相似内容

修改字体，排版，颜色

这就是最基础的页面，如何进阶，请看下期

如果觉得《【网页设计自习室#004】网页页面导航栏（header头部）的设计》对你有帮助，请点赞、收藏，并留下你的观点哦！