您的网站设计的许多方面 都可以培养良好的用户体验,而许多细节如果被忽视,可能会破坏它。从网站的视觉吸引力到布局、文本的使用等等,一个好的网站需要在良好的美学和功能之间取得平衡。
在所有需要考虑的因素中,可以决定您网站的 UX 设计的成败:网站导航。一个易于导航的网站将帮助用户找到他们正在寻找的内容,并为他们提供积极的体验,鼓励他们再次返回。
让我们看看为什么网站导航很重要,以及如何为用户提供完美的用户体验。在这里,我们深入探讨了基础知识,以及有关如何设计网站的提示。
什么是网站导航?
想象一下这样的场景:你想要一个新包已经有一段时间了。最后,您坐下来,浏览不同设计师的电子商务网站并选择您最喜欢的网站。经过深思熟虑,您找到了完美的包袋并想进行购买。
经过所有这些浏览,完成购买似乎太复杂了。所以最终,你放弃了,转而选择另一个品牌。
网站导航是指促进此用户旅程的因素,并受您网站架构的影响:链接的组织、菜单以及您网站上不同页面之间的连接都在导航中发挥作用。
良好的网站导航习惯可以避免您自己的品牌出现上述情况。它会影响流量、转化率、跳出率,并且是设计用户体验的决定性因素。
什么是网站导航菜单?
导航的核心在于您网站的菜单。网站菜单是一系列链接项目,可帮助用户在网站的不同页面或部分之间导航。
这有助于访问者轻松快速地找到他们正在寻找的内容。它通常是一个水平条或垂直条(尽管存在其他广告素材布局),其中包含指向 您网站最重要页面和部分的链接列表。
网站导航菜单的类型
有几种标准类型的网站导航菜单在整个在线世界中得到认可。我们在下面概述了这些内容,包括网站模板中的视觉示例。根据您的设计或您是否遵循扁平架构方法,其中任何一种,如果以我们的最佳实践实施,都将帮助用户轻松找到您的网站。
水平导航
这是一个经典菜单,通常出现在您网站的标题处。水平导航菜单在屏幕上水平运行,将列出您网站上可用的页面。
因为它是网页设计的标准,所以这种类型的菜单使用起来很直观,并且很容易让访问者找到。
下拉导航
虽然我们确实建议限制您的菜单项,但如果网站包含大量内容,这并不总是可行的。在这种情况下,您可以创建下拉菜单。下拉菜单是打开一系列选项的大型列表或面板。
为避免信息过载,您可以使用设计工具在此元素中创建层次结构。注意排版并确保每个类别和子类别都脱颖而出。您还可以在每个项目周围使用额外的空间,以便访问者了解区别。
汉堡菜单
虽然这主要在移动导航上看到,但这个简单的三行图标现在也出现在许多桌面版本的网站上。汉堡菜单提供了一个最小的图标,不会干扰网站的设计,并且在空间有限时(如在移动设备上)特别有用。
侧 栏
侧边栏菜单是放置在网站左侧或右侧的垂直菜单。这是一个位于页面侧面的列表。您的侧边栏列表可以是最小的,也可以占据中心位置并成为设计不可或缺的一部分。
页脚导航
您的网站页脚是添加社交媒体链接以及网站访问者可能认为有用的任何其他重要链接的好地方。它还可以重复页面顶部的导航菜单。
网站导航提示
使用站点地图规划导航
确定页面的优先级
坚持惯例
使用粘性菜单
限制项目数
添加搜索栏
清楚地标记您的菜单
将您的 logo 链接回主页
指示用户所在的页面
确保访客可以从任何页面访问任何页面
01. 使用站点地图规划导航
在决定创建网站时,一点前瞻性的思考会大有帮助。阐明您的网站需要哪些功能和页面,以及它们的层次结构应该是什么。您需要关于我们页面、博客或常见问题解答部分吗?这些页面中的哪些页面对您的网站访问者最重要或最有价值?
要开发此层次结构,通常的做法是创建站点地图。站点地图应包括用户界面的所有主要项目 及其中的所有子类别的列表。由于它将构成导航菜单的基础,因此这种做法应该可以帮助您清楚地指出哪些页面对访问者访问最重要。
要创建一个,您可以使用任何您觉得最舒服的方法:手写,以流程图或图表形式呈现,或在电子表格上键入。
02. 优先考虑你的页面
在决定层次结构时,请考虑您希望首先将访客引导到何处。您的目标将取决于您创建的网站类型,但以下是一些需要考虑的准则:
您将如何引导访客通过您的渠道?
哪些信息对您和您的访客最有价值?
访问您的网站的目标是什么,访问者可以在您的导航菜单中轻松实现吗?
这些页面是您主要导航的一部分,应该显示在您网站的主菜单中,以使其尽可能易于访问。
03. 坚持常规
虽然打破常规很诱人,但有时最好坚持最佳实践。毕竟,超链接通常显示为蓝色,或者为什么logo通常会放置在网站的顶角之一,这是有原因的。这些熟悉的细微差别或设计惯例之所以存在,是因为它们有效。
您希望访问者无缝浏览您的网站。因此,虽然我们鼓励让您的品牌形象大放异彩,但在导航方面,强调清晰性而不是审美大胆。
04. 使用粘性菜单
粘性菜单(也称为“固定”或“浮动”菜单)是一种即使访问者向下滚动您的网站也会保持不动的菜单。这对于长滚动页面尤其重要,因为您不希望访问者一直访问您网站的顶部,只是为了访问另一个页面。
还可以选择添加“返回顶部”按钮,以帮助用户节省时间。无论您选择哪种解决方案都取决于您网站的设计和布局,因此在考虑为访问者最方便的导航形式时,请考虑不同的选项。
05. 限制菜单中的项目数量
保持菜单最少,最多有六到七个类别,这样用户就可以更快地处理信息并到达他们想要的页面。这样,用户将能够轻松处理信息并更快地访问他们想要的页面。
如果您的网站包含大量信息,您可以使用下拉菜单将其分解为多个部分。这意味着当访客将鼠标悬停在菜单上的一个项目上时,将出现一个子类别列表,他们可以从中进行选择。
06. 添加搜索栏
对于内容繁重的网站,一个很好的导航做法是添加自定义搜索栏。此工具可以帮助用户无缝、快速地找到他们想要的内容。搜索栏对于上网经验较少的访问者特别有用,因为这是一个熟悉的概念,他们可以直观地理解。
就搜索栏的位置而言,最好将其靠近菜单。就像您的导航菜单一样,当访问者向下滚动您的网站时,它可以保持固定位置,以便轻松访问您网站的页面。在 Thinkart 上,您可以使用 编辑器中嵌入的拖放功能添加搜索栏。
07. 清楚地标记您的菜单
一旦您知道菜单中会出现哪些项目,您应该战略性地考虑如何标记它们。在这种情况下,最优先考虑的是清晰度——所以不要使用创造性的微复制和行业术语。
确保您的菜单文本清晰、描述性强、切中要害,并且不要过于笼统。如果您不完全确定哪种措辞效果更好,您可以尝试两个不同的版本,并通过 在您的网站上执行 A/B 测试来测试它们。
除了确保项目可找到之外,描述性导航菜单还将向 Google 和其他搜索引擎提示您的网站是关于什么主题的。
08. 指示用户所在的页面
没有人喜欢迷失方向——浏览网站时也不例外。您可以通过明确访问者在您的网站上的位置来避免这种情况。
最好也是最复杂的方法之一是向您的网站添加面包屑。 痕迹导航是一种显示用户在页面上相对于网站其余部分的位置的方法,使其易于操作。
痕迹导航通常以一系列水平链接的形式显示在页面顶部,由“大于”(>) 符号分隔,但当然,您可以使用箭头或其他与您网站的视觉语言保持一致的图像。对于内容较长的网站,一个简约的选项是状态栏,它向用户指示他们在浏览特定页面时的位置。
09. 确保访问者可以从任何页面访问任何页面
最后一个提示和经验法则是,访问者应该能够从任何页面导航到他们想要的任何页面。请记住,并非每个人都会从其主页访问您的网站。这意味着他们登陆的任何其他页面都应该连接到你网站的其余部分。
一个简单的解决方案是确保所有页面都可以从菜单访问,并且每个页面都包含一个菜单。为了使事情更加直观,请保持每个页面上的网站菜单设计一致,将其放置在完全相同的位置以避免混淆。
专业提示:在考虑消化冗长文本页面(例如长篇博客文章或登录页面)的用户体验时,锚链接是您武器库中的另一个方便的导航工具。
这些链接位于导航菜单之外,通常位于页面顶部,以帮助访问者跳过不相关的内容,即他们最感兴趣的部分。