改善网站导航的 7 种方法

已发表: 2023-03-31

访问者在您的网站上移动的难易程度会严重影响他们对您、您的品牌或您的产品的印象。良好的网站导航对于提供积极的用户体验至关重要，因为它可以帮助访问者找到他们正在寻找的信息，而无需花费太多时间点击。

现在，让我们深入了解网站导航的来龙去脉，探索如何改进网站导航。

什么是网站导航系统？

网站导航系统包含各种菜单、面包屑和内部链接，允许用户访问网站的不同部分和页面。导航系统的复杂性取决于网站的结构和网站为访问者提供的内容。一个好的导航系统可以降低跳出率并优化搜索引擎和用户体验的页面结构。

网站导航示例

以下是三种流行的网站导航类型。

顶部菜单

顶部菜单是位于网站每个页面顶部的主要网站导航栏。顶部菜单是水平导航，通常包括站点的徽标和主要导航选项。像亚马逊这样的大型网站通常使用顶部菜单为其网站提供全面的导航。

页脚菜单

在网页的页脚中添加指向网站最重要页面的导航链接被认为是一种很好的做法。一直滚动到页面底部的网站访问者可以使用页脚中的链接进行导航。页脚菜单也有利于搜索引擎优化 (SEO)，因为它们将相关链接构建到整个站点的页面中。

边栏

侧边栏是位于页面左侧或右侧的垂直菜单。这种类型的导航不像顶部菜单那样经常使用，但可以在纽约时报等许多网站上看到，它与顶部菜单导航系统结合使用。

有效导航系统的四项基本原则

在深入探讨使导航变得更好的具体规则之前，重要的是要提及一些有助于获得良好导航体验的基本原则。

能见度

确保导航可见并且可以从网站的每个页面轻松访问。当您的导航选项数量有限时，使导航可见相对容易，但当您设计具有许多子类别的大型网站时，这可能具有挑战性。在构建导航时，请优先考虑使您的顶级导航选项在您的网站上突出并易于查找。

可预见性

无论访问者在您网站的哪个位置登陆，无论是主页还是嵌套页面，他们都应该很容易理解他们在网站层次结构中的位置以及他们可以从当前位置转到哪里。始终一目了然地传达访问者的当前位置（即，使用页面的标题）并将菜单放置在访问者希望找到它们的区域（通常是网页的顶部和底部）。

明晰

在产品设计方面，我们在 UI 中使用的词语很重要。每个导航选项都应该有一个清晰的标签，准确描述每个页面的内容。用户应该在点击导航选项之前了解会发生什么。

一致性

好的设计是一致的设计。您需要使网站所有页面的导航菜单保持一致。尽可能在网站的每个部分显示相同的顶级导航选项，因为这会给用户一种稳定感。

设计优秀导航的十个实用建议

1.投资于信息架构设计

信息架构 (IA) 设计是将内容组织成对访问者有意义的逻辑组的过程。正确的 IA 设计将帮助您将相关的页面和部分组合在一起，并按照对您的目标受众和搜索引擎都有意义的逻辑顺序排列它们。 IA设计应该在产品团队开始设计导航系统之前完成。

IA植根于用户研究。您应该考虑目标受众的需求和偏好，并了解他们如何与网站交互以设计满足他们需求的系统。

2. 设计站点地图

站点地图是您网站导航结构的骨架。通常，站点地图是作为信息架构设计的一部分创建的，它显示了网站将拥有的网页的层次结构。站点地图设计是一个迭代过程。一旦团队创建了站点地图的初始版本，他们就需要专注于减少层次结构的级别数。层次结构越深，访问者就越有可能迷失方向。大多数时候，可以设计一个具有三到四个层次结构的相当复杂的网站。网站访问者应该能够在三下点击内访问网站中最深的嵌套页面。

3. 将菜单放在访客希望看到的地方

以 UX 专家 Jakob Nielsen 的名字命名的 Jakob 定律指出，用户将大部分时间花在其他网站上，并且更喜欢您的网站以与他们已经熟悉的网站相同的方式工作。谈到导航设计，这意味着导航系统的设计应该符合观众的期望。当访问者登陆新网站时，他们希望在页面顶部看到导航。

尽量避免在桌面上使用汉堡菜单，因为隐藏的导航会影响可发现性。

4. 保持导航系统简单

KISS原则强调简单是最好的，这适用于产品设计的所有部分，包括导航系统。简单的导航更容易让用户理解和使用。

避免使用太多选项使导航混乱。例如，在设计顶级导航菜单时，尽量将菜单项的数量限制在七个。使用下拉菜单显示子类别。
提供面包屑。面包屑是一种导航辅助工具，用于引导网站访问者。如果您的网站具有多个级别（超过 4 个）的层次结构，则面包屑是向访问者显示他们在您网站上的位置的好方法。
避免只有图标的导航。图标可以节省屏幕空间，但也会使访问者的导航体验更加困难。存在数量有限的普遍理解的图标（例如主页、搜索和打印）。除此之外，许多人可能还不熟悉其他图标。这就是为什么如果你想使用图标，最好给它们加上标签。当您将标签与图标一起包含时，可以减少歧义。

5.提供搜索功能

如果您的网站有数百页，您应该提供一个搜索栏和导航菜单。搜索不是导航的替代品，而是一种让访问者知道他们正在寻找什么的快捷方式。搜索对电子商务网站特别有用，因为它可以让用户直接进入特定的产品页面或产品类别。

6.优化不同设备的导航

人们可以从各种类型的设备访问您的网站，确保您设计的导航系统同样适用于小型移动设备和大型桌面屏幕至关重要。

利用您拥有的空白空间。通常，您拥有的空白越多，您可以向访问者显示的导航选项就越多。 Priority+ 是顶级菜单最有用的模式之一。
适当调整导航选项的大小。导航选项的大小直接影响交互的舒适度。彼此靠近的 CTA 等微小导航选项会增加用户意外选择错误选项的可能性。如果您针对移动设备优化设计，请确保导航选项的大小至少为 44x44 CSS 像素。

7. 验证导航

无论您在设计上投入多少时间，都必须始终通过真实用户对其进行验证。与真实访客一起测试您的导航，并根据他们的反馈对其进行改进。与代表目标受众的用户进行可用性测试会议，以确定用户面临摩擦的区域，例如无法找到导航选项。您将用于可用性测试的任务应该与您网站上的真实交互场景相匹配。例如，当您设计电子商务网站时，查找产品将是访问者最常见的任务之一。

向我们展示您的创作

无论您为下一个项目选择哪种导航方式——我们都乐于看到！查看 Webflow 社区正在创建的内容，并立即将您的项目提交给 Made in Webflow！