网站结构是指网站页面的组织设计。创建网站结构涉及对内容进行组织和分类,以创建易于理解、可访问和可预测的布局。导航应该是直观的,这样用户就可以毫不费力地在任何页面上找到他们正在寻找的内容。
想象一下,走进一家书店,发现所有的书都堆在一个角落里。离开而不是花时间筛选标题以找到您想要的标题是很诱人的。如果书籍按字母顺序或类型组织,您的购物体验会大大改善。
没有清晰结构的网站也会带来类似的问题。糟糕的结构是 34% 的访问者离开网页的原因。在创建您的网站时,请设置一个清晰的结构来帮助人们找到他们需要的内容。
3 种最常见的网站结构类型
线性模型
分层模型
蹼状模型
蹼状模型的名称来自其网状结构。它通过内部链接将登录页面或主页连接到子页面。区别在于这些链接不是分层或嵌套的 — 每个内部链接都随时可用。在网页式模型中,网站访客可以从他们当前所在的页面访问任何其他页面。
此模型最适合页面较少的小型网站。具有几个类别和最小导航栏的 portfolio 就是一个很好的示例。通过每个页面顶部的导航,访问者可以随时在信息之间移动。
构建良好网站结构的 5 个技巧
1. 研究竞争对手
查找与您功能相同且目标受众相同的网站。设身处地为用户着想,体验搜索特定信息的感觉。研究他们的结构,注意他们做的对什么,错什么。
您会发现您的利基市场中的大多数竞争对手都使用相同的结构。例如,在线投资组合通常具有网状模型。根据竞争对手了解访问者可以从您的网站中获得什么有助于您构建以用户为中心的结构。
2. 确定您的结构
写下您的网站应包含的关键类别和子类别。摆在你面前的一切,根据你需要的页面数量来确定哪种模型可能最有效。
对于只有一种产品的电子商务企业,请尝试使用线性模型,让他们专注于您的产品。如果您的投资组合网站有许多类别和示例,请尝试使用分层模型来引导您的用户访问特定部分。
3. 构建用户流程图
4. 使用内部链接
建立结构后,为您的用户设计一种浏览网站的方式。除了导航栏或其他框架外,还可以在子页面上包含有用的链接,以将人们重定向到相关信息。“关于”页面可以链接到产品组合的不同部分,而产品页面可以链接到类似的产品。
预测网站访问者想要去的地方可以改善导航并在整个网站中构建更强大的链接网络。在高价值页面(如“关于”或“服务”页面)上包含内部链接,以引导用户访问相关信息。
5. 创建站点地图
HTML 站点地图是您网站上每个页面的可视化表示。它就像一个目录 — 每个网页及其所属位置都位于一个位置。在构建您的网站并决定哪些页面应该最易于访问时,有组织的站点地图非常方便。如果您发布站点地图页面,用户也可以使用它来浏览您的网站。
激发您灵感的网站结构示例
我们编译了逻辑、分层和网页模型的示例,以帮助您为项目映射网站结构。
Polygram 的线性结构
线性模型对 Polygram 来说是有意义的,因为潜在客户只能采取一种行动:预订位置。这使得线性模型成为具有单一功能的新企业和服务提供商的不错选择。随着服务的扩展,Polygram 可能会添加到此布局中。目前,这旨在将有准备的访客转变为客户。
Webflow Merch Store 的层次结构
由 Daniel Gamble 设计的蹼状结构
Daniel Gamble 的作品集采用极简主义设计和导航菜单,只有五个选项:“About,”、“Process”、“Work”、“Services”和“Contact.”。该网站是一个登陆页面,当用户向下滚动时,它会按顺序显示类别。它可能看起来像一个线性模型,但右上角的主菜单使它成为一个网状模型。
菜单按钮始终位于页面上,因此访客可以导航到不同的部分以了解更多信息。通过一些内部链接的适度菜单,访问者只需点击一下即可获得新事物。这个简单的作品集显示了您需要了解的有关 Daniel 工作的所有信息。

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。