course user interface — lesson 9

USER INTERFACElesson №9

Alex LisovskyCo-Founder at ZZ Photo, UX/UI designer

[email protected]/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky

http://www.cooper.com/prototyping-tools

Material Design

https://www.youtube.com/watch?v=p4gmvHyuZzw

История

http://habrahabr.ru/company/redmadrobot/blog/252773/

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

История


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

Президент Кеннеди?


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

Kennedy vs. Holo


В 2014 году на конференции I/O была представлена новая дизайн-система, подход, который получил название Material Design.

Material Design


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

4 принципа Material Design


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


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

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


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

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


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

http://goo.gl/n7084B

GIF

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


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

Можно подробнее?

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


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

Поверхность


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

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

Поверхность

Глубина


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

http://goo.gl/XxsBZc

GIF

«Дно»


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

http://goo.gl/PBRjpZ

GIF

Плавающая кнопка


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

Не все должно быть на карточке


Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?

Это унылое диалоговое окно


Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.

What a Bottom Sheets?

Bottom Sheet

Snackbars

Pаскрытие списков


Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.

http://goo.gl/0l4aM5

GIF

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


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

http://goo.gl/ZwTN50

GIF

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


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

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


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

http://www.google.com/design/spec/style/typography.html

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


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

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


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

Чем отличается dp от px?

1 дюйм = 2,54 смот нидерландского duim — большой палец.

Плотность пикселей на дюйм

http://getpocket.com/a/read/752558457

Биллборд — 32 dpiЭкранная графика — 72 dpiПечать ситилайтов — 150 dpiПечать фотографий — 300 dpi

dp — Device/density-independent Pixels

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

http://goo.gl/GkOHJr

sp - Scale-independent Pixels. То же, что и dp, только

используется для размеров шрифта в View элементах

pt - 1/72 дюйма, определяется по физическому

размеру экрана. Эта ЕИ из типографии.

px – пиксел, не рекомендуется использовать т.к. на

разных экранах приложение будет выглядеть по-

разному.

mm – миллиметр, определяется по физическому

размеру экрана

in – дюйм, определяется по физическому размеру

экрана


http://en.wikipedia.org/wiki/Point_(typography)

Standart pixel Retina pixel

240 px 480 px 800 px

240 px240 px 240 px

Пиксели


На разных разрешениях рекомендуется использовать dp. Его можно определить, как масштабируемый px. За степень масш-ти отвечает Screen Density. Это коэффициент, который используется для вычисления значения dp.

На текущий момент есть 5 значений этого коэффициента: - low (ldpi) = 0,75 - medium (mdpi) = 1 - tv (tvdpi) = 1,33 - high (hdpi) = 1,5 - extra high(xhdpi) = 2


Kогда для экрана стоит режим mdpi, то 1 dp = 1 px. Т.е. кнопка шириной 100 dp будет выглядеть также как и кнопка шириной 100 px.

Если, например, у нас экран с низким разрешением, то используется режим ldpi. В этом случае 1 dp = 0,75 px. Т.е. кнопка шириной 100 dp будет выглядеть так же как кнопка шириной 75 px.

Если у нас экран с высоким разрешением, то используется режим hdpi или xhdpi. 1 dp = 1, 5 px или 2 px. И кнопка шириной 100 dp будет выглядеть так же как кнопка шириной 150 px или 200 px.


Кстати, всегда 1 in = 25,4 mmи 1 in = 72 pt.

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


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

http://materialdesignicons.com/

Цвет


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

Цвет

http://goo.gl/BK1bif

GIF

http://goo.gl/PZiiYr

GIF

Цвет


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

Цвет

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


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

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

http://goo.gl/kQXpdq

GIF

Брендируйте с удовольствием


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

Не забывайте отступы и “давайте воздуха”


Базовая сетка в 8dp и отступ слева в 72dp — практически правило. Пусть контенту будет хорошо и свободно.

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


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

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

Асимметрия


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

Реакция


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

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


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

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


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

Подсказки


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

Подсказки


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

Мобильная структура

http://www.google.com.ua/design/spec/layout/structure.html

Структура для планшета


Структура для ПК


Toolbars


Full-width, extended height app bar

Full-width, default height app bar

Toolbars


Column-width toolbars at multiple levels of hierarchy

Toolbars


Flexible toolbar and card toolbar

Toolbars


Floating toolbar

Toolbars


Detached toolbar palette

Toolbars


Bottom toolbar that launches to a shelf and clings to top of keyboard or other bottom component

Toolbars


Bottom toolbar shelf

App bar


Menus


Navigation bar


http://www.google.com.ua/design/spec/layout/metrics-keylines.html

Guidelines



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



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

Отступы


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

Whiteframes


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

http://www.google.com.ua/design/spec/layout/

Whiteframes


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


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

Размеры


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

Блоки


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

ToolBar


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

Советы


Далеко не всегда нужен navigationdrawer. Google очень часто использует выдвижную навигацию. Но у Googleочень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.

Советы


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

Советы


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

Советы


И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.

http://goo.gl/RzVPk2

GIF

http://goo.gl/YyHyi2

GIF

И все?

Практическое домашнее задание:

Изучить гайдлайныhttp://www.google.com/design/spec/material-design/introduction.html

Alex LisovskyCo-Founder at ZZ Photo

UX/UI designer

[email protected]/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky

course user interface — lesson 9

Design

comlisovsky http

gln7084bgif http

glpbrjpzgif http

holo http

glzwtn50 gif http

gl0l4am5 gif http

glxxsbzc gif http

sheet snackbars p http