Как нарисовать красивую и удобную таблицу. Приемы оформления и примеры использования

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

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

Обычная таблица - это базовый вариант когда все строки и столбцы отделены одинаковыми линиями, вся таблица помещена в рамку. Весть текст одного размера. Такую таблицу можно увидеть открыв эксель. Универсальный вариант когда нет ресурсов заниматься дизайном. Для дизайнера, обычно, - это заготовка для дальнейшей работы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо за внимание.
Примеры таблиц в фигме