网站导航设计指南

如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具

 

“若是人们在浏览网站时遇到困难，他们就会犹豫是否要回到该网站。”

你之前可能经历过相似的状况，若是你下载了一个app，却要花时间去寻找你想要的东西，那么你不可能长期呆在这里，甚至不会回来。

那要如何设计出“清晰，简单，一致”的导航呢？

想象一下，你周日早上出去买本身喜欢的巧克力。走进商店，你首先看到的是货品分区的名字挂在墙上。（它们够大，能够在商店的任何地方看到他们）。

“啊，杂货区。”你一边想一边朝着这个方向走去而后找到了你想要的巧克力。

在彻底相同的场景下，只需一点小小的改动，去掉货品分区，那你可能对巧克力放在哪一无所知了。

如今，将商店比做你的Web应用程序，将你视为访问Web应用程序的客户。

当你在访问Web应用程序时，你将经历与商店中相相似的感觉，并试图在其中找到一些东西。

“一个用户没有必要记住他在你的网页应用上浏览的方式，导航应该是在最前面的，并且应该很是明显。”

网络应用程序和商店之间的一个区别就在于，前者是没有导购站在客户的身边，引导客户。 而导航栏就要充当导购的角色：搜索 - 在搜索框中输入关键字，而后跳到须要的连接列表。

在Web应用程序中，您能够经过一个层次结构，使用导航栏来做为引导。

一般，在整个Web App中都有一个静态全局导航（Global Navigation），其余主要部分都有一个子导航栏。

导航的两个主要目的是显而易见的：

帮助咱们找到想要的东西，并告诉咱们在哪。

但导航也有一些重要且容易被忽视的功能：

它告诉咱们这里有什么。

经过让层次结构可见，导航能够告诉咱们该应用程序包含了哪些内容，即导航显示的内容！并且，揭示这款应用的功能可能比指导咱们更重要。

它帮助咱们如何使用该应用程序。

导航的主要任务就在于，它会告诉你从哪里开始，以及你要选择什么。若是作的正确，它应该符合你所须要的全部指令。(这听起来不错，可是大多数用户都会忽略其余指令。)

它让咱们对创造它的人更有信心。

每当咱们进入一个网络应用程序的时候，咱们都会有一种精神冥想：“这些家伙知道他们在作什么吗？”这是让咱们返回应用程序的主要因素之一。

简单明了，通过深思熟虑后的导航是应用程序能够利用的最佳机会之一，从而给用户创造良好的第一印象。

为回答如何建立众所周知的“清晰、简单、一致”的导航，我总结了如下网络的基本导航惯例:

全局导航——什么与为何？

如今不要急着往下看，毕竟他会跟着咱们的。

Web设计人员使用“持久化导航”(或全局导航)来描述在应用程序的每一个页面上出现的导航元素集合。

持久的导航——用一种平静、理性的声音说:

“这个元素在这里。有些部分会根据你在网页应用中的位置而有所改变，但它会一直在这里，并且老是以一样的方式引导用户。”

就像商店里的各个部门的名字同样，无论你在哪里，若是你想知道你的位置，你老是会抬起头来，而后你能够以本身的方式找到你最喜欢的巧克力。

只要导航出如今每一个页面的相同位置，而且保持一致的外观，就能够当即确认你仍然在同一个应用程序中——这比你想象中的更为重要，在整个应用程序中保持一致意味着你只须要知道它是如何工做的。

关键部分：

关键部分——有时被称为“主导航”——是应用程序主要部分的连接，也是应用程序的层次结构的最高级。

在某些设计中，持久导航还将包含显示二级导航的空间：当前部分中的小节列表。

在其余状况下，指向一个名称或点击它会显示一个下拉菜单。而在某些状况下，单击它将带你到该部分的首页，在那里你会发现辅助导航。

面包屑导航——您的导航指南

就像“你在这里”的指示器同样，面包屑导航会告诉你你在应用程序的具体位置。

其做用固然是不言而喻的，不占用太多空间，却提供了一个方便和一致的方式来作你最须要作的两件事情：回到上一个页面或者首页。

他们之因此被称为面包屑，是由于它们让人想起汉斯在树林里掉落的面包屑，使得他和格莱特尔能够找到回家的路。

面包屑向您显示从主页到您所在的位置的路径，让你轻松地在应用程序中移回到更高的层次结构。

很长一段时间，面包屑导航是一个奇怪的现象，只在应用程序中才有大量的数据，但如今它们在UI/ UX中是必不可少的。

如下是一些最佳实践方法：

一、置顶

面包屑导航在置顶中彷佛是作的最好的，我想这多是由于把它们边缘化了——让它们看起来像一个附属品，就像书或杂志里的页码同样。

2.使用>层级

试验和错误彷佛代表，层级之间的最佳分隔符是“大于”符号（>），多是由于它将向下移动可视化。

三、最后一项使用粗体

列表中的最后一个项目应该是当前页面的名称，并使其为粗体，以突出其应有的重要性。 由于这是当前使用页，天然它不是一个连接。

标签

选项卡是少数几个在用户界面中采用暗喻的例子之一。就像一个三环的活页夹里的文件同样，它们会把东西分红不一样的部分。经过点击它的标签(或者，在Web上点击它)来打开内容是很容易的。

若是你还记得购物中心和巧克力，那也很棒了。标签相似于商场的一个货架，它会告诉你你的所想之物在哪里，你能够在不一样的货架上看到不一样种类的巧克力，供不一样的人购买。

我认为这是一个很是优秀的导航选择。这也是为何我喜欢他们的缘由：

一、简洁明了

我历来没见过任何人——哪怕是“电脑文盲”——看一个选项卡界面，而后说，“嗯，我想知道这些是怎么作的？”

二、不容错过

当我作可用性测试时，很吃惊的是，人们在网页顶部常常忽略水平导航栏。而选项卡的视觉特征是如此的不同凡响，以致于很难被忽略。由于除了导航，它们很难被误认为是其余的什么，因此它们建立了导航和内容之间的那种“显而易见”的划分。

三、操做平滑

网页设计师老是在努力让页面看起来更有趣一点。若是操做正确，选项卡还能够为你的导航润色，并提供其余实用功能。

结论 

理解导航多是困难的，实现它也许更加困难。可是不管你作什么，你都必须确保你实现的导航是终端用户想要看到的。这很是重要，由于用户比你想象中的更想快速的找到本身想要的东西。

若是你是一名UI / UX设计师，你喜欢使用哪一种导航风格呢？

备注： 若是你喜欢阅读这个，请与你的朋友分享。

做者：Aakriti Chugh

地址：https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6

学习工具，但不受限于某种工具。Mockplus作原型，更快更简单，如今下载Mockplus，免费体验畅快的原型设计之旅。