网页设计导航栏怎么做（完整的导航设计方案）,网盘赚钱

网页中顶部导航栏往往是用户进入网站后最先看到的地方，决议着用户对网页的第一印象，其主要性不言而喻。

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

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

顶部栏的内容

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

1. 品牌logo
2. 菜单
3. 搜索框
4. 提醒新闻
5. 登录／注册
6. 联系方式
7. 语言切换
8. 其他产物或者移动端app的下载链接
9. 行为召唤链接（我要投稿，我要发博）

以上这些都是顶部栏中常见的元素，在设计的时刻我们要凭据产物自身的实际情形举行取舍，究竟这些信息所有放上去也不太现实。信息过分加载会增添用户的使用肩负，注重力会被涣散。

汉堡包按钮

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

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

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

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

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

双层菜单

双层菜单的样式在最近的顶部栏设计中也愈发受到设计师的青睐。由于现在随着产物功效的不停增添与完善，逐渐泛起了一些单层菜单无法解决的情形，那就是顶部栏需要展示的内容过多，而且某些特定功效不属于统一层级。为了更好的应对这类情形，设计师们创造性的使用双层菜单这种样式。

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

商务网站设计与制作（10个电子商务设计技巧）

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

文字和配色

我们在确定顶部栏上内容和展示方式后要思量的是设计气概。产物的设计气概要立足于产物自身的定位，这个就意味着设计师的事情不应该仅限于视觉泛起还要懂产物。这里我就不睁开来说，由于我实在也不是太懂。

一样平常来说，顶部栏的设计气概由配色、文字和图标来组成。由于这是顶部栏栏上最主要的三个元素，图标的使用相对较少，最常见的是下拉箭头和放大镜图标。

首先来说配色，配色主要是指靠山色。通常来说，不要给顶部栏添加过重的靠山色，选择浅色或者直接白色。由于颜色过重会造成用户注重力的涣散。此外顶部栏下方是banner，我们在举行banner设计时刻会思量banner配色和页面整体气概是否搭配。若是顶部栏的颜色过重会制约banner的设计，若是是白色和浅色就没有这种挂念了。固然这也不是绝对的，有些网站顶部栏接纳深色同样很悦目，有些网站的顶部栏直接是透明，跟页面内容融为一体。

再说文字，大部分用户不会一个字一个字去读页面中的信息，他们是“扫描”式阅读。以是顶部栏上的文字设计主要思量的是可读性，要让用户在短时间内就可以获取这些信息。以是我们的文字要做到能够从靠山中凸显出来，需要的时刻可以加粗字体样式。

牢固型顶部栏

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

这种交互模式可以很好的提升顶部栏的易用性，然则这是建立在牺牲一部分页面空间的基础上换来的，以是我们在使用的时刻一定要郑重。

极简气概

在上面我一直强调顶部栏设计要简练明晰，要让用户一眼就能看明了。由于顶部栏属于导航系统的一部分，是为了制止用户迷路，辅助他们更好的使用产物。归根结底用户使用你的产物是为了你提供的内容或服务，而不是来看狂拽酷炫的顶部栏。以是我们不能舍本逐末，将顶部栏做的过于花哨，进而涣散用户的注重力。

此外极简气概很适合响应式设计，可以在多装备上追求一致的用户体验。

简约设计的另一大优点就是，设计师会经常遇到暂且的迭代需求，向导突然让你在这里加一个按钮那里加一个文字标签，简约设计为这种突然的迭代需求提供了操作空间。

总结

设计师的事情不应该仅限于视觉泛起，还应该思量交互原则，注重产物的用户体验。一款产物的功效性和雅观性是相辅相成的，光做视觉的设计师的作品也无法律用户的眼睛满足。希望这篇文章可以给你带来收获。

#专栏作家#

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