Material design от Google – за и против. Keep: образцы адаптивной навигации


  • Tutorial
“Это унылое диалоговое окно действительно нужно?”


В этой статье я изложил главные принципы Material Design и дал советы по их воплощению. Текст написан по следам мастер-класса для разработчиков, который мы, Роботы, устраивали совместно с российским офисом Google (Think Mobile).


Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.

При чем тут Кеннеди?

Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% - они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.



Результат в первую очередь коснулся веба, но затронул и некоторые мобильные продукты. В то же время шла отдельная работа над дизайном Android - Holo, который пришел на смену не слишком эстетически приятным интерфейсам старой Android.
Но оставалась одна проблема: Holo по-прежнему отличался от Project Kennedy.


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

В 2014 году на конференции I/O была представлена новая дизайн-система, подход, который получил название Material Design. Новая дизайн-система позволяет создавать консистентный пользовательский опыт на всех экранах: десктоп, смартфон, планшеты, часы, телевизоры, машины. Для Android-приложений Material Design представляет собой эволюцию визуального языка Holo и дизайн-гайдлайнов. Во многих смыслах это более гибкая система, которая создавалась с учетом того, что пользоваться ей будут другие дизайнеры - Google был лишь первым пользователем.

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

4 принципа Material Design



Material Design зиждется на четырех основных принципах:
  1. Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
  2. Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
  3. Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда - такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
  4. Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.

Итак, будем двигаться по порядку.

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



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

Поверхность



Что такое поверхность? В основе своей это “контейнер” с тенью и ничего больше. Но и этого вполне достаточно, чтобы отличить один объект от другого и показать, как они расположены друг относительно друга. Философия Material Design стремится к простоте и “чистому” дизайну.

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

Глубина



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

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

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

NB!
  1. Глубина должна иметь смысл. Задавайте себе вопрос: «Почему так, а не иначе?» Если ответа нет, имеет смысл поискать другое решение.
  2. Позаботьтесь о логистике. Плавающие кнопки, тулбары и диалоговые окна находятся на определенной высоте. Иногда им нужно перемещаться по оси Z, чтобы избегать столкновений, когда что-то происходит. С этой вот хореографией нужно быть предельно внимательным.
  3. Не надо насиловать кнопку. Плавающая кнопка - очень характерный элемент. Многие считают, что стоит добавить её в интерфейс: так это сразу становится Material Design. Но она должна использоваться только для ключевого действия в вашем приложении. Если вам нужно закрыть какое-то окошко или подтвердить действие, то не нужно использовать плавающую кнопку. Для этого есть другие элементы.
  4. Не все должно быть на карточке. Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?
  5. Это унылое диалоговое окно действительно нужно? Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.
  6. Используйте раскрытие списков. Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.

Полиграфический дизайн


Раз поверхности в Material Design мы называем «цифровой бумагой», то всё, что на ней размещается - текст, изображения, пиктограммы - нанесены «цифровыми чернилами». И Material Design использует классические принципы полиграфического дизайна в оформлении интерфейсов.

Изящная типографика

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


На этом экране довольно много текста. Но если отбросить иконки и превратить текст в серые блоки, то станет очевидно, что структура вполне различима.

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

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


На сайте google.com/design/spec есть стандартная палитра шрифтов, которую можно смело использовать. В палитре используется шрифт Roboto, но его можно заменять своим фирменным шрифтом, чтобы поддержать бренд. Важно всё внимательно протестировать, так как на разных устройствах рендеринг шрифтов может работать по-разному. Обычно OTF шрифты работают лучше, чем TTF.

Контрастная типографика


Еще один принцип из мира полиграфии, который хорошо уживается в Material Design, это контрастная типографика - действительно заметный контраст между размерами шрифта заголовка и наборного текста. Это красиво и хорошо выделяет главное.

Модульная сетка и направляющие



Теперь к расположению контента на экране. В полиграфическом дизайне используются модульные сетки, в экранном дизайне это больше базовые сетки с очень маленькими модулями. Так, в Material Design используется сетка с шагом в 8dp. DP - это density-independent pixel, единица во многом аналогичная единице point в iOS.

Но главная отличительная черта размещения контента в соответствии с принципами Material Design - расположение ключевых направляющих. Они задают отступы от краёв экрана, структурируя информацию и управляя взглядом пользователя. Если вы знакомы с дизайном многостраничных изданий или читали Чихольда , то наверняка многое знаете о сетке и полях и понимаете, откуда тут растут ноги.

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

Геометрическая иконографика



Если говорить про иконографику, то простые иконки использовались в Android уже на протяжении какого-то времени, но в Material Design они стали еще проще и дружелюбней. На неофициальном ресурсе materialdesignicons.com дизайнеры могут найти пиктограммы для своих целей и по возможности внести свой вклад.

Цвет


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

Основной используется для больших областей вроде action bar, а в его более тёмную вариацию красится status bar. Более яркий акцентный цвет используется точечно в элементах управления, кнопках, полосках, индикаторах и т.д. Акцентный цвет призван привлекать внимание пользователя к ключевым элементам, таким как плавающая кнопка.

Насколько много цвета применять? Акценты ставятся точечно, в небольшом количестве. Для раскрашивания остальной части интерфейса есть простое базовое правило. Когда текста много, например, это список почты, стоит оставить app bar стандартного размера и покрасить его, чтобы позволить пользователю сосредоточиться на содержимом. Если контента не так много, например, детальный просмотр отдельного элемента, фото или калькулятор, то это отличная возможность для применения больших цветных плашек - 2х или 3х высоты app bar.

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

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

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


И наконец, как и в печатном дизайне, в Material Design поощряется использование фотографии и иллюстраций во всей красе. Картинки в основном размещаются без рамок, часто «навылет». Даже status bar специально делается прозрачным, чтобы не мешать. При этом каждая капля «цифровых чернил» на экране имеет функцию, почти ничего нет просто для украшения.

NB!
  1. Брендируйте с удовольствием. Google находится в более выгодном положении с тем, что может использовать яркие цвета в качестве фирменных, но это не стоит воспринимать как проблему. Цвета можно выбрать из корпоративного брендбука и вообще использовать логотип.
  2. Не забывайте отступы и “давайте воздуха”. Базовая сетка в 8dp и отступ слева в 72dp - практически правило. Пусть контенту будет хорошо и свободно.
  3. Выразительные фото делают погоду. Фотографии и иллюстрации в качестве выразительных средств - наш выбор.

Осмысленная анимация


В реальном мире объекты не могут просто появляться из ниоткуда или исчезать в никуда. Это вызывало бы недоумение и ставило людей в тупик. Поэтому и в Material Design осмысленная анимация используется, чтобы показать, что именно только что произошло.

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

Пример 2. Событие в календаре после нажатия отрывается от поверхности, превращается в отдельный слой «бумаги», начинает трансформироваться и раскрывается в виде подробной информации о событии.

Интересный момент в том, что активное движение привлекает взгляд - это естественно для нашего зрения. C помощью анимации мы управляем вниманием пользователя.

Асимметрия

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

Реакция

Другой очень важный принцип анимации в Material Design - реакция на действия пользователя. Там, где это возможно, эпицентром изменений в интерфейсе должно быть прикосновение к экрану устройства. Например, волна, которая появляется и идёт от точки касания пальцем. Этот эффект без проблем реализуется в Android L.

Микроанимации


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

Четкость и резкость

И последний, ключевой принцип анимации: движение должно быть быстрым и чётким. В отличие от банального ускорения в начале и замедления в конце кривая анимации в Material Design более натуральная и интересная. Объекты быстрее реагируют и достигают целевого состояния, резче возвращаются назад, но чуть дольше идут к состоянию покоя в конце. В результате пользователю нужно меньше ждать (это меньше раздражает). При этом там, где объект уже вышел из сферы интересов пользователей, он позволяет себе вести себя более естественно.

NB!
  1. Не оставляйте анимацию напоследок. Не стоит оставлять анимацию на самый конец - она может служить ключевым фактором пользовательского опыта, и её нужно продумывать заранее.
  2. Знайте меру. Слишком много анимации - тоже плохо. Держите себя в руках и помните, что она должна быть осмысленной.

Адаптивный дизайн



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

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



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

Отступы



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

Whiteframes



Идеи по организации пространства и отступам для разных экранов можно подсмотреть на сайте google.com/design/spec в разделе Whiteframes. Это отличное место, чтобы начать, понять общий смысл и затем продолжить собственные эксперименты.

Направляющие



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

Размеры



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

Блоки



Мышление блоками вообще может быть полезным. Если задать такую вот модульную сетку из блоков, кратных 8dp, то получится отличный визуальный ритм и принимать решения будет удобнее. Зайдите на сайт с вайтфреймами и посмотрите материалы.

Toolbar



Action bar - одна из самых важных частей интерфейса. В нём размещается заголовок, кнопки действий и навигация. В Android Lollipop action bar превратился из скованной полоски сверху в полноценный виджет - функциональный и красивый блок управления приложением. Это стало возможным благодаря тому, что теперь в тулбар можно поместить много функциональных элементов, о которых раньше и мечтать не приходилось:
- поля ввода, формы;
- плавающая кнопка основного действия;
- тулбар скрыт выдвинутой навигацией, но и здесь мы видим вполне функциональный виджет;
- тулбаром удобно управлять при необходимости.
NB!
  1. Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию в своих приложениях, поэтому вы можете видеть её в разных примерах. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
  2. Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера - это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
  3. Не надо делать из нижнего угла гетто для плавающей кнопки. Плавающая кнопка может быть где угодно: снизу, сверху, справа, слева. Конечно, в углу до неё может быть удобно дотягиваться, но это не единственный вариант. Кнопка может перемещаться с места на место в зависимости от задач.
  4. И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.

Это Material Design. Не бойтесь экспериментировать и ошибаться: не стоит зацикливаться на копировании существующих решений. Пробуйте!

Теги: Добавить метки

Комментарии 121

                    • Вы тоже, как и гугл только горизонтально держите телефон?

                      В вертикальном только 50-70% экрана используется


                      • На этом экране довольно много текста.

                        Это много текста? Что же Твиттер с людьми то сделал…

Google Картинки позволяют находить в Интернете информацию, представленную визуально. Новые функции, такие как подписи к изображениям , хорошо заметные значки и AMP-страницы в результатах поиска, помогут пользователям быстро отыскивать то, что им нужно.

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

Запрет интерактивных ссылок в результатах поиска по картинкам

При желании вы можете запретить показ интерактивных ссылок в результатах поиска Google Картинок, и тогда на странице с результатами не будут демонстрироваться полноразмерные изображения.

Инструкции

  1. При запросе вашего изображения проверяйте заголовок HTTP Referer .
  2. Если запрос исходит из домена Google, отправляйте ответ с кодом HTTP 200 (OK) или 204 (No Content).

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

Сделайте сайт удобным для пользователей

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

  • Помните, что важен контекст. Убедитесь, что ваш визуальный контент соответствует теме, которой посвящена страница. Желательно использовать только те изображения, которые дополняют по смыслу остальное содержание. Крайне не рекомендуется демонстрировать на странице текст с изображениями, если контент ни того, ни другого типа не является оригинальным.
  • С умом подходите к размещению. По возможности размещайте изображения рядом с текстом, который они иллюстрируют. Иногда ключевое изображение имеет смысл поместить в верхней части страницы.
  • Не размещайте важный текст непосредственно на картинках. Старайтесь не использовать текст на изображениях, так как в таком виде он доступен не всем пользователям. В первую очередь это касается таких важных текстовых элементов, как заголовки страниц и пункты меню. Помимо прочего, текст на изображениях не распознают инструменты, применяемые для перевода страниц на другие языки. Чтобы обеспечить максимальное удобство восприятия и поиска своего контента, добавляйте текст на страницу только в разметке HTML, а также не забывайте вводить описания к картинкам в атрибутах alt.
  • Создавайте хорошие, информативные сайты. Содержание страницы в целом не менее важно при поиске в Google Картинках, чем собственно визуальный контент, поскольку позволяет эффективнее его обрабатывать. Например, в качестве описаний к такому контенту могут быть использованы фрагменты текста с определенной страницы. Также Google учитывает качество представленной на сайте информации при ранжировании изображений.
  • Создавайте сайты, оптимизированные для мобильных устройств. Пользователи чаще выполняют поиск в Google Картинках с мобильных устройств, чем с компьютеров. Поэтому важно сделать свой сайт удобным для просмотра на устройствах любых типов и размеров . Проверка удобства просмотра на мобильных устройствах поможет узнать, правильно ли показываются при этом страницы и нет ли на них ошибок.
  • Тщательно прорабатывайте структуру URL для своих изображений. Помимо названий файлов, Google при обработке визуального контента учитывает пути в URL. Постарайтесь выработать логическую схему для URL изображений.

Уделите внимание заголовку и описанию страницы

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

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

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

Добавьте структурированные данные

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

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

Добавьте качественные фотографии

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

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

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

Название файла может выполнять ту же функцию, что и заголовки с подписями. Поэтому sobaka.jpg в качестве названия предпочтительнее, чем IMG00023.JPG .

Добавьте описания изображений в атрибуты alt

Замещающий текст в атрибутах alt делает контент доступным для пользователей, которые не видят изображения на страницах (например, потому что используют программы для чтения с экрана или из-за медленного подключения к Интернету).

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

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

  • Неудачный вариант (атрибут alt не заполнен):
  • Неудачный вариант (злоупотребление ключевыми словами):
  • Более удачный вариант:
  • Лучший вариант:

Используйте файлы Sitemap для изображений

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

Файлы Sitemap для изображений, в отличие от обычных файлов такого типа, могут содержать URL из других доменов. Это позволяет веб-мастерам использовать для размещения графических файлов СДК (сети доставки контента). Рекомендуем проверить доменное имя СДК в Search Console, чтобы мы могли уведомлять вас о выявленных ошибках сканирования.

Поддерживаемые графические форматы

В Google Картинках поддерживаются следующие форматы: BMP, GIF, JPEG, PNG, WebP, SVG и встроенные изображения .

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

image data… ">

Вместо image data следует подставить строку в кодировке Base64.

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

Адаптивные изображения

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

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

Использование тега

Атрибут srcset позволяет указывать в элементе несколько версий одного изображения для экранов разных размеров.

Пример

Использование тега

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

Оптимизируйте изображения для Безопасного поиска

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

Разместите изображения, предназначенные только для взрослых, по отдельному адресу

Если на вашем сайте есть визуальный контент, предназначенный для просмотра исключительно взрослыми, мы настоятельно рекомендуем разместить его отдельно. Пример: http//www.example.com/adult/image.jpg.

Добавьте метаданные на страницы с контентом для взрослых

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

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

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

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

И напоследок

Была ли эта статья полезна?

Как можно улучшить эту статью?

Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design и как его использовать.

Изначально дизайнеры Google ставили перед собой три глобальные задачи:

  • Создать не просто новый стиль, а целую систему оформления, в которой принципы и правила будут четко прописаны;
  • Обновить существующие стили (FLAT/Metro, минимализм и другие), опираясь на новые технологии.
Эта система оформления потребовалась потому, что мобильные приложения и сайты превратились из некоторого дополнения к обычным веб-сайтам в их неотъемлемую часть.

Откуда взялся Материал Дизайн: статистика мобильного интернета

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

«Материал» в дизайне: что это?

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

  • Его должно хотеться пощупать;
  • Он интерактивен, и на экране монитора ведёт себя так же, как вел бы себя какой-то физический объект в жизни;
  • Он похож на бумагу;
  • Он создаёт тени, изгибается, движется как настоящий.

Пример наложения слоёв "цифровой бумаги"

Эти условия вполне понятны: вы, наверное, замечали – и не раз – что чаще хочется кликнуть на «вкусную», объемную кнопку, которая ведет себя как настоящая при нажатии. Поскольку экран компьютера передает только визуальные образы, люди с другой системой восприятия (аудиалы и кинестеты) оказываются обделёнными и не получают тех ощущений, к которым привыкли. Дизайнеру остается только симулировать: сделать кнопку такой, чтобы этот образ вызвал в воображении посетителя чувство, как будто он эту кнопку трогает и чувствует её шероховатости, углы, объём. Это важно для кинестетов, например, - это люди, которые особо восприимчивы к тактильным ощущениям.

Конечно, такие свойства использовались в дизайне и раньше: например, в стиле Веб 2.0 были популярны большие глянцевые кнопки с бликами. Но в материал дизайне свойства четко прописаны. В частности, все элементы имеют одинаковую «толщину»: вебдванольных кнопок, выделяющихся на фоне остальных блоков страницы, больше нет.

Кнопка в стиле material дизайна и кнопка Web 2.0

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

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

Ошибки и заблуждения

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

Второе. Материалы в дизайне нужно использовать реалистичные. Не обязательно! Важно, чтобы они вели себя, как настоящие. Неважно, будет это реальная текстура дерева или «синтетическая» текстура, созданная в фотошопе с помощью инструмента Noise.

Третье. Материал и его интерактив – это единственное, что отличает этот стиль. Нет! Чтобы получился «канонический» material design, как у Google, нужно соблюдать и другие принципы:

  • Картинки оформляются без промежутков, край к краю;
  • Крупные, хорошо читаемые шрифты без засечек;
  • Цветовое кодирование;
  • Иконки, выполненные по тем же принципам материал дизайна;
  • Адаптивная вёрстка.

Полный список правил можно узнать в официальном разделе Google про material design.

Android material design

В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги. Но при взаимодействии каждый элемент, будь то диалоговое окно или кнопка навигации, поднимается вверх. Это способ, с помощью которого в этом стиле выделяются активные блоки. Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).

Теперь "послойный принцип перешел от попапов ко всему интерфейсу

Интересно, что разработчики материал дизайна в Гугле даже прописали чётко все параметры для каждого из возможных элементов интерфейса!

Цвета в материал дизайне

Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:

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

Цвета material design: палитра Google

В нашей сегодняшней статье мы затронем тему, которая еще не обсуждалась на Rusability. Справедливости ради отметим, что и в рунете как таковом интерес к этой теме только начинает набирать обороты, несмотря на то, что сама концепция появилась на свет еще в прошлом году. Речь идет о нашумевшем и, как считают некоторые, революционном направлении дизайна, которое Google окрестил как material design .

Материальный дизайн является не столько даже каким-то новым подходом к выстраиванию отношений между пользователем и виртуальной средой, сколько целой философией, регламентирующей такие отношения. Как и многие по-настоящему яркие и свежие явления последнего времени, материальный дизайн является удачной компиляцией тех идей и концепций, которые либо уже встречались по отдельности в различных продуктах, либо, что называется, витали в воздухе. Споры о том, является ли материальный дизайн удачным направлением, все еще ведутся, равно как и придирчивый и скрупулезный поиск всевозможных недостатков, однако, пожалуй, уже никто не отрицает, что эта концепция является очень точным отражением духа времени и чаяний рядовых пользователей. Она эстетически выдержана, привлекательна, интуитивна, и, по всей видимости, очень удобна в эксплуатации. «Материальный дизайн – это круто» – такого рода эмоции объединяют как восторженную публику, так и аудиторию с более критическим взглядом, указывающую на имеющиеся у материального дизайна недостатки.

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

Google представил материальный дизайн широкой публике 25 июня 2014 года как дизайн новой операционной системы Android, получившей впоследствии название Lollipop. Полноценно использовать материальный дизайн можно только в рамках создания приложений для Lollipop, но некоторые приложения для Android 4 также вполне могут быть переработаны в стиле material, впрочем, с определенными ограничениями. Главный и, вероятно, единственный фактор, существенно ограничивающий свободу разработчиков приложений для Lollipop – плохая совместимость концепции material design с более ранними версиями Android и пока еще небольшая распространенность Android 5.1 Lollipop. В любом случае, устранение последнего недостатка является лишь вопросом времени.

Android Lollipop

Выход в свет концепции material design был сопряжен с появлением подробного, доступного и обстоятельного гайдлайна от Google . Обсуждая материальный дизайн в нашей статье, мы будем регулярно обращаться к этому полному и яркому руководству, разработанному дизайнерами Google.

Основные тезисы и базовые принципы Material Design

Вся философия материального дизайна покоится на четырех основополагающих и понятных принципах:

  1. Поверхности. Воплощенные в виде карточек, созданных из «цифровой бумаги», такие поверхности полностью подчиняются законам физического мира, обладают тактильным откликом и обеспечивают сильную обратную связь вместе с высокой интуитивностью.
  2. Типографика полиграфического толка. Вместо того чтобы изобретать велосипед, почему бы не воспользоваться более чем вековыми наработками в области полиграфии? Учитывая, что исходную поверхность теперь представляют слои виртуальной, практически осязаемой бумаги, вполне логично наносить на нее информацию сообразно лучшим образцам полиграфической продукции. Говоря более утрированно, Google адаптировала правила «реальной», полиграфической типографики для экранов мобильных устройств.
  3. Анимация. Анимация в материальном дизайне должна подчиняться физическим законам, а следовательно – интуитивным ожиданиям пользователя. Взаимосвязь движущихся объектов, их влияние друг на друга, способ появления и движения – все это должно быть реальным, логичным и предсказуемым.
  4. Адаптивный дизайн. Тот самый главный аспект, о котором мы говорили в начале статьи. Адаптивный дизайн призван унифицировать пользовательский опыт и сделать его единообразным на всех платформах.

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

Поверхности, их свойства и функции

В свойствах поверхностей сосредотачивается та самая материальность концепции Google. Сама структура интерфейса максимально реалистична – она имеет глубину, ограниченную толщиной устройства. К примеру, устройство толщиной в 1 см по material design будет содержать в себе внутренний мир такой же толщины. Это очень напоминает тонкий аквариум, у которого есть задняя стенка и переднее стекло, но вместо морской живности по этому аквариуму плавают поверхности, напоминающие листки бумаги и распределяющиеся по толщине аквариума слоями. И, точно так же, как и подводные обитатели, эти поверхности-карточки полностью подчиняются физическим законам – порой кажется, что они более чем реальные, заключенные между задней стенкой смартфона и стеклом дисплея.

Материальный дизайн в разрезе

Ось Z в мире material design отвечает за объем интерфейса

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

Способ отображения тени в материальном дизайне

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

Приоритетная поверхность выходит на первый план, отбрасывая тень на нижний «листок»

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

Особенности типографики в Material Design

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

Примеры типографики material design

Шрифты

Стандартный шрифт, долгое время используемый в Android – Roboto. В новой ОС Lollipop и в материальном дизайне он также используется в качестве основного шрифта. Кроме Roboto, в приложениях для Android также может быть использован шрифт Noto, предназначающийся для тех языков, для которых не разработаны свои версии Roboto. Несмотря на общий стиль приложений под Android и рекомендации по шрифтам, приведенные в гайдлайне, вполне допустимо в отдельных случаях использовать вместо Roboto собственный фирменный шрифт, призванный сформировать у пользователя соответствующие ассоциации.

Шрифт Roboto

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

Контрастная типографика в действии

Расположение контента или принцип верстки в material design

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

Структура и расположение полей в материальном дизайне

Иконки

Иконографика, используемая в материальном дизайне, представляет собой логическое развитие идеи максимального упрощения, которую можно было наблюдать в более ранних версиях Android. Google характеризует иконки для material как простые, отчетливые и дружелюбные. При этом идея материальности также может распространяться на иконки – сам Google последовательно воплощает идею material в иконках своих продуктов. К примеру, иконка Gmail, изображающая бумажный конверт, происходит от своего реального аналога. В среде материального дизайна упрощенное изображение конверта кажется почти таким же реальным, как «настоящий» прототип – на иконке можно наблюдать характерные тени, обозначающие изгибы и физическую структуру листа бумаги, свернутого в форме почтового конверта.

Виртуальный прототип бумажного конверта и готовая иконка Gmail

Примечательно, что материальный подход к созданию иконок допускается только в отношении тех иконок, которые символизируют конкретный продукт – такой, как Gmail. Другие же, системные (или UI icons) иконки, которыми наполняются приложения, имеют менее материальную природу. Они по-настоящему минимальны, однородны и просты. Благодаря своей простоте и символичности, они удобочитаемы даже при значительном уменьшении. В таких иконках преобладают геометрические формы.

Иконки Android Lollipop – разве может быть что-то более минималистичным и простым?

Для разработчиков Google предлагает внушительный набор иконок, выполненных в стиле материального дизайна. В этой подборке можно найти, пожалуй, любые необходимые иконки для создания приложений с материальным дизайном. Набор иконок material design от Google доступен на GitHub. Также хотелось бы упомянуть ресурс materialdesignicons.com , на котором можно найти не только иконки других авторов, но и предложить разработанные самостоятельно.

Философия цвета

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

Главная идея работы с цветом в материальном дизайне – это разделение оттенков на основные и акцентные. В качестве основных цветов Google предлагает использовать 500 различных оттенков, вместе составляющих главную (Primary) палитру. Все остальные цвета, не вошедшие в эту палитру, можно использовать как акцентные.

Примеры основных цветов из Primary палитры и родственные им акцентные цвета (приводятся в нижних блоках, с буквенным обозначением в виде « A » перед номером оттенка)

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

Status bar принимает цвет action bar , но по-прежнему выделяется более насыщенным, темным оттенком

По-настоящему яркие и привлекающие внимание цвета в материальном дизайне используются для расстановки акцентов. В таких цветовых акцентах нуждаются активные элементы приложений, в первую очередь, конечно же, плавающая кнопка (Floating Action Button). Кроме нее в яркие акцентные цвета необходимо раскрашивать разнообразные слайдеры и переключатели.

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

Анимация

Движение супрематического квадрата, Казимир Малевич (1920) и Meaningful Motion , Google Material Design (2014)

Анимация в материальном дизайне – это один из самых интересных его аспектов. Именно благодаря детально проработанной анимации, подчиняющейся физическим законам реального мира, устройства с Android 5 на борту так увлекают и вызывают у пользователя желание возиться с ними часами, особенно в первое время после знакомства. Функциональное назначение анимации в материальном дизайне – это постоянная демонстрация пользователю последствий его действий. Анимация привлекает взгляд и наглядным, красноречивым образом показывает пользователю, что именно происходит в данный момент времени.

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

Основа анимации материального дизайна – это взаимодействие плоскостей, кусочков «цифровой бумаги», о которых мы говорили ранее. Эти плоскости, перемещаясь на различных уровнях в своем мире, ограниченном задней стенкой смартфона и стеклом экрана, могут встречаться, вытесняя и сдвигая друг друга, выходить по команде пользователя на передний план, увеличиваясь в размерах и заполняя собой экран.

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

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

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

Перемещение слоя «цифровой бумаги» в галерее

Во-вторых, в материальном дизайне очень эффективно обозначается появление или уход с экрана нового объекта. Так же, как и в реальном мире, в среде материального дизайна, объекты не появляются из ниоткуда, равно как и не уходят в никуда. В ОС Lollipop появление на переднем плане нового объекта связано с любопытными метаморфозами – объект, действительно, не появляется внезапно из ниоткуда, он выскальзывает, постепенно растягиваясь и приобретая форму поверхности. Никакого соблюдения пропорций при этом не происходит, ведь пропорциональное и симметричное увеличение или уменьшение поверхности будет производить впечатление приближения или удаления, в то время как нам необходимо обозначить появление на экране нового кусочка «цифровой бумаги», обособленного и самостоятельного.

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

Растекающаяся капля, формирующая новую рабочую поверхность – один из самых наглядных эффектов в материальном дизайне

Эффект растекающейся поверхности может быть очень изящным и красочным

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

Пример анимации базовых иконок в Android Lollipop

Вездесущий Ripple -эффект

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

Ripple -эффект, происходящий при быстром касании экрана пальцем

Ripple -эффект, происходящий при попытке перемещения изображения внутри галереи

Технический аспект анимации material design или естественная огибающая

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

В среде материального дизайна объекты, выведенные из состояния покоя, быстро (но не мгновенно!) ускоряются и мягко, не спеша замедляются. С движением и анимацией такого типа приятно взаимодействовать, так она соответствует нашему опыту, выработанному в процессе общения с реальным миром.

График движения анимированных объектов: быстрое ускорение и плавное замедление

Адаптивный дизайн

Наиболее важный, ключевой аспект материального дизайна. Философия material design подразумевает полную унификацию пользовательского опыта. Иными словами, пользователь не должен сталкиваться с разными версиями одного приложения, пользуясь разными гаджетами. Опыт пользователя должен быть одинаков и для десктопа, и для смартфона или планшета. Единственные допустимые и объективные различия – это разные размеры и пропорции элементов интерфейса приложения. Во всем остальном разные версии одного приложения должны формировать совершенно идентичный пользовательский опыт.

Необходимость унификации и выработки единообразного пользовательского опыта Google осознали одними из первых. На практике это осознание обернулось так называемым проектом «Кеннеди», когда в 2011 году компания начала разрабатывать единый тип интерфейса для всех своих приложений. В эстетическом и UX-отношении Google добились неплохих результатов, однако, между версиями их продуктов для десктопа и для мобильных гаджетов под управлением Android все еще оставалась настоящая пропасть. Собственно, сам material design является следующей после проекта «Кеннеди» попыткой создать по-настоящему унифицированный интерфейс.

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

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

Модульная сетка и распределенные блоки

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

Интерфейс, выполненный в соответствии с принципами material design , универсален для любого экрана

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

Элементы

Плавающая кнопка в нормальном или мини- исполнении

Floating action button . Плавающая кнопка – один из самых характерных и узнаваемых элементов материального дизайна. Именно ее пользователь замечает в первую очередь. Плавающая кнопка является очень удачным способом подтолкнуть пользователя к какому-либо ключевому действию, с ее помощью человек быстрее получает доступ к тем функциям, которые для него наиболее актуальны в данный момент. Кнопка имеет свойство оказываться в различных частях экрана и, несмотря на то, что чаще всего ее можно встретить в нижнем углу, она может находиться в любой точке экрана.

Необходимо помнить, что плавающая кнопка может быть связана только с ключевым, основным действием, осуществляемым в конкретном приложении. К примеру, в файловом менеджере плавающая кнопка может означать добавление файлов или создание новой папки, в мессенджере или почтовом приложении – создание нового сообщения или письма, в социальной сети – отметку «лайк» и так далее. Главное действие всегда привязывается к плавающей кнопке, хотя, существуют определенные ограничения.

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

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

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

Floating Action Button в действии

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

Позитивные и негативные действия floating action button

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

App bar , пришедший на смену action bar

Серьезно изменился, по сравнению с предыдущими версиями, action bar. В Android Lollipop его функциональность заметно возросла и теперь обновленный элемент называется app bar. Благодаря изменениям, новый app bar является инструментом полного контроля пользователя над приложением, причем, как и в случае с другими аспектами material design и новой ОС Lollipop в частности, app bar полностью интуитивен и понятен.

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

Базовый вариант обновленного action bar , содержащий необходимые элементы для управления приложением

Оттенки app bar , предложенные Google

Текущее положение вещей с разработкой приложений для Android Lollipop и AppCompat v21

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

Впрочем, для тех разработчиков, которые хотят сохранить совместимость своих приложений со старыми версиями Android, Google предлагает набор инструментов, позволяющих использовать элементы материального дизайна в приложениях для предшественников Lollipop. В соответствующем блоге разработчикам предложено ознакомиться с библиотекой AppCombat, с помощью которой можно внести элементы material в старые версии Android.

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

Виджет app bar

Критический взгляд на Material Design

При всей очевидной новизне и удачной реализации, у материального дизайна (при желании) можно обнаружить некоторые недостатки. Хотя, как и во всех подобных вопросах, каждый сам решает, являются ли перечисленные моменты недостатками. Стоит заметить, что на данный момент сторонники концепции material design все-таки составляют большинство от общего числа тех, кто продолжает бурно обсуждать последнее детище Google. Тем не менее, более скептически настроенной публикой к интерфейсу Lollipop выдвигаются следующие претензии.

Microsoft Flat Design был на порядок практичнее и удачнее material design . Как мы уже говорили, материальный дизайн является не более чем удачной компиляцией подходов и приемов, которые уже были разработаны и использованы кем-либо ранее. Одна из концепций, которая была взята на вооружение разработчиками материального дизайна – это так называемый «плоский дизайн» от Microsoft. Сама идея отказа от излишеств в пользу плоского цифрового пространства впервые появилась в продуктах Microsoft. Плоский дизайн представлял собой полный отказ от скеоморфизма в любых его проявлениях. Материальный же дизайн является смягченной версией этой концепции благодаря имитированию «цифровой бумаги» и «цифровых чернил». Материальный дизайн вобрал в себя лучшее из двух миров – плоские и минималистичные пространства от плоского дизайна и определенный анимированный объем от скеоморфизма.

Microsoft Flat Design

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

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

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

Для примера сравним интерфейс меню Settings у Android и iOS:

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

Обсуждение достоинств и недостатков материального дизайна все еще продолжается, пользователи и разработчики обращают внимание на спорные моменты и недоработки, а также ищут способы наиболее эффективного использования концепции material design. Уже в самое ближайшее время мы увидим, какая судьба ждет материальный дизайн – останется ли он неоднозначным поветрием, навязанным нам на какое-то время гигантом Google, станет ли просто еще одним большим экспериментом в области интерфейсов или будет новым этапом, поднимающим искусство UI на новый уровень.

Заключение

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

Дизайн-евангелиста Google Мустафы Куртулду о применении их технологии в разработке приложений Keep и Inbox.

В закладки

Перевод подготовлен командой онлайн-школы английского Skyeng .

Material Design предоставляет набор инструментов и правил, которые помогают осознанно подойти к UX-дизайну при создании интерфейса приложения.

Но что если для определённого продукта эти принципы не работают? И что делают дизайнеры Google, когда разрабатывают продукт, выходящий за рамки классических гайдлайнов?

Гайдлайны Material адаптивны. В этой статье мы рассмотрим два приложения Google - Keep и Inbox, чтобы понять, каким образом они не только отклоняются от некоторых правил, но и формируют новые принципы Material Design.

Inbox: Модульная сетка

Разработка нового почтового сервиса - очень амбициозная задача для Google, учитывая наличие уже укоренившегося на рынке Gmail. Целью Inbox было сделать дизайн интерфейса более глубоким и создать уникальный пользовательский опыт и фирменный стиль, играя по новым правилам Material Design.

Когда команда Inbox сопоставляла предварительные варианты дизайна, концепция Material Design ещё была в разработке. Это дало Inbox отличную возможность - установить стандарты Material Design, одновременно решая задачу глубины и объёма в UI.

Глубина

Изначальный дизайн Inbox был недостаточно гибким - пространство сетки позволяло уместить только семь писем на 13-дюймовом экране. Этого было слишком мало, особенно по сравнению с Gmail, где помещается 16-20 писем.

Если открыть Gmail и Inbox в соседних окнах, можно увидеть большую разницу в визуальном весе. И одной из самых сложных задач было найти нужный баланс между контентом и пустым пространством.

Тим Смит

Главный дизайнер Inbox

Изменив параметры сетки, высоту строк и то, как выглядит шрифт, дизайнеры Inbox смогли добиться оптимальной глубины интерфейса, отображая при этом 12-17 писем, каждое внутри карточки Material Design. Интерфейс приложения адаптируется под устройство пользователя. К примеру, шрифт в строке «Тема письма» меняется в зависимости от размеров экрана.

Цвета, изображения и иконки

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

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

Верхняя панель

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

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

Тим Смит

Главный дизайнер Inbox

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

Keep: образцы адаптивной навигации

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

Вовлечение, пустые экраны и анимация

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

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

Мы много работали над анимацией - как заметки отображаются в виде потока, как они двигаются, когда вы открываете и закрываете их.

Женевьева Куэвас

Выбор правильных элементов Material: нижняя навигация или плавающая кнопка действия

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

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

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

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

Женевьева Куэвас

Инженер-программист Google Keep

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

Руководство, а не набор правил

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

Material Design предлагает руководство, основанное на многолетнем опыте Google, но с помощью него невозможно решить абсолютно любую задачу. Примеры Keep и Inbox показывают, что можно использовать гайдлайны Material Design, меняя их так, как это нужно именно вашему продукту.


2024 © gtavrl.ru.