Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Шаблоны диаграмм

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

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

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

Chart With Filters

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

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

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

Chart With Filters

Preview Window

Окно предварительного просмотра полезно для показа изменений данных во времени.

В большинстве финансовых приложениях Preview Window используется для чтения вариантов предварительного просмотра в более продолжительный период.

Интерактивность или доступность только для чтения — все это определяется природой диаграммы. Если с окном можно взаимодействовать, сделайте элементы достаточно крупными для сенсорного экрана.

Preview Window

Overview plus Data

Обзор плюс дата — это шаблон для резюмирования наиболее важной информации и детализирования данных.

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

Overview plus Data

Datapoint Details

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

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

При использовании Datapoint Details рассмотрите возможность детализации события onTap.

Datapoint Details

Drill Down

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

DrillDown и DatapointDetails не могут существовать вместе в одном приложении. Поэтому нужно решить, какой из них наиболее полезен.

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

Drill Down

Zoom

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

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

Zoom

Pivot Table

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

Pivot Table

Sparklines

Искрографики — микродиаграммы, которые имеют высокую плотность данных. Они отображают тренды и изменения: среднюю температуру, уровень активности и пр.

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

Sparklines