什么是网站选项卡式导航?

阅读时间:6分钟

选项卡式导航通过可点击的选项卡将内容组织成单个页面上的多个部分。它用于电商和其他网站;目的是让用户可以在页面元素之间切换。

企业使用选项卡式导航来节省屏幕空间。当您有大量信息要呈现并且不想让访问者不知所措/以便他们可以控制页面上看到的内容时,请使用选项卡式导航。

如果正确实现选项卡式导航,可以通过组织内容来影响网站的可访问性。用户在您实施后应该更容易找到内容,因此,您必须在规划阶段仔细考虑布局。

考虑颜色对比度、不同屏幕上的兼容性级别以及用户是否可以使用键盘导航。

专家提示:
• 为您的选项卡提供清晰的标签,以帮助用户查找信息。
• 如果您是电子商务网站,请考虑使用选项卡式导航来显示产品详细信息、评论、送货信息和其他信息。
要点:
  • 虽然选项卡式导航可以有效地组织内容,但请谨慎使用,以免用户不知所措
  • 注重可访问性,使用逻辑排序/清晰的标签
  • 如果空间有限,请考虑使用轮播/折叠面板代替选项卡式导航
Hocoos 小 logo 解答 网站导航

使用网站选项卡式导航的优缺点是什么?

虽然选项卡式导航有利于组织信息和改善用户体验,但您必须了解它何时可能是不利的。

为什么这是一个好主意:

  • 节省空间: 使用选项卡式导航来整合多个页面(例如,在产品页面上)。 

  • 组织: 对相关内容进行分类,以便用户轻松浏览您的网站;重点是不要让用户超负荷。 

  • 以用户为中心: 选项卡式导航可能会让用户更好地控制他们所看到的内容;否则,单个页面可能看起来会不连贯。

  • 熟悉度: 选项卡式导航使用访问者可能已经见过的界面模式。

为什么它并不总是最佳选择:

  • 过载: 如果选项卡太多,您可能会让用户感到困惑;选择性地使用选项卡式导航将阻止这种情况发生。 

  • 移动端设计: 选项卡式导航更适合桌面设备;在移动设备上,探索其他方法可能会带来更好的可用性和参与度。

  • 无障碍访问: 考虑您的选项卡式导航是否易于访问。
专家提示:
使用 Web 内容无障碍指南 (WCAG) 中的信息来设计您的选项卡式导航。 

有哪些有效使用选项卡式导航的网站示例?

使用选项卡式导航的网站示例包括 Gmail、Wikipedia、Notion 和 Amazon。例如,使用 Gmail 时,您会看到用于不同电子邮件类型(收件箱、未读邮件等)的选项卡。 

同时,Amazon 使用选项卡进行产品描述。您还会看到用于以下内容的选项卡式导航 客户评价。Wikipedia 使用选项卡式导航,以便用户在查看页面时可以在不同语言之间切换。

总结

选项卡式导航有助于简化内容和 用户体验 (如果您了解其缺点并考虑它并非最佳选择的情况)。

实施选项卡式导航时,请考虑顺序、标签和可访问性。还要考虑您可以在不使用户信息过载的情况下添加的信息量;如果您需要参考,请查看已使用此元素的网站。

目录

准备好开启您的小型企业之旅了吗?

重要考虑事项: 我们的专家团队提供的信息旨在帮助您大致了解网站创建流程和可用功能。请务必注意,此信息不能替代根据您的具体需求和目标量身定制的专业建议。
阅读我们的 Answers 内容的编辑标准。
我们的目标是帮助您创建一个出色的网站。如果您在构建过程中有任何疑问或需要指导,请随时 联系我们 我们很乐意提供帮助并为您指明正确的方向。