导航栏设计：教你如何构建出色的用户体验

众所周知，用户的第一印象非常之重要的，而导航栏设计就相当于用户的一个指引牌，用户进入你的网站最先看到的便是导航栏。如果一个网站想要成功吸引住用户并且在同行中脱颖而出，那么设计出一款优秀的网页导航栏就显得尤为重要。

这篇文章中，小编将介绍一些导航栏设计技巧，教大家如何更好的去提升用户体验。下面直接进入正题。

导航栏设计的基本规则：

• 网页导航栏应该简单易懂
• 导航栏结构布局应该清晰完整
• 导航栏设计应保持一致性与连贯性
• 导航栏应该保持链接的有效性

六点导航栏设计技巧

1.良好的布局

导航栏设计的目的是帮助用户找到他们所寻找的东西，所以网页导航栏必须保持逻辑清晰且结构合理。网站顶部导航常见的内容有：品牌logo、菜单、搜索框、提示消息、登录/注册、联系方式等。另外，导航内元素的排列顺序和标签内容同样重要。导航栏两头的标签条目是最引人注意的，并且用户点击的次数也是最多的，所以作为设计师，你需要特别注意这些条目的设计。

2. 使用高对比度

导航栏设计应在视觉上与页面其余部分进行区分。不仅应该在页面之间保持一致，而且还应该具有高对比度，使其一目了然。从可访问性的角度来看，这是一个特别重要的细节。无论是通过颜色，形状还是尺寸方面考虑，都应该使网页导航栏有一个高对比度，因为视力低下或视力受损的人很大程度上会依赖于你的导航栏。

3.在导航栏中提供视觉提示（图标，标签和颜色）与反馈

随时向用户反馈他所处位置是导航栏设计的一个重要环节。设计师可以通过更改链接的背景，页面名称的颜色或在导航菜单中将文本变为粗体来提供视觉提示和反馈。这样做的目的是避免用户产生迷茫感。有些设计师在导航栏设计时，忽略了这一点。如果没有突出选中选项，用户可能不知道他们当前是位于哪个页面。所以当我们在设计的时候，需要使用形状和颜色对比突出选定的页面。比如：

• 突出显示所选按钮（在导航栏中更改当前页面的背景颜色）

• 更改页面名称的颜色

• 将页面名称加粗

• 添加下划线

仅仅是颜色的突出可能让色盲患者难以辨别，因此最好的方式是在导航栏标签下添加下划线或者添加一个轮廓。

• 使用缩进选项卡

• 添加图标

可在网页导航栏中放置与你链接内容相关的小图标或简短描述，这样在你的导航栏设计中用户可快速识别他们点击的内容。

4.设置悬停效果

在导航栏设计中创建悬停效果，能让用户更好的理解其功能，并很容易吸引用户去触发它。常见的悬停效果是当光标悬停在焦点上时，通过颜色或者背景的改变告知用户，这个按钮是可以点击的。

5.将Logo链接到主页

Logo一般会直接链到首页，但是没有设置此功能的网站也不少。导航栏设计中将Logo链接主页的目的是方便用户操作，从而增加网页导航栏的用户体验。

6.限制选项卡的数量

导航栏设计时，我们应当把最重要、最常用到的条目置于导航栏当中。如果你提供的选项太多或太复杂，那么用户会感到混乱。一般网页导航栏最好不要超过7个选项；如果是移动端，最好不要超过5个。这个限制对设计师来说是件好事，这样就可以把持导航栏设计的简洁性，用户可也可轻松找到他们正在寻找的内容，而无需经过太多选项。

常见的4种导航栏设计类型

• 顶部导航

By Mockplus DS

• 底部导航

• 侧边导航

• 汉堡菜单

By Knoed

• 抽屉导航

By Dribbble

实战操作：如何用原型设计工具Mockplus（摹客）来快速的实现顶部导航栏设计之内容切换

这里我们需要结合Mockplus中的按钮栏和内容面板，来实现内容切换。

Step 1：在界面上添加一个按钮栏和内容面板，按钮栏可根据自己的需要来更改样式。

Step 2：给内容面板添加3个层

Step 3：新建三个子界面并重命名为界面一，界面二，界面三。在三个界面上添加不同的内容以示区分。

Step 4：内容面版三个层分别连接对应的三个界面。在小灰点按下鼠标左键拖动链接页面。

Step 5：按钮栏三个按钮分别对应连接内容面板三个层，也是鼠标拖动。

最后，预览看效果演示，导航栏设计之内容切换是不是很简单呢？

综上

导航栏设计是网页和移动端设计中不可或缺的一部分，它们就像一个路牌，时刻引导用户并且用户也很依赖。导航栏菜单设计的好坏会影响用户对你网站或者App的印象和评价，所以设计师应该确保自己设计的网页导航栏能为用户提供一个良好的用户体验。希望小编今天分享的导航栏设计技巧能够对你们有帮助！

文章干货分享：

【干货分享】10条必知的网页导航菜单设计原则

【附教程】2018九款最佳下拉菜单设计实例

【附教程】交互原型设计的六大原则，助你打造完美的用户体验

【附教程】App原型设计—Dribbble极具创意的下拉刷新案例大放送