Примеры красивых UX-таблиц

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

Ниже прототипы таблиц сервиса Fleхport, но многие идеи можно позаимствовать и для личной работы.

Фиксированный заголовок

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

Горизонтальная прокрутка

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

Редактируемые колонки

Изменение размера колонок позволяет видеть сокращенные данные в полном объеме.

Стиль строк

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

Плотность отображения

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

Визуальная сводка таблицы

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

Нумерация страниц

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