发布时间：2021-10-16 分类： 电商动态
你如何设计一个“清晰，简单，一致”的导航？
“如果人们在浏览代购源码网站时遇到问题，他们会毫不犹豫地回到代购源码网站。 ”的
您之前可能遇到过类似的情况。如果你下载一个应用程序，并花时间找到你想要的东西，那么你不能待在这里很长一段时间，甚至回来。
你如何设计一个“清晰，简单，一致”的导航？
想象一下，周日早上出去买你最喜欢的巧克力。当你走进商店时，你看到的第一件事就是挂在墙上的货物分区的名称。 （它们足够大，可以在商店的任何地方看到它们）。
“啊，杂货区。 ”的你想朝这个方向前进，找到你想要的巧克力。
在完全相同的情况下，稍微更改一下，删除产品分区，然后您可能对巧克力一无所知。
现在将商店与您的Web应用程序进行比较，并将您视为访问Web应用程序的客户。
当您访问Web应用程序时，您将在商店中体验到类似的感受并尝试在其中查找内容。
“一位用户不必记住他如何浏览您的Web应用程序。导航应该在顶部，它应该是非常明显的。 ”的
Web应用程序和商店之间的一个区别是前者没有站在客户旁边的购物指南并引导客户。导航栏将作为指南：搜索 - 在搜索框中输入关键字并跳转到您需要的链接列表。
在Web应用程序中，您可以使用导航栏作为层次结构的指南。
通常，整个Web App都有静态全局导航，其他主要部分有一个子导航栏。
导航的两个主要目的是显而易见的：
帮助我们找到我们想要的东西并告诉我们我们的位置。
但导航也有一些重要且容易被忽视的功能：
它告诉我们这里发生了什么。
通过使层次结构可见，导航会告诉我们应用程序包含的内容，即导航显示的内容！并且，揭示应用程序的功能可能比指导我们更重要。
它可以帮助我们如何使用该应用程序。
导航的主要任务是告诉您从哪里开始以及您想要选择什么。如果操作正确，它应该符合您需要的所有说明。 （听起来不错，但大多数用户会忽略其他命令。）
它使我们对创造它的人更有信心。
每当我们进入网络应用程序时，我们都会进行心理冥想：“这些人知道他们在做什么吗？”这是让我们回到应用程序的主要因素之一。
简单明了，精心设计的导航是应用程序创建良好第一印象的最佳机会之一。
为了回答如何创建一个众所周知的“清晰，简单，一致”导航的问题，我总结了以下网络的基本导航约定:
全球导航——什么和为什么？
现在不要急于往下看，毕竟他会跟着我们。
网页设计师使用“持久导航”。 （或全局导航）描述出现在应用程序的每个页面上的导航元素的集合。
持续导航——以平静，理性的声音说话:
“这个元素就在这里。某些部分会根据您在Web应用程序中的位置而发生变化，但它始终会在此处并始终以相同的方式引导用户。 ”的
就像店里各个部门的名字一样，无论你身在何处，如果你想知道自己的位置，你都会一直抬头，然后你可以用自己的方式找到自己喜欢的巧克力。
只要导航出现在每个页面的相同位置并保持一致的外观，您就可以立即确认您仍然在同一个应用程序中——这比你想象的更重要，在整个应用程序中保持一致它意味着你只需要知道它是如何工作的。
关键部分：
关键部分——有时被称为“主导航”——是指向应用程序主要部分的链接以及应用程序层次结构的最高级别。
在某些设计中，持久导航还将包括显示辅助导航的空间：当前部分中的条形列表。
在其他情况下，指向名称或单击它将显示一个下拉菜单。在某些情况下，单击它会将您带到该部分的主页，您将在其中找到辅助导航。
面包屑导航——导航指南
就像“你在这里”指示器一样，面包屑导航将告诉你你在应用程序中的位置。
这个角色当然是不言而喻的，不占用太多空间，但提供了一种方便，一致的方式来完成你最需要做的两件事：回到上一页或主页。
它们被称为面包屑，因为它们让人们想起汉斯已经落在树林里的面包屑，这样他和格莱特就能找到回家的路。
面包屑显示从主页到您所在位置的路径，使您可以轻松地移回应用程序中的更高层次结构。
很长一段时间，面包屑导航是一种奇怪的现象，应用程序中只有大量数据，但现在它们在UI/UX中是必不可少的。
以下是一些最佳做法：
1.顶部
面包屑导航似乎是最好的在顶部，我认为可能是因为他们被边缘化——使它们看起来像一个配件，就像书或杂志中的页码一样。
2.使用>水平
实验和错误似乎表明水平之间的最佳分隔符是>大于>符号（>），可能是因为它将向下移动可视化。
3.最后一项是粗体
列表中的最后一项应该是当前页面的名称，并使用粗体突出显示其重要性。由于这是当前使用的页面，自然它不是一个链接。
标签
选项卡是在用户界面中使用隐喻的少数几个示例之一。就像三环活页夹中的文件一样，它们将事物分成不同的部分。通过单击其选项卡（或在Web上单击它）可以轻松打开内容。
如果你还记得购物中心和巧克力，那就太棒了。标签类似于商场中的货架。它告诉你你的想法在哪里。您可以在不同的货架上看到不同种类的巧克力，供不同的人购买。
我认为这是一个非常好的导航选项。这就是我喜欢它们的原因：
1，简洁明了
我从未见过任何人——即使它是“计算机文盲”——看一下标签界面，然后说：“好吧，我想知道这些是怎么做的？” ”
2，不容错过
当我进行可用性测试时，我很惊讶人们经常忽略页面顶部的水平导航栏。标签的视觉特征是如此不同以至于难以忽略。因为除了导航，它们很难被误解为其他什么，因此它们在导航和内容之间创造了一种“明显的”划分。
3.运行平稳
网页设计师总是试图让页面看起来更有趣。如果操作正确，选项卡还可以优化您的导航并提供其他有用的功能。
结论
理解导航可能很困难，实施它可能会更困难。但无论你做什么，你必须确保你实现的导航是最终用户想要看到的。这非常重要，因为用户希望比您想象的更快地找到他们想要的东西。
如果您是UI/UX设计师，您更喜欢使用哪种导航样式？
注意：如果您想阅读此内容，请与您的朋友分享。
作者：Aakriti Chugh
原始地址：https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6
本文最初由@Mockplus团队发布在产品中，未经许可不得复制。
