Цвет разделителя в 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% белого в тёмных. #000000 с 12% поверх белого даёт #E0E0E0, а поверх тонированной поверхности остаётся тонированным, так что линия не выглядит приклеенной.
То же исправление работает за пределами списков: линии строк таблицы, нижние границы карточек, линия под шапкой и разделители между группами меню.
Исправление 2: сделайте отступ до текста
На всю ширину
Начинается у текста
Откройте «Настройки» на iPhone и посмотрите. Линия начинается у подписи, а не под иконкой. Material говорит то же самое: разделители с отступом отделяют связанный контент и сочетаются с якорными элементами, такими как аватары.
Именно этот отступ привязывает иконку к её строке. Линия на всю ширину под иконкой отрезает её, и список читается как полосы, а не как строки.
Начиная с iOS 16, списки SwiftUI по умолчанию выравнивают каждый разделитель по ведущему краю текста строки, а не по иконке. Если в строках нет иконки или аватара, обходить нечего, и линия на всю ширину подойдёт.
Исправление 3: сначала попробуйте пространство
Линия у каждой строки
Справляется пространство
Прежде чем тянуться к линии, спросите, зачем она нужна. Часто это группировка, а группировать можно расстоянием. Material перечисляет альтернативы разделителям на всю ширину: свободное пространство, подзаголовки и разделители с отступом, и предупреждает, что злоупотребление полноширинными создаёт визуальный шум. Refactoring UI приводит тот же аргумент под лозунгом «используйте меньше границ»: разделяйте вещи пространством, цветом фона или тенью.
Быстрый тест: удалите все линии в списке. Если группы всё ещё видны, линии были декорацией.
Исправление 4: приглушите их и на тёмном
#FFFFFF на #1C1C1E
#38383A на #1C1C1E
На тёмной теме правило не меняется, оно переворачивается. На светлом экране линия чуть темнее поверхности, а на тёмном чуть светлее.
iOS использует #38383A на тёмном фоне списка. Material 3 использует #49454F, свой тёмный outline variant, на поверхности #141218.
Чисто белые линии страдают той же проблемой, что и чисто чёрные: это самые яркие штрихи в списке, поэтому они побеждают текст.
Спецификация разделителя
Нажмите на любую плашку, чтобы скопировать код.
| Свойство | Значение | Почему |
|---|---|---|
| Цвет, светлая тема | #C6C6C8 | Заметен, когда смотришь, тих, когда читаешь |
| Вариант с альфой | #000000 при 12% | Подстраивается под любую поверхность, на белом даёт #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
Какого цвета должны быть разделители?
Мягкий светло-серый на светлых экранах, например #C6C6C8 в iOS или #CAC4D0 в Material 3. На тёмных экранах используйте чуть более светлый тёмно-серый, например #38383A.
Должны ли разделители быть чёрными?
Нет. Чисто чёрная линия это самый контрастный штрих в списке, поэтому глаз читает её раньше контента. Используйте светло-серый или чёрный с прозрачностью около 12%.
Какой толщины должен быть разделитель?
1 px, то есть 1 dp в Material. Более толстые линии превращаются в фигуры и конкурируют со строками.
Что такое разделитель с отступом?
Разделитель, который начинается у текста строки, а не у края экрана, поэтому не режет под иконкой или аватаром. «Настройки» в iOS используют его для каждого списка.
Нужны ли разделители между каждой строкой?
Не всегда. Больший промежуток между группами часто отделяет контент, ничего не рисуя, а Material предупреждает, что злоупотребление полноширинными разделителями создаёт визуальный шум.
Какой цвет разделителя работает в тёмной теме?
#38383A на тёмном фоне списка iOS и #49454F на тёмной поверхности Material 3. Избегайте белого, потому что яркие линии слепят на тёмных экранах.
Источники
- 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 показывает отступ.
- #000000 с 12% поверх #FFFFFF даёт #E0E0E0, рассчитано альфа-смешением.
- Refactoring UI, «Use fewer borders» (Адам Уотан и Стив Шогер).
- 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
