Таблицы

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

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

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

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

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

Примеры:

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

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

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

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

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

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

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

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

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

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

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

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

• Каждый третий разряд нужно отбивать тонким пробелом;
• Заголовок в таких столбцах также выравнивается по правому краю.


Неправильно

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



Правильно

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

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

Неправильно

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

Правильно

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

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

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

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

Неправильно

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

Правильно

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

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

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

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

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

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

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

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

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

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

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

В случае, когда данные в таблице можно редактировать сразу, при наведении показывается уменьшенное поле ввода высотой 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)

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

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

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