设置列表
Settings List
一屏开关和选项的集合:分组排列,每行左边是名字、右边是开关、箭头或当前值。
全平台通用个人空间内容区组件
大白话说明
设置列表用分组列表承载所有低频选项:同类放一组,组间留白;行右侧按类型放开关(即时生效)、箭头(进二级页)或当前值(点开选择)。退出登录与注销账号沉到最后、标红,与其他行隔开。
什么时候用
选项超过 6 个、且大多低频时统一收进设置页——它就是为「找得到但别碍事」而生的。
什么时候不用
高频功能(每天用的开关)别埋进设置三级页;付费与安全类选项要另做确认,不要和普通开关混排误触。
细节与变体
- 开关行点整行都能切换,不只点那个小开关(费茨定律)
- 带箭头的行必须真的能进二级页,别用箭头装饰开关行
- 注销账号与退出登录分开:前者要二次确认,后者一次点击
配套效果见下方「可用效果」。
配套提示词(点开填空、复制)
可用效果
参考实现(开源)
- Ant Design(蚂蚁) ↗ MIT · 免费(MIT)
国内中后台的事实标准:表格、表单、列表都是行业参照物。
- TDesign(腾讯) ↗ MIT · 免费(MIT)
腾讯出品的全栈设计系统:Web、移动、小程序、桌面都有,国内生态最完整的一套。
- shadcn-admin 后台模板 ↗ MIT · 免费(MIT)
shadcn/ui 拼出的完整后台:仪表盘、设置、聊天页都有,拆开就是现成的页面范式。