coastdigitalgroup/coastai-skills

侧边栏导航系统

目的

侧边栏导航系统提供了一种设计持久化垂直导航结构的方法。与水平导航栏不同，侧边栏针对高密度信息架构进行了优化，支持深层嵌套、次要实用操作和工作区切换。该系统确保用户能够以最小的认知负荷浏览复杂的应用程序，同时在层次化环境中保持对其当前位置的清晰认知。

用例

• SaaS 仪表盘： 管理多个工作区、工具和数据视图。
• 管理后台： 组织大量的管理功能和系统设置。
• 文档站点： 浏览文章、章节和 API 参考的深层层次结构。
• 内部工具： 构建复杂的工作流和数据录入模块。
• 内容管理系统 (CMS)： 在页面编辑、媒体库和用户权限之间切换。

何时不使用

• 营销落地页： 简单的水平导航栏更适合专注于转化的导航。
• 简单博客站点： 面包屑导航和顶部链接足以提供寻路功能。
• 移动优先的消费级应用： 底部标签栏更适合主要拇指区域交互。
• 沉浸式叙事网站： 持久的 UI 元素可能会分散对故事讲述体验的注意力。

输入

1. 信息架构 (IA)： 所有页面和工具的映射，按功能关系分组。
2. 用户上下文： 识别不同的用户角色及其执行的主要任务。
3. 工作区层级： 确定应用是否需要在不同账户或项目之间切换。
4. 品牌样式令牌： 来自现有设计系统的颜色、排版和间距。
5. 交互组件清单： 标准化的图标、徽章（用于通知）和按钮。

输出

1. 侧边栏解剖规范： 定义的区域（品牌区、工作区切换器、主导航、次级导航、用户页脚）。
2. 交互矩阵： 悬停、聚焦、激活状态以及嵌套（展开/折叠）的行为。
3. 响应式映射： 侧边栏如何转换的规则（例如，固定 -> 折叠导轨 -> 移动抽屉）。
4. 状态规范： 为不同导航级别和通知指示器定义的视觉处理方式。

工作流

1. 定义导航层级

将信息架构组织成垂直层次结构：

• 第 1 级（直接）： 核心部分，始终在主导航列表中可见。
• 第 2 级（嵌套）： 通过展开或下钻显示的子部分。
• 全局操作： 如“设置”、“帮助”或“通知”等次要实用程序，通常放在底部。

2. 建立视觉结构

将侧边栏划分为功能区域：

• 头部： 品牌标志和工作区/账户切换器。
• 主体（可滚动）： 主导航列表。
• 页脚（固定）： 用户资料、系统设置和折叠/展开触发器。

3. 设计嵌套模式

选择处理深层层次结构的方式：

• 手风琴式： 展开的部分会向下推其他项目。最适合 2 层。
• 浮出式： 悬停/点击时，子菜单出现在侧边栏旁边。最适合窄“导轨”侧边栏。
• 下钻式： 整个侧边栏视图切换到子层视图。最适合非常深的结构。

4. 创建状态矩阵

应用一致的视觉反馈（来自 interactive-state-system）：

• 激活状态： 使用高对比度的指示器（例如，彩色条或背景变化）来显示当前页面。
• 悬停/聚焦： 微妙的背景变化，以表示可交互性。
• 通知徽章： 使用 badge-and-tag-system 显示未读项或状态。

5. 规划响应式适配

跨断点映射侧边栏的行为：

• 桌面端 (>1200px)： 固定、宽侧边栏 (240px-280px)。
• 平板 (768px-1200px)： 折叠的“导轨”，仅显示图标，悬停/点击时展开。
• 移动端 (<768px)： 默认隐藏，通过汉堡图标触发，显示为全屏抽屉。当抽屉打开时，对主要内容应用 inert 属性（或等效措施），这样键盘和屏幕阅读器用户就无法 Tab 到隐藏在它后面的内容。

决策规则

• “七项”规则： 将顶层组限制为七个或更少，以确保无需滚动即可轻松浏览。
• 图标要求： 始终为第 1 级项目使用图标。图标提供视觉锚点，有助于识别，尤其是在折叠状态下。
• 标签持久性： 在桌面视图中，除非用户明确折叠侧边栏，否则不应隐藏标签。
• 视觉区分： 确保第 2 级项目在视觉上与第 1 级不同（例如，通过缩进、更小的字体或更淡的颜色）。
• 活动页面可见性： 活动页面指示器必须是侧边栏中最突出的视觉状态。

约束条件

• 可访问性： 侧边栏必须用 <nav> 包裹，并具有唯一的 aria-label。对嵌套项目使用 aria-expanded。当侧边栏或其浮出菜单覆盖内容时，确保当前聚焦的项目永远不会完全隐藏在另一层后面 (WCAG 2.2, 2.4.11 焦点未被遮挡)。
• 响应式： 侧边栏不得在桌面上覆盖内容；它应该推开或压缩主内容区域。
• 视觉层次： 品牌和工作区切换器必须在顶部；用户设置和帮助必须在底部。
• 触摸目标： 所有链接和展开触发器必须至少满足 WCAG 2.2 24x24px 的最小目标尺寸 (2.5.8)；对于主要导航项目，考虑到它们的使用频率，首选 44x44px。

常见失败模式

• 滚动内滚动： 可滚动的侧边栏和可滚动的内容区域争抢用户焦点，造成“滚动劫持”的感觉。
• “不可见的”激活状态： 当前页面指示器过于微妙，以至于用户迷失了位置。
• 过度嵌套： 深度超过 3 层，使导航感觉像文件系统而不是应用程序。
• 隐藏的折叠触发器： 将“关闭”或“折叠”按钮隐藏到用户找不到的地方。
• 无标签图标： 在主导航视图中使用不带文本标签的图标，依赖“神秘肉”导航。

验证标准

• 侧边栏结构清晰，分为头部、主体、页脚区域。
• 激活状态明显区别于悬停状态和默认状态。
• 所有第 1 级项目都有独特且可识别的图标。
• 嵌套项目在视觉上从属于其父项目。
• 侧边栏完全可通过键盘导航（Tab 和方向键）。
• 定义了移动端和平板端的响应状态，并且功能正常。
• 正确实现了 ARIA 地标和状态。
• 文本和指示器的对比度满足 WCAG AA 标准 (4.5:1)。
• 触摸目标至少满足 WCAG 2.2 24x24px 的最小尺寸要求。
• 移动端抽屉在打开时对背景内容应用了 inert（或等效措施）。