用户体验之如何设计优质的导航栏及常见导航类型推荐

2018-10-31
1945

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

我们将介绍一些导航栏设计技巧，教大家在律师网站建设时如何更好的去提升用户体验。下面直接进入正题。

导航栏设计的基本规则：

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

六点导航栏设计技巧

1.良好的布局

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

2. 使用高对比度

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

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

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

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

导航栏背景

更改页面名称的颜色

将页面名称加粗

粗体导航栏

添加下划线

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

下划线导航

使用缩进选项卡

缩进式导航

添加图标

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

图标导航

4.设置悬停效果

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

摹客iDoc，更快更简单的产品协作设计神器

现在试用

5.将Logo链接到主页

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

6.限制选项卡的数量

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

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