google material design что это

Новое в материальном дизайне? 12 принципов, которые нужно знать

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

Первоначально представленный в 2014 году, материальный дизайн в последнее время стал более популярным, так как многие дизайнеры начали интегрировать его не только в свои проекты под Android, но и в другие веб-проекты.

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

В основном ответьте себе на следующий вопрос: «Соответствуют ли принципы и принципы материального дизайна тому, чего я хочу достичь? »

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

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

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

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

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

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

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

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

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

Цветовые палитры являются неотъемлемой частью языка дизайна, которые используют при создании продуктов. Яркий, чистый и насыщенный, основные качества цвета в материальном дизайне.

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

Одна из немногих вещей, которые остались, это цвет. Точнее, чистый цвет и часто яркие цвета. Яркие цвета играют действительно важную роль в дизайне материалов (и в этом случае и “плоского дизайна”), они привлекательные и делают взаимодействие с дизайном приятным для пользователя.

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

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

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

Материальный дизайн берет много идей из традиционного печатного дизайна и принципов, которые в нём есть.

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

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

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

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

Изображения в материальном дизайне используются от края до края — в полном объеме. Это означает, что между краем изображения и краем окна / экрана нет полей.

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

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

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

По словам Google, анимация дает смысл.

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

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

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

Читайте также:  Что значит сканер тегов nfc на айфоне

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

Google посвящает целую главу в гайдлайнах материального дизайна для анимации.

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

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

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

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

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

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

Например, при “скевоморфном дизайне” руководство было простым, «Сделайте так, чтобы каждый элемент дизайна как можно ближе напоминал его реальный эквивалент».

Источник

Что такое Material Design и как делать анимацию в стиле Google

Рассказываем о дизайн-парадигме Google — что такое Material Design, как он появился и чем полезен. Делимся с начинающими дизайнерами.

Немного истории

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

В 2011 году в Google решили, что с этим пора что-то делать, и действительно что-то сделали. А именно — унифицировали свои продукты, создали единый стиль для приложений Android Holo. Только вот они снова оказались разными.

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

Что такое Material Design

К 2014 году проблему удалось решить. Именно тогда на конференции I/O Google представили свою новую дизайн-систему Material Design. Компания не просто представила гайдлайн по визуальному стилю, но и заявила о себе как о единой цифровой среде.

Что касается визуального стиля, Material Design примирил скевоморфизм с флэтом. Он не вернулся к реализму, но добавил в плоский дизайн его опыт взаимодействия с реальным миром — за счет знакомых тактильных характеристик и глубины.

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

В основе Material Design лежат четыре принципа:

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

Все элементы интерфейса — это слои цифровой бумаги. Они располагаются на разной высоте и отбрасывают тени. Это помогает пользователям отличить главные элементы от второстепенных и делает интерфейс интуитивно понятным.

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

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

3. Осознанная анимация

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

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

Все вышеперечисленное должно работать на любых устройствах.

Как видите, анимация — одна из основ Material Design. И хотя некоторые ее критикуют, поклонников все же больше. И вот почему.

Анимация в Material Design

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

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

Информативность

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

Ориентированность

Анимация фокусирует внимание на том, что важно, и не отвлекает от основного действия.

Выразительность

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

Таким образом, с помощью анимации можно:

1. Обозначить иерархию

Показать пользователю, как элементы связаны друг с другом.

2. Учить пользователя

Показать, как выполнять разные действия.

3. Сделать вау-эффект

Добавить привлекательности, чтобы пользователь снова захотел взаимодействовать с продуктом.

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

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

Благодаря Material Design анимация сегодня — не просто эффектное дополнение дизайна, а полноценная его часть. Если вы все делаете правильно, движение оживляет ваш интерфейс и заставляет пользователей любить интерфейс. Научиться создавать крутые анимации можно на курсе «Анимация интерфейсов».

Пишет о digital с 2011 г. Руководитель и шеф-редактор контент-агентства Morze. Готовит коммерческие тексты для Skillbox.

Источник

Material Design: на Луну и обратно

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

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


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

Читайте также:  рвота симптом каких заболеваний

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

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

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

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

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

4 принципа Material Design

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

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


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

Поверхность


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

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

Глубина


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

Читайте также:  какой метод управления персоналом отличается прямым характером воздействия выберите один ответ

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

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

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

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

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

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

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

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

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

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

Асимметрия

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

Реакция

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

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

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

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

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

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


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

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


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

Отступы


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

Whiteframes


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

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


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

Размеры


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

Блоки


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

Toolbar


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

Источник

Сказочный портал