Обновления Material Design: как жить дальше. Material design от Google – за и против

Material Design представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией Google и представлена ею для широкой аудитории 25.06.2014 года на конвенции Google I/O. В основе разработки цветовая схема, свойства и элементы объектов дизайна. Material Design регулярно дополняется и обновляется разработчиками. Говоря простым языком, основная идея заключается в дизайне в виде блоков, которые открываются и сворачиваются кубиками, подобно картам, с использованием эффекта тени. Сами карты должны плавным образом переключаться между собой.

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

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

- Джон Вайли, главный по дизайну поиска Google

Главные принципы

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

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

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

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

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

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

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

Поверхность

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

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

Глубина

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

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

Нижний слой глубины является «дном».

• Помните о логистике. Различные диалоговые окна, плавающие окна, тулбары имеют определенную высоту. Во избежание столкновений периодически им необходимо двигаться по оси Z.
• Не насилуйте кнопки. Применять плавающую кнопку нужно только в случае острой необходимости, так как ее использование сразу же привносит в дизайн эффект Material Design. Для подтверждения каких-либо действий и закрытия окон использовать ее не стоит.
• На карточке должно быть не все. Использовать карточку уместно только в случае, когда объект содержит в себе множество форм и большой объем контента. При других вариантах целесообразнее использовать традиционный текст или списки.
• Минимализм в диалоговых окнах. Использовать диалоговые окна следует исключительно для подтверждения действий пользователя при возникновении вопросов.

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

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

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

Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда.

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

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

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

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

Если в экранном дизайне применяются базовые сетки, то в полиграфическом дизайне - модульные сетки. Для Material Design используют сетку с шагом 8dp.

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

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

Простейшие иконки давно использовались на базе работы системы Андроид. В Material Design они выглядят еще проще и визуально приятнее.

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

Скачать иконки по теме:

Цвет

Цвет в дизайне отвечает за выразительность. Ранее в Андроид цветовая гамма была второстепенной, теперь же ей отводится одна из ключевых ролей. В Материальном дизайне базовая палитра цвета состоит из акцентных и основных оттенков.

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

Акценты расставляются точечно и в небольшом количестве. Для остальной части интерфейса цвета применяют в соответствии с правилом: большой объем текста (список писем почты) оставляют стандартного размера и добавляют цвет для обращения внимания пользователя ПК; малый объем текста (калькулятор, фото) увеличивают в 2-3 раза в размере и добавляют цветные плашки.

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

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

В Material Design можно и даже нужно использовать различные фотографии и иллюстрации. Часто в картинках отсутствуют рамки. Сам status bar делается бесцветным, чтобы не отвлекать внимание от изображений. «Цифровые чернила» всегда используют не только для красоты, но обязательно для функциональности дизайна.

• Рекомендуется брендирование.
• Нельзя забывать об отступах и свободном пространстве (для базовой сетки 8dp, для отступов — 72 dp).
• Используйте яркие изображения.

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

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

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

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

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

Реакция

Еще одним ключевым моментом анимации в Материальном дизайне считается реакция на определенные действия пользователя ПК. Изменения в интерфейсе Андроид L происходят после касаний пальцев. Эти изменения отображаются волнообразным действием.

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

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

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

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

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

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

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

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

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

Отступы

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

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

Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона - всего 72 dp.

Размеры

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

Блоки

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

Тулбар (Toolbar)

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

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

Material как метафора

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

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

Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.

Развитие цифрового дизайна

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

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

Наглядность как фундаментальная основа

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

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

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

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

Осмысленная динамика

Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе.

Примеры сайтов в стиле Material Design

Как только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.

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

Видеоролики

Material Design заинтересовал собой огромную аудиторию. Он демонстрирует как правильно создавать UI, чтобы он был абсолютно понятен и ясен пользователю ровно также, как и привычный объект из реального мира, который можно потрогать руками.

Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.

Видео от канала «Google Design».

В нашей сегодняшней статье мы затронем тему, которая еще не обсуждалась на 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, разрабатывая собственные «фишки» и улучшая взаимоотношения пользователя с цифровым интерфейсом.

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

Прежде, чем перейти к примерам, давайте уясним одну простую истину:

Material Design - это корпоративный стиль корпорации Google. Подражать ему так же глупо, как, например, производителю лапши быстрого приготовления пытаться подрожать бренду “Ferrari”.

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

Корпоративный веб-сайт требует более осмысленный подход, чем просто сказать “хочу вот так”. Если сайт - это лицо бренда в сети, то оно должно иметь индивидуальные черты и визуально соответствовать общему образу компании.

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

Примеры сайтов в стиле Material Design

Сайт Kiosk Browser не только выполнен в стиле Material Design, но и неплохо оптимизирован для мобильных устройств.

Очень удачное решение, в котором гармонично сочетаются детали и конструкции из гайдлайна Material Design (тени, кнопки, flat design, цвета и JS эффекты) и корпоративный стиль группы международных школ ISoE.

Платформа lifeaweso выполнена в соответствии с фундаментальными принципами Material Design: простота, ясность, понятность. Сайт еще находится в стадии разработки, но интеграция визуальной составляющей в стиле Material Design выглядит довольно неплохо.

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

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

Здесь мы видим ключевой элемент Material Design - карточки. Сайт очень легкий и простой: здесь нет нагромождения лишних элементов, а ключевая информация отображается в отдельных блоках.

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

Ну и, конечно, не будем забывать о первоисточнике. Интерфейс сервиса Google Alerts недавно обновился до Material Design, что существенно улучшило его визуальные характеристики и usability.

На конференции для разработчиков Google I/O 2018, кроме обновленного Android и более глубокой интеграции искусственного интеллекта в свои сервисы, компания Google представила новый стандарт в дизайне системы и мобильных приложений - Material Design 2.0. Что нового?

Белое пространство и полупрозрачность

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

Новые инструменты для разработчиков:

Material Theme

Плагин Material Theme для Sketch, представляет собой по сути библиотеку шрифтов, иконок и фирменных цветов предусмотренных новыми гайдлайнам Google в Android P. Также при разработке с его помощью вы в пару кликов можете отредактировать форму компонентов и типографику в вашем проекте.

Больше скруглений и минимализма

Как многие отметили, внешний вид стал очень схож с Apple iOS 10 и 11, но определенно такой шаг был предпринят компанией специально для производителей и владельцев безрамочных смартфонов, количество которых с каждым годом неумолимо становится все больше, ведь такой внешний вид системы и софта куда лучше сочетается с их закругленными дисплеями.

Новые шрифты

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

Так что в скором времени мы можем ждать масштабный редизайн всех веб и мобильных сервисов Google. На данный момент в магазине приложений одними их таких первенцев являются Google Play Игры, Google Tasks и приложение для участников конференции Google I/O 2018.

• Обновленный стиль фирменных иллюстраций

• Использование четырех основных цветов логотипа в качестве визуального языка

Пример, новая версия Gmail:

Концепты Material Design 2.0

Само собой сообщество дизайнеров отреагировало на предстоящие перемены в дизайне от Google, и ровно месяц назад пользователь Reddit под ником Morphicsn0w представил свое видение площадки Google Play.

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

На экранах с описанием приложений Morphicsn0w сфокусировал внимание на описании приложений, сместив акцент с информации о количестве загрузок и оценках пользователей.

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

Не обошли стороной и любимый многими YouTube, автор портала 9to5Google, а по совместительству неплохой дизайнер Алекс Брукс (Alex Brooks) пофантазировал над тем, что можно было бы изменить в существующем клиенте видеохостинга. Реузльтат лично меня очень и очень воодушевил.

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

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

Более подробную информацию про концепт YouTube от Алекса читайте в оригинальной статье .

Концепт Google Play Music в Material Design 2.0

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

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

Главный экран

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

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

Плеер

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

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

Медиатека

Третье, что мне не нравится в Play Music - это расположение и убранство медиатеки. На мой взгляд её устройство слишком сложное. Например, чтобы получить доступ к данному разделу с главного экрана, требуется совершить целых четыре действия: сделать свайп, чтобы вызвать боковое меню; клик для выбора раздела «Фонотека»; свайпнуть по списку чтобы выбрать требуемую вкладку (плейлисты, радиостанции, исполнители, альбомы).

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

Меню/Side Bar

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

Презентация концепта Google Play Music на Behance

Заключение

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

Спасибо за внимание!

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 на основе различных данных определяют, какие результаты не показывать. В случае с изображениями свою роль играет машинное обучение, однако учитываются и достаточно простые факторы, например, где и в каком контексте определенное изображение использовалось раньше.

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

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

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

И напоследок

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

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