设置页章节边界、表单分步、列表组分界、危险区前——留白不够切断连续流时用线强化。
产品与设计 · 排版与视觉样式
分隔线Divider
分隔线强化关系不创造关系:留白和标题先分组,仅在需要切断连续内容流(如危险区前)时用内缩或贯通线补充。
分隔线实验台:先留白,再决定是否画线
为账户设置卡选分隔方案。切模式、调间距、开关危险区隔离,看设置卡物件上的分隔线如何变化——通过的条件是危险区被单独隔离。
任务:为这张账户设置卡选分隔方案。切模式、调间距、开关危险区隔离——结果长在设置卡物件上:分隔线有无、贯通或内缩、上下间距、危险区红线都会直接呈现。
账户设置 · 预览✗ 未通过
个人资料
姓名 · 头像 · 邮箱
通知偏好
邮件 · 推送 · 勿扰
危险区
删除账户操作不可恢复。
删除账户模式 仅留白间距 紧凑危险区未隔离
✗ 未通过未通过:组间仅靠留白且危险区未隔离,实际边界弱。下一步:先开启危险区隔离,再选内缩或贯通线。
面板里测到的结论怎么用
刚才的通过/接近/未通过,对应三条可观察证据:留白先分组、模式决定线形、危险区必须强分隔。
- 分隔线强化关系,不创造关系:留白、标题和对齐先把分组讲清,线只补充边界。
- 内缩线(两侧留出 16px)克制现代,适合章节弱分隔;贯通线横跨全宽,是更强的切断。
- 分隔线本身不创造间距:上下留白够大才有边界感,紧凑时间距要先服务可读,而不是堆线。
- 危险区、不可逆操作前必须单独强分隔(贯通线 + 语义色),不能只靠留白暗示。
- 装饰线对读屏隐藏(aria-hidden);表达章节边界的贯通线用 hr / role="separator" 并配合标题。
什么时候专门画分隔线
看到连续内容流被粘在一起、或需要把危险区和常规区分开时画线;信息密度本身高、靠间距和标题已清楚时不要加。
每个字段下都画线、卡片内已经用留白分组、密集表格行间——多画一层线反而淹没层级。
怎么从内容走到分隔判断
从这一页的真实元素走到是否画线、画哪种线的最短路径。
- 列出这一页所有元素,按「服务同一任务」分成几个组,先用留白和标题分组。
- 仅在不画线就分不清组与组的边界时,加内缩细线;需要更强切断时再升级到贯通线。
- 危险区、不可逆操作前单独用贯通线 + 语义色,并配合标题,不被其他线淹没。
- 装饰线 aria-hidden,语义分隔用 hr / separator 并配可理解的上下文;暗色模式单独验收对比度。
同一张设置卡:正例与反例
目标都是让用户看清常规组和危险区。差异只在分隔线是服务边界,还是被当成「都画一条」的装饰。
个人资料、通知两组之间用内缩细线补充,危险区前用贯通红线单独隔离——线少而准,主次和危险边界一眼可读。
差异:分隔线只用在关系最需要被切断处(危险区前),其余靠留白。每个字段下都画贯通线:姓名、邮箱、通知开关、删除账户全部被横线切开,眼睛追不到组,危险区反而被淹没。
差异:只改一处——把「都画线」当解法,结果层级靠线反而看不清。快速自测
一张设置页有「资料」「通知」两组常规内容,最末尾是「删除账户」危险操作。下面哪种分隔判断是对的?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。