跳到主要内容
Termlib

布局模式 · 特定页面

设置页

Settings Page

也叫：偏好设置、设置中心、账户设置、Preferences

把大量互相独立的选项按类别分组，左侧或顶部切换分类，每项配说明文字，用户随时回来修改其中某一项。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个设置页：左侧 200px 分类导航「个人资料、账号与安全、通知、外观」，右侧显示当前分类；每个设置项一行，左边是名称和一行灰色说明，右边是开关或下拉，改完立即保存并弹出「已保存」轻提示；修改密码点击后弹窗处理。页面最底部单独放「危险操作」区，注销账号需要二次确认。

发给

01判断

你的内容是这样吗？

对照两列，确认设置页是不是你要找的。

符合这些情况，用设置页

  • 选项很多、彼此独立，可以按类别分组时
  • 用户会不定期回来只修改其中一两项时
  • 大部分选项是开关、单选、下拉这类简单控件时

是这些情况，换成别的

  • 需要一次性填写并统一提交的一组字段时

    改用单页表单

  • 操作有明确先后顺序、需要引导用户走完时

    改用分步向导

  • 选项只有两三个、在当前页面的弹窗里就能放下时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    所有设置项平铺在一页，没有分类，找一项要翻很久

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    开关改完没有任何反馈，用户不确定有没有保存

  3. 03

    有的项即时生效，有的要点底部「保存」才生效，规则不统一

  4. 04

    注销账号这类危险操作和普通选项混在一起，也没有二次确认

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

左侧（或顶部）是设置分类导航，右侧是分组的设置项列表，每项一行，左边名称和说明、右边控件；底部可有单独的危险操作区。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1左侧有「个人资料」「通知」这类分类导航
  2. 2右侧一行行设置项，每行右端是开关、下拉或按钮
  3. 3设置项名称下方有灰色小字说明

04解释

详细解释

设置页用来集中管理账户和产品的各种选项，比如「个人资料、账号与安全、通知、外观」。选项较多时，左侧放分类导航（或顶部用标签页），右侧显示当前分类下的设置项；每一项占一行，左边是名称和一行灰色说明，右边是开关、下拉或「修改」按钮。

它和单页表单最大的区别是：设置项彼此独立，用户通常只是回来改其中一两项，而不是从头填到尾。所以开关类选项一般改完立即生效，并用轻提示告知「已保存」；修改密码、换绑手机这类敏感操作才单独弹窗确认。

它和分步向导也不同：向导是第一次按顺序走一遍，设置页是随时、任意顺序地回来调整。注销账号、删除数据这类危险操作要放在页面最底部单独分区，并做二次确认。

开发者信息
术语 ID
layout-settings
DOM 选择器
没有专门的选择器，靠下面的关键词、组件名和结构识别。
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • settings
  • settings-page
  • preferences
  • account-settings
  • profile-settings
  • settings-layout
  • settings-container
  • user-settings
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Settings
  • SettingsPage
  • SettingsLayout
  • Preferences
  • AccountSettings
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30