Дизайн таблиц
- четверг, 11 мая 2017 г. в 03:13:50
https://habrahabr.ru/post/328220/
Данные бесполезны без возможности визуализировать их и взаимодействовать с ними. Многие из отраслей будущего зачастую требуют более продвинутого сбора больших данных и улучшенных интерфейсов взаимодействия с таблицами.
Правильные таблицы позволяют пользователям анализировать, сравнивать, фильтровать, сортировать и управлять содержащейся информацией. В этой статье описаны способы, с помощью которых можно упростить вид и структуру таблицы данных.
Такие заголовки помогают ориентироваться при прокрутке длинной таблицы данных.
Горизонтальный скролл неизбежен в таблицах с большим количеством столбцов. В таких случаях первую колонку можно сделать фиксированной. Кроме того, можно дать возможно так же фиксировать нужные пользователю колонки.
Изменение ширины столбцов поможет полностью отображать ячейки с большим количеством данных.
Уменьшение визуального шума в виде границы строк помогает при небольшом количестве данных в таблице. Если данных достаточно много, лучше отображать границы или использовать «зебру».
Увеличенная плотность в таблице помогает отобразить больше данных без необходимости прокрутки, однако могут возникнуть проблемы восприятия пользователем. Поэтому можно дать возможность управления плотностью данных в таблице.
Сводка визуальных данных дает обзор таблицы. Это позволяет пользователю определять закономерности и проблемы в целом, прежде чем приступить к обобщению итогов.
Помогает разделить больше таблицы на страницы. Иногда, особенно десктоп-версиях сайтов, целесообразно добавить бесконечную прокрутку.
Представление дополнительных действий при наведении, снижая визуальный беспорядок.
Тем не менее, это может вызвать проблемы, поскольку пользователю необходимо взаимодействовать с таблицей.
Позволяет изменять данные без необходимости переходить на отдельную страницу.
Позволяют пользователю оценивать дополнительную информацию без потери контекста.
Как и расширяемые строки, позволяет просматривать дополнительную информацию, оставаясь в контексте.
Такой просмотр позволяет сохранить первоначальный вид таблицы.
Мультимодальная функция является мощным средством для активного использования пользователями множества действий или сравнения деталей разрозненных элементов.
Клик по ссылке строки преобразует таблицу в список слева и дополнительные данные справа.
Позволяет пользователю анализировать большие наборы данных, а также ссылаться на многие элементы, не теряя при этом контекста.
Популярная функция, позволяющая нужным образом организовать данные в таблице.
Позволяют отображать только необходимые данные в таблице.
Возможность фильтровать данные в колонке.
Позволяет быстро совершать поиск непосредственно в заголовке столбца.
Позволяет пользователям добавлять столбцы из набора. Этот способ ограничивает данные таблицы только необходимой информацией.
Позволяет пользователям выбирать столбцы, которые они хотят видеть, и сортировать их соответствующим образом. Функция может включать в себя возможность сохранения пресетов для последующего использования.
Данные не имеют смысла без возможности их визуализировать и взаимодействовать с ними. Поэтому компаниям следующего десятилетия просто необходимо уметь оперировать с данными.
Энергетика, СМИ, производство, логистика, здравоохранение, торговля, финансы и даже правительство претерпевают изменения. Данные становятся основным сырьем мировой экономики, что ведет к переосмыслению устаревших отраслей.
Обновление: опубликовал практические примеры реализации некоторых паттернов для табличных данных: Таблицы в адаптивном дизайне — 2.
- Типографика
- Интерфейсы
- Веб-дизайн
- Usability
- Accessibility
Данные бесполезны без возможности визуализировать их и взаимодействовать с ними. Многие из отраслей будущего зачастую требуют более продвинутого сбора больших данных и улучшенных интерфейсов взаимодействия с таблицами.
Правильные таблицы позволяют пользователям анализировать, сравнивать, фильтровать, сортировать и управлять содержащейся информацией. В этой статье описаны способы, с помощью которых можно упростить вид и структуру таблицы данных.
Фиксированные заголовки
Такие заголовки помогают ориентироваться при прокрутке длинной таблицы данных.
Горизонтальная прокрутка
Горизонтальный скролл неизбежен в таблицах с большим количеством столбцов. В таких случаях первую колонку можно сделать фиксированной. Кроме того, можно дать возможно так же фиксировать нужные пользователю колонки.
Ширина столбцов
Изменение ширины столбцов поможет полностью отображать ячейки с большим количеством данных.
Вид строки
Уменьшение визуального шума в виде границы строк помогает при небольшом количестве данных в таблице. Если данных достаточно много, лучше отображать границы или использовать «зебру».
Плотность отображения данных
Увеличенная плотность в таблице помогает отобразить больше данных без необходимости прокрутки, однако могут возникнуть проблемы восприятия пользователем. Поэтому можно дать возможность управления плотностью данных в таблице.
Визуальная сводка таблицы
Сводка визуальных данных дает обзор таблицы. Это позволяет пользователю определять закономерности и проблемы в целом, прежде чем приступить к обобщению итогов.
Разбиение на страницы
Помогает разделить больше таблицы на страницы. Иногда, особенно десктоп-версиях сайтов, целесообразно добавить бесконечную прокрутку.
Действия при наведении
Представление дополнительных действий при наведении, снижая визуальный беспорядок.
Тем не менее, это может вызвать проблемы, поскольку пользователю необходимо взаимодействовать с таблицей.
Редактирование в строке
Позволяет изменять данные без необходимости переходить на отдельную страницу.
Расширяемые строки
Позволяют пользователю оценивать дополнительную информацию без потери контекста.
Быстрый просмотр
Как и расширяемые строки, позволяет просматривать дополнительную информацию, оставаясь в контексте.
Модальные окна
Такой просмотр позволяет сохранить первоначальный вид таблицы.
Мультимодальные окна
Мультимодальная функция является мощным средством для активного использования пользователями множества действий или сравнения деталей разрозненных элементов.
Подробный просмотр
Клик по ссылке строки преобразует таблицу в список слева и дополнительные данные справа.
Позволяет пользователю анализировать большие наборы данных, а также ссылаться на многие элементы, не теряя при этом контекста.
Сортировка
Популярная функция, позволяющая нужным образом организовать данные в таблице.
Общие фильтры
Позволяют отображать только необходимые данные в таблице.
Фильтры колонок
Возможность фильтровать данные в колонке.
Поиск в колонках
Позволяет быстро совершать поиск непосредственно в заголовке столбца.
Добавление колонок
Позволяет пользователям добавлять столбцы из набора. Этот способ ограничивает данные таблицы только необходимой информацией.
Настраиваемые колонки
Позволяет пользователям выбирать столбцы, которые они хотят видеть, и сортировать их соответствующим образом. Функция может включать в себя возможность сохранения пресетов для последующего использования.
Почему таблицы важны
Данные не имеют смысла без возможности их визуализировать и взаимодействовать с ними. Поэтому компаниям следующего десятилетия просто необходимо уметь оперировать с данными.
Энергетика, СМИ, производство, логистика, здравоохранение, торговля, финансы и даже правительство претерпевают изменения. Данные становятся основным сырьем мировой экономики, что ведет к переосмыслению устаревших отраслей.
Обновление: опубликовал практические примеры реализации некоторых паттернов для табличных данных: Таблицы в адаптивном дизайне — 2.