设置面板设计
组织偏好、即时 vs 应用时存、搜索设置模式。
UX 模式进阶
为什么
设置面板长成 100 选项迷宫，用户找不到所需切换。好分组、低风险偏好即时应用、搜索设置框使其任何规模可用。
Nielsen Norman Group 研究显示用户在离开前平均停留 10-15 秒。清晰的视觉层次和渐进式披露将任务完成率提高 40-60%。
何时使用
任何 >10 用户可配置偏好的应用：通知、外观、隐私、集成。即使 10 设置也受益于分组而非平列表。
如何做
1. 按意图分组 — 账户、外观、通知、隐私、集成；非按特性团队
2. 侧栏导航 — 左侧栏分组、右窗选项；扩到 100+ 设置
3. 即时应用 — 切换（暗模式、通知）即时应用；无保存按钮
4. 应用时存 — 破坏性或批量变更（删账户、重置数据）需确认
5. 搜索设置 — 顶搜索框跨所有组过滤；Cmd+K 可路由到此
6. 默认 — 发合理默认；绝不让用户首用前配置
7. 描述 — 每切换有一行描述；用户不应猜其作用
8. 重置 — 每区段 "重置为默认"；用户无惧实验
示例
function Settings() {
return (
<div className="grid grid-cols-[200px_1fr]">
<nav>
<NavLink to="account">账户</NavLink>
<NavLink to="appearance">外观</NavLink>
<NavLink to="notifications">通知</NavLink>
<NavLink to="privacy">隐私</NavLink>
</nav>
<main>
<SearchSettings placeholder="搜索设置…" /> {/* 跨所有组过滤 */}
<Routes>
<Route path="appearance" element={<Appearance />} />
{/* … */}
</Routes>
</main>
</div>
);
}
function Appearance() {
const [theme, setTheme] = useSetting("theme", "system"); // 即时应用
return (
<section>
<h2>外观</h2>
<RadioGroup value={theme} onChange={setTheme}>
<Radio value="light">浅色 <small>亮室最佳</small></Radio>
<Radio value="dark">深色 <small>夜间最佳</small></Radio>
<Radio value="system">系统 <small>跟随 OS</small></Radio>
</RadioGroup>
<button onClick={resetSection}>重置为默认</button>
</section>
);
}
常见问题
- ⚠50 切换平列表 — 用户滚不尽，找不到所需
- ⚠即时应用偏好用保存按钮 — 用户切暗模式，保存前无反应，困惑
- ⚠无描述 — '启用 X' 无解释，用户不知是否想要
最佳实践
- ✓按用户意图分组（账户、外观、隐私）— 非按拥有特性的团队
- ✓低风险切换即时应用 — 暗模式、通知；无需保存按钮
- ✓加搜索设置框 — 50+ 设置时搜索比任何导航结构快