Таблицы
Таблицы наравне с формами — основа интерфейсов Контура. От того, насколько правильно и с вниманием они сверстаны во многом зависит качество сервиса и итоговый пользовательский опыт.
Главные принципы
Приступая к верстке таблицы проанализируйте контент, поймите что именно пользователь будет искать и как ориентироваться в строках и столбцах.
Табличное представление информации нужно в первую очередь, когда требуется сравнивать или искать значения внутри одного столбца. Если этого не требуется, то вместо таблицы стоит использовать список или набор карточек.
Как улучшить таблицу:
- Оставьте только те данные, которые необходимы для поиска и сравнения информации, либо для выбора строки. Всё остальное нужно убрать на страницу с полной информацией.
- Определите оптимальный порядок столбцов и их ширину. Если пользователь будет сравнивать значения из разных столбцов, они должны стоять рядом.
- Проверьте, можно ли содержимое двух-трех столбцов склеить в одной ячейке. Это сделает таблицу компактнее.
- Определите ключевое поле и поставьте его в начало. Возможно его стоит выделить более крупным кеглем или жирным начертанием.
- Посмотрите, можно ли данные столбца представить в виде иконки, тега, статуса. Или каким-то другим способом передать ту же информацию более наглядно и эффективно.
- Второстепенные данные уведите на второй план, покрасив в серый. Важно, чтобы серого текста в таблице было меньше, чем черного.
Примеры:
Неправильно
Это бездушная таблица в стиле Excel, данные вставлены в стандартную структуру, которая про них ничего не знает. Если проанализировать содержание таблицы и сценарий пользователя, можно сделать более красивую и удобную таблицу.
Правильно
Это список сертификатов при входе в Экстерн: тип организации показан иконкой, имя владельца выводится под названием, а не в отдельном столбце. То же самое со сроком действия. В результате получился компактный список, которому не нужна шапка.
Правильно
Для наглядности добавлены аватарки пользователей, этап показан в виде токена с цветовым кодированием, просроченные задачи подсвечиваются красным «вчера».
Шапка таблицы
Если таблица простая и в ней легко ориентироваться, то шапку можно не добавлять.
Если шапка есть, то текст в заголовках столбцов выравнивается также, как в ячейках.
От контента шапка отделяется линией в 1 рх, цвет — #D6D6D6.
Цвет текста в шапке таблицы — #757575.
Помимо текста заголовок столбца может содержать чекбокс для выбора всех строк, фильтры и сортировку. Подробнее в гайдах про фильтрацию и массовые действия.
Наведение на заголовок
При наведении фон ячейки подсвечивается в #DADADA, а текст в #222222
Сложный заголовок
Столбцы в таблице могут иметь два и более уровней заголовков. Верхний уровень выравнивается также как и нижний и отделяется от него линией.
Залипание шапки
Фиксируйте шапку таблицы при скроллинге. Это помогает пользователю ориентироваться в столбцах, плюс всегда будет доступ к фильтрации и сортировке строк.
Контент таблицы
Линейки
Строки могут разделяться линиями цвета #E6E6E6
Но такие линии создают дополнительный шум, поэтому используйте их только при необходимости. Например, когда без них, таблица «разваливается».
Правильно
Эта таблица хорошо выглядит и без линиий
Правильно
В этой таблице часто встречаются пропуски данных, поэтому линии помогают группировать информацию
Выравнивание в столбцах
Текст в ячейках выравнивайте по левому краю. Исключение — количественные данные:
- Их нужно выравнивать по правому краю и использовать моноширинные цифры, чтобы разряды находились строго друг под другом. Чтобы включить моноширинные цифры в Фигме отвяжите текстовый слой от стиля и зайдите в настройки:
- Каждый третий разряд нужно отбивать тонким пробелом;
- Заголовок в таких столбцах также выравнивается по правому краю.
Неправильно
Первая цифра в ячейке в одном случае это тысячи, в другом сотни и т.д. Сравнивать такие значения очень тяжело
Правильно
Копейки над копейками, десятки рублей над десятками и так далее.
Выравнивание в строках
Выравнивайте значения по базовой линии первой строки, так таблица выглядит аккуратнее, а взгляду легче скользить по строке.
Неправильно
ИНН-КПП выровнены по середине высоты строки, из-за этого ломается линия, и в такой таблице отказаться от линеек между строк не получится
Правильно
ИНН-КПП выровнены по базовой линии первой строки
Текстовые значения
При наведении на иконку подсвечивается вся область нажатия. Если иконки нестандартные, добавляйте хинт, который объясняет их действие.
Если значение не помещается в одну строку, при этом его важно показать полностью, выведите его в две или даже три строки.
Правильно
Отчётов много, их названия могут быть похожими — здесь не нужно сокращение. Название компании можно сократить, вырезав часть символов внутри.
Числа
Используйте одно правило округления в колонке или во всей таблице.
Неправильно
У целых значений не показана дробная часть, из-за этого их тяжело сравнивать.
Правильно
Копейки над копейками, десятки рублей над десятками и так далее. Исключение 0 — его можно выводить без дробной части.
Выносите единицу измерений в заголовок колонки, не повторяйте её в каждой ячейке. Исключения:
- разные единицы в одном столбце;
- знак % или валюты.
Если числовое значение не помещается в ячейку — попробуйте изменить порядок или округление, увеличить ширину ячейки, но не делайте перенос на вторую строку.
Теги
Теги помогают обозначать статусы, этапы, принадлежность к группе.
Используйте приглушённые цвета из общей палитры (код 10), выравнивайте тег по базовой линии строки.
Текст в тегах должен быть короткий и понятный. Не делайте многострочные теги.
Правильно
В списке сделок CRM тегами обозначается этап в воронке продаж. Каждому этапу соответствует свой цвет
Иконки и картинки
Как и теги, иконки помогают показать статус и другие атрибуты сущностей, например принадлежность к разным типам организаций или аватарки пользователей.
Если иконка понятна пользователям продукта, от заголовка столбца лучше отказаться.
Не делайте иконки/картинки слишком маленькими или большими. Работайте в границе высоты строки набора.
Правильно
Статус заявки дополнен понятной иконкой с левой выключкой
Правильно
Для более быстрого считывания статуса документа, можно размещать иконку и статус рядом с названием
Наведение на строку
При наведении курсора строка подсвечивается цветом #F0F0F0.
Если в таблице предусмотрены массовые действия, то при наведении отображается чекбокс. При этом чекбокс в заголовке столбца показывается всегда. Подробнее о работе массовых действий читайте в отдельном гайде.
При наведении на первую строку таблицы, линия, отделяющая шапку таблицы от строк, пропадает. Также пропадают линейки сверху и снизу у строки наведения:
В случае, когда данные в таблице можно редактировать сразу, при наведении показывается уменьшенное поле ввода высотой 28px. Поле ввода должно появляться как бы вокруг значения, контент не должен сдвигаться:
Выбор строк
После выделения одной строки, начинаем показывать чекбоксы у всех остальных строк. Это облегчает множественный выбор и дополнительно дает понять, что пользователь находится в режиме «Массовых действий»:
Если выбрать несколько соседних строк, то скругляются углы у всего блока, а не каждой отдельной строки:
Выбранная строка при наведении выбранная меняет свой цвет на #E6E6E6.
Одиночные действия со строкой
Быстрые действия со строкой показываем при наведении курсора на строку. В общем случае иконки располагаются в конце строки. Выносите в таблицу не более 3-5 основных действий или делайте кебаб-меню.
Размер кнопки 32px, а иконки 16px. Иконки выравниваются по высоте строки, и могут градиентом скрывать часть контента при появлении:
При наведении на иконку подсвечивается вся область нажатия. Если иконки не супер узнаваемые и стандартные, добавляйте хинт.
Негативные действия при наведении стоит подсвечивать красным #FF5A49.
Анимация удаления строки:
- Контент строки становится прозрачным: 100ms cubic‑bezier(0.5, 1, 0.89, 1)
- Нижние строки сдвигаются на освободившееся место: 100ms cubic‑bezier(0.5, 1, 0.89, 1)
Кликабельная ячейка
Если в строке несколько независимых кликабельных ячеек, текст в них красится в цвет ссылок, а при наведении они дополнительно подсвечиваются белым:
Подвал
Добавляйте подвал в таблицу, если важно показать итоговые суммы, или другую аналитику.
Если пользователю важно в любой момент видеть подвал, фиксируйте его при прокрутке.