网站导航设计教程

导航的主要任务就在于，它会告诉你从哪里开始，以及你要选择什么。如果做的正确，它应该符合你所需要的所有指令。(这听起来不错，但是大多数用户都会忽略其他指令。)

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

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

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

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

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

现在不要急着往下看，毕竟他会跟着我们的。

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

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

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

就像商店里的各个部门的名字一样，不管你在哪里，如果你想知道你的位置，你总是会抬起头来，然后你可以以自己的方式找到你最喜欢的巧克力。

只要导航出现在每个页面的相同位置，并且保持一致的外观，就可以立即确认你仍然在同一个应用程序中——这比你想象中的更为重要，在整个应用程序中保持一致意味着你只需要知道它是如何工作的。

关键部分：

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

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

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

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

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

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

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

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

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

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

1、置顶

面包屑导航在置顶中似乎是做的最好的，我想这可能是因为把它们边缘化了——让它们看起来像一个附属品，就像书或杂志里的页码一样。

2.使用>层级

试验和错误似乎表明，层级之间的最佳分隔符是“大于”符号（>），可能是因为它将向下移动可视化。

3、最后一项使用粗体

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

标签

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

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

我认为这是一个非常优秀的导航选择。这也是为什么我喜欢他们的原因：

1、简洁明了

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

2、不容错过

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

3、操作平滑

网页设计师总是在努力让页面看起来更有趣一点。如果操作正确，选项卡还可以为你的导航润色，并提供其他实用功能。

结论

理解导航可能是困难的，实现它也许更加困难。但是无论你做什么，你都必须确保你实现的导航是终端用户想要看到的。这非常重要，因为用户比你想象中的更想快速的找到自己想要的东西。

本文来源于上海网站建设公司与上海网站设计制作公司-垒越科技上海公司！

• 上一篇：上海微信小程序开发越来越受欢迎
• 下一篇：影响网站设计的关键指标，您知道吗？