Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Course User interface — Lesson 9

1,382 views

Published on

Course User interface at Bionic University by Oleksandr Lisovskyi

Published in: Design
  • Login to see the comments

Course User interface — Lesson 9

  1. 1. USER INTERFACE lesson №9
  2. 2. Alex Lisovsky Co-Founder at ZZ Photo, UX/UI designer alexander.lisovsky@gmail.com facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky
  3. 3. http://www.cooper.com/prototyping-tools
  4. 4. Material Design
  5. 5. https://www.youtube.com/watch?v=p4gmvHyuZzw
  6. 6. История http://habrahabr.ru/company/redmadrobot/blog/252773/ Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.
  7. 7. http://habrahabr.ru/company/redmadrobot/blog/252773/
  8. 8. История http://habrahabr.ru/company/redmadrobot/blog/252773/ Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.
  9. 9. Президент Кеннеди?
  10. 10. http://habrahabr.ru/company/redmadrobot/blog/252773/ Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну. А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% — они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.
  11. 11. Kennedy vs. Holo
  12. 12. http://habrahabr.ru/company/redmadrobot/blog/252773/ В 2014 году на конференции I/O была представлена новая дизайн-система, подход, который получил название Material Design.
  13. 13. Material Design http://habrahabr.ru/company/redmadrobot/blog/252773/ Material Design позволяет более объективно подходить к принятию дизайн-решений: как что-то выглядит, как что-то работает, как осуществляется анимация и так далее. Она задает разумные рамки, но не излишние ограничения.
  14. 14. 4 принципа Material Design http://habrahabr.ru/company/redmadrobot/blog/252773/
  15. 15. Тактильные поверхности http://habrahabr.ru/company/redmadrobot/blog/252773/ В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
  16. 16. Полиграфический дизайн http://habrahabr.ru/company/redmadrobot/blog/252773/ Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
  17. 17. Осмысленная анимация http://habrahabr.ru/company/redmadrobot/blog/252773/ В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда — такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
  18. 18. http://goo.gl/n7084B GIF
  19. 19. Адаптивный дизайн http://habrahabr.ru/company/redmadrobot/blog/252773/ Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.
  20. 20. Можно подробнее?
  21. 21. Тактильные поверхности http://habrahabr.ru/company/redmadrobot/blog/252773/ Это те самые кусочки «цифровой бумаги», которые в отличие от обычной бумаги обладают сверхспособностями — умеют растягиваться, соединяться и менять свою форму.
  22. 22. Поверхность http://habrahabr.ru/company/redmadrobot/blog/252773/ В основе своей это “контейнер” с тенью и ничего больше. Нет необходимости заходить слишком далеко и использовать текстуру, накладывать градиенты для изображения светотени. Не нужно давать визуальные свойства кожи как у бабушкиной двери в квартиру — аккуратная тень может выразить очень многое. Но у каждой поверхности есть своя высота — расположение на оси Z. И каждая из поверхностей отбрасывает тень на нижнюю, как и в реальном мире.
  23. 23. Поверхность
  24. 24. Глубина http://habrahabr.ru/company/redmadrobot/blog/252773/ В традиционном «плоском дизайне» избегают таких теней, как всяческих проявлений объема, но они исполняют важную функцию обозначения структуры и иерархии элементов на экране. Например, если подъем элемента больше, то и тень у него больше. Эта увеличенная глубина помогает сфокусировать внимание пользователя на критически важных вещах и сделать это изящно.
  25. 25. http://goo.gl/XxsBZc GIF
  26. 26. «Дно» http://habrahabr.ru/company/redmadrobot/blog/252773/ Важно заметить, что у глубины есть “дно”. Предполагается, что она ограничена толщиной самого мобильного устройства. То есть, если на смартфоне это сантиметр от стекла до задней стенки, а у вас в интерфейсе есть кредитная карточка, то её нельзя просто перевернуть — она упрётся в стекло и заднюю стенку.
  27. 27. http://goo.gl/PBRjpZ GIF
  28. 28. Плавающая кнопка http://habrahabr.ru/company/redmadrobot/blog/252773/ Многие считают, что стоит добавить её в интерфейс: так это сразу становится Material Design. Но она должна использоваться только для ключевого действия в вашем приложении. Если вам нужно закрыть какое-то окошко или подтвердить действие, то не нужно использовать плавающую кнопку. Для этого есть другие элементы.
  29. 29. Не все должно быть на карточке http://habrahabr.ru/company/redmadrobot/blog/252773/ Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?
  30. 30. Это унылое диалоговое окно http://habrahabr.ru/company/redmadrobot/blog/252773/ Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.
  31. 31. What a Bottom Sheets?
  32. 32. Bottom Sheet
  33. 33. Snackbars
  34. 34. Pаскрытие списков http://habrahabr.ru/company/redmadrobot/blog/252773/ Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.
  35. 35. http://goo.gl/0l4aM5 GIF
  36. 36. Полиграфический дизайн http://habrahabr.ru/company/redmadrobot/blog/252773/ Раз поверхности в Material Design мы называем «цифровой бумагой», то всё, что на ней размещается — текст, изображения, пиктограммы — нанесены «цифровыми чернилами». И Material Design использует классические принципы полиграфического дизайна в оформлении интерфейсов.
  37. 37. http://goo.gl/ZwTN50 GIF
  38. 38. Изящная типографика http://habrahabr.ru/company/redmadrobot/blog/252773/ В полиграфическом дизайне типографика играет принципиально важную роль. Tипографика выполняет две важные функции. Во-первых, выбор и композиция шрифта является стилеобразующим элементом бренда издания. Во-вторых, типографика задаёт структуру контента.
  39. 39. Размер шрифта http://habrahabr.ru/company/redmadrobot/blog/252773/ На сайте google.com/design/spec есть стандартная палитра шрифтов, которую можно смело использовать. В палитре используется шрифт Roboto, но его можно заменять своим фирменным шрифтом, чтобы поддержать бренд. Важно всё внимательно протестировать, так как на разных устройствах рендеринг шрифтов может работать по-разному. Обычно OTF шрифты работают лучше, чем TTF.
  40. 40. http://www.google.com/design/spec/style/typography.html
  41. 41. Контрастная типографика http://habrahabr.ru/company/redmadrobot/blog/252773/ Еще один принцип из мира полиграфии, который хорошо уживается в Material Design, это контрастная типографика — действительно заметный контраст между размерами шрифта заголовка и наборного текста. Это красиво и хорошо выделяет главное.
  42. 42. Модульная сетка и направляющие http://habrahabr.ru/company/redmadrobot/blog/252773/ в Material Design используется сетка с шагом в 8dp. DP — это density- independent pixel, единица во многом аналогичная единице point в iOS.
  43. 43. Чем отличается dp от px?
  44. 44. 1 дюйм = 2,54 см от нидерландского duim — большой палец.
  45. 45. Плотность пикселей на дюйм http://getpocket.com/a/read/752558457 Биллборд — 32 dpi Экранная графика — 72 dpi Печать ситилайтов — 150 dpi Печать фотографий — 300 dpi
  46. 46. dp — Device/density- independent Pixels Абстрактная ЕИ, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях. http://goo.gl/GkOHJr
  47. 47. sp - Scale-independent Pixels. То же, что и dp, только используется для размеров шрифта в View элементах pt - 1/72 дюйма, определяется по физическому размеру экрана. Эта ЕИ из типографии. px – пиксел, не рекомендуется использовать т.к. на разных экранах приложение будет выглядеть по- разному. mm – миллиметр, определяется по физическому размеру экрана in – дюйм, определяется по физическому размеру экрана http://goo.gl/GkOHJr
  48. 48. Standart pixel Retina pixel
  49. 49. 240 px 480 px 800 px 240 px240 px 240 px Пиксели http://goo.gl/GkOHJr
  50. 50. На разных разрешениях рекомендуется использовать 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 http://goo.gl/GkOHJr
  51. 51. 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. http://goo.gl/GkOHJr
  52. 52. Кстати, всегда 1 in = 25,4 mm и 1 in = 72 pt.
  53. 53. Геометрическая иконографика http://habrahabr.ru/company/redmadrobot/blog/252773/ Простые иконки использовались в Android уже на протяжении какого-то времени, но в Material Design они стали еще проще и дружелюбней.
  54. 54. http://materialdesignicons.com/
  55. 55. Цвет http://habrahabr.ru/company/redmadrobot/blog/252773/ Цвет является важным средством выразительности. В прежнем Android цвет был чем-то дополнительным, теперь же он играет более заметную роль. В Material Design стандартная цветовая палитра приложения состоит из основного и акцентного цветов.
  56. 56. Цвет
  57. 57. http://goo.gl/BK1bif GIF
  58. 58. http://goo.gl/PZiiYr GIF
  59. 59. Цвет http://habrahabr.ru/company/redmadrobot/blog/252773/ Основной используется для больших областей вроде action bar, а в его более тёмную вариацию красится status bar. Более яркий акцентный цвет используется точечно в элементах управления, кнопках, полосках, индикаторах и т.д. Акцентный цвет призван привлекать внимание пользователя к ключевым элементам, таким как плавающая кнопка.
  60. 60. Цвет
  61. 61. Красивые фото http://habrahabr.ru/company/redmadrobot/blog/252773/ В Material Design поощряется использование фотографии и иллюстраций во всей красе. Картинки в основном размещаются без рамок, часто «навылет». Даже status bar специально делается прозрачным, чтобы не мешать. При этом каждая капля «цифровых чернил» на экране имеет функцию, почти ничего нет просто для украшения.
  62. 62. Красивые фото
  63. 63. http://goo.gl/kQXpdq GIF
  64. 64. Брендируйте с удовольствием http://habrahabr.ru/company/redmadrobot/blog/252773/ Google находится в более выгодном положении с тем, что может использовать яркие цвета в качестве фирменных, но это не стоит воспринимать как проблему. Цвета можно выбрать из корпоративного брендбука и вообще использовать логотип.
  65. 65. Не забывайте отступы и “давайте воздуха” http://habrahabr.ru/company/redmadrobot/blog/252773/ Базовая сетка в 8dp и отступ слева в 72dp — практически правило. Пусть контенту будет хорошо и свободно.
  66. 66. Осмысленная анимация http://habrahabr.ru/company/redmadrobot/blog/252773/ В реальном мире объекты не могут просто появляться из ниоткуда или исчезать в никуда. Это вызывало бы недоумение и ставило людей в тупик. Поэтому и в Material Design осмысленная анимация используется, чтобы показать, что именно только что произошло. Интересный момент в том, что активное движение привлекает взгляд — это естественно для нашего зрения. C помощью анимации мы управляем вниманием пользователя.
  67. 67. GIF
  68. 68. Асимметрия http://habrahabr.ru/company/redmadrobot/blog/252773/ Поскольку глубина интерфейса ограничена толщиной устройства, все трансформации объектов приходится производить в плоскости. Это также приводит к тому, что анимация трансформаций должна быть асимметричной — то есть изменение ширины и высоты объекта должно быть независимым. В противном случае возникает иллюзия приближения или отдаления от зрителя, причём на очень большое расстояние.
  69. 69. Реакция http://habrahabr.ru/company/redmadrobot/blog/252773/ Другой очень важный принцип анимации в Material Design — реакция на действия пользователя. Там, где это возможно, эпицентром изменений в интерфейсе должно быть прикосновение к экрану устройства. Например, волна, которая появляется и идёт от точки касания пальцем. Этот эффект без проблем реализуется в Android L.
  70. 70. Микроанимации http://habrahabr.ru/company/redmadrobot/blog/252773/ В Android L мы можем анимировать каждый элемент приложения — будь это переходы между контентом или маленькие иконки действий. Каждая деталь приложения важна, и микроанимации добавляют приложению более полную детальность и отзывчивость на каждое действие пользователя.
  71. 71. GIF
  72. 72. Четкость и резкость http://habrahabr.ru/company/redmadrobot/blog/252773/ И последний, ключевой принцип анимации: движение должно быть быстрым и чётким. В отличие от банального ускорения в начале и замедления в конце кривая анимации в Material Design более натуральная и интересная. Объекты быстрее реагируют и достигают целевого состояния, резче возвращаются назад, но чуть дольше идут к состоянию покоя в конце. В результате пользователю нужно меньше ждать (это меньше раздражает). При этом там, где объект уже вышел из сферы интересов пользователей, он позволяет себе вести себя более естественно.
  73. 73. Подсказки http://habrahabr.ru/company/redmadrobot/blog/252773/ Не оставляйте анимацию напоследок. Не стоит оставлять анимацию на самый конец — она может служить ключевым фактором пользовательского опыта, и её нужно продумывать заранее.
  74. 74. Подсказки http://habrahabr.ru/company/redmadrobot/blog/252773/ Знайте меру. Слишком много анимации — тоже плохо. Держите себя в руках и помните, что она должна быть осмысленной.
  75. 75. Мобильная структура http://www.google.com.ua/design/spec/layout/structure.html
  76. 76. Структура для планшета http://www.google.com.ua/design/spec/layout/structure.html
  77. 77. Структура для ПК http://www.google.com.ua/design/spec/layout/structure.html
  78. 78. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Full-width, extended height app bar Full-width, default height app bar
  79. 79. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Column-width toolbars at multiple levels of hierarchy
  80. 80. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Flexible toolbar and card toolbar
  81. 81. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Floating toolbar
  82. 82. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Detached toolbar palette
  83. 83. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Bottom toolbar that launches to a shelf and clings to top of keyboard or other bottom component
  84. 84. Toolbars http://www.google.com.ua/design/spec/layout/structure.html Bottom toolbar shelf
  85. 85. App bar http://www.google.com.ua/design/spec/layout/structure.html
  86. 86. Menus http://www.google.com.ua/design/spec/layout/structure.html
  87. 87. Navigation bar http://www.google.com.ua/design/spec/layout/structure.html
  88. 88. Navigation bar http://www.google.com.ua/design/spec/layout/structure.html
  89. 89. http://www.google.com.ua/design/ spec/layout/metrics-keylines.html Guidelines
  90. 90. Адаптивный дизайн http://habrahabr.ru/company/redmadrobot/blog/252773/ Последний главный аспект Material Design — это концепция адаптивного дизайна. То есть как мы можем применить все три первые концепции на разных устройствах и экранах в разных форм-факторах.
  91. 91. Адаптивный дизайн http://habrahabr.ru/company/redmadrobot/blog/252773/ Самый распространенный приём — уменьшение количества информации, отображаемой на экране вместе с уменьшением экрана. Если на большом экране мы можем позволить себе показать и список, и детальную информацию по выбранному элементу, то на смартфонах сперва отображается список, а для подробностей нужен отдельный экран.
  92. 92. Отступы http://habrahabr.ru/company/redmadrobot/blog/252773/ Размещение контента с помощью блоков сильно упрощает работу со свободным пространством на больших экранах. Мы знаем содержимое каждого блока, понимаем, насколько широким он может быть, чтобы не потерять в читаемости, а также насколько узким, чтобы не было слишком тесно. На широких экранах блоки растягиваются до своих пределов удобочитаемости, а потом добавляются отступы от краёв, которые вполне могут быть большими. Их можно заполнять плавающей кнопкой и цветными плашками.
  93. 93. Whiteframes http://habrahabr.ru/company/redmadrobot/blog/252773/ Идеи по организации пространства и отступам для разных экранов можно подсмотреть на сайте http://www.google.com.ua/design/spec/layout/ structure.html в разделе Whiteframes. Это отличное место, чтобы начать, понять общий смысл и затем продолжить собственные эксперименты.
  94. 94. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  95. 95. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  96. 96. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  97. 97. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  98. 98. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  99. 99. Whiteframes http://www.google.com.ua/design/spec/layout/structure.html
  100. 100. Направляющие http://habrahabr.ru/company/redmadrobot/blog/252773/ Направляющие задают нам отступы для «чернил» на отдельных листах «бумаги». На смартфоне у нас один лист и один хороший отступ слева, а на планшете их два и в обоих случаях есть отступ. Важно, что для этих двух форм-факторов отступ будет разным. На планшете это 80dp, а на смартфоне — 72dp. Отступы от краёв экрана также разные.
  101. 101. Размеры http://habrahabr.ru/company/redmadrobot/blog/252773/ Рекомендуется брать кратные пропорции для всех элементов. В частности — выбирать размер app bar значительно удобнее, если делать его кратным: 1х, 2х, 3х. На смартфонах и планшетах этот размер разный, но приложение без проблем адаптируется.
  102. 102. Блоки http://habrahabr.ru/company/redmadrobot/blog/252773/ Мышление блоками вообще может быть полезным. Если задать такую вот модульную сетку из блоков, кратных 8dp, то получится отличный визуальный ритм и принимать решения будет удобнее. Зайдите на сайт с вайтфреймами и посмотрите материалы.
  103. 103. ToolBar http://habrahabr.ru/company/redmadrobot/blog/252773/ B тулбар можно поместить: — поля ввода, формы; — плавающая кнопка основного действия; — тулбар скрыт выдвинутой навигацией, но и здесь мы видим вполне функциональный виджет; — тулбаром удобно управлять при необходимости.
  104. 104. Советы http://habrahabr.ru/company/redmadrobot/blog/252773/ Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
  105. 105. Советы http://habrahabr.ru/company/redmadrobot/blog/252773/ Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера — это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
  106. 106. Советы http://habrahabr.ru/company/redmadrobot/blog/252773/ Не надо делать из нижнего угла гетто для плавающей кнопки.Плавающая кнопка может быть где угодно: снизу, сверху, справа, слева. Конечно, в углу до неё может быть удобно дотягиваться, но это не единственный вариант. Кнопка может перемещаться с места на место в зависимости от задач.
  107. 107. Советы http://habrahabr.ru/company/redmadrobot/blog/252773/ И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.
  108. 108. http://goo.gl/RzVPk2 GIF
  109. 109. http://goo.gl/YyHyi2 GIF
  110. 110. И все?
  111. 111. Практическое домашнее задание: Изучить гайдлайны http://www.google.com/design /spec/material- design/introduction.html
  112. 112. Alex Lisovsky Co-Founder at ZZ Photo UX/UI designer alexander.lisovsky@gmail.com facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky

×