5 практических решений для создания гибких таблиц данных

Иллюстрация Доминика Корольчука

Я работаю старшим дизайнером UI & UX в App’n’roll - венчурной венчурной компании.

Как вы, наверное, знаете, современный дизайн требует заботы о различных типах экранов и размеров, поэтому мы, дизайнеры, должны сделать результаты нашей работы максимально отзывчивыми. Это может вызвать некоторые проблемы, особенно когда речь идет о размещении огромного количества данных в узких интерфейсах мобильных телефонов.

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

Как разместить широкую таблицу данных на экранах мобильных устройств, не теряя своей цели и читабельности?

Я нашел 5 распространенных решений для обработки таблиц данных на широких экранах, таких как смартфоны или планшеты в вертикальном режиме. Вы можете использовать его немедленно в своей повседневной работе в качестве дизайнера - поехали!

укорачивать

Самый простой - это просто вырезать ненужные столбцы и сделать таблицу краткой, оставив только важные данные. В приведенном ниже примере показан веб-сайт Bloomberg, содержащий только 4 из 9 столбцов в мобильном представлении.

Источник: https://www.bloomberg.com/markets/stocks/futures

применимый

  • любой вид данных
  • различные типы контента

Pros

  • легко использовать
  • легко развиваться
  • простота

Cons

  • ограниченное пространство для представления данных
  • нужно уйти в отставку от части данных

Если вы не хотите отбрасывать какие-либо свои данные, вам могут подойти другие решения.

подвижной

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

Подвижная адаптивная таблица данныхИсточник: https://codepen.io/karks88/pen/jGrjdW/

применимый

  • для широких таблиц (3–8 столбцов)
  • для коротких столов (рекомендуем держать всю высоту стола над складкой)

Pros

  • легко развиваться
  • легко использовать

Cons

  • не для большого количества контента
  • легенда не видна после прокрутки

Дополнительно

  • режим фокусировки для разметки всей строки, чтобы убедиться, что мы смотрим на правильные данные при прокрутке
  • фильтровать столбцы - скрывать и показывать определенные столбцы

рухнул

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

Свернутая таблица адаптивных данныхТаблица размеров на сайте http://massimodutti.com

применимый

  • для коротких столбцов
  • для коротких столов
  • полезно при замене столбцов на строки

Pros

  • легко использовать
  • легенда видна постоянно

Cons

  • только для коротких данных

Дополнительно

  • вкладки, представляющие столбцы, могут быть использованы для быстрой навигации

Преобразованный

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

Пример таблицы преобразованных адаптивных данныхhttps://elvery.net/demo/responsive-tables/ (таблиц больше нет)

применимый

  • огромное количество данных
  • различные типы контента

Pros

  • полезно с огромным количеством данных и его размером
  • способность сворачивать и скрывать некоторые данные
  • универсальная форма представления данных

Cons

  • повторяющиеся имена столбцов
  • трудно сравнивать конкретные данные между строками

Дополнительно

  • возможность легко фильтровать и сортировать контент
  • возможность делить контент на отдельные страницы

Сравнение

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

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

Сравнение таблицы данныхИсточник: http://vizio.com

применимый

  • различные типы контента
  • большие объемы данных

Pros

  • легко сравнить столбцы
  • полезно в электронной коммерции
  • помочь быстрее принимать решения

Cons

  • вы видите только два столбца одновременно
  • требует дополнительной навигации

Последняя мысль

Тип решения, которое вы выбираете, в основном зависит от того, какие данные у вас есть. Хорошей практикой является тесное сотрудничество с разработчиком внешнего интерфейса, чтобы выбрать наиболее разумное решение с точки зрения затрат времени и технических требований, необходимых для применения.

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