网页顶部导航栏设计总结

网页中的header，一样平常我们称之为顶部导航栏，这里为了行文方便，以下都简称顶部栏。

顶部栏对付一个网站的用户体验来说是至关主要的，由于根据用户的浏览习气（从左到右，从上到下），当他们进入一个新的网站，顶部栏常日是他们最先看到的地方。
我们都知道用户对付你产品的第一印象是很主要的，由于它会一贯伴随接下来的利用过程，而且第一印象无法变动。

但是顶部栏却是我们设计的一个盲区，我们很少花心思的去研究它。
由于我们以为顶部栏无非是一个logo，几个笔墨链接堆砌起来作为菜单，其实没有什么须要把稳的地方。
但是事实上顶部栏设计的学问远不止这些。

顶部栏的内容

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

品牌logo菜单搜索框提示登录／注册联系办法措辞切换其他产品或者移动端app的下载链接行为召唤链接（我要投稿，我要发博）

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

汉堡包按钮

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

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

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

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

汉堡按钮在页面导航设计中利用的很频繁，用户对此很熟习，以是不会额外增加用户的学习本钱。
汉堡按钮设计最须要把稳的地方便是它很随意马虎被用户忽略，以是我们在设计的时候要通过配色，尺寸，留白的利用来将其适当的凸显出来。
一句话来说，汉堡按钮既要做到清晰展示，又不能霸占太大的空间。

双层菜单

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

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

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

笔墨和配色

我们在确定顶部栏上内容和展示办法后要考虑的是设计风格。
产品的设计风格要立足于产品自身的定位，这个就意味着设计师的事情不应该仅限于视觉呈现还要懂产品。
这里我就不展开来说，由于我实在也不是太懂。

一样平常来说，顶部栏的设计风格由配色、笔墨和图标来构成。
由于这是顶部栏栏上最紧张的三个元素，图标的利用相对较少，最常见的是下拉箭头和放大镜图标。

首先来说配色，配色紧张是指背景色。
常日来说，不要给顶部栏添加过重的背景色，选择浅色或者直接白色。
由于颜色过重会造成用户把稳力的分散。
此外顶部栏下方是banner，我们在进行banner设计时候会考虑banner配色和页面整体风格是否搭配。
如果顶部栏的颜色过重会制约banner的设计，如果是白色和浅色就没有这种顾虑了。
当然这也不是绝对的，有些网站顶部栏采取深色同样很好看，有些网站的顶部栏直接是透明，跟页面内容融为一体。

再说笔墨，大部分用户不会一个字一个字去读页面中的信息，他们是“扫描”式阅读。
以是顶部栏上的笔墨设计紧张考虑的是可读性，要让用户在短韶光内就可以获取这些信息。
以是我们的笔墨要做到能够从背景中凸显出来，必要的时候可以加粗字体样式。

固定型顶部栏

固定顶部栏代表着另一种设计思路：无论用户进行何种操作，顶部栏对用户来说都是可见的。
这类的顶部栏适用于页面内容比较多须要用户不断下拉滑动的网站。

这种交互模式可以很好的提升顶部栏的易用性，但是这是建立在捐躯一部分页面空间的根本上换来的，以是我们在利用的时候一定要谨慎。

极简风格

在上面我一贯强调顶部栏设计要简洁明了，要让用户一眼就能看明白。
由于顶部栏属于导航体系的一部分，是为了避免用户迷路，帮助他们更好的利用产品。
归根结底用户利用你的产品是为了你供应的内容或做事，而不是来看狂拽酷炫的顶部栏。
以是我们不能本末倒置，将顶部栏做的过于花哨，进而分散用户的把稳力。

此外极简风格很适宜相应式设计，可以在多设备上追求同等的用户体验。

简约设计的另一大优点便是，设计师会常常碰着临时的迭代需求，领导溘然让你在这里加一个按钮那里加一个笔墨标签，简约设计为这种溘然的迭代需求供应了操作空间。

总结

设计师的事情不应该仅限于视觉呈现，还该当考虑交互原则，看重产品的用户体验。
一款产品的功能性和都雅性是相辅相成的，光做视觉的设计师的作品也无法令用户的眼睛满意。
希望这篇文章可以给你带来收成。

#专栏作家#

王M争，大家都是经理专栏作家，资深互联网人。

本文由 @王M争 翻译发布于大家都是产品经理。
未经容许，禁止转载。