网页中的header ， 一般我们称之为顶部导航栏 ， 这里为了行文方便 ， 以下都简称顶部栏 。顶部栏对于一个网站的用户体验来说是至关重要的 ， 因为根据用户的浏览习惯（从左到右 ， 从上到下） ， 当他们进入一个新的网站 ， 顶部栏通常是他们最先看到的地方 。我们都知道用户对于你产品的第一印象是很重要的 ， 因为它会一直伴随接下来的使用过程 ， 而且第一印象无法更改 。
但是顶部栏却是我们设计的一个盲区 ， 我们很少花心思的去研究它 。因为我们觉得顶部栏无非是一个logo ， 几个文字链接堆砌起来作为菜单 ， 着实没有什么需要注意的地方 。但是事实上顶部栏设计的学问远不止这些 。
顶部栏的内容
在进行顶部栏设计前 ， 首先我们要确定的是应该要展示哪些内容 。一般来说 ， 顶部栏有以下一些内容：
1.品牌logo
2.菜单
3.搜索框
4.提示消息
5.登录／注册
6.联系方式
7.语言切换
8.其他产品或者移动端app的下载链接
9.行为召唤链接（我要投稿 ， 我要发博）
以上这些都是顶部栏中常见的元素 ， 在设计的时候我们要根据产品自身的实际情况进行取舍 ， 毕竟这些信息全部放上去也不太现实 。信息过度加载会增加用户的使用负担 ， 注意力会被分散 。
汉堡包按钮
取舍当然意味着既有“保留”也有“舍弃” ， 但是UI设计中的“舍弃”更多的是指“隐藏”——隐藏一些次要的功能 。
在隐藏的同时 ， 我们也希望当用户需要的时候 ， 这些隐藏的功能可以随时随地的呈现出来 。汉堡按钮可以帮助我们实现这一点 。常见的汉堡按钮是由三条水平线条构成的 ， 很像两层面包一层肉的汉堡包 ， 所以我们形象的称之为汉堡按钮 。
汉堡按钮可以通过将一些次要的信息隐藏来释放页面的空间 ， 这样使顶部栏更加的清爽简洁 ， 用户的注意力可以更好的集中在那些重要的信息上 。
双层菜单
双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐 。因为随着产品功能的不断增加与完善 ， 渐渐出现了一些单层菜单无法解决的情况 ， 那就是顶部栏需要展示的内容过多 ， 而且某些特定功能不属于同一层级 。为了更好的应对这类情况 ， 设计师们创造性的使用双层菜单这种样式 。
文字和配色
我们在确定顶部栏上内容和展示方式后要考虑的是设计风格 。产品的设计风格要立足于产品自身的定位 ， 这个就意味着设计师的工作不应该仅限于视觉呈现还要懂产品 。
一般来说 ， 顶部栏的设计风格由配色、文字和图标来构成 。因为这是顶部栏上最主要的三个元素 ， 图标的使用相对较少 ， 最常见的是下拉箭头和放大镜图标 。
再说文字 ， 大部分用户不会一个字一个字去读页面中的信息 ， 他们是“扫描”式阅读 。所以顶部栏上的文字设计首要考虑的是可读性 ， 要让用户在短时间内就可以获取这些信息 。所以我们的文字要做到能够从背景中凸显出来 ， 必要的时候可以加粗字体样式 。
固定型顶部栏
固定顶部栏代表着另一种设计思路：无论用户进行何种操作 ， 顶部栏对用户来说都是可见的 。这类的顶部栏适用于页面内容比较多 ， 需要用户不断下拉滑动的网站 。
推荐阅读
- 网站设计中网页色彩搭配原则
- 网页设计中交互设计的流行趋势
- 网页设计中最常见的几款英文字体
- 网页设计制作的创意与实施
- 高能预警！这5种网页设计趋势已经彻底过时了！
- 6个小技巧让你的网页设计活力十足！
- 从这些基本的字体排版规则入手，搞定网页排版这件事！
- 网页设计过程中需要注意的12个常见问题!
- 网页设计中图片有哪些常见的使用技巧？
- 10个网页设计中字体的应用技巧！