Generated with sparks and insights from 9 sources

img6

img7

img8

img9

img10

img11

Introduction

  • 定义大型网站: 大型网站通常由综合服务和产品的大型组织所有，服务多样化用户。

  • 导航挑战: 传统导航在处理深层级和多入口时存在困难。

  • 解决方案: 包括去掉导航、拆分成多个小站、使用面包屑导航等。

  • 去掉导航: 通过标签和搜索功能让用户自行导航。

  • 拆分成多个小站: 例如BBC将其网站分成新闻、体育等多个小站。

  • 面包屑导航: 例如Gov.uk使用面包屑导航帮助用户识别层级。

定义大型网站 [1]

  • 综合服务和产品: 大型网站通常由提供多种服务和产品的大型组织所有。

  • 多样化用户: 这些网站服务于不同类型的用户群体。

  • 典型组织: 包括BBC、微软、政府部门、高等教育机构和大型慈善组织。

  • 复杂结构: 这些网站通常庞大，层级多而深。

  • 多个小网站: 大型网站往往由多个小网站和频道组成。

  • 多入口点: 这些网站有许多入口，迎合不同的受众。

img6

img7

img8

导航挑战 [1]

  • 深层级问题: 传统导航在处理超过三层的层级时变得困难。

  • 多入口问题: 用户从不同入口进入网站时，传统导航容易让用户感到困惑。

  • 内容与导航冲突: 在大型网站中，导航可能占据过多页面空间，影响内容展示。

  • 用户定位困难: 用户在深层级页面时，难以理解当前页面在整个网站中的位置。

  • 面包屑导航: 虽然面包屑导航可以帮助，但成本较高。

  • 导航标签混淆: 相同的导航标签在不同上下文中可能指向不同内容，增加用户困惑。

去掉导航 [1]

  • 方法介绍: 通过标签和搜索功能让用户自行导航。

  • 独立页面: 每个页面成为独立文档，并标记适当的关键词数据。

  • 优点: 支持无限大的网站，适合从深链接到达的用户。

  • 灵活动态: 页面间关系更加灵活，能轻松容纳页面增删变动。

  • 局限: 依赖文档标签完善和强大的搜索功能，难以在大型网站中实现。

  • 示例: 06年拉斯的演讲中首次提出这种方法。

img6

img7

拆分成多个小站 [1]

  • 方法介绍: 将大型网站拆分成多个更小的更容易管理的小站。

  • 示例: BBC将其网站分成新闻、体育、电视、广播等多个小站。

  • 独立导航: 每个小站都有独立的导航，避免大型网站的导航问题。

  • 一致性: BBC在界面上采用顶部导航保持一致，避免用户在各次级站点间切换时感觉脱节。

  • 设计语言: 各小站虽然外观多样，但采用一致的设计语言。

  • 用户体验: 确保稳固的用户体验，同时适应不同的受众和主题。

面包屑导航 [1]

  • 方法介绍: 使用面包屑导航帮助用户识别层级。

  • 示例: Gov.uk采用面包屑导航，抛弃传统导航。

  • 优点: 最小化导航占地空间，给予子内容更多描述。

  • 移动适配: 适合移动设备，简洁易懂。

  • 用户定位: 突出的面包屑让用户对当前所处位置更清楚。

  • 局限: 依赖面包屑和页面里的子页面链接，用户无法感知同级页面和网站全貌。

img6

img7

混合方案 [1]

  • 方法介绍: 结合面包屑导航和传统导航。

  • 示例: BBC体育站采用垂直面包屑导航，辅以常显顶层导航条。

  • 优点: 集中导航位置，减少空间占用，给予用户网站结构概览。

  • 用户体验: 建立简单强大的用户体验，适合需要多部分信息的用户。

  • 同级显示: 垂直面包屑导航增加飞出菜单，显示同级内容。

  • 局限: 需要进一步测试，特别是在移动设备上的适用性。

img6

Related Videos

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "[\u7f51\u7ad9\u5f00\u53d1\u5165\u95e8\u6307\u535718] \u4f7f\u7528a\u6807\u7b7e\u5b9e\u73b0\u9875\u9762\u5bfc\u822a\u4e0e\u8df3\u8f6c", "link": "https://www.youtube.com/watch?v=wK4s2eB4jVA", "channel": { "name": ""}, "published_date": "Oct 26, 2023", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "Part 4 - \u6709\u6548\u5229\u7528\u9762\u5305\u5c51\u5bfc\u822a\u6210\u4e3a\u7f51\u7ad9\u7528\u6237\u4f53\u9a8c\u7684\u9ec4\u91d1\u94a5\u5319", "link": "https://www.youtube.com/watch?v=OiJL52hmyJo", "channel": { "name": ""}, "published_date": "Sep 19, 2023", "length": "" }</div>