手风琴式UI系统 是做什么的？
目的
手风琴式UI系统技能提供了一套设计方法，用于构建手风琴组件——即可以堆叠显示并能展开以显示关联内容的标题。该模式对于渐进式披露至关重要，使用户能够浏览高级信息并选择要查看的详细内容。系统化的手风琴组件设计可以降低认知负荷，同时不会隐藏关键信息或造成无障碍访问障碍。
使用场景
- 常见问题板块： 将一长串问题和答案整理成易于浏览的列表。
- 移动端菜单： 折叠次要导航项以节省垂直空间。
- 复杂表单： 将相关表单字段分组到可管理的可切换区域中。
- 产品详情： 在电商页面上隐藏技术规格、配送信息或评论。
- 筛选功能： 在发现侧边栏中管理多个分面分组。
不适合使用的情况
- 内容量少： 如果总内容很简短，将其隐藏在点击后面会增加不必要的交互成本。
- 关键说明： 如果用户必须阅读信息才能继续（例如，法律警告或“操作指南”步骤），请不要将其隐藏。
- 搜索密集型页面： 如果用户需要频繁使用浏览器的“查找”（Cmd/Ctrl+F）功能；默认情况下，隐藏的手风琴内容通常不可搜索。
- 单一项目披露： 如果只有一个内容需要切换，请使用简单的“显示更多”链接或单个披露组件。
输入
- 内容清单： 标题及其对应的展开内容的列表。
- 展开逻辑： 一次只允许打开一个项目（互斥模式），还是允许多个项目同时打开？
- 触发上下文： 手风琴组件将放在哪里？（例如，主要内容区域、侧边栏或移动端抽屉）。
- 现有系统： 来自父设计系统的流体间距和排版比例。
输出
- 手风琴结构规格： 标题、图标、面板和间距的可视化定义。
- 交互规范： 展开、焦点状态和过渡效果的行为。
- 无障碍蓝图： ARIA角色、状态和键盘映射。
- 响应式策略： 手风琴组件如何适应窄视口的规则。
工作流
1. 构建内容结构
定义手风琴项目的标准部分：
- 标题（触发器）： 包含标题的可点击区域。
- 图标（提示）： 通常是箭头或加/减号，表示可展开性。
- 面板： 容纳隐藏内容的容器。
- 分组： 管理多个项目之间关系的父容器。
2. 建立视觉提示
应用visual-hierarchy-system确保手风琴组件易于识别：
- 状态指示器： 使用图标（箭头）在手风琴打开时旋转或改变。
- 分隔： 使用边框、背景颜色变化或垂直间距（来自
fluid-spacing-system）来区分项目。 - 标题： 确保标题文本看起来可交互（更粗的字体或不同的颜色）。
3. 定义交互逻辑
选择行为模式：
- 互斥（单开）： 打开一个项目会自动关闭其他项目。最适合集中注意力和减少页面长度。
- 多开： 多个项目可以保持打开状态。最适合用户需要跨部分比较信息的情况。
- 默认状态： 确定第一个项目是否默认打开，以提示其功能。
4. 优化间距和内容
对内部应用fluid-spacing-system：
- 标题内边距： 确保触摸目标至少为24x24px（WCAG 2.2 SC 2.5.8最小值）；在布局允许的情况下，建议使用44x44px以提供舒适的触摸体验。
- 面板内边距： 使用内部内边距在标题及其内容之间建立清晰的关联。
- 过渡效果： 使用微妙的高度或透明度过渡（200-300ms）来柔化内容出现时的“跳跃”。
5. 验证无障碍访问和响应式设计
- 键盘： 用户必须能够使用
Tab键切换到标题，并使用Enter/空格键进行切换，遵循ARIA APG手风琴模式。 - ARIA： 将每个触发器包裹在标题元素中（
<h3><button aria-expanded="true/false" aria-controls="panel-id">...</button></h3>），并为面板设置role="region"，当面板包含大量内容时，使用aria-labelledby指向触发器。 - 移动端： 确保长标题优雅换行，不会与图标重叠。
决策规则
- 箭头规则： 始终在标题右侧包含一个视觉指示器（如箭头）。箭头在关闭状态下应指向下方，在打开状态下应指向上方。
- 第一项规则： 如果第一个手风琴项目包含最重要或最常被请求的信息，则默认将其打开。
- 文本截断： 永远不要截断手风琴标题。如果标题很长，允许其折行显示以确保清晰。
- 对齐： 保持展开/收起触发图标一致（通常靠右对齐），以创建可预测的扫描路径。
约束条件
- 无障碍访问： 标题必须使用语义化标题标签（H2-H4），其中包含一个
<button>用于键盘访问；满足WCAG 2.2 SC 2.5.8最小目标尺寸（24x24px）。 - 响应式设计： 手风琴宽度应为流体（父级的100%）。面板内容必须完全响应。
- 层级结构： 手风琴标题在视觉上不应比页面H1更突出。
常见失败模式
- 神秘肉触发器： 看起来像普通文本的手风琴标题，让用户不知道可以点击。
- 内容跳跃： 快速、生硬的过渡效果会扰乱用户的滚动位置。
- 缺少焦点状态： 忘记为键盘用户设计可见的焦点环。
- 面板内容过满： 在面板中放置太多复杂的交互式内容（如其他手风琴组件），导致“嵌套式混乱”。
- 不可访问的ARIA： 未能以编程方式更新
aria-expanded状态。
验证标准
- 每个手风琴项目都有清晰的视觉指示器（例如，箭头）。
- 标题可通过键盘访问（基于按钮），并具有可见的焦点状态。
-
aria-expanded和aria-controls已正确定义。 - 内部间距遵循流体间距系统。
- 互斥/多开逻辑适合内容类型。
- 手风琴过渡流畅，不会破坏布局。
- 触摸目标满足WCAG 2.2最小24x24px（建议44x44px）。