说米网

网页中顶部导航栏往往是用户进入网站后最早看到的当地，决议着用户对网页的第一印象，其重要性显而易见。

网页中的header，一般咱们称之为顶部导航栏，这儿为了行文方便，以下都简称顶部栏。顶部栏关于一个网站的用户体会来说是至关重要的，由于根据用户的阅读习气（从左到右，从上到下），当他们进入一个新的空间登陆首页网站，顶部栏一般是他们最早看到的当地。咱们都知道用户关于你产品的第一印象是很重要的，由于它会一向随同接下来的运用过程，并且第一印象无法更改。

可是顶部栏却是咱们规划的一个盲区，咱们很少花心思的去研讨它。由于咱们觉得顶部栏无非是一个logo，几个文字链接堆砌起来作为菜单，着实没有什么需求留意的当地。可是事实上顶部栏规划的学识远不止这些。

顶部栏的内容

在进行顶部栏规划前，首要咱们要确定的是应该要展现哪些内容。一般来说，顶部栏有以下一些内容：

品牌logo

菜单

查找框

提示消息

登录／注册

联络方式

言语切换

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

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

以上这些都是顶部栏中常见的元素，在规划的时分咱们要根据产品自身的实际状况进行取舍，毕竟这些信息悉数放上去也不太现实。信息过度加载会增加用户的运用负担，留意力会被涣散。

汉堡包按钮

取舍当然意味着既有“保留”也有“舍弃”，可是UI规划中的“舍弃”更多的是指“躲藏”——躲藏一些非必须的功用。

在躲藏的一起，咱们也期望当用户需求的时分，这些躲藏的功用能够随时随地的出现出来。汉堡按钮能够协助咱们完成这一点。常见的汉堡按钮是由三条水平线条构成的，很像两层面包一层肉的汉堡包，所以咱们形象的称之为汉堡按钮。

（ps：汉堡按钮开始是由国外规划师最早运用并命名，假如是我国规划师发明晰它，没准就叫肉夹馍按钮了。）

汉堡按钮能够通过将一些非必须的信息躲藏来释放页面的空间，这样使顶部栏更加的清爽简练，用户的留意力能够更好的会集在那些重要的信息上。

汉堡按钮在页面导航规划中运用的很频频，用户对此很熟悉，所以不会额定增加用户的学习成本。汉堡按钮规划最需求留意的当地便是它很容易被用户忽视，所以咱们在规划的时分要通过配色，尺寸，留白的运用来将其恰当的凸显出来。一句话来说，汉堡按钮既要做到清晰展现，又不能占据太大的空间。

双层菜单

双层菜单的款式在近来的顶部栏规划中也愈发遭到规划师的青睐。由于现在随着产品功用的不断增加与完善，逐渐出现了一些单层菜单无法处理的状况，那便是顶部栏需求展现的内容过多，并且某些特定功用不属于同一层级。为了更好的应对这类状况，规划师们创造性的运用双层菜单这种款式。

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

此外双层菜单这种规划款式很新潮，能够给用户耳目一新的感觉。

文字和配色

咱们在确定顶部栏上内容和展现方式后要考虑的是规划风格。产品的规划风格要立足于产品自身的定位，这个就意味着规划师的作业不应该仅限于视觉出现还要懂产品。这儿我就不打开来说，由于我其实也不是太懂。

一般来说，顶部栏的规划风格由配色、文字和图标来构成。由于这是顶部栏栏上最主要的三个元素，图标的运用相对较少，最常见的是下拉箭头和放大镜图标。

首要来说配色，配色主要是指布景色。一般来说，不要给顶部栏增加过重的布景色，挑选浅色或者直接白色。由于色彩过重会造成用户留意力的涣散。此外顶部栏下方是banner，咱们在进行banner规划时分会考虑banner配色和页面整体风格是否调配。假如顶部栏的色彩过重会制约banner的规划，假如是白色和浅色就没有这种顾虑了。当然这也不是肯定的，有些网站顶部栏采用深色相同很美观，有些网站的顶部栏直接是透明，跟页面内容融为一体。

再说文字，大部分用户不会一个字一个字去读页面中的信息，他们是“扫描”式阅读。所以顶部栏上的文字规划首要考虑的是可读性，要让用户在短时间内就能够获取这些信息。所以咱们的文字要做到能够从布景中凸显出来，必要的时分能够加粗字体款式。

固定型顶部栏

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

这种交互形式能够很好的提升顶部栏的易用性，可是这是建立在献身一部分页面空间的基础上换来的，所以咱们在运用的时分一定要慎重。

极简风格

在上面我一向强调顶部栏规划要简练明晰，要让用户一眼就能看明白。由于顶部栏属于导航系统的一部分，是为了防止用户走失，协助他们更好的运用产品。归根结底用户运用你的产品是为了你供给的内容或服务，而不是来看狂拽酷炫的顶部栏。所以咱们不能本末倒置，将顶部栏做的过于花哨，进而涣散用户的留意力。

此外极简风格很合适响应式规划，能够在多设备上追求共同的用户体会。

精约规划的另一大优点便是，规划师会经常遇到临时的迭代需求，领导忽然让你在这儿加一个按钮那里加一个文字标签，精约规划为这种忽然的迭代需求供给了操作空间。

总结

规划师的作业不应该仅限于视觉出现，还应该考虑交互原则，注重产品的用户体会。一款产品的功用性和美观性是相辅相成的，光做视觉的规划师的著作也无法令用户的眼睛满足。期望这篇文章能够给你带来收成。