- Tutorial
Google I/O 2018 оставила огромное количество материала для осмысления. Что нового? Как жить дальше? Устарело ли моё приложение? Могут ли кнопки быть шестиугольными? Дизайнеры снова больше не нужны? Осмысливать приятней не спеша и маленькими порциями. Эта порция - про дизайн.
За четыре года Material Design порядком поднадоел. По данным Google, на базе этой дизайн-системы было создано 1,5 миллионов приложений. Почему? Ведь первоначально она создавалась для внутренних нужд Google.
Она решала проблемы разнородности дизайна под Android и отсутствия какой-либо системы
- Она была универсальной для разных устройств: планшетов, смартфонов, web.
- Она продумана с точки зрения пользователя и интуитивно понятна.
Систему обвиняли в негибкости и, как следствие, получении дизайна под копирку. Если проектировать сервис, строго следуя гайдам, то визуально приложения действительно получались бесхарактерными. С другой стороны, зачем обвинять систему? Гайдлайны никогда не были библией, от них можно было отступать. Может, вы ещё цвет для своего приложения только в палитре Google Color выбирали? Надеюсь, нет.
С другой стороны, добавляя кастомные элементы, вы рисковали встретить своих Android разработчиков в тёмном переулке и выслушать долгую речь о том, почему и насколько вы не правы. Опасные были времена.
Так же рисковали все победители Material Design Award. Вы замечали, насколько кастомный UI у этих проектов? Но Google их поощрял, и все удивлялись.
Теперь стало очевидно: Google хочет, чтобы мы кастомизировали свои приложения. Продукты должны быть красивыми и разными. Обновленный MD - это попытка показать дизайнерам и бизнесу, как кастомизировать UI, не боясь быть обруганными разработчиками.
material.io – Design, Develop, Tools
Начинать изучение дизайн-системы можно с сайта - там обновилась не только часть контента, но и визуальный стиль. Теперь даже экран 404 будет вас учить, а нажав на элемент из гайдов, вы увидите его спецификацию со всеми расстояниями, шрифтами и ссылками на загрузку из библиотеки Google.
Результат пока не впечатляет. Самым большим плюсом должен был стать готовый код для нативных элементов, но ссылка GitHub - это не так уж и классно. Просить разработчиков добавить новые элементы в ваше приложение тоже рано - код для них пока не представлен.
А что если ваши элементы не нативные? Увидеть разметку сможете, но достать нарезанные иконки не получится. Так что о замене Zeplin говорить рано.
От автора: в 2014 Google опубликовали спецификацию Material Design, визуального языка, цель которого свести вместе устоявшиеся принципы дизайна, бесшовный пользовательский опыт на различных платформах и устройствах, а также технологические и научные инновации.
Если вы используете Bower в качестве менеджера, для установки MDL в папку bower_components можно набрать следующую команду: bower install material-design-lite –save
Если же вы используете npm, для установки MDL в папку node_modules необходимо вбить следующую команду: npm install material-design-lite –save
Google рекомендует использовать CSS и JS файлы, расположенные на CDN. Данный метод мы и использовали в демо. Прежде всего, в шапке head HTML документа необходимо подключить CSS файл MDL, иконки Material Design и стили проекта, в которых можно будет вносить собственные изменения:
< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < link rel = "stylesheet" href = "css/styles.css" > |
|
Для английского языка и похожих на него (латинские, греческие и кириллические символы) в материальном дизайне были выбраны шрифты Roboto и Noto.
Noto также поддерживает «плотные» скрипты типа китайского, японского и корейского, а также «высокие» скрипты типа языков юго-восточной Азии и ближнего востока, т.е. арабский, хинди и т.д. Чтобы подключить шрифт Roboto в свой проект, добавьте тег link в верхушку head HTML документа:
< link rel = "stylesheet" href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" > |
Для латинских, греческих и кириллических символов спецификация материального дизайна рекомендует типографский масштаб 12, 14, 16, 20 и 34. Применить типографские принципы MDL можно, добавив набор специальных классов в разметку. К примеру, .mdl-typography—display-2 для h1 и.mdl-typography—display-1 для
Сделает шрифт размером 45px и 34px соответственно:
Title
Sub-title
< h1 class = "mdl-typography--display-2" > Title < / h1 > < p class = "mdl-typography--display-1" > Sub - title < / p > |
В MDL довольно много классов с типографскими масштабами, доступностью и читаемостью. Классы облегчают отображение текстового контента, который после этого приятно читать независимо от устройства, с которого просматривается сайт.
Как выбрать цвет для вашего проекта в MDLВзгляните на файл MDL библиотеки material.indigo-pink.min.css. Название файла отсылает нас к цветовой палитре Material Design в стилях. В цветовой палитре по умолчанию используется цвет indigo в качестве основного, а розовый как акцентный. Но вы ни в коем случае не ограничиваетесь этими цветами. Ниже представлены рекомендации материального дизайна о том, как разработать собственную цветовую палитру и как использовать ее в MDL.
Принципы по подбору цвета в Material DesignМатериальный дизайн любит сочетать яркие и приглушенные цвета, тени и подсветки: «Цвет должен быть неожиданным и ярким
Спецификация Google Material Design»
Тем не менее, это не означает, что можно использовать произвольные цвета на веб-странице. Все совсем наоборот.
Материальный дизайн предлагает широкий выбор красивых гармоничных цветовых палитр. Для облегчения подбора цветов, каждый цвет в палитре имеет несколько уровней и значений в шестнадцатеричной системе. В рекомендациях к материальному дизайну насчитывается 500 основных цветов. Остальные цвета лучше использовать для акцента.
При разработке собственной палитры материальный дизайн рекомендует использовать три оттенка основной палитры и один акцентный цвет из вторичной палитры. Пример:
После того, как вы поняли принципы применения цветов в материальном дизайне, самое время подобрать крутую цветовую палитру для своего MDL проекта. Ниже я расскажу, как это сделать.
Как настроить цветовую палитру по умолчанию в Material Design LiteПереключиться с родной цветовой палитры индиго-розовый на свою можно одним из способов. Если вы использовали Google CDN, как в демо выше, вам необходимо:
Задать URL к файлу стилей MDL в атрибуте href ссылки link в шапке header вашего HTML документа.
Заменить indigo и pink на свои первичный и акцентный цвета соответственно.
К примеру, вы выбрали бирюзовый как основной, а желтый как акцентный цвета в палитре. Ниже показано, как будет выглядеть URL к MDL стилям на CDN:
< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" > |
Вот и все! Если же вы храните скомпилированные и минифицированные MDL файлы на своем сервере, тогда вам поможет сайт MDL. Там вы найдете Customize and Preview tool, с помощью которого можно выбрать основной и акцентный цвета на интерактивном колесе палитры. Затем можно загрузить CSS файл с выбранной темой и вставить его напрямую в проект:
В HTML демо к этой статье используется палитра по умолчанию indigo-pink, но вы вольны экспериментировать с различными цветами одним из двух способов.
MDL компонент слойMDL предлагает множество широко используемых веб-компонентов, среди которых слои, кнопки, карточки, переключатели и т.д. Начните создавать структура вашего HTML шаблона с помощью слоев Material Design Lite. MDL слой распространяется на весь контейнер с классами.mdl-layout .mdl-js-layout. Начните с кода ниже, вставьте его сразу после открывающего тега body:
Для создания слоев в MDL используется CSS flexbox. Тег с классом.mdl-layout является flex контейнером со свойством flex-direction property: column. Слой состоит из следующих подкомпонентов:
Слой навигации
Как использовать вкладки для навигацииСоздать меню можно одним из следующих способов:
Прозрачный хедер
Фиксированная боковая панель без хедера
Фиксированный хедер
Фиксированные хедер и боковая панель
Прокручивающийся хедер
Каскадный хедер
Можете свободно посмотреть все вышеперечисленные опции в разделе MDL navigation, а также поэкспериментировать с каждой из них в своем проекте.
Что касается демо в начале статьи, то там я выбрал в качестве меню компонент Tabs . Чем хороши вкладки это тем, что хотя контент и поделен на отдельные экраны в секциях, все секции физически расположены на одной странице. Это значит, что при клике на ссылку вкладки пользователи не ждут, пока сервер загрузит новую страницу в браузере. Контент доступен мгновенно, создавая тем самым приятные ощущения у посетителей сайта.
Чтобы быстро создать хедер с вкладками вам понадобится: Добавить еще два класса к контейнеру, который мы создали ранее — .mdl-layout—fixed-header и.mdl-layout—fixed-tabs.
< div class = "mdl-layout Mdl-js-layout mdl-layout--fixed-header Mdl-layout--fixed-tabs" > < / div > |
Обратите внимание на то, как MDL использует CSS классы из пространства имен BEM.
Your Title Tab 1 Tab 2
< header class = "mdl-layout__header" > < div class = "mdl-layout__header-row" > < ! -- Title -- > < span class = "mdl-layout-title" > Your Title < / span > < / div > < ! -- Tabs -- > < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" > < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" > Tab 1 < / a > < a href = "#fixed-tab-2" class = "mdl-layout__tab" > Tab 2 < / a > < / div > < / header > |
И осталось добавить соответствующие панели с контентом:
content panel 1 content panel 2
< main class = "mdl-layout__content" > < ! -- Panel 1 -- > < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" > < div class = "page-content" > < ! -- контентпанели1 -- > content panel 1 < / div > < / section > < ! -- Panel 2 -- > < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" > < div class = "page-content" > < ! -- контентпанели2 -- > content panel 2 < / div > < / section > < / main > |
У панели с id=»fixed-tab-1″ задан класс.is-active, она будет отображаться по умолчанию.
Как разместить дополнительный контент в боковой панелиВ демо также используется секция drawer. Drawer это боковая панель, которую можно прятать или показывать по клику на кнопку. Также можно сделать так, чтобы панель была открыта и фиксирована, чтобы ее контент всегда был виден.
Your Title
< div class = "mdl-layout__drawer" > < span class = "mdl-layout-title" > Your Title < / span > < / div > |
Просмотрите эти кусочки кода в действии или взгляните на готовое демо с вкладками и боковой панелью.
Сетка в Material Design LiteMDL использует 12-ти колоночную сетку для настольных компьютеров, 8-ми колоночную сетку для планшетов (до 800px) и 4-х колоночную для экранов мобильных устройств (до 500px). Сделать контейнер сеткой можно, добавив класс.mdl-grid:
По умолчанию контейнер для колонок сетки занимает всю ширину экрана. Если вас это не устраивает, ограничьте ширину через стили. К примеру, в демо к этой статье реализованы оба варианта, как полноэкранная сетка, так и центрированный блок:
Такого результата можно добиться, если обернуть каждую секцию в разные.mdl-grid элементы, а отдельной секции добавить пользовательский класс с CSS max-width: 960px.
< div class = "mdl-grid intro-section" > < ! -- контентненавесьэкран-- > < / div > |
Intro-section { max-width: 960px; }
Intro - section { max - width : 960px ; |
Также если вы хотите избавиться от внешних отступов margin между колонок сетки, в MDL есть замечательный класс, который необходимо добавить к контейнеру колонок — .mdl-grid—no-spacing:
< div class = "mdl-grid mdl-grid--no-spacing" > < ! -- контент-- > < / div > |
Вы получите что-то типа:
< div class = "content-grid mdl-grid" > < div class = "mdl-cell" > < ! -- контент-- > |
В нашей сегодняшней статье мы затронем тему, которая еще не обсуждалась на 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Вся философия материального дизайна покоится на четырех основополагающих и понятных принципах:
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 представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией 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 для простых инструментов. Применять навигацию рекомендуется только для многочисленных задач в приложении.
- Будьте смелее с тулбарами.
- Размещайте плавающую кнопку в наиболее оптимальном месте. Не делайте привязку строго к нижнему углу.
- Отрабатывайте элементы интерфейса как под вертикальный, так и под горизонтальный экран устройства.
Разработчикам компании Google удалось соединить хороший привлекательный дизайн с инновациями современных технологий и науки.
Материализм в цифровой сфере используют не впервые. Так, Apple недавно использовала в дизайне интерфейсов философию скевоморфизма (имитации восприятия визуальных объектов из окружающего нас материального мира).
Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.
Развитие цифрового дизайнаПодавляющее большинство пользователей ежедневно взаимодействует с цифровой средой. Они уже не требуют точного сходства виртуальных объектов с реальным миром. Чем скорее к этому моменту привыкнут все пользователи, тем скорее digital design сможет начать активно шагать вперед.
Опираясь на это, Материальный дизайн уже не так сильно подвергается влиянию скевоморфизма. Теперь это лишь новая ступень в эволюции виртуальных объектов.
Наглядность как фундаментальная основаПоверхности и грани различных элементов управления в Материальном дизайне создают подсказки в ориентировании, управлении интерфейсом, подобно действиям в реальной жизни.
Тактильные характеристики объектов помогают отличать ключевые объекты от дополнительных, определять взаимосвязь между ними.
Основы Material design также включают в себя принципы печатного дизайна. Акценты расставляются не только для эстетики, но и для создания особой структуры, иерархии, создания простой системы управления.
В основе визуальной составляющей Материального дизайна лежат: насыщенные цвета, четкие края, крупная типографика и большие отступы между различными элементами.
Осмысленная динамика
Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе.
Примеры сайтов в стиле Material DesignКак только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.
Сайты, взятые для примеров, созданы в точном соответствии с основными принципами Материального дизайна. Они просты и понятны, содержат в себе плавающие кнопки, тени, яркие цвета и визуальные эффекты, плавную навигацию. Все это в совокупности помогает получить прекрасный пользовательский опыт.
Material Design заинтересовал собой огромную аудиторию. Он демонстрирует как правильно создавать UI, чтобы он был абсолютно понятен и ясен пользователю ровно также, как и привычный объект из реального мира, который можно потрогать руками.
Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.
Видео от канала «Google Design».
Стиль 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
