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.

DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru

20,231 views

Published on

Презентация Юрия Ветрова "Metro-дизайн в Mail.Ru" для конференции Design Camp 2012.

Published in: Design
  • Be the first to comment

DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru

  1. 1. ЮРИЙ ВЕТРОВметро-дизайнв mail.ru…и немного о flat design ибудущем мобильных платформ
  2. 2. Я на Windows Phone полтора годаSamsung Omnia 7 HTC Mozart Nokia Lumia 800 Nokia Lumia 920 2
  3. 3. Осенью 2011 года в России появились первыетелефоны на Windows Phone. Включая модели Nokia– одного из самых популярных брендов в стране.3
  4. 4. Агент и ICQ для Windows Phone 1
  5. 5. Мы начали с Агента, одного из наиболее развитых натот момент продуктов на мобильных. Уже были версиидля Android, iPhone, Symbian, WinMobile и J2ME.5
  6. 6. Продать Metro-стиль сначала было непросто – менеджерывидели его впервые и боялись «пустоты» на экране,«скучности». Но с появлением первых телефонов на рукахстало проще – многие вопросы и страхи отпали.6
  7. 7. В случае с Windows Phone взрослые оказываютсяменьшими ретроградами – у них нет iOS-привычек,а молодые уже обросли ими и боятся нового.7
  8. 8. Привычка – опасная штука. В 1995 году не было кнопки«Пуск» и Microsoft положил много усилий, чтобы продать этуконцепцию. Спустя почти 20 лет ее убрали и в интернетеполно криков – «верните мою любимую кнопку!».8
  9. 9. Второй проблемой был обширный функционал Агента. Были убранымногие второстепенные индикаторы и урезаны посторонние фичи.Минималистичные гайдлайны платформы помогли «продать» этинепростые решения менеджерам.
  10. 10. Пробовали разные концепции – стартовый экран, который даетобзор всех функций и упор на основную задачу – общение.
  11. 11. Проектировать интерфейс оказалось очень легко – «прямоугольныйстиль» Windows Phone отлично передается прототипами.
  12. 12. Но ведь такой подход ограничивает дизайнера!Проектировщик и гайдлайны выполнили за неговсю работу – даже сетка известна до пикселя.12
  13. 13. Но работы дизайнеру хватает – нужно брендироватьприложение, а значит отходить от гайдлайнов,требующих минимума ненужных декораций.13
  14. 14. Легкая текстура и Metro-иконки статусов
  15. 15. Как и в любой платформе, отхождение от гайдлайнов вызываеткритику: «Как можно?! Это же не Metro-стиль!» Но важен дух, а небуква гайдов – он помогает создавать новые решения и выделитьпродукт среди конкурентов, не ломая при этом experience.15
  16. 16. Правда, если вы хотите попасть в топ приложений –требованиям придется следовать более четко. Мы общались сMicrosoft для того чтобы решить несоответствия и проблемы.И готовили обязательный пакет документов для ревью.16
  17. 17. Процесс утверждения имеет нюансы. Аттестующие имеют разноемнение о деталях интерфейса. Нам указывали на ошибку, хотятакое же решение использует стандартное приложение WP. Ноэто дискуссионный процесс – можно донести свою позицию.17
  18. 18. Информационная карта
  19. 19. Приложение вышло в марте 2012 года. И сталопервым релизом Mail.Ru для Windows Phone.19
  20. 20. Интерфейс Агента используется и для ICQ
  21. 21. Хаб для Windows Phone 2
  22. 22. В Windows Phone есть концепция хабов – портала в вебовскомпонимании, собирающего наиболее важную информацию откомпании. Он стал нашим вторым приложением для платформы.
  23. 23. И снова прототип определил основную часть продукта. Этопозволило начать программирование еще до дизайна.
  24. 24. Специфика платформы – бесконечное «полотно», котороеобъединяет связку из нескольких тематических экранов. Стандартные«поэкранные» шаблоны проектирования тут не подходят – нужнорисовать сразу всю панораму или pivot.
  25. 25. К сожалению, столкнулись с обидной проблемой текущей версииWinPhone – ограниченность live tiles для сторонних разработчиков.Информация получается с задержкой и для ее регулярногообновления нужен серверно-затратный механизм.
  26. 26. Futubra для Windows Phone 3
  27. 27. Благодаря скорости и удобству разработки первымприложением недавно запустившегося на тотмомент сервиса Futubra стало приложение для WP7.27
  28. 28. Новости для Windows Phone 4
  29. 29. Приложение делалось подрядчиками. На этапе ТЗ возниклапроблема – проектировщик делал интерфейс по мотивамiPhone-решений. Перекомпоновка экранов спасла ситуацию.А дизайн оказался очень удачным.29
  30. 30. Почта для Windows Phone 5
  31. 31. Еще одно приложение, которое было достаточно оперативно. Заоснову первой версии был взят стандартный почтовый клиент, вкоторый были добавлены специфичные для почты Mail.Ru функции.
  32. 32. Мы предложили интересный концепт live tile. Но анимация вWP7 ограничена двумя сторонами тайла. А индикатор можновыводить только стандартный – черная точка, котораяложится не на всякий дизайн.32
  33. 33. Радикальный выход – генерировать нужную цифру на тайлекартинкой. Посчитали – нужно 100 картинок, это примерно+1МБ к весу приложения, так что вариант не самый удачный.Пришлось вернуться к простому решению.33
  34. 34. Из-за монохромной одноцветности тайлов в стартовом экранесложнее ориентироваться – остается только один способ отличитьприложения друг от друга, детали пиктограммы. Поэтому мы делаемтайлы умеренно цветными, не используем дефолтную тему.
  35. 35. Люди, не использовавшие WP в реальной жизни, обычно боятсяанимации на тайлах – мол, мельтешит. Опасение ложное – вы несмотрите часами на главный экран, а бегло ищете там нужноеприложение. И наверняка помните, что «оно во втором экране».
  36. 36. Агент и ICQ для Windows 8 6
  37. 37. 30 сентября 2011 года на конференции Build наширазработчики получили первый тестовый планшет наWindows 8. Вскоре появилась задача создания первыхприложений для нее. И снова был выбран Агент.37
  38. 38. Нам пришлось проектировать вслепую – платформа работалав совсем сыром статусе Developer Preview, примеровприложений почти не было, не говоря уже об интерфейсныхгайдлайнах.38
  39. 39. Помог опыт работы над приложением Агента дляWindows Phone и понимание духа Metro-дизайна. Мымного брейнштормили и нашли подходящий концепт.39
  40. 40. Модель работы приложения – единый «холст»
  41. 41. Стартовый экран похож на десктопную версию со списком контактови обзором самого интересного.
  42. 42. При открытии диалога viewport уезжает вправо и показываетисторию сообщений, а также информацию о пользователе.
  43. 43. В ходе видео-звонка контакт-лист сворачивается до минимальногосостояния и не мешает общению. При этом хватает места для чата.
  44. 44. Для режима snap view мы подумали об интересном кейсе –коллективная работа с сайтом или документом.
  45. 45. Весной 2012 года продукт был передан в отдельноеподразделение, так что доработку и запуск приложения дляWindows 8 вела уже другая команда. Но для нас эта задача сталапервым опытом в работе с платформой, очень и очень ценным.45
  46. 46. Новости для Windows 8 7
  47. 47. Мы начали работу над типовым приложением контент-проектов для Windows 8 в начале 2012 года. Аналогичныхпримеров на платформе почти не было, так что обратились копыту печатных журналов.47
  48. 48. Журнальная стилистика позволяет представить контентв приятном для чтения виде, когда материалы приятнолистать. Что-то похожее делает Flipboard.48
  49. 49. Но мы пошли дальше. Нужно былопредставить в красивом виде огромныестатьи с кучей фотографий и видео.Причем в интернете они былипредставлены без всякой семантики. Атратить ресурсы редакции на разметку –слишком дорого.
  50. 50. Мы спроектировали сложную модульную сетку иописали алгоритм, с помощью которого существующийнеразмеченный контент аккуратно становится в нее.50
  51. 51. Одним из главных споров былоиспользование горизонтальногомеханизма чтения новостей. Microsoftприучает к такому способу, но весьостальной мир читает контентвертикально. Включая Internet Explorerдля самой Windows 8.
  52. 52. После долгих споров мы остановились на горизонтальном формате.Приложение Новостей использует короткие материалы, где пока ненужен наш алгоритм построения журнальной сетки. Но в будущеммы вернемся к ней.
  53. 53. В отличие от Windows Phone, при проектировании уже не получаетсясделать выверенный до пикселя прототип. Так что работа дизайнерав Windows 8 гораздо интереснее.
  54. 54. Дизайнер сделал сетку списков новостей более реалистичной, исходяиз существующего контента. Получилась интересная асинхроннаяподача, которая выглядит свежо и цепляет глаз.
  55. 55. На экране новости фон получается из основного фото – делаетсяразмытие и накладывается корректирующая текстура.
  56. 56. Также продумали semantic zoom для разных экранов. Для стартовогохотели давать сводку актуального контента, но это перегружало его.
  57. 57. Для snap view использовали компоновку из приложения для WP7 –по смыслу и ширине оно отлично ложится сюда.
  58. 58. Почта для Windows 8 8
  59. 59. Весной 2012 года стала известна официальная датазапуска Windows 8 и мы стали работать над Почтой,приложением для одного из ключевых продуктов.59
  60. 60. Изначально проектирование пошло достаточно легко – у нас ужебыли наработки по Windows 8, да и свой продукт мы знаем отлично.
  61. 61. Первый дизайн вышел интересным и приятным. Но интерфейсплатформы был еще непривычным, и началась война за детали.
  62. 62. Панель действий включает много операций, касающихся почтовогоящика в целом, списка писем в выбранной папке и конкретногописьма. Как разместить на одной панели? Мы много разперекомпоновывали кнопки и отказались от логотипа.1
  63. 63. Поиск нужно прятать в charms bar, если следовать гайдлайнам. Ночто если пользователи не узнают об этой панели? Да и в целоммеханика работы с ней вызывала много вопросов, а хорошихработающих примеров особо не было.2
  64. 64. Множество мелких вопросов вроде того, насколько понятенстандартный механизм выделения элементов в списке.3
  65. 65. Кстати, о логотипе. Во всех приложениях стараемсяубирать его из панелей действий. Он есть на экранезагрузки, да и цветовое брендирование помогает.65
  66. 66. Также важно помнить о том, что приложение можетиспользоваться как в планшетном (тач), так и в десктопномрежиме (клавиатура+мышь). Важно, чтобы основныефункции были доступны в обоих режимах.66
  67. 67. Итоговая версия приложения стала более чистой и аккуратной, адетали взаимодействия – более отточенными.
  68. 68. Приложение вместе с Новостями успело попасть вMarket к 26 октября 2012 года, официальной датезапуска платформы.68
  69. 69. Как прокачаться в Metro-дизайне?
  70. 70. Изучайте сетки в дизайне
  71. 71. Ищите интересные паттерны и дизайн-решения, легкиедекорации, которые освежают продукт
  72. 72. Смотрите на эксперименты со Metro-стилистикой в вебе– их сейчас очень много
  73. 73. Хотя они не всегда логичны и уместны
  74. 74. Многие iOS-дизайнеры прониклись Metro-стилистикойи принесли ее в приложения для iPhone и iPad
  75. 75. iMetro?
  76. 76. iMetro?
  77. 77. iMetro?
  78. 78. iMetro?
  79. 79. Дискуссия о «плоском дизайне» бурлит в сообществе –каждый второй попробовал его или написал статью
  80. 80. Версию этой стилистики от Google называют «почтиплоский дизайн»
  81. 81. Хотя гимн плоского дизайна появился еще в 1999 году
  82. 82. Много отличнейших приложений есть в Market
  83. 83. Toshl
  84. 84. The Daily Beast
  85. 85. Ski School
  86. 86. Fontli
  87. 87. Nike Kinect Training
  88. 88. Nike Kinect Training
  89. 89. Cocktail Flow
  90. 90. Weather Flow
  91. 91. ТКС Банк
  92. 92. The Caddie+
  93. 93. Концепт приложения для гольфистов
  94. 94. Burton
  95. 95. Nokia Drive
  96. 96. Moquu
  97. 97. Clearer
  98. 98. AccuWeather
  99. 99. USA Today
  100. 100. Skype
  101. 101. OneNote
  102. 102. iCookBook
  103. 103. ТКС Банк
  104. 104. Kayak
  105. 105. Cocktail Flow
  106. 106. ESPN
  107. 107. IM+
  108. 108. The Wall Street Journal
  109. 109. Los Angeles Times
  110. 110. NASCAR
  111. 111. Weather Flow
  112. 112. Nook
  113. 113. Expedia
  114. 114. StumbleUpon
  115. 115. Aol Today
  116. 116. Как развиваются мобильные платформы
  117. 117. В первые годы iOS очень жестко держался за гайдлайны иприложения старались вписываться в эти требования.
  118. 118. Но в последние годы платформа полна инноваций, априложения развивают или вообще рушат гайдлайны
  119. 119. С Android другая история – раньше это была не особо аккуратнаякалька с iOS.
  120. 120. Теперь появился свой стиль, хотя и явно вдохновленныйвизуальными и интерфейсными решениями Metro.
  121. 121. Наверняка и гайдлайны Microsoft скорректируются послетого, как сторонние приложения предложат новые инеобычные концепции дизайна и взаимодействия. И всегдаочень интересно приложить руку к таким изменениям.121
  122. 122. ЮРИЙ ВЕТРОВспасибо!вопросы?www.jvetrau.com www.mail.ru facebook.com/pages/MailRutwitter.com/jvetrau

×