Дизайн таблиц

03.12.2018

Цель таблицы — упростить представление данных, которые можно прочитать и усвоить.

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

Есть несколько правил, которые помогут правильно составить таблицу.

1. Ширина.

Не делайте таблицу слишком широкой, если этого не требуется. Между столбцами не должно быть большого расстояния, которое затрудняет чтение.

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

На сайте citilink.ru слишком большое расстояние между столбцами не очень удобно.
На сайте citilink.ru слишком большое расстояние между столбцами не очень удобно.

2. Ничего лишнего.

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

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

Это не значит, что надо исключить из таблицы все элементы дизайна. Хороший дизайн таблицы незаметен. Форма должна служить содержанию, а не наоборот.

Создатели сайта technopoint.ru упростили выбор товара, обозначив отличающиеся характеристики голубым цветом.
Создатели сайта technopoint.ru упростили выбор товара, обозначив отличающиеся характеристики голубым цветом.

3. Выравнивание.

  • Числа выравниваются по правой стороне.
  • Буквы выравниваются по левому краю.
  • У заголовков выравнивание такое же, как и у их данных.
  • Старайтесь не использовать выравнивание по центру.

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

Удобная таблица на сайте kinopoisk.ru помогает пользователю быстрее сравнивать данные за счет правильного выравнивания и цветов.
Удобная таблица на сайте kinopoisk.ru помогает пользователю быстрее сравнивать данные за счет правильного выравнивания и цветов. Несмотря на то, что характеристики при выборе телефона — важная информация, которую изучают многие покупатели, с таблицей на сайте kimovil.ru не стали заморачивались и получилось не очень удачно: столбцы не выровнены, анализировать данные неудобно.
Несмотря на то, что характеристики при выборе телефона — важная информация, которую изучают многие покупатели, с таблицей на сайте kimovil.ru не стали заморачивались и получилось не очень удачно: столбцы не выровнены, анализировать данные неудобно.

4. Фиксированный заголовок и горизонтальная прокрутка.

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

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

Большое количество характеристик не позволяет разместить всю информацию на одном экране. Для удобства пользователей на сайте mvideo.ru сделали фиксированный заголовок с названием и ценой каждого монитора.
Большое количество характеристик не позволяет разместить всю информацию на одном экране. Для удобства пользователей на сайте mvideo.ru сделали фиксированный заголовок с названием и ценой каждого монитора.

5. Границы.

Совсем не обязательно рисовать в таблице сетки и рамки. В книге «Ассиметричная типографика» Ян Чихольд пишет:

«Таблица не должна выглядеть как сетка, в которой каждое число окружено границами. Постарайтесь обойтись без каких-либо границ. Используйте их, только если без них совсем не обойтись. Вертикальные границы нужны только тогда, когда расстояние между столбцами слишком маленькое, так это может привести к ошибкам при интерпретации данных в таблице. Таблицы без вертикальных границ выглядят лучше, чем с ними, а тонкие границы смотрятся лучше толстых.»

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

Сравнение продукции на сайте apple.com. Отступы и выравнивание визуально формируют таблицу, ничего лишнего.
Сравнение продукции на сайте apple.com. Отступы и выравнивание визуально формируют таблицу, ничего лишнего.

6. Шрифты.

Если в таблице присутствуют числа, используйте маюскульные цифры (обычные цифры, равные по размеру заглавной букве, например: 1234567890 АБВГД). Использование маюскульных шрифтов упрощает восприятие числовых данных в таблице.

В таблице, содержащей большое количество чисел, используйте моноширинные шрифты (цифры и буквы одинаковые по ширине). Намного легче сравнить и сопоставить данные, когда все цифры в числе одной ширины.

Сравнивать числа в левой колонке удобнее, чем в правой. В левой — маюскульные цифры, моноширинный шрифт с выравниванием по правому краю. В правой —  минускульные цифры, пропорциональный шрифт и выравнивание по центру.
Сравнивать числа в левой колонке удобнее, чем в правой. В левой — маюскульные цифры, моноширинный шрифт с выравниванием по правому краю. В правой — минускульные цифры, пропорциональный шрифт и выравнивание по центру.

7. Адаптация

Обычно возникают сложности при адаптации таблицы под мобильное устройство. Есть несколько способов сделать это, без потери читабельности:

  • Самый простой способ — сжатие шрифта или уменьшение кегеля. Без фанатизма, таблица должна легко читаться.
  • Горизонтальная прокрутка. Используя этот способ, дайте понять пользователю, что таблицу можно скроллить, добавив полосу прокрутки, например.
  • В мобильной версии таблицы на сайте nerudprivoz.ru есть горизонтальная прокрутка. С ее помощью таблица осталась читаемой, а полоса прокрутки внизу дает понять, что таблица показана не полностью.
    В мобильной версии таблицы на сайте nerudprivoz.ru есть горизонтальная прокрутка. С ее помощью таблица осталась читаемой, а полоса прокрутки внизу дает понять, что таблица показана не полностью.
  • Текст заголовков под наклоном. Такой способ идеален, если заголовки в таблице длинные, а данные в столбцах ограничиваются несколькими символами.
  • Используя наклонные заголовки, экономится место без потери качества
    Используя наклонные заголовки, экономится место без потери качества
  • Если таблица небольшая и не имеет сравнительных данных, можно изменить ее структуру и преобразовать информацию в списки.
 Имена и телефоны работников не обязательно делать таблицей. В этом случае лучше обойтись списком
Имена и телефоны работников не обязательно делать таблицей. В этом случае лучше обойтись списком

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


Возврат к списку


Оставить заявку