网站结构中有哪些元素?不同类型的网站结构

您的品牌或企业在网上的形象比以往任何时候都更加重要。虽然您的网站需要通过高质量的视觉内容保持外观,但 31% 的消费者也认为引人入胜的用户体验应该是重中之重。

网站结构中有哪些元素?不同类型的网站结构-南华中天

当您自己创建网站时,打造有影响力的用户体验通常取决于关注网站结构等看不见的细节。虽然一个好的网站结构可能无法被访问者的眼睛识别,但一个不适当的结构无疑会脱颖而出并留下不好的印象。在本文中,我们将定义一个网站结构,解释如何通过用户体验设计的视角来构建它,并讨论当今网站设计和网站模板中使用的最流行的模型。

什么是网站结构?

网站结构是指您网站页面的层次结构、顺序和组织,由所需的用户体验映射。它将您的所有网页与菜单、内部链接和内容的导航系统连接起来。

与您网站的信息架构一起,网站结构是影响访问者用户旅程的重要UX 设计因素。但这也是您作为创建者规划站点布局和内容并确定每个元素应该放置的位置的一种方式。尤其是在设计一个包含多个页面的网站时,一开始您越注意网站的结构,您以后遇到的惊喜就越少。

网站结构中有哪些元素?

定义网站结构可确保访问者在您的网站上发现信息时遵循逻辑用户旅程。该结构必须包括您网站上的所有网页、用于组织这些网页的类别系统以及访问者从一个元素导航到另一个元素的方法。您网站的结构应确保首先发现最重要的信息,同时邀请访问者继续探索以下元素:

  • 类别和子类别
  • 导航
  • 链接系统

类别和子类别

类别为组织网站结构、对具有相似内容的网站页面进行分组以及使访问者更容易找到所需内容奠定了基础。此外,具有大量类别的较大站点应将其内容进一步划分为子类别。

网站结构中有哪些元素?不同类型的网站结构-南华中天

如果您是一家服装零售商,您的电子商务网站主页将以指向主要购物类别的链接开头,例如“鞋子”、“外套”、“裤子”或“配饰”。最终,这些页面会将访问者引导至各个子类别;例如,“凉鞋”将位于“鞋子”下方,而“羊毛”等子类别将位于“外套”下方。

导航

您网站的导航为访问者布置了其结构,充当他们所需内容的方向图。在大多数情况下,这从网站菜单开始——可能是顶部的经典标题菜单或更简约的汉堡菜单。

由于导航的目的是引导访问者,因此您的主页应该清楚地显示他们在您网站上寻找的页面和类别。从那里,子类别也应该是可发现的,无论是使用下拉菜单还是使用其他方式显示子类别页面的链接。此外,您需要确保网站的导航能够将访问者引导至与您的品牌相关的其他重要网页,例如“关于我们”页面或“联系”页面。

链接系统

实施经过深思熟虑的链接系统可确保您的用户正确浏览您的网站。根据您使用的网站结构类型,访问者对您的链接系统的依赖程度会有所不同。除了网站菜单中的链接外,结构还可以利用以下类型的链接来提升用户体验:

  • CTA或号召性用语是战略性放置的链接,可将访​​问者带到直接目标,鼓励他们采取行动。无论是指向“注册”还是“购买”的链接,CTA 对在您的网站上有特定目标的访问者都非常有帮助。使用粗体文本、诱人的缩略图或按钮设计来展示它们。
  • 内部链接是指网站内连接到同一网站其他页面的那些链接。每个网站的网页之间自然都有内部链接,是否以最适合访问者的方式组织完全取决于您。有时,企业会将其页面分组为类别“集群”,以此为指导。拥有内部链接系统也恰好是一个强大的 SEO 最佳实践。由于它反映在您的站点地图中,因此 Google 机器人会看到为以正确的顺序向访问者提供最相关的信息所做的努力。
  • 上下文链接将访问者带到您自己网站网页之外的相关内容,例如其他企业的产品页面、博客文章、资源或新闻。

网站结构中有哪些元素?不同类型的网站结构-南华中天

不同类型的网站结构

看看下面不同类型的网站结构和示例。你注意到什么模式?各有什么特点?哪种类型的用户将从这些结构中获益最多?掌握四种最基本的结构及其使用方式将有助于您更好地了解如何构建自己的设计或使用哪种网站模板:

  • 分层模型
  • 顺序(又名线性)模型
  • 矩阵模型
  • 数据库模型

分层模型

最流行的网站结构类型是分层模型,其中主页作为起点,根据重要性分为不同的类别和页面。由于用途广泛,这种结构适用于各种类型的网站——从个人服务网站到在线投资组合。

首先,根据重要性对内容进行排序。大多数时候,这意味着确保用户在发现更多细节之前首先获得一般信息。要起草和测试您的层次结构,请使用线框和卡片分类练习。然后,一旦您创建并映射了页面,就可以使用互连系统和导航菜单在您的网站上实现此层次结构。

在下面的示例中,我们在Steven Popovich的在线作品集中看到了分层网站结构的完美表现。最终,它促进了用户通过网站上不同级别的信息和操作的旅程——从主页上的“美容”和“广告”等更大的类别,访问者在搜索特定项目和品牌时获得更详细的信息。

顺序(又名线性)模型

连续的 Web 结构会引导用户逐步实现他们的目标,无论是缩小类别、指导他们的搜索过程还是帮助他们找到注册表单。这种基本的、低维护的结构适合内容和页面最少的网站,例如小型企业网站或在线投资组合。

网站结构中有哪些元素?不同类型的网站结构-南华中天

顺序网站结构从您的主页或着陆页开始,其中列出了许多页面或类别。访问者遵循线性流程,引导他们通过父页面的旅程,最终将他们带到他们想要的内容。

在下面的例子中,Aly Gray设计了她的健身网站来引导用户完成一个连续的旅程。通过在她的主页上显示四种类型的培训包,访问者可以选择最初听起来最好的一种,然后一页一页地开始注册过程。

矩阵模型

虽然矩阵是最古老的网站结构模型之一,但它在今天仍然很流行。为了让访问者享受没有严格类别的浏览,遵循矩阵模型的网站结构没有考虑严格的用户旅程。这听起来可能很混乱,但对于访问者来说,这意味着完全的自由和访问您网站所有内容的多个入口点。

虽然类别、子类别和单个页面仍应存在于矩阵模型中,但您不必为用户安排它们的出现顺序。相反,该网站强大的链接和对导航功能(如网站菜单或搜索栏)的重要性不断提高,服务于用户体验。

矩阵网站结构的一些最好的例子是在线报纸、在线资源或大型电子商务网站,这些网站的各种内容相互关联。下面,Tach Clothing使用矩阵模型,通过在搜索栏中添加面包屑和建议的“热门产品”下拉列表,将访问者带到他们当前的旅程之外——尽管会分散注意力。

数据库模型

遵循数据库模型的网站结构通常会创建动态和个性化的体验。按照这种模式访问网站的访问者通常需要输入他们自己的个人详细信息、查询或偏好。从那里,该网站将向他们展示存储在网页数据库中的相关内容,如个人详细信息或产品页面。

要自行完成此操作,您需要使用允许您创建内部数据库或与外部数据库集成的网站软件。使用自下而上的方法来组织您的内容并勾勒出最具活力的设计以将其展示给访问者。

网站结构中有哪些元素?不同类型的网站结构-南华中天

Code Zero Yachts的商业网站(如下所示)使用Velo集成了一个复杂的数据系统,以帮助访问者找到在特定时间、价格范围和位置可用的游艇。

提示:如果在低代码到无代码的范围内,您处于无代码方面,请尝试使用这种简单的方法在您的 Wix 站点上显示数据库集合中的内容。

如何处理您的网站结构

准备好设计网站后,请决定是使用自上而下还是自下而上的网站结构来组织内容。自上而下的方法从根据您网站的一般主题概述类别层次结构开始,而自下而上的方法从最不重要的子类别开始,一直到更一般的类别和内容。

如果您从模板开始,您可能无需考虑创建网站结构——只需寻找适合您内容的结构即可。如果您要从头开始制作网站,在线框图和起草设计架构等阶段使用UX 工具对于启动此过程非常有帮助。

为什么关注您的网站结构很重要?

为了让访问者在您的网站上实现目标,他们必须按特定顺序点击元素。据GoodFirms称,34.6% 的在线访问者会离开内容结构不佳的网站。无论您是从网站模板开始,还是从头开始进行网页设计,您都有责任确保访问者可以在您的网站上准确找到他们需要的内容,确保可靠的网站结构来支持他们的用户体验。

但是所有这些都在谈论您的结构将如何使用户受益,作为其创建者的您呢?从商业角度来看,稳固的网站结构也值得付出努力。拥有易于使用的网站无疑会让客户满意。通过正确的策略,您的结构将通过帮助客户购买和加快结帐或联系流程来支持您的业务。