ux-settings

设置技能

此技能的工作方式（请先阅读）

这是一项生成式技能。设置是用户熟悉的模式——其目标是进入设置，修改一项，然后离开——而常见的设计失误却与此背道而驰：平铺直叙地罗列所有选项，把设置页当作无处安放的链接杂物箱，使用充斥技术术语的标签，不显示当前状态，把破坏性操作放在页面顶部，容易误触，以及更改后没有反馈就保存（或用户期待主动点击「保存」时却自动保存）。设置界面包含两个设计问题——如何组织选项以及如何保存更改——二者各有规则。因此，此技能分为以下步骤：

1. 明确规模、平台和敏感程度 — 设置数量、移动端还是 Web，以及是否涉及敏感数据，决定页面结构和保存模式。
2. 应用始终适用的核心原则 — 内容相关、分组清晰、标签通俗、状态可见、破坏性操作置于最后、保存反馈明确。
3. 呈现取决于具体情况的决策（自动保存还是「保存」按钮、搜索、高级设置分区、确认/双重身份验证），并说明利弊。

然后将验证工作交给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit、ux-information-architecture-audit、ux-dark-patterns-audit 和 ux-mobile-responsiveness-audit。

范围与组合（依据 docs/orchestration-policy.md §9）：此技能涵盖设置页及其保存模式，并组合更细分的技能，而不是重新推导其内容。核心子技能（作为页面的一部分构建）：通过 ux-selection-controls 决定控件类型（切换开关、复选框、单选按钮或滑块）。负责子部分的同级技能（交由其处理）：****搜索输入框本身交给 ux-search，通知偏好设置的深度交给 ux-notifications-and-toasts（如果涉及，它们负责相应子部分）。**继承，不要重新生成：**使用现有设计系统时，颜色、字体和间距应取自其设计令牌——只有从头开始设计时才自行设定。

---

步骤 0 — 设计前明确上下文

如果信息未知，请先询问；若在没有答案的情况下继续，请说明你的假设：

• 有多少项设置？ 少数几项只需分组；几十项则需要搜索、高级设置分区，并严格按使用频率排序。五项设置的页面不必加搜索；也不要把五十项设置平铺成一个列表。
• 平台。 移动端会改变用户对保存方式的预期，还会引入设备权限与应用权限的区分（通知/位置开关有一部分由操作系统管理）。macOS 用户通常期待自动保存；Windows 用户则期待显式点击「保存」/「应用」——应符合平台习惯。
• 是否涉及敏感数据？ 电子邮件、密码、账单、支付方式等，修改生效前应要求确认，通常还需要双重身份验证。
• 受众。 普通用户需要通俗易懂的语言；只有面向开发者的产品才能默认用户理解技术术语。

---

始终适用的核心原则（几乎适用于所有设置页）

让用户快速进入并离开

• 这里仅放真正的设置。 设置页用于管理用户偏好（通知、隐私、外观、账户）。不要把它当作无处安放的链接杂物箱——这会让用户困惑并分散注意力。
• 按类别（账户、安全、通知……）或使用场景分组相关设置，并用标题和留白区分——不要做成一长串，也不要堆满分隔线（造成视觉干扰）。
• 按使用频率排序。 用户最常更改的设置放在顶部并清晰可见；不常更改的设置放在下方；仅供高级用户使用的选项应隐藏在「高级」展开项中。
• 确保设置易于找到——放在已知位置（Web 页面角落、移动端底部栏或页面角落），不要深藏在子菜单中。

让每项设置都一目了然

• 使用通俗易懂的标签和简短的辅助说明。 使用目标受众的日常用语（从支持工单、评价和论坛中了解真实用词）；对于不明显的控件，在控件旁边（就近）用简短的一行文字说明，不要让说明文字悬空。
• 在每项设置旁显示当前状态——开关状态／选中值，或当前配置的一行摘要——这样用户无需深入页面就能查看自己的选择。
• 按操作而非状态为开关添加标签——使用“摇动以发送反馈”，而不是“摇动以发送反馈：关闭”；开关的视觉状态会显示开启或关闭。

保护用户

• **将破坏性操作（退出登录、删除／停用帐户）放在底部，**并用颜色、图标或额外留白将其与其他内容区分开——以减少误触。（注意：隐藏退出登录／删除选项来困住用户属于暗黑模式——应将这些选项放在最后，而不是藏起来。→ dark-patterns。）
• 在顶部显示紧急系统提醒——隐私政策变更、试用期即将到期或存储空间不足，都应该用徽标标示并放在顶部，而不是藏在不显眼的一行文字中。

保存后明确反馈

• **通过按钮状态提供清晰的保存反馈：**没有任何更改时禁用“保存”按钮 → 有更改时启用（表示存在未保存的更改）→ 保存过程中显示加载状态 → 保存成功后显示不打扰用户的成功提示或横幅（对于可撤销的更改，提供“撤销”选项）。
• 允许用户不保存就离开。 关闭页面或按“返回”不应悄悄保存更改；如果用户要放弃未保存的敏感编辑，应显示简短、明确的确认对话框。

---

视情况决定的选项（明确展示，不要自动套用）

决策	适用情况	避免／调整的情况	默认建议
自动保存还是显式保存	对于单步操作、容易撤销的控件（独立开关／复选框，立即生效），使用自动保存	涉及多个字段或需要谨慎处理的更改，或敏感数据；这类情况下用户通常希望确认	原子式开关使用自动保存；成组／敏感编辑使用显式保存；遵循平台习惯（macOS 自动保存／Windows 保存）
在设置中搜索	选项超过少数几个，或包含用户需要滚动浏览的子菜单；显示相关结果，而不只是完全匹配的结果（搜索“⁠Siri⁠”→“辅助功能”“通知”…），并提供自动建议	页面较短，分组已足以让所有内容一览无余	出现滚动／子菜单后再添加搜索功能——但应先尽量减少选项数量
高级设置分区（渐进式披露）	同时包含常用选项和面向专家／复杂的选项	将常用设置藏在“高级”选项后面	常用设置始终对所有人可见；用户需要时再显示高级设置——层级深度不应超过用户能顺畅浏览的范围
更改时确认／双重验证	更改敏感数据（电子邮件、密码、账单信息）或执行破坏性操作时	简单且可撤销的开关操作（避免确认疲劳）	敏感／破坏性操作要求确认并进行双重验证；日常开关可直接生效
确认对话框文案	需要确认时，标题应明确说明要执行的操作；按钮文案应清楚明确	使用笼统的“警告”／“确定吗？”；在删除操作旁使用“取消”（含义不明确——取消什么？）	使用具体标题和说明操作的按钮文案（离开、留下、删除）→ 微文案
移动端：深度链接到操作系统设置	权限（通知开／关、位置）由设备的“设置”管理时	假装应用可以完全控制操作系统级权限	在应用内管理能够控制的内容；解释原因，并引导用户前往系统“设置”管理其余内容
默认设置	将默认值设为大多数用户期待的体验（通过调研／卡片分类验证）	根据团队偏好／假设设置默认值	默认值应有调研依据；不确定时，通过卡片分类测试分组和命名

验证结果（编排）

交接时，请使用每个审查视角可安装技能的 name。只有在已安装该技能时才调用；如果未安装，本技能的核心内容已包含这些规则，因此无需等待，直接继续。

生成或修改结果后，应将其交由各审查视角审核，而不是直接宣布完成。这些都是候选审查视角——具体采用方式由 docs/orchestration-policy.md 规定，或者将整个内容交由 ux-design-review 审核。此处，heuristics、microcopy 和 dark-patterns 属于 Tier A（自动运行）；accessibility、aesthetics、information-architecture 和 mobile-responsiveness 属于 Tier B（可选）——如果已有设计系统，则不采用 aesthetics，且 accessibility 的范围缩小为使用层面；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某个特定事项，请遵循其范围。

• ux-heuristics-audit（Tier A）——系统状态可见性（当前值、保存状态）、用户控制与自由（不保存即可离开、撤销）、错误预防（确认敏感或破坏性更改）、优先识别而非回忆。
• ux-accessibility-audit（Tier B — 可选；在设计系统下缩小范围）——控件标签和状态是否会被读出、目标尺寸、焦点顺序、状态指示器的对比度。
• ux-aesthetics-audit（Tier B — 可选；在设计系统下不采用）——分组是否清晰易读、通过留白而非堆砌分隔线来组织内容、层级是否便于扫读而非成为扁平列表。
• ux-microcopy-audit（Tier A）——本技能高度关注文案：使用通俗标签、以操作为导向的切换标签、辅助说明，以及确认对话框的标题和 CTA。
• ux-information-architecture-audit（Tier B — 可选）——分组方式和排序是否符合用户的心智模型（卡片分类证据），以及标签是否能提供明确线索。
• ux-dark-patterns-audit（Tier A）——破坏性操作放在最后，但不能隐藏；取消时不使用羞辱式确认；不设置强制挽留障碍。
• ux-mobile-responsiveness-audit（Tier B — 可选）——触控目标、应用与操作系统的权限划分、保存按钮是否触手可及（固定在底部）、单手操作。

如果审核发现冲突（例如，安全要求对所有操作都进行确认，而快速设置又要求简洁），应回归主要任务来解决：用户是来更改一项设置然后离开的——保护危险操作，其余操作则尽量不添阻碍。

---

常见的建议与禁忌

❌ 不要	✅ 应该
把所有选项堆在一个扁平列表中	按类型/使用场景分组，使用标题和留白
把设置页面当作零散链接的收纳处	只放真正的偏好设置；其他内容放在别处
按内部逻辑排序	按用户更改各项设置的频率排序；将高级选项隐藏
使用技术术语或行话标签	使用符合用户日常表达的通俗词语；在附近添加简短的辅助说明
隐藏当前值	在每项设置旁显示其状态
用“通知：关闭”作为切换标签	使用以操作对象为中心的标签（“邮件通知”）+ 视觉上的开/关状态
把破坏性操作放在顶部，或完全隐藏	放在最后，通过颜色/留白单独区分；保持可见，不要埋起来（→ dark-patterns）
悄无声息地保存，或根本不保存	显示保存状态：禁用 → 可用 → 加载中 → 成功提示（+ 撤销）
对多字段或敏感编辑启用自动保存	对需要审慎处理或敏感的更改使用明确的保存操作；对原子切换项自动保存
在删除对话框中使用“确定吗？”/“取消”	使用明确的标题和含义清晰的操作动词 CTA
在仅有 5 项的页面上添加搜索	先精简选项；出现滚动/子菜单时再添加搜索
未经检查就发布	交由 heuristics + accessibility + aesthetics + microcopy + IA + dark-patterns + mobile-responsiveness 审核

---

资料来源（Uxcel）

• 如何设计实用的设置页面
• 保存更改
• 移动端设置设计