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

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

  1. различные показатели (вкладки под заголовком графика)

  2. разные периоды времени (вкладки под графиком)

    Количество нанесенных точек может отличаться; некоторые диаграммы могут содержать много данных.

Desktop view with Chart

Ниже приведены мои прототипы решений для мобильной версии: введите здесь описание изображения

  1. Сохраняйте высоту диаграммы и регулируйте ширину диаграммы, чтобы она соответствовала оси X диаграммы.

  2. Сделайте диаграмму прокручиваемой по оси x, чтобы точки не сжимались.

  3. Просто уменьшите размер соответственно (я не думаю, что это может работать как решение, просто публикую здесь, чтобы услышать мысли).

3
Community 16 Июн 2020 в 13:51

1 ответ

То, как вы подходите к этому, кажется мне правильным.

  1. Сохраняйте высоту на 100% и дайте ширине адаптироваться
  2. Сделать ширину прокручиваемой

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

Полоса прокрутки, возможно, каким-то образом смешалась с индикатором недель. Кнопки (левая/правая) слишком узкие, может их лучше убрать или сделать шире.

graph

2
Alvaro 19 Ноя 2016 в 20:31
Спасибо! Я вижу, что вы ловко спрятали параметры вкладок в выпадающий список. Но не потребует ли это переупорядочения html-структуры, когда дело доходит до мобильного просмотра параметров месяца?
 – 
Elaine Poh
20 Ноя 2016 в 19:12
Как и в любом адаптивном дизайне, HTML-код отображается по-разному на разных экранах. В зависимости от того, как создан HTML, список может быть «изменен» или скрыт, и показан другой список. Вы можете использовать один и тот же HTML-код на всех устройствах и адаптировать его только с помощью CSS.
 – 
Alvaro
20 Ноя 2016 в 19:25