网页顶部导航栏设计总结——ui设计公司|北京蓝蓝设计

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

网页中的header，一般我们称之为顶部导航栏，这里为了行文方便，以下都简称顶部栏。顶部栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯（从左到右，从上到下），当他们进入一个新的网站，顶部栏通常是他们最先看到的地方。我们都知道用户对于你产品的第一印象是很重要的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。

但是顶部栏却是我们设计的一个盲区，我们很少花心思的去研究它。因为我们觉得顶部栏无非是一个logo，几个文字链接堆砌起来作为菜单，着实没有什么需要注意的地方。但是事实上顶部栏设计的学问远不止这些。

顶部栏的内容

在进行顶部栏设计前，首先我们要确定的是应该要展示哪些内容。一般来说，顶部栏有以下一些内容：

1 品牌logo

2 菜单

3 搜索框

4 提示消息

5 登录／注册

6 联系方式

7 语言切换

8 其他产品或者移动端app的下载链接

9 行为召唤链接（我要投稿，我要发博）

以上这些都是顶部栏中常见的元素，在设计的时候我们要根据产品自身的实际情况进行取舍，毕竟这些信息全部放上去也不太现实。信息过度加载会增加用户的使用负担，注意力会被分散。

汉堡包按钮

取舍当然意味着既有“保留”也有“舍弃”，但是UI设计中的“舍弃”更多的是指“隐藏”——隐藏一些次要的功能。

在隐藏的同时，我们也希望当用户需要的时候，这些隐藏的功能可以随时随地的呈现出来。汉堡按钮可以帮助我们实现这一点。常见的汉堡按钮是由三条水平线条构成的，很像两层面包一层肉的汉堡包，所以我们形象的称之为汉堡按钮。

（ps:汉堡按钮最初是由国外设计师最先使用并命名，如果是中国设计师发明了它，没准就叫肉夹馍按钮了。）

汉堡按钮可以通过将一些次要的信息隐藏来释放页面的空间，这样使顶部栏更加的清爽简洁，用户的注意力可以更好的集中在那些重要的信息上。

汉堡按钮在页面导航设计中使用的很频繁，用户对此很熟悉，所以不会额外增加用户的学习成本。汉堡按钮设计最需要注意的地方就是它很容易被用户忽视，所以我们在设计的时候要通过配色，尺寸，留白的使用来将其适当的凸显出来。一句话来说，汉堡按钮既要做到清晰展示，又不能占据太大的空间。

双层菜单

双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为现在随着产品功能的不断增加与完善，渐渐出现了一些单层菜单无法解决的情况，那就是顶部栏需要展示的内容过多，而且某些特定功能不属于同一层级。为了更好的应对这类情况，设计师们创造性的使用双层菜单这种样式。

以上面的网站为例，上层的菜单有社交网络的链接（Facebook,Instagram和Twitter），企业logo，搜索框，购物车和汉堡按钮。下层的菜单有产品种类，营业网点地址，新闻，关于我们和联系我们。在这种情况下，如果将这些信息以传统的单行菜单展示，势必会放不下，造成顶部栏的过度拥挤。

此外双层菜单这种设计样式很新潮，可以给用户耳目一新的感觉。

阅读全文>>