UI 中的分割线颜色:为什么分割线不该是 #000000
列表行之间的纯黑线,比它分隔的文字还吵。浅色模式用 #C6C6C8,深色模式用 #38383A,1 px 粗,缩进到文字起点,而且在画线之前,先试试留白。
正确的分割线颜色是柔和的浅灰,比如 #C6C6C8,画成 1 px 粗,并缩进到文字起点,而不是一条纯黑线。分割线的作用是分隔行,而黑线会变成列表里最吵的东西。下面是四个修正方法,附带浅色和深色界面的取值。
为什么黑色分割线会喊叫
没人会故意选黑色分割线。随手画的线默认就是 #000000,然后就一直这样,直到有人去改它。
问题在于对比度。白底上的纯黑是屏幕能呈现的最强搭配,而你的行文字通常比它柔和一点。于是线比文字更抢眼。眼睛先读到线,然后才去找线之间的内容。
分割线是提示,不是功能。它的任务是在需要时能被眼睛找到,其余时间被忽略。
修正 1:把线变浅
#000000 的线
#C6C6C8 的线
iOS 在白底上用 #C6C6C8 绘制列表分隔线,这是半透明的系统分隔线颜色落在白色背景上的结果。Material 3 也落在相同的位置,用的是 #CAC4D0,即它的 outline variant 令牌,粗 1 dp。
黑线
iOS 分隔线
Material 3 分割线
白底上 12% 黑
如果你的背景不是纯白,就用透明度值而不是固定的灰。Material 的指南把分割线描述为:浅色主题用 12% 黑,深色主题用 12% 白。12% 的 #000000 叠在白色上呈现为 #E0E0E0,叠在有色表面上则带着那层颜色,所以线看起来永远不会像是贴上去的。
同样的修正也适用于列表之外:表格行线、卡片底部、标题下的线,以及菜单分组之间的线。
修正 2:缩进到文字起点
通栏
从文字处开始
打开 iPhone 的设置看一眼。线是从标签开始的,不是从图标下面开始。Material 说的是同一件事:缩进分割线用来分隔相关内容,并且与头像之类的锚定元素搭配。
这段缩进正是把图标和它所在的行绑在一起的东西。图标下的通栏线会把它割开,列表就读成了条纹而不是行。
自 iOS 16 起,SwiftUI 列表默认把每条分隔线对齐到行文字的前缘,而不是图标。如果你的行没有图标或头像,就没有可绕开的东西,通栏线就可以。
修正 3:先试试留白
每行一条线
用留白搞定
在你伸手去画线之前,先问问这条线是干什么的。通常它是在分组,而分组可以靠距离完成。Material 列出了通栏分割线的替代方案:留白、副标题和缩进分割线,并警告过度使用通栏分割线会制造视觉噪音。Refactoring UI 在「少用边框」下提出了同样的观点:用留白、背景色或阴影来分隔事物。
一个快速测试:把列表里的线全删掉。如果你仍然能看出分组,那些线就只是装饰。
修正 4:深色界面也要调暗
#1C1C1E 上的 #FFFFFF
#1C1C1E 上的 #38383A
规则在深色模式下不变,只是翻转。浅色界面上,线比表面稍深;深色界面上,线比表面稍浅。
iOS 在深色列表背景上用 #38383A。Material 3 在 #141218 的表面上用 #49454F,即它的深色 outline variant。
纯白线和纯黑线有同样的问题:它们是列表里最亮的痕迹,所以会压过文字。
分割线规范
点击任意色块即可复制色值。
| 属性 | 值 | 原因 |
|---|---|---|
| 颜色,浅色 | #C6C6C8 | 看的时候看得见,读的时候不打扰 |
| 透明度方案 | 12% 的 #000000 | 适配任何表面,在白底上呈现为 #E0E0E0 |
| 粗细 | 1 px(1 dp) | 更粗的线会变成形状 |
| 缩进 | 从文字处开始 | 让图标和头像保持与行相连 |
| 颜色,深色 | #38383A | 比表面稍亮,绝不用白 |
| 留白 | 先试它 | 不画任何东西就能分组 |
把这个交给你的开发
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
边框上的 margin-left 就是缩进:线从标签开始的地方起笔。如果你用透明度方案,把变量换成浅色用 rgba(0, 0, 0, 0.12),深色用 rgba(255, 255, 255, 0.12)。
FAQ
分割线应该用什么颜色?
浅色界面用柔和的浅灰,比如 iOS 的 #C6C6C8 或 Material 3 的 #CAC4D0。深色界面用稍亮一点的深灰,比如 #38383A。
分割线应该是黑色的吗?
不。纯黑线是列表里对比度最高的痕迹,所以眼睛会先读它再读内容。用浅灰,或者约 12% 不透明度的黑。
分割线应该多粗?
1 px,在 Material 里就是 1 dp。更粗的线会变成形状,与行争夺注意力。
什么是缩进分割线?
从行文字而不是屏幕边缘开始的分割线,所以它不会切到图标或头像下面。iOS 设置的每个列表都用它。
每一行之间都需要分割线吗?
不一定。分组之间更大的间隙常常不画任何东西就能分隔内容,而且 Material 警告过度使用通栏分割线会制造视觉噪音。
深色模式下用什么分割线颜色?
iOS 深色列表背景上用 #38383A,Material 3 深色表面上用 #49454F。避免用白色,因为亮线在深色屏幕上刺眼。
来源
- Material Design 2, Dividers:分割线 1 dp 粗,浅色主题用 12% 黑,深色主题用 12% 白;缩进分割线分隔相关内容,并与头像等锚定元素搭配;通栏分割线的替代方案包括留白、副标题和缩进分割线;过度使用通栏分割线会制造视觉噪音。
- Material 3 tokens:分割线使用 outline variant 颜色,粗 1.0 dp;基线值在浅色方案中为 #CAC4D0,深色方案中为 #49454F。#141218 是基线深色表面。
- Apple, listRowSeparatorLeading 和 Adjust List Row Separator Insets:自 iOS 16 起,列表默认把每条分隔线对齐到行文字的前缘。
- iOS 分隔线颜色:浅色为 rgba(60, 60, 67, 0.29),落在白色上为 #C6C6C8,深色为 #38383A。iPhone 上的设置 App 展示了这种缩进。
- 12% 的 #000000 叠在 #FFFFFF 上呈现为 #E0E0E0,由 alpha 混合计算得出。
- Refactoring UI,「Use fewer borders」(Adam Wathan 和 Steve Schoger)。
- WCAG 2.2, 1.4.11 Non-text Contrast:列表行之间的分割线是装饰,理解内容并不需要它,因此不适用最低对比度要求。
- 设置行和「Design review」活动详情是为本页虚构的。
- 最初作为轮播图发布于 UX Brainy。
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
