导航设计是您网站的基石。它决定了关键的指标,如转化率和跳出率,页面时间,流量,它往往是访客有一个良好的体验和退出你的网站的决定性因素,你可以称之为“用户流”
 
但是好的设计是什么样的呢?一旦安装到位,如何改进它?让我们深入了解什么是网站导航设计,以及优化它的最佳技巧:
 
什么是网站导航设计?
 
网站导航设计是所有导航元素的架构,它是用户访问您的网站时如何找到他们想要的东西。为了理解它的重要性,让我们用一个比喻:想象一下有两家服装店。第一个完全混乱。女鞋旁边是男裤,男领带旁边是儿童泳衣。最糟糕的是,似乎没有任何标志或店员可以帮助您找到所需的东西。另一方面,第二家商店非常简单。所有服装均按性别和尺寸进行组织,有很多标牌指导顾客,店员随时待命以回答任何问题。确定在哪一个时间消磨时间是一个容易的选择,对吗?良好的导航是杂乱无章的服装店与杂乱无章的服装店之间的区别。为了使您的网站更接近后者,请牢记以下一些最佳做法:
 
优秀网站导航设计的5个最佳做法
 
网站导航就是帮助您的用户找到所需的内容。当您解决此问题时,其他好处如SEO排名和可发现性也会随之而来。在进行网站导航设计时,请牢记以下五点:

1:规划网站导航设计
 
规划是必不可少的。实际上,这可能是此过程中最重要的部分。您不只是想随意创建导航按钮。因此,请谨慎对待该过程。这意味着坐下来,绘制出网站的所有内容资产,并确定如何链接到它们。
 
卡分类:
进行此操作的最佳方法之一是查看网站的信息体系结构,或者网站的所有内容如何安排和组织。您可以通过卡片分类练习来完成此操作。为此,请将所有内容元素记下到卡片上,将它们分配给目标用户,然后让用户将卡片分类为有意义的组。
 
您可能要使用两种类型的卡片分类:
· 开放式卡片分类:创建卡片,将其提供给研究参与者,然后要求他们对卡片进行分组。然后,他们标记组。

开放式卡片分类

· 封闭式卡片分类:创建卡片并将其与创建的组列表一起提供给研究参与者。然后,您要求参与者将卡片分组。

封闭式卡片分类

切记:与目标用户实际合作进行卡片分类很重要。毕竟,在网站导航方面您可能会有偏见。
 
2:规划您的用户流程
 
在决定如何安排网站导航之前,重要的是要准确地确定需要在布局中包括哪些元素。为了弄清楚这一点,您需要了解您的用户将如何与之交互并最终获得您的网站。这是  用户流程发挥作用的地方。用户流程是在网站上完成任务的步骤。可以将其视为传统流程图,其中箭头从一个决定指向另一个决定,直到最终到达目的地。它们通常用于绘制用户在数字产品上获得的预期结果。
 
用户流程图

花一些时间,然后规划您的流程,以确保对您的用户有意义。这使您可以设计一个“ 幸福的道路 ”(或没有错误或异常的完成任务的最佳方法),以实现网站上最常见的目标。总体而言,用户流程旨在作为您的设计决策的北极星。有了它之后,您就可以开始专注于最能满足用户需求的内容,而忽略其余所有内容。
 
3:使用用户友好的文字
 
您的所有导航副本都必须对用户清晰易懂,这意味着避免使用含糊不清或过于简单的单词。清晰度不仅可以帮助读者浏览您的网站,还可以帮助您的SEO。例如,假设您有一个用于宠物狗服务的网站。您不希望导航按钮读取诸如“服务”之类的内容,因为这不是人们在寻找您的服务时搜索的术语。取而代之的是,他们搜索“ 宠物狗”,“宠物坐着”,甚至“ 小狗饲养”。在第一个示例模糊不清的地方,其他示例则清晰明确。

4 :(尽量少用)汉堡包
 
也许没有比汉堡菜单更具争议性的导航元素了。

汉堡包

尽管它对于辅助导航元素很有用,但您不想完全依赖它,因为它阻碍了可发现性,从而影响了您的内容。

这是用户与汉堡菜单进行交互的过程:
1.寻找所需的导航元素
2.意识到它不是立即可用
3.注意这里有一个菜单
4.确认这是一个汉堡菜单并且可以单击
5.点击那个汉堡
6.扫描其他菜单项的列表
7.找到他们要寻找的那个
8.点击它
您的用户要做的很多事情-整个八步。在设计世界中,简约为王。
 
现在,这并不是说应该汉堡包菜单从来没有被使用。相反,当您要包含的元素不能直接用于网站的主要目标时,请有意使用它。让我们来看一个应用程序。这是来自优步的一个很棒的案例:

汉堡包导航

Uber知道他们的用户在进入应用程序时只想订购汽车。他们没有给用户增加“过去订单”或“法律”之类的负担,而是将所有这些次要元素放在汉堡菜单中。

深圳高端网站建设

5:遵循网站导航栏的最佳做法
 
以下是一些最常见的网站导航布局:
 
水平布局

水平布局

一种经过实践检验的布局,可与许多不同的屏幕配合使用。如果您要链接的网页数量较少,这特别好-尽管如果您拥有大型网站(例如上述《纽约时报》),也可以使用它,但您也可以使用它对所有页面进行排序。当与下拉菜单选项结合使用时,例如,当您有不同主题的小节时,水平站点导航布局也可以很好地工作。在The Verge中查看一个很好的例子。 

The Verge

垂直布局

垂直布局


垂直布局是一种出色的移动友好替代方案。当网站包含许多导航元素时,它们非常有用。
 
汉堡布局
 
我们在最后一个技巧中介绍了这一点,但在这里值得再次提及。汉堡菜单是一种导航布局,用于当您遇到屏幕上不适合的辅助导航元素时。
 
这是Google云端硬盘移动网站上的一个很好的例子:

汉堡布局

固定的导航布局

固定导航布局

固定导航具有在用户向下滚动页面时跟随用户的元素。这是保持用户导向同时使网站其他部分始终可访问的好方法。但请注意:固定导航会吞噬网站的大量资源。当您只有几个导航元素时使用它,以免分散您其他内容的注意力。