设置界面系统 是做什么的？
目的
设置界面系统提供了一种用于组织、设计和构建用户偏好、账户配置、工作区设置和账单门户的方法论。设置界面经常被忽视，导致视觉结构碎片化、导航模型脱节、响应性差和严重的无障碍障碍。该系统建立了一种标准化的空间组合、导航架构、状态持久化模型（例如，自动保存 vs. 手动批量保存）和视觉启示方法，以降低认知负荷并防止未保存的数据丢失。
用例
- 用户资料与账户： 设计用于更新个人详细信息、安全凭证和偏好的界面。
- SaaS 工作区管理： 组织多租户或团队设置、成员角色、集成和权限门禁。
- 通知配置中心： 为电子邮件、推送和应用内提醒创建精细的矩阵式开关面板。
- 账单与订阅中心： 设计清晰的定价层级、当前计划指标、支付方式和历史发票列表概览。
- 开发者设置： 组织复杂的技术选项，如 API 密钥轮换、Webhook 和环境开关。
何时不应使用
- 隐式同意与隐私栏： 对于 Cookie 接受、Cookie 分类和合规覆盖层，请使用
consent-and-preference-system。 - 一次性入门表单： 对于简单的单列注册步骤或初始调查收集，请使用
form-design-system。 - 低复杂度界面（总共少于5项设置）： 对于极其简单的设置，不要构建嵌套的多页面系统；而是将这些选项直接集成到全局顶部的个人资料下拉菜单或侧边栏页脚中。
输入
- 设置清单： 所有可配置属性的综合目录，按逻辑分组。
- 状态持久化模型： 确定更改是立即应用（自动保存）还是等待确认（批量手动保存）。
- 用户访问角色： 关于谁可以查看/修改特定行的信息（例如，管理员、账单编辑者、查看者）。
- 间距与排版令牌： 现有的设计值（来自
fluid-spacing-system和fluid-typography-system）。
输出
- 设置导航模型： 基于部分密度选择导航布局（侧边栏、子标签页或手风琴）。
- 主从布局规范： 将侧边栏控件映射到其相应活动设置面板的网格/弹性布局组合。
- 状态持久化与变更日志用户体验： 用于保存确认、加载状态和脏状态横幅的视觉和听觉模式。
- 可访问的字段与权限注释： 键盘路径、语义图例标签以及清晰的禁用/只读样式规则。
工作流程
1. 对设置进行分组和优先级排序（聚类）
对设置清单执行卡片分类或主题分组：
- 个人层级： 资料信息、头像、登录详细信息、个人安全（MFA）。
- 组织/工作区层级： 通用工作区名称、成员邀请、角色、全局集成。
- 交付/系统层级： 通知规则、声音提醒、主题选项（深色/浅色模式）。
- 财务层级： 计划层级、信用卡、账单联系人、发票表格。
- 危险区域： 删除账户、停用工作区或转让所有权。
2. 选择布局和导航架构
选择空间导航模式：
- 侧边栏驱动（主从结构）： 推荐用于 B2B SaaS 和密集设置。使用持久的左侧导航列（主）和可滚动包含的右侧内容面板（从）。
- 标签页驱动： 最适合轻量到中度的设置面板（<5个视图）。在主要设置页面标题下方使用水平的二级标签页菜单（使用
tab-ui-system或segmented-control-system）。 - 单页滚动（手风琴）： 最适合简单的移动应用或设置列表，其中子部分可以内联展开/折叠以保持垂直高度可控。
3. 建立保存和反馈模型
为每个设置卡片选择清晰的状态持久化机制：
- 自动保存模式：
- 用于孤立的、低风险的选项（切换深色模式、通知偏好）。
- 反馈： 在切换按钮旁边渲染一个内联旋转加载器和一个清晰的“已保存”文本指示器。指示器应在无活动 1-2 秒后淡出。
- 批量保存模式（脏状态）：
- 用于高风险表单或高度相关的字段（更新密码、账单地址）。
- 反馈： 显示一个浮动、固定位置的页眉或页脚横幅，指示“您有未保存的更改”。
- 操作： 提供两个突出的按钮：“保存更改”（主要行动号召按钮）和“放弃”（次要样式文本）。当有未保存更改时，禁用侧边栏/标签页导航，或者如果用户尝试点击离开，则触发一个“放弃未保存更改？”的确认弹窗。
4. 设计高密度设置矩阵
对于通知中心或细粒度权限表：
- 使用矩阵网格： 将在列中对齐与传递渠道（例如，电子邮件、应用内、短信）对应的复选框或开关，在行中对齐与事件（例如，“在评论中被提及”，“任务已分配”）对应的项。
- 列标题对齐： 保持标题在垂直滚动时固定，以保留上下文。
- 键盘就绪的行高亮： 使用
interactive-state-system样式，聚焦单元格时高亮其对应的行。
5. 构建“危险区域”卡片
不可逆的、破坏性操作需要专用的视觉处理：
- 视觉隔离： 将操作（停用工作区、删除账户）分组到布局最底部的单个卡片中。
- 高对比度危险警报： 使用红色边框、柔和的浅红色警告背景和详细的后果警告。
- 双重确认弹窗： 不要立即触发破坏操作。点击操作按钮必须打开一个弹窗（
overlay-and-dialog-system），要求用户明确输入资源的名称（例如，“delete workspace-name”）以确认。
6. 为移动端响应式设计
- 折叠为线性主列表优先： 在视口宽度低于
768px时，将侧边栏列表和内容详细信息面板折叠成一个线性的主列表。 - 子页面导航： 在移动设备上点击侧边栏选项会打开一个全宽滑动面板，仅包含该详细信息部分，并带有一个固定的“返回设置”面包屑页眉。
- 增大触摸目标： 将复选框、开关和关闭目标扩大到至少
44px x 44px，以适应拇指驱动的移动交互。
决策规则
- 自动保存 vs. 手动保存： 当开关/输入作为即时的用户偏好（如深色主题或提醒声音）时，使用自动保存。当字段按逻辑分组并依赖于验证（如电子邮件/密码更改、账单信息）时，使用手动批量保存，以避免不完整或无效的数据库更新。
- 侧边栏阈值： 对于包含 5 个或更多不同部分的设置套件，使用持久的垂直侧边栏导航。对于 4 个或更少部分，在主要标题下方使用水平的二级标签页栏。
- 未保存更改的退出处理： 如果用户在手动保存视图中修改了输入，并在未保存的情况下点击标签页/导航项，始终阻止导航并触发一个确认对话框：“放弃未保存的更改？”
约束条件
- 无障碍（语义结构）：
- 使用
<fieldset>和<legend>标签对字段进行分组，以确保辅助技术能读取嵌套控件的上下文。 - 表单控件必须使用编程方式关联的标签（
<label for="...">）或aria-labelledby。 - 在内联自动保存指示器上使用
aria-live="polite"，以便屏幕阅读器在后台保存时能收到通知，而不会打断用户的输入焦点。 - 活动焦点指示器必须满足至少
3:1的对比度，并且不能被粘性页眉或未保存更改横幅遮挡（WCAG 2.2 SC 2.4.11）。
- 使用
- 响应性： 多列网格表在小型视口上必须堆叠成清晰的行或变为水平滚动表格。文本元素应使用
word-break: break-word以防止长 API 密钥或 Webhook URL 溢出。 - 视觉层次结构： 将相关的设置分组到视觉上隔离的“卡片”中，并使用标准外边距间距（
--space-l），以降低与无限列表相比的认知负荷。
常见失败模式
- “静默保存失败”： 当自动保存开关在后台失败而未显示错误状态时，用户会认为他们的更改已被记录。
- “意外丢失”： 在未显示确认弹窗或保留状态的情况下，导航离开一个部分填写的设置页面，导致所有更改丢失。
- “神秘设置网格”： 创建大型多维度矩阵（例如，通知）却没有持久的列或行标题，迫使用户用手指在屏幕上对齐项目。
- 危险区域弹窗中的焦点陷阱不良： 让键盘焦点从确认删除弹窗逃逸到背景页面，使用户在尝试输入删除确认信息时意外提交后台设置。
- 占位符标签： 使用输入占位符文本代替真正的、持久的
<label>标签。一旦开始输入，上下文就会丢失。
验证标准
- 对于5个或更多的设置视图，使用持久的垂直侧边栏导航，并在移动屏幕尺寸上优雅地折叠为滑动子视图导航。
- 低风险的偏好开关使用自动保存模式，并附有内联的
aria-live保存状态加载器。 - 关键的、多字段的表单使用手动批量保存模式，并带有持久的“未保存更改”浮动/固定横幅。
- 破坏性操作被分组到视觉上隔离的“危险区域”卡片中，并带有分步确认对话框。
- 对所有输入组使用语义化 HTML（
<fieldset>、<legend>、<label>）。 - 活动焦点指示器满足 WCAG 2.2 对比度规则，并且不被覆盖元素或浮动横幅遮挡。
- 所有文本的对比度满足 WCAG AA 标准（最小 4.5:1，大文本/图标为 3:1）。
- 移动设备上的触摸目标满足主要输入的
44px x 44px目标尺寸。