Таблицы и списки
Пример таблицы
Правила
Выравнивание колонок
- Текстовые колонки выравниваются по левому краю. Так проще читать многострочные блоки и ориентироваться по таблице.
- Числовые колонки выравниваются по правому краю. И используют отдельный стиль текста Table Number. Так разряды находятся друг под другом и их проще сравнивать. Если хотя бы одно из чисел с дробной частью — ее нужно показать у всех чисел в колонке.
- Остальные колонки обычно предпочтительнее также выравнивать по левому краю.
Высота строк
Нужно ограничивать максимальное количество строк в текстовых блоках колонок (обычно 3-5 строк)
Действия со строкой
Все действия со строкой находятся только в крайней правой колонке. У этой колонки нет названия в шапке. Обычно применяется одна кнопка-меню, частые действия можно вынести наружу, но старайтесь не делать более 4-х кнопок (с учетом меню). Все действия — иконки, названия действий доступны во всплывающих тултипах. (если действие одно, можно показать его как кнопку с иконкой и текстом, без тултипа)
Выбор строк
Чекбоксы выбора располагаем только слева. Когда выбирают хотя бы одну строку обычные действия в шапке таблицы заменяются на множественные, если с выбранными строками нельзя совершить действие, оно блокируется (можно писать в тултипах почему).
Группировка данных
Колонки в таблице нужно по-возможности группировать. Обычно группировка происходит по «сущностям», например, «Организация», «Статус» и т.д.
Слишком много колонок
Если нельзя уменьшить данные качественно, используйте горизонтальную прокрутку или добавляйте возможность скрывать колонки.