Выравнивание и отступы
Типографика
Фильтры
Поведение
Выравнивание и отступы
Левый столбец всегда выравнивается по левому краю. Правый столбец выравнивается по правому краю.
Если в таблице больше двух столбцов, последующие столбцы выравниваются по левому краю.
Важно оформлять элементы таблицы в виде ячеек с одинаковой высотой. Для каждой ячейки задаются одинаковые вертикальные отступы до текста. Желательно, чтобы они были чётными.
Выбирайте четные значения для внутренних отступов между столбцами. Горизонтальные отступы могут варьироваться в зависимости от того, насколько столбцы связаны между собой по смыслу. Минимальная ширина горизонтального отступа — 20px.
Отступы между элементами таблицы не должны превышать по размеру внешние отступы, чтобы таблица выглядела целостной.
Для внешних отступов выбирайте те же размеры, что и для остальных интерфейсных блоков. Отступы справа/слева/сверху — 44px, отступ снизу — 48px.
Таблицы оформляются без разделителей. Исключение составляют названия столбцов — они могут отделяться от контента разделителем толщиной в 1px, цвет #E6E6E6, rgb (230, 230, 230).
Типографика
Для основного текста в таблицах желательно использовать шрифт Museo Sans 500. Столбцы с важной информацией могут выделяться — используйте для них Museo Sans 700, для отображения столбцов и строк с дополнительной информацией можно использовать Museo Sans 300.
Основной текст | #000 rgb (0, 0, 0) |
|
Вспомогательный текст (Web) | #666 rgb (102, 102, 102) |
|
Вспомогательный текст (Apps) | #999 rgb (153, 153, 153) |
|
Инвертированный текст | #FFF rgb (255, 255, 255) |
Цвет текста в основных блоках всегда черный — #000, rgb (0, 0, 0), для дополнительной информации можно использовать серый цвет #666 (102, 102, 102).
Ошибки | #D0021B rgb (208, 2, 27) |
|
Предупреждения | #FF8C00 rgb (255, 140, 0) |
|
Успешные действия | #4BBD5C rgb (75, 189, 92) |
Для отображения статусов, а также успешных и неуспешных действий можно использовать дополнительные цвета: красный и зеленый.
Для названий столбцов и строк в таблице лучше использовать Museo Sans 300 в цвете #666 (102, 102, 102). Для названий столбцов и строк используйте текст меньшего размера. Например: размер для основного текста внутри таблицы — 14px, для заголовка — 13px.
Фильтры
Фильтры располагаются в правой верхней части интерфейсного блока с отступами 44px от правого края и 44px от верхнего края.
Поведение
При наведении ячейка таблицы выделяется серым цветом #F5F5F5, rgb (245, 245, 245).