1 mxich44fazkcrjx5g lymw 1160x579 - Шесть дизайн принципов построения любой диаграммы и графика от Google

Введение в новые правила Google Material Design по визуализации данных

В августе 2017 года группа дизайнеров, исследователей и инженеров из Google собралась вместе, чтобы создать полный набор рекомендаций по визуализации данных, охватывающих все: цвета, формы, типографику, иконографику, взаимодействия и движения. Успех этого сотрудничества вызвал формирование первой команды Google по визуализации данных в мае 2018 года.

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


Будьте честны

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Шесть дизайн принципов построения любой диаграммы и графика от Google

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


Восхищайте пользователей

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Шесть дизайн принципов построения любой диаграммы и графика от Google

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


Придайте ясности фокусу

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Шесть дизайн принципов построения любой диаграммы и графика от Google

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


Масштабность

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Шесть дизайн принципов построения любой диаграммы и графика от Google

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


Обеспечьте структуру

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Шесть дизайн принципов построения любой диаграммы и графика от Google

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

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


Эта работа не могла бы быть выполнена без таланта и преданности бесчисленных людей в Google. Спасибо: Шуо Ян, Кент Эйзенхут, Шарона Ошана, Кэтрин Мейзнер, Хел Фишер, Росс Попофф-Уокер, Ян Джонсон, Джо Нэгл, Райан Вернон, Ник Берман, Лука Полина, Джерард Роша, Дж. Т. ДиМартиле, Лорена Залес, Том Гебауэр Хилал Коюнку, Бетани Фонг, Энн Чоу, Барбара Элдридж и Аня Лаубшер.

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: Manuel Lima

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Новый подход к подбору цвета интерфейса

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

7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

Для продуктового дизайнера недостаточно быть экспертом в области интерактивного дизайна. И вот почему…

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.