Таблицы

Таблицы наравне с формами — основа интерфейсов Контура. От того, насколько правильно и с вниманием они сверстаны во многом зависит качество сервиса и итоговый пользовательский опыт.

Главные принципы

Приступая к верстке таблицы проанализируйте контент, поймите что именно пользователь будет искать и как ориентироваться в строках и столбцах.

Табличное представление информации нужно в первую очередь, когда требуется сравнивать или искать значения внутри одного столбца. Если этого не требуется, то вместо таблицы стоит использовать список или набор карточек.

Как улучшить таблицу:

  1. Оставьте только те данные, которые необходимы для поиска и сравнения информации, либо для выбора строки. Всё остальное нужно убрать на страницу с полной информацией.
  2. Определите оптимальный порядок столбцов и их ширину. Если пользователь будет сравнивать значения из разных столбцов, они должны стоять рядом.
  3. Проверьте, можно ли содержимое двух-трех столбцов склеить в одной ячейке. Это сделает таблицу компактнее.
  4. Определите ключевое поле и поставьте его в начало. Возможно его стоит выделить более крупным кеглем или жирным начертанием.
  5. Посмотрите, можно ли данные столбца представить в виде иконки, тега, статуса. Или каким-то другим способом передать ту же информацию более наглядно и эффективно.
  6. Второстепенные данные уведите на второй план, покрасив в серый. Важно, чтобы серого текста в таблице было меньше, чем черного.

Примеры:

Неправильно

Это бездушная таблица в стиле Excel, данные вставлены в стандартную структуру, которая про них ничего не знает. Если проанализировать содержание таблицы и сценарий пользователя, можно сделать более красивую и удобную таблицу.

Правильно

Это список сертификатов при входе в Экстерн: тип организации показан иконкой, имя владельца выводится под названием, а не в отдельном столбце. То же самое со сроком действия. В результате получился компактный список, которому не нужна шапка.

Правильно

Для наглядности добавлены аватарки пользователей, этап показан в виде токена с цветовым кодированием, просроченные задачи подсвечиваются красным «вчера».

Шапка таблицы

Если таблица простая и в ней легко ориентироваться, то шапку можно не добавлять.

Если шапка есть, то текст в заголовках столбцов выравнивается также, как в ячейках.

От контента шапка отделяется линией в 1 рх, цвет — #D6D6D6.

Цвет текста в шапке таблицы — #757575.

Помимо текста заголовок столбца может содержать чекбокс для выбора всех строк, фильтры и сортировку. Подробнее в гайдах про фильтрацию и массовые действия.

Наведение на заголовок

При наведении фон ячейки подсвечивается в #DADADA, а текст в #222222

Сложный заголовок

Столбцы в таблице могут иметь два и более уровней заголовков. Верхний уровень выравнивается также как и нижний и отделяется от него линией.

Залипание шапки

Фиксируйте шапку таблицы при скроллинге. Это помогает пользователю ориентироваться в столбцах, плюс всегда будет доступ к фильтрации и сортировке строк.

Контент таблицы

Линейки

Строки могут разделяться линиями цвета #E6E6E6

Но такие линии создают дополнительный шум, поэтому используйте их только при необходимости. Например, когда без них, таблица «разваливается».

Правильно

Эта таблица хорошо выглядит и без линиий

Правильно

В этой таблице часто встречаются пропуски данных, поэтому линии помогают группировать информацию

Выравнивание в столбцах

Текст в ячейках выравнивайте по левому краю. Исключение — количественные данные:

  • Их нужно выравнивать по правому краю и использовать моноширинные цифры, чтобы разряды находились строго друг под другом. Чтобы включить моноширинные цифры в Фигме отвяжите текстовый слой от стиля и зайдите в настройки:
  • Каждый третий разряд нужно отбивать тонким пробелом;
  • Заголовок в таких столбцах также выравнивается по правому краю.
  • Неправильно

    Первая цифра в ячейке в одном случае это тысячи, в другом сотни и т.д. Сравнивать такие значения очень тяжело

    Правильно

    Копейки над копейками, десятки рублей над десятками и так далее.

Выравнивание в строках

Выравнивайте значения по базовой линии первой строки, так таблица выглядит аккуратнее, а взгляду легче скользить по строке.

Неправильно

ИНН-КПП выровнены по середине высоты строки, из-за этого ломается линия, и в такой таблице отказаться от линеек между строк не получится

Правильно

ИНН-КПП выровнены по базовой линии первой строки

Текстовые значения

При наведении на иконку подсвечивается вся область нажатия. Если иконки нестандартные, добавляйте хинт, который объясняет их действие.

Если значение не помещается в одну строку, при этом его важно показать полностью, выведите его в две или даже три строки.

Правильно

Отчётов много, их названия могут быть похожими — здесь не нужно сокращение. Название компании можно сократить, вырезав часть символов внутри.

Числа

Используйте одно правило округления в колонке или во всей таблице.

Неправильно

У целых значений не показана дробная часть, из-за этого их тяжело сравнивать.

Правильно

Копейки над копейками, десятки рублей над десятками и так далее. Исключение 0 — его можно выводить без дробной части.

Выносите единицу измерений в заголовок колонки, не повторяйте её в каждой ячейке. Исключения:

  • разные единицы в одном столбце;
  • знак % или валюты.

Если числовое значение не помещается в ячейку — попробуйте изменить порядок или округление, увеличить ширину ячейки, но не делайте перенос на вторую строку.

Теги

Теги помогают обозначать статусы, этапы, принадлежность к группе.

Используйте приглушённые цвета из общей палитры (код 10), выравнивайте тег по базовой линии строки.

Текст в тегах должен быть короткий и понятный. Не делайте многострочные теги.

Правильно

В списке сделок CRM тегами обозначается этап в воронке продаж. Каждому этапу соответствует свой цвет

Иконки и картинки

Как и теги, иконки помогают показать статус и другие атрибуты сущностей, например принадлежность к разным типам организаций или аватарки пользователей.

Если иконка понятна пользователям продукта, от заголовка столбца лучше отказаться.

Не делайте иконки/картинки слишком маленькими или большими. Работайте в границе высоты строки набора.

Правильно

Статус заявки дополнен понятной иконкой с левой выключкой

Правильно

Для более быстрого считывания статуса документа, можно размещать иконку и статус рядом с названием

Наведение на строку

При наведении курсора строка подсвечивается цветом #F0F0F0.

Если в таблице предусмотрены массовые действия, то при наведении отображается чекбокс. При этом чекбокс в заголовке столбца показывается всегда. Подробнее о работе массовых действий читайте в отдельном гайде.

При наведении на первую строку таблицы, линия, отделяющая шапку таблицы от строк, пропадает. Также пропадают линейки сверху и снизу у строки наведения:

В случае, когда данные в таблице можно редактировать сразу, при наведении показывается уменьшенное поле ввода высотой 28px. Поле ввода должно появляться как бы вокруг значения, контент не должен сдвигаться:

Выбор строк

После выделения одной строки, начинаем показывать чекбоксы у всех остальных строк. Это облегчает множественный выбор и дополнительно дает понять, что пользователь находится в режиме «Массовых действий»:

Если выбрать несколько соседних строк, то скругляются углы у всего блока, а не каждой отдельной строки:

Выбранная строка при наведении выбранная меняет свой цвет на #E6E6E6.

Одиночные действия со строкой

Быстрые действия со строкой показываем при наведении курсора на строку. В общем случае иконки располагаются в конце строки. Выносите в таблицу не более 3-5 основных действий или делайте кебаб-меню.

Размер кнопки 32px, а иконки 16px. Иконки выравниваются по высоте строки, и могут градиентом скрывать часть контента при появлении:

При наведении на иконку подсвечивается вся область нажатия. Если иконки не супер узнаваемые и стандартные, добавляйте хинт.

Негативные действия при наведении стоит подсвечивать красным #FF5A49.

Анимация удаления строки:

  1. Контент строки становится прозрачным: 100ms cubic‑bezier(0.5, 1, 0.89, 1)
  2. Нижние строки сдвигаются на освободившееся место: 100ms cubic‑bezier(0.5, 1, 0.89, 1)

Кликабельная ячейка

Если в строке несколько независимых кликабельных ячеек, текст в них красится в цвет ссылок, а при наведении они дополнительно подсвечиваются белым:

Подвал

Добавляйте подвал в таблицу, если важно показать итоговые суммы, или другую аналитику.

Если пользователю важно в любой момент видеть подвал, фиксируйте его при прокрутке.