全美商学院
新闻
新闻

成都网站设计导航的终极指南

2023
03/08
14:59
全美网络官网
分享

良好的网站导航是必不可少的成都网站设计功能。我们不只是这么说——有研究支持它。根据全美网络的一项研究,38%的消费者在第一次浏览网站时会查看页面的导航链接和布局。

用户体验

导航的重要性不可低估。而且,访问者更喜欢实施网站导航最佳实践的网站的原因是可以理解的。它可以帮助他们快速轻松地找到他们正在寻找的信息,因此导航是用户体验和网站策略的典型组成部分。

今天,我们将仔细研究网站导航设计,以便您可以创建适合访问者的系统。我们还将探索网站导航最佳实践。之后,我们将查看网站导航示例并探索有效设计的一些必备条件。让我们开始吧。

什么是网站导航?

网站导航是用户界面组件的集合,允许访问者在网站上查找内容和功能。这些组件可以是副本、链接文本和按钮以及菜单的形式。

最后一次提到的可以说是与有效网站导航最相关的,所以让我们简要定义一下菜单在成都网站设计中的含义。

什么是网站导航菜单?

网站导航菜单是指向其他网页(通常是内部网站页面)的有组织的链接列表。导航菜单出现在整个网站的页眉或侧边栏中,允许访问者快速访问最有用的页面。

虽然帮助访问者从一个网页移动到另一个网页是首要任务,但它并不是唯一的优先事项。导航还可以帮助访问者理解网站上各个页面之间的关系。但在实践中到底是什么样子的呢?让我们分解一下。

全美网络分析师的一篇文章中表示,导航被视为网站信息架构(IA)的冰山一角。水面以下是前端访问者看不到的冰山部分:用于构建网站IA的研究、策略、管理和组织。表面上方是导航界面,通常表示为一系列超文本链接和搜索栏。

因此,您网站的IA在导航界面中不可见,但却是该界面的基础。这最终让访问者感觉到内容是相互联系和分类的,以满足他们的需求和期望,但实际上并没有显示所有用于识别和组织内容之间关系的电子表格和图表。

什么是网站上的子导航?

子导航或本地导航是网站访问者可以找到网站IA的较低级别类别的界面。这些通常是主要导航链接的子类别。

主导航菜单包含导航项“支持”。当您将鼠标悬停在该项目上时,会出现一个子导航菜单,提供多种支持的方式。这是一个有效的添加,因为访问者可以无缝地找到他们正在寻找的东西,但菜单乍一看并没有让人不知所措。这是双赢的。

网站导航的种类有哪些?

为什么网站导航如此重要?那么,对于初学者来说,它会影响访问者是否到达您的主页并浏览或单击“后退”按钮,从而导致更高 的跳出率。因此,您应该深入考虑构建网站导航的最佳方式。这就是它的不同类型出现的地方。

您如何构建网站导航取决于您的目标受众以及您认为最直观和易于访问的格式。以下是您在构建网站时可能会考虑的一些常见网站导航类型。

水平导航栏

让我们从水平导航栏开始吧。您可能已经猜到,水平导航栏是最常见的类型。它并排列出主要页面并将它们放在 网站标题中。许多网站都有相同的部分,例如“关于”、“产品”、“定价”和“联系方式”,因为访问者希望看到它们。

虽然这些部分很受欢迎是有原因的,但您不应该害怕通过定制菜单来定制您的网站。在构建导航栏时,请考虑您的网站目的和受众。你想在你的网站上实现什么,访问者在寻找什么?从回答这两个问题开始,然后从那里开始。

下拉导航菜单

接下来,我们有下拉导航菜单。此选项非常适合具有复杂IA的内容丰富的站点。如果您希望您的菜单包含大量指向页面的链接,您可以考虑使用此选项,因为您无法并排列出所有选项。相反,您可以在顶级导航栏中列出最重要或最一般的项目。然后,您可以在下拉菜单中添加其余内容。

汉堡导航菜单

您应该记住的另一个网站导航选项是汉堡包。您可能已经熟悉此菜单,因为它在移动网页设计中很受欢迎。如果您使用这种方法,您的导航项将在较大的屏幕尺寸上水平列出。

然而,在较小的屏幕上,它们会折叠在较小屏幕尺寸的 汉堡包按钮后面 。当访问者单击这个三行图标时,会出现带有导航链接的垂直下拉或水平弹出窗口。如果您网站上的空间有限,或者您不希望导航占用大量空间,那么汉堡式导航菜单可能是正确的选择。

垂直侧边栏导航菜单

现在,我们有了垂直侧边栏导航菜单。这是网站导航的绝佳选择,因为它提供了无缝的用户体验。这些项目彼此堆叠并位于侧边栏中。不可否认,这不如水平导航受欢迎,但垂直导航有好处。房地产不受限制,因此您可以编写更长的导航链接。还有机会获得更多顶级选项。

页脚导航菜单

另一个选项是页脚菜单。它通常与水平导航栏配对并扩展。如果访问者在标题中看不到他们需要的链接,他们可以向下滚动到页面底部,在那里他们会找到更多选项。

网站导航栏设计

对于网站导航设计,没有一种“正确”的方式。但是有一种正确的方法来考虑如何设置导航:考虑如何使首次访问者和重复访问者能够充分利用您的网站。如果您在创建网站导航时考虑到这一点,就不会出错。

当您将注意力集中在站点访问者身上时,您的导航结构的外观和功能可能与其他站点上的导航结构不同。这实际上是一件好事,因为这意味着您充分考虑了您的目标受众。

让我们在创建网站导航时逐步完成设计过程。

您的网站导航栏中应包含哪些内容?

因为您的站点上有很多页面,所以确定哪些页面足够重要以成为通用导航的一部分可能会很棘手。对于SEO和用户体验,Orbit MedIA建议将您的导航限制在最多七个项目。

但是你如何开始缩小范围呢?贵公司的利益相关者可能对什么值得导航、什么不值得有不同的看法,但要以用户体验为中心。最后,考虑您的网站访问者来确定您应该采用哪条路线。您可以使用以下一些策略来开始解读您的网站访问者希望在您的菜单上看到的内容。

卡片分类

卡片分类 是一种简单的用户体验技术,可帮助您了解网站访问者的想法并从他们的角度设计导航。不,您不需要任何用户体验经验即可尝试此练习。

首先,邀请组织外部的人员参与20分钟的练习。在桌子上放一堆索引卡,每张索引卡代表您网站上的一个重要页面。

接下来,请参与者按照他们认为合适的方式组织卡片。寻找参与者如何对您网站上的页面进行分组的趋势,并询问他们如何命名每个类别。这是一种非常有效的方式来理解用户的直觉感受。

归因报告

接下来,您的网站导航设计可以从归因报告中受益。如果您的营销分析软件提供了它,那么这非常适合决定您的主导航中应该包含哪些内容。

此报告将新创建联系人的数量归因于他们与您的业务的互动,因此您可以更好地了解您网站上将访问者转化为潜在客户的内容和功能。

用户流

如果您没有归因报告,您仍然可以通过百度站长中的用户流报告查看哪些页面在您的网站上是必不可少的。此报告不会区分来自客户的标准流量,但会突出显示人们如何在您的网站上浏览他们的体验。

用百度自己的话说:“用户流报告是用户从源头到各种页面以及他们离开网站的路径的图形表示。”

你应该如何订购你的导航项目?

网站导航中的顺序很重要。认知研究提供的证据表明,网页浏览者往往会最生动地记住导航两端的链接。通常被称为首因效应和近因效应,它们说明了这样一种现象,即列表中出现在最前面或最后的词往往更能吸引观众的注意力。因此,对于您的网站,您需要非常有意识地考虑在这些位置放置的项目。想想对您的典型访客来说什么最重要。

你应该如何表达你的导航选项?

表达导航选项的最佳方式取决于您经营的组织或企业的类型。对于初学者,您可以选择直接导航或尝试更多创意标签。当然,请确保您选择的任何内容对您的品牌来说都是直观的。

在选择要在主要导航链接中使用的词时,最重要的是要记住首先考虑客户会使用哪些词来描述这些页面。然后,考虑搜索引擎优化。

基于对象

可以说,网站最明确的选择是基于对象的导航。基于对象的导航将内容置于具体(通常只有名词)类别下。quanmeicm.com是基于对象的导航示例,如下面的艾默生学院网站也是如此。这种类型的组织将导航视为目录,并将页面分组为最适合的主题或类别。

基于行动

面向操作的导航可能更适合其他站点。要知道什么时候这样做合适,请询问您的受众,他们访问您的网站主要是为了了解某事还是为了采取特定行动。在下面来自霍华德大学的例子中,访客带着一个动作来到这里。他们不是来阅读“关于”页面的——他们是来申请、访问或捐赠的。

基于受众

对于拥有多个受众且线条清晰的公司,您可能需要考虑基于受众的导航或子导航,如下例所示。但是,这仅在访问者可以轻松地对自己进行分类时才有效。例如,您不希望使用小型公司与中型公司,或营销与广告公司,因为这些界限通常很模糊,可能会让您的听众对先去哪里感到困惑。

搜索引擎优化

除了匹配您的受众本能地组织您的网站的方式之外,您还需要考虑如何优化您的导航术语以实现最佳搜索。在百度上的一篇文章中,SEO策略师何林根建议使用百度站长的的关键字工具来识别最常将人们带到您网站的搜索词。然后,您可以使用这些词的变体作为网站导航的指南。

网站导航最佳实践

网站导航的黄金法则?不要让人觉得。从这些网站导航示例中可以看出,越明显越好。可用性顾问苏扬珺基于这种观点写了一整本书。遵循这些网站导航最佳实践,让用户在浏览您的网站时不会感到沮丧或困惑。

1、保持一致

一致性是关键,网站导航设计也不例外。这是一个至关重要的网站导航最佳实践,因为它可以成就或破坏用户体验。在格式化和设计导航界面的方式上保持一致。这一切都是为了与访问者的当前知识和期望保持一致。

例如,考虑一下如果您的主页链接是黑色的并且当用户将鼠标悬停在它们上面时会出现下划线,访问者会有什么感受。然后,当他们查看“联系人”页面时,链接是蓝色的,并且没有下划线。这很令人困惑,对吧?相反,您的链接在每个站点页面上都应该具有相同的样式。否则,访问者将不知道哪些文本带有超链接,哪些不在您的导航菜单中。

2、针对各种屏幕尺寸进行设计

2022年第四季度,移动设备占 全球网站流量的59%以上,因此无论屏幕大小如何,针对所有屏幕优化您的网站和导航变得越来越重要。而且, 根据Shopify的数据,到2024年,超过42%的电子商务购买总额将发生在移动设备上——因此优先考虑移动设备至关重要。是的,这扩展到您的网站导航菜单。

在设计菜单时,我们鼓励您首先考虑移动设备。从最小的屏幕尺寸开始,您必须优先考虑哪些链接最重要以包含在您的主导航中以及按什么顺序。这也是确定优先级的一个很好的练习。

您还必须决定哪些导航功能(如汉堡包按钮)在移动设备上是必需的,以及它们如何适合您的桌面设计。这将帮助您转向设计更大的屏幕尺寸,并清楚了解哪些页面和导航功能最重要。

3、使最重要的信息易于访问

你熟悉三击规则吗?从本质上讲,这个概念说明了每个网站导航结构都应该使人们能够登陆网站上的任何页面并在三下点击内找到他们需要的东西。

尽管这个概念在网页设计领域根深蒂固,但它在很大程度上已经声名狼藉。一项 研究 发现,用户在点击3次后退出任务的可能性并不比点击12次后高。

尽管规则可能不准确,但该基础告诉我们一个重要原则。您确实希望限制访问者访问关键信息或在您的站点上完成任务所需的工作量。计算点击次数是一个过于肤浅的指标。因此,我们鼓励您专注于建立清晰的路径、减少页面加载时间并消除用户旅程中的其他摩擦点。

4、添加面包屑。

如果您需要面包屑导航的示例 ,请记住Hansel和Gretel的童话故事。当两人穿过树林时,孩子们撒下面包屑以便他们找到回家的路。

同样,通过面包屑导航,访问者可以直观地看到他们在网站结构中的位置。然后,他们只需单击一下即可返回到其他页面。最好的部分是它不会占用您网站上的太多空间。此辅助导航栏通常由文本链接组成,文本链接由“大于”符号 (>) 分隔并位于标题下方。

设计您的网站导航

成都网站设计导航时,必须仔细考虑访问者和网站目标。请记住:屏幕另一侧的人必须浏览您的网站,他们这样做的能力会显着影响他们留下来的意愿。此外,搜索引擎机器人可以从强大的网站导航设计中受益。

联系我们
欢迎来到全美,免费
获取专业网站建设方案
电话咨询:

18140041855

您还可以预约资深顾问
隐私信息保护中,请放心填写

在线客服

电话咨询

微信咨询

微信号复制成功
18140041855 (苏女士)
打开微信,粘贴添加好友,免费询价吧