Course User interface — Lesson 9

Alex Lisovsky
Co-Founder at ZZ Photo, UX/UI designer
alexander.lisovsky@gmail.com
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky

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

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

История
http://habrahabr.ru/company/redmadrobot/blog/252773/
Когда-то все продукты Google выглядели
по-разному плохо. Даже один продукт на
разных платформах выглядел
неконсистентно.

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

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

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

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

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

4 принципа Material Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
стандартная цветовая палитра приложения
состоит из основного и акцентного цветов.

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

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

Брендируйте с удовольствием
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. Это
отличное место, чтобы начать, понять общий
смысл и затем продолжить собственные
эксперименты.

Whiteframes

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

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

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

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

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

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

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

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

Практическое домашнее
задание:
Изучить гайдлайны
http://www.google.com/design
/spec/material-
design/introduction.html

Alex Lisovsky
Co-Founder at ZZ Photo
UX/UI designer
alexander.lisovsky@gmail.com
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky

Course User interface — Lesson 9

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Course User interface — Lesson 9

Similar to Course User interface — Lesson 9 (20)

More from Oleksandr Lisovskyi

More from Oleksandr Lisovskyi (20)

Course User interface — Lesson 9