以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。
“如果用户在导航上遇到困难，他们通常会犹豫是否要回到网站上。”
大多数人可能有过这样的体验，当你打开了一个APP，由于没有导航或者导航设计不合理，你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面，甚至不会再想使用这个网站。
那么你如何创造出“清晰，简单，一致”的导航呢？
让我们来模拟一个场景，你在一个星期天的早晨出门去买自己喜欢的巧克力。走进商店，你首先会看到墙上挂着各类商品区的名称。（ 因为它们足够大，你可以在商店的任何地方看到它们。）
“哦，应该是食品杂货区！”你心想，一边朝着那个方向走，一边去购买你正在寻找的巧克力。
再来一次，我们使用完全相同的场景，进行较小的更改。这次没有任何商品区的名称，你就会对这些巧克力的位置一无所知。
现在，把商场看作是你设计的Web应用程序，而你是访问Web应用程序的用户。
当你访问一个网页APP时，你会经历和去商店一样的过程，你通常会试图找到一些东西。然后你会明白：
“用户永远不会认为他们有必要记住在网站中的访问路径。这里应该有一个导航，它应该放在顶部，而且是非常明显的位置。”
网站和商场的一个区别在于，前者没有任何人站在你的身边，告诉你寻找的东西在哪里。在网页上，代替寻找方向的功能是搜索——在搜索框中输入你想搜索的关键词，然后返回到可能出现的地方的链接列表。
在Web应用程序中，你可以通过一个有层次结构的导航来引导你。
通常，在一个Web应用程序的固定位置会有一个保持静态的导航栏(全局导航)，其他主要分区导航下都可能有一个子导航栏。
导航的两个主要目的是显而易见的：
帮助我们找到我们正在寻找的东西，并告诉我们我们在哪里。
但导航也有一些同样重要且很容易被忽略的功能：
向用户展示网站内容
通过使层次结构可见，导航可以告诉我们该网站呈现包含哪些部分。而对于用户来说，展示这款应用的具体内容可能比引导或快速定位更重要。
告诉用户如何使用该网站
如果导航是有效的，它会提示你从哪里开始，以及你的选择是什么。如果操作正确，它应该会提供你需要的所有指令。（这听起来不错，因为大多数用户无论如何都会忽略其他指令。）
加强用户对网站建立者的信心
每当我们进入一个网站时，我们都会好奇：“这些家伙知道他们在做什么？”这是让我们回到Web应用程序的主要因素之一。
结构清晰，精心设计的导航是网站创造良好的第一印象的最佳机会之一。
如何创造“清晰，简单，一致”的导航？以下是Web的基本导航惯例：
全局导航是什么？为什么要创建它？
Web设计人员使用术语持久导航（或全局导航）来描述出现在应用程序的每个页面上的一组导航元素。
持久化导航一般会以平静而令人舒服的口吻提示你：
“这里是导航部分，有些区域会根据你在Web应用程序中所处的位置而有所变化，但它会一直在这里，并且始终以同样的方式为你服务。”
持久化导航就像商店里各区域的名称一样，不管你在哪里，如果你想知道你身在何处，你只需抬头仰望看看商店名称。你就可以快速找到自己喜欢的巧克力。
只要导航保持一致的外观出现在每个页面的相同位置，你就能立即确认你仍然在同一个应用中 -这比你想象的重要得多。（行为科学）在整个应用程序中保持一致意味着你只需要弄清楚它是如何工作的。
分区导航 – 一个关键部分
分区导航 - 有时称为主导航 - 是应用程序主要部分的链接，即应用程序层次结构的顶层。
在某些设计中，持久化导航还包含显示二级导航的空间，即当前导航部分的子列表。
在其他情况下，指向一个分区名称或点击它会显示一个下拉菜单。而且在某些情况下，点击将带你到该区域的首页，在那里你会发现二级导航。
面包屑导航 – 你的坐标
面包屑导航就像“你在这里”的坐标一样，它可以显示你在一个Web应用程序上的位置。
面包屑导航，顾名思义，它们不会占用太多空间，但能提供给用户一个方便快捷的方式来做你最需要做的两件事情：返回上一页或者回到主页。
这个导航之所以被称为面包屑导航，是因为它们让人想起童话故事"汉赛尔和格莱特“。当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，这些面包屑帮助他们找到了回家的路。
面包屑导航会显示从主页到你所在的位置的路径，并可以轻松地在应用程序的层次结构中移回到更高级别。
在很长一段时间里，面包屑导航仅仅应用于APP中，在这些APP中的应用实际上只是存储大量的数据，但现在它们在UI / UX中也是必需的设计元素。
以下是实现这些导航的最佳实践
1. 把它们放在顶部
如果将他们放置在页面的顶部，面包屑导航可以很好地发挥作用。我认为这可能是因为设计师使它们与页面边缘结为一体，使他们看起来更自然，就像书籍或杂志的页码一样。
2.级别之间使用“>”
多次的试验和失败总结似乎表明，级别之间的最佳分隔符是“大于”操作符（>），可能是因为它在视觉上显示了向下移动的效果。
3.最后一栏加粗
列表中的最后一栏应该是当前页面的名称，并将其加粗，从而突出其应有的重要性。因为这是你当前使用的网页，所以它自然也不会是一个链接。
选项卡
选项卡是少数几个在用户界面中实际使用物理隐喻的例子之一。它就像是三环活页夹中的标签分隔符或文件抽屉中的文件夹标签，可以将任何东西分成不同的部分。通过点击它的标签(或者，在Web上点击它)，你可以很容易地打开其中某个部分。
如果你还沉浸在购物中心和巧克力的例子中，那好。标签就类似于商场某一个部门里的货架，他们可以帮助你精确定位商品。你可以在不同的货架上看到不同种类的巧克力，供需要的人购买。
我认为它们是一个非常棒的导航选择。以下是为什么我喜欢它们的原因：
1.浅显易懂
我从来没有见过任何人（不管是不是“计算机文盲） 看了标签的界面会说：“嗯，我不知道那些标签是干嘛的？“
2.显而易见
当我做可用性测试时，令我很惊讶的是，用户往往会忽略网页顶部的水平导航栏。但是选项卡在视觉上非常独特，因此很难被忽略。而且除了导航，它们很难被误认为是其他什么，所以它们成功创建了导航和内容之间的那种显而易见的划分。
3.并非华而不实
网页设计师总是在努力让页面更具视觉上的趣味性。但如果设计得当，选项卡也可以更加精美，并提供有用的功能。
结论
理解导航可能很困难，但要想实现它更加困难。但是无论你设计，你都必须确保你的导航能带给用户最终想要看到的东西。这很重要，因为他比你想象中更希望“买到喜欢的巧克力“。
如果你是一名UI / UX设计师，你使用的是哪种导航风格呢？
作者：Aakriti Chugh
地址：https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6
扫描二维码，关注 “摹客” 微信公众号
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/35888/
