Гид по материальному дизайну продуктов Google (Перевод)

Новости

Гид по материальному дизайну продуктов Google (Перевод)

Ольга Кривоносова

2 Июня 2015

4-5 лет назад, все продукты Google не имели чёткого стиля. Каждый продукт выглядел по-разному на разных платформах. Изменения начались ещё в 2011 году, когда Google приступил к работе над визуальной частью своей продукции и назвал свой проект – «Проект Кеннеди».


Новый дизайн. Проект Кеннеди
В первую очередь проект Кеннеди улучшил вид продуктов в веб-е и в нескольких приложениях IOS. В то же время появилась новая версия Android – Holo, которая заменила эстетичные анти-интерфейсы старого Android. Но по-прежнему Holo отличался от концепции проекта Кеннеди.

Люди должны были приспосабливаться и привыкать к другому виду, расположению и управлению в новом интерфейсе при переключении между разными устройствами и платформами. Таким образом, в какой-то момент группа дизайнеров в Google решили бороться с этой проблемой, надеясь, что решат её раз и навсегда.

На I\O конференции 2014 (Innovation in the Open - ежегодная конференция, ориентированная на веб-разработчиков, проводимая компанией Google для обсуждения развития открытых веб-технологий и сервисов Google. прим. ред.) Google представил новую систему и новый дизайн подход, называемый материальным дизайном. Новый язык дизайна позволяет создать единый пользовательский интерфейс для всех устройств и размеров экрана: смартфонов, ноутбуков, планшетов, телевизоров, часов машин и т. д. Материальный дизайн эволюционировал Holo, и конечный результат стал ориентиром для разработчиков и дизайнеров приложений для Android и сети в целом. Во многих отношениях это был более гибкий язык дизайна, который был создан для мирового сообщества – Google стал использовать его первым. Материальный дизайн позволяет установить объективные стилистические рамки, устанавливает разумные пределы, но не чрезмерные ограничения.

Основные принципы

Материальный дизайн базируется на четырёх основных принципах:

Тактильные поверхности (квантовая бумага). Интерфейс состоит из материальных слоёв, так называемой «цифровой или квантовой бумаги». Эти слои уложены таким образом, что каждый слой находится на разной высоте, и каждый верхний слой бросает тень на слой, расположенный ниже, что помогает пользователям лучше понять анатомию интерфейса и принципы взаимодействия с ним.
Полиграфический дизайн. Если мы допустим, что слои являются частями «цифровой бумаги», то «цифровые чернила» - это то, что отображается на этих слоях. Здесь используется подход традиционный для графического дизайна; плакаты, журналы, газеты, упаковка, брендинг и т. д.
Значимая анимация. В реальном мире вещи не приходят из ниоткуда и не исчезают в никуда – это происходит только в кино. Таким образом, используя язык материального дизайна, следует думать об использовании «реальной» анимации слоёв и «цифровых чернил».
Адаптивность дизайна. Это соблюдение и применение всех предыдущих 3-ех принципов на разных устройствах с различным разрешением и размером экрана.

Тактильные поверхности

В материальном дизайне поверхности состоят из материальных объектов – слоёв и «листиков» «квантовой бумаги». В отличие от обычной бумаги они обладают сверхъестественными свойствами: возможностью соединения, растягивания и изменения своей формы. Остальная часть поведения поверхностей полностью подчиняется законам физики.

Что есть поверхность? На самом базовом уровне, поверхность – «контейнер», который бросает тень и ничего больше, но этого достаточно, чтобы отличить один объект от другого, и показать, как они расположены относительно друг друга. Философия материального дизайна компании Google стремится к «чистому» дизайну и простоте. Нет необходимости идти слишком далеко и использовать текстуры, светотени или градиенты. Аккуратная тень может выразить много и этого вполне достаточно. Каждая поверхность находится на разной высоте (положение на оси Z) и бросает тень на расположенные ниже слои, так же как в реальном мире.

Глубина

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

Глубина from REDMADROBOT on Vimeo.


Глубина даёт нам некоторые советы о взаимодействии. В приведённом выше примере, пользователь при прокрутке содержимого видит, что зелёный заголовок находится на верхнем слое и бросает тень. Мы можем мгновенно понять, что движутся не только «чернила» на белом фоне, но и поверхность («контейнер») в целом.


Важно:

Тень должна быть значимой. Не обязательно применять тень к тексту.
Позаботьтесь о движениях. Плавающие кнопки, панели инструментов и диалоговые окна должны быть расположены на определённой высоте. Иногда они должны двигаться вдоль оси Z, чтобы избежать столкновения, когда пользователь совершает какое-либо действие.
Не обязательно использовать плавающую кнопку действия (Floating Action Button (FAB) прим. ред.) FAB является отличительным элементом материального дизайна. Многие считают, что использование её необходимо и только при добавлении этой кнопки к интерфейсу дизайн становится материальным. На самом деле она должна быть использована для совершения ключевых действий в вашем приложении. Если вам нужно закрыть окно или подтвердить действие, не обязательно использовать плавающую кнопку, можно использовать другие элементы для достижения этой цели.
Не обязательно использовать карту(сайта, приложения). Карта необходима если продукт имеет сложную структуру и содержит много разного контента.
Диалоговые окна. Дизайнеры в Google кардинально улучшили диалоговые окна, но для решения большинства задач лучше располагать информацию на нижнем слое или использовать информационные сообщения (SnackBars).

Полиграфический дизайн (цифровые «чернила»)

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

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

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

Размер шрифта

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

Цвета

Как и в полиграфии, в материальном дизайне цвет является важным средством. Цвет «квантовой бумаги» играет более заметную роль (в отличие от предыдущих концепций Google и версий Android). Стандартная палитра материального дизайна состоит из основных и акцент-цветов:


Цвета в основном используются для больших площадей, таких как панели действий и более тёмного их варианта в области строки состояния. Яркие акценты используются для точечного управления, индикаторов, кнопок, полос и т. д. Акцент-цвета предназначены для привлечения внимания пользователя к ключевым элементам таких как плавающие кнопки действий:


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


Можно выбрать картинку и алгоритм, по которому Палитра выберет из неё 6 цветов с различными характеристиками:
- яркие и приглушённые цвета;
- светлые, обычные и тёмные тона;
- цвет фона определится исходя из цвета текста.

Красивые фотографии

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

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

Пример 1. Анимация показывает движение поверхности в зависимости от клика.


Пример 2. Часть календаря отрывается от поверхности и становится самостоятельным слоем и показывает подробности события.

Календарь from REDMADROBOT on Vimeo.


Интересный момент: активное движение бросается в глаза пользователя. С помощью анимации мы управляем вниманием пользователя.

Асимметрия

Асимметрия from REDMADROBOT on Vimeo.

Ширина интерфейса ограничена шириной устройства, необходимы все средства для изображения трансформации объектов, которые спрятаны в плоскости. Асимметрия — одно из этих средств. Для того чтобы эти трансформации были асимметричны: ширина и высота объекта должна быть независимой. В противном случае создастся впечатление что объект приближается или отдаляется от зрителя с очень большого расстояния.

Ответ

Реакция from REDMADROBOT on Vimeo.

Ещё один очень важный принцип анимации материального дизайна – ответ на действие пользователя. Эпицентр изменений интерфейса — точка касания экрана устройства. Например, действие может происходить в виде волны от точки касания к краям устройства.

Аутентичные движения

Четкость и резкость from REDMADROBOT on Vimeo.

В реальном мире объекты не могут прийти к мгновенной остановке. Ровно так же физические законы движения используются в анимации материального дизайна. «Анимация с резкими пусками и остановками, или с быстрыми изменениями направления кажется неестественной и может быть неожиданной и неприятной для пользователя».

Адаптивная конструкция

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

От общего к частному

Наиболее распространённый метод — сокращение количества информации для небольших экранов (меньший экран – меньше информации на одном «цифровом листе» – разные поверхности для отображения деталей). Если на большом экране мы можем себе позволить показать список и подробную информацию о выбранном пункте, то на смартфоне отображение списка и отображение деталей будет происходить на разных экранах (поверхностного слоя).

Отступы

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

Размеры

Рекомендуется создать несколько размеров для всех элементов. В частности – удобнее выбрать размер и работать с его пропорциями: 1x, 2x, 3x. На смартфонах и планшетах этот размер отличается, но приложения будут адаптироваться без каких-либо проблем.

Блоки

Если установить модульную сетку блоков (несколько по 8 dp), можно получить чёткий визуальный ритм и компоновать элементы будет удобнее.

Панель инструментов

Разного рода меню инструментов, кнопки действий, навигация - являются одними из самых важных частей пользовательского интерфейса. В Android Lollipop(начиная с 5-ой версии прим. ред.) навигация развивалась из ограниченных полос на вершине полноценного виджета до красивой и функциональной единицы контроля приложений. Материальный дизайн пользовательского управления обогатился различными элементами:
- Поля ввода, формы и т. д.;
- Плавающие кнопки действия;
- Дополнительная скрытая панель навигации (функциональный виджет);
- Панель управляется удобно и только когда это необходимо.
 
Совет: Не обязательно делать в нижнем углу «гетто» для плавающей кнопки действия (FAB). FAB могут быть размещены в любом месте: снизу, сверху, справа, слева. Конечно, это очень удобно добраться до FAB в нижнем углу, но это не единственный вариант. FAB могут быть перемещены с места на место в зависимости от целей вашего приложения.

Оригинал статьи: http://materialdesignblog.com/




Написать комментарий

Ваш комментарий

Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Отправить Отменить

Комментариев никто не оставлял. Вы можете стать первыми!

Решения
MissShop - магазин женской одежды. Адаптивный. Композитный.
199 900 руб.
3 Отзыва
MisterShop - магазин мужской одежды. Адаптивный. Композитный
199 900 руб.
1 Отзыв
Парсер контента: сайты, excel, xml, yml, csv, rss
19 990 руб.
31 Отзыв
SEO умного фильтра: мета-теги, заголовки, карта сайта
14 990 руб.
14 Отзывов
Маркетинговые рассылки - персонализация сообщений
9 990 руб.
6 Отзывов
Комплексные отзывы, комментарии, вопросы
9 990 руб.
1 Отзыв
1С инструменты - расширение стандартного обмена
8 490 руб.
7 Отзывов
Ценовой маркетинг
7 490 руб.
Контентное API Яндекс.Маркет: Загрузка товаров, характеристик и обновление цен
9 990 руб.
4 Отзыва
Мой Бухгалтер - для частных бухгалтеров и бухгалтерских компаний. Адаптивный. Композитный
9 990 руб.
1 Отзыв
БыстроРемонт - ремонт квартир под ключ. Адаптивный. Композитный
9 990 руб.
Почта России/EMS - расчет и отслеживание
7 990 руб.
4 Отзыва
Похожие товары - как инструмент увеличения среднего чека
2 990 руб.
2 Отзыва
Вакансии HeadHunter
6 990 руб.
Заказы Wikimart
4 990 руб.
Быстрая загрузка картинок в визуальном редакторе
2 990 руб.
1 Отзыв
Мотивируем на регистрацию - повышаем продажи
2 490 руб.
Расчет DPD доставки
2 490 руб.
3 Отзыва
Интеграция с Контур.Эльба
9 990 руб.
Расширенная авторизация
2 990 руб.
С этим товаром просматривают
Бесплатно
Сейчас покупают
Бесплатно
Этот товар был заказан
Бесплатно
Товар сейчас просматривают
Бесплатно
Удобный mp3 player
Бесплатно
Подписка на группы vkontakte и facebook
Бесплатно
1 Отзыв
Настраиваемый Ajax Preloader
Бесплатно
4 Отзыва
Умные хлебные крошки
Бесплатно
Заказ по телефону
Бесплатно
Еще решения
Сотбит
Веб студия занимается разработкой сайтов на 1С-Битрикс, разработкой типовых решений, входит в ТОП-10 разработчиков для Маркетплейса 1С-Битрикс.
192029
Россия
Ленинградская область
Санкт-Петербург
м. «Петроградская», пр-т Медиков, д. 3-5, лит. А, оф. 211
+7 (812) 670-07-40
info@sotbit.ru
,
обратная связь