Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 122 Anzeige

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

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru (20)

Weitere von Yury Vetrov (13)

Anzeige

Aktuellste (20)

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/MailRu twitter.com/jvetrau

Hinweis der Redaktion

  • © http://hi-tech.mail.ru/news/misc/nokia_wp_russia.html
  • © http://calgaryux.com/2012/10/05/book-club-nov-27-2012-the-power-of-habit/
  • © http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
  • © WPDang.com
  • © http://blog.merrycode.com/windows-phone-7-ux-sketch-templates/ +http://www.core77.com/blog/windows_phone/8_tips_for_designing_windows_phone_apps_lightning_design_reviews_24229.asp
  • © http://www.windowsphone.com/ru-ru/store/app/amazing-weather-hd/c7ac43c5-5d99-4e65-913d-e92e253e9e99 + http://www.windowsphone.com/ru-ru/store/app/weather-flow/ae13c46a-eed5-4c1a-8873-160c1635bbfa
  • © http://w7phone.ru/futubra-na-windows-phone-7-60551/ иhttp://www.digit.ru/technology/20120330/390552424.html
  • © http://myprogrammingdial.blogspot.ru/2011/12/how-to-generate-tile-image-from.html
  • © http://sayla-ictform45.blogspot.ru/2010/03/data-measurement.html
  • © http://davidpallmann.blogspot.ru/2011_09_01_archive.html
  • © http://www.gadgetgear.nl/2011/11/review-super-mario-3d-land-3ds/
  • © http://topmagazines.wordpress.com/2011/08/31/recommended-magazines-make-your-women-and-girls-happy-with-magazines/
  • © http://www.imagemaking.us/2011/03/magazine-layout.html
  • © http://archwin.net/75
  • © http://www.que.es/tecnologia/fotos/windows-steven-sinofsky-durante-presentacion-f586977-foto.html
  • © http://corp.mail.ru/press/news/1551 иhttp://www.microsoft.com/en-us/news/press/2012/oct12/10-25windows8gapr.aspx
  • © http://s-wilson1013-dc.blogspot.com/2011/10/what-is-design-for-printmanual_18.html
  • © http://www.behance.net/gallery/GPS-Cycle-(Metro-application)/5615745
  • © http://dribbble.com/shots/808657-W8P-WordPress-Theme
  • © http://dribbble.com/shots/824187-Dashboard
  • ©http://sachagreif.com/flat-pixels/
  • © http://dribbble.com/shots/800577-Ideas-Macro-Maestro-Today
  • © http://dribbble.com/shots/846552-Statnut-Neue
  • © http://dribbble.com/shots/780188-Morning
  • © http://dribbble.com/shots/618423-Disneyland-Weather-App
  • © http://abduzeedo.com/design-trends-2013-flat-and-minimal + http://daringfireball.net/2013/01/the_trend_against_skeuomorphism + http://layervault.tumblr.com/post/32267022219/flat-interface-design
  • © http://www.wired.com/gadgetlab/2012/12/new-gmail-hands-on/ + http://www.matthewmooredesign.com/almost-flat-design/
  • © http://www.youtube.com/watch?v=qmsbP13xu6k
  • Toshl -- http://www.windowsphone.com/ru-ru/store/app/toshl-finance/81872b65-95f0-44b3-a2ee-0a30b44345e7
  • The Daily Beast -- http://www.windowsphone.com/ru-ru/store/app/the-daily-beast/f74086a2-3804-4928-89e2-330b58057898
  • Ski School -- http://www.windowsphone.com/ru-ru/store/app/ski-school-lite/ed119c8f-a645-400f-87b3-b0531ff515e5
  • Fontli -- http://www.windowsphone.com/ru-ru/store/app/fontli/0d09f01f-17de-4757-b63c-a1cb32fbd655
  • Kinect Training -- http://www.windowsphone.com/ru-ru/store/app/nike-kinect-training/ba67b2fd-3886-4801-be0c-6584cd145d18
  • Kinect Training -- http://www.windowsphone.com/ru-ru/store/app/nike-kinect-training/ba67b2fd-3886-4801-be0c-6584cd145d18
  • Cocktail Flow -- http://www.windowsphone.com/ru-ru/store/app/cocktail-flow/ddd1ad08-d9d5-df11-a844-00237de2db9e
  • WeatherFlow -- http://www.windowsphone.com/ru-ru/store/app/weather-flow/ae13c46a-eed5-4c1a-8873-160c1635bbfa
  • ТКС Банк --http://www.windowsphone.com/ru-ru/store/app/%D1%82%D0%BA%D1%81-%D0%B1%D0%B0%D0%BD%D0%BA/1b8d170b-afef-485f-83d7-c3c7fb7b11fe
  • The Caddie+ -- http://www.windowsphone.com/ru-ru/store/app/the-caddie/34715fc1-3008-4f1c-8c1b-44616eea1db7
  • Burton -- http://www.windowsphone.com/en-us/store/app/burton/6703436f-3a9a-4ab4-8958-0c44ccdf8be7
  • Nokia Drive -- http://www.windowsphone.com/ru-ru/store/app/nokia-drive-beta/31bbc68c-503e-4561-8d85-a294d54df06f
  • © http://dribbble.com/shots/664054-Moquu
  • Clearer -- http://www.windowsphone.com/ru-ru/store/app/clearer/51bdd804-61f7-46f5-93df-4169cfb731d7
  • AccuWeather -- http://apps.microsoft.com/windows/en-us/app/accuweather-for-windows-8/cf317822-d092-42e8-8066-4cda958a8f7f
  • USA Today -- http://apps.microsoft.com/windows/en-us/app/usa-today/f8d941cf-79d0-4e7c-ac5a-b78b53d83f92
  • Skype -- http://apps.microsoft.com/windows/en-us/app/skype/5e19cc61-8994-4797-bdc7-c21263f6282b
  • OneNote -- http://apps.microsoft.com/windows/en-us/app/onenote/f022389f-f3a6-417e-ad23-704fbdf57117
  • iCookBook -- http://apps.microsoft.com/windows/en-us/app/icookbook/2c87f056-0c7c-4a8c-a63c-8b06421bdb29
  • ТКС Банк -- http://apps.microsoft.com/windows/ru-ru/app/f3cc03d8-f1a4-43dc-9769-7597b0ae02ba
  • Kayak -- http://apps.microsoft.com/windows/en-us/app/kayak-flights-hotels/115b13de-2d8e-4c70-9a36-dfd2c6a7a923
  • Cocktail Flow -- http://apps.microsoft.com/windows/en-us/app/cocktail-flow/88e08b7c-10d0-45b8-9280-946bd889e243
  • ESPN -- http://apps.microsoft.com/windows/en-us/app/the-espn-app/3c3536bd-f432-468c-a6e4-fa1ecd49e5fc
  • IM+ -- http://apps.microsoft.com/windows/en-us/app/im/99c049c4-5ef8-4b17-802e-4cf5463d4ef3/m/ROW
  • The Wall Street Journal -- http://apps.microsoft.com/windows/en-us/app/the-wall-street-journal/f33ac02e-65bc-4ec3-b8bc-57f553504637
  • Los Angeles Times -- http://www.greatwindowsapps.com/app/la-times
  • NASCAR -- http://apps.microsoft.com/windows/en-us/app/nascar/f1828118-fa1f-4d3d-99f8-160ae1595624
  • Weather Flow -- http://apps.microsoft.com/windows/en-us/app/weatherflow/382eedcc-7e89-4c86-98dc-396c31890631
  • Nook -- http://apps.microsoft.com/windows/en-us/app/nook/05dbbb07-cd42-4a5f-9cd3-a329d52bd372
  • Expedia -- http://apps.microsoft.com/windows/en-US/app/expedia/d473ceb4-e30b-4c84-913a-744fd90c6728
  • StumbleUpon -- http://apps.microsoft.com/windows/en-us/app/stumbleupon/eb0a5bc4-90ff-44f5-85a9-b9d285153905
  • Aol Today -- http://apps.microsoft.com/windows/en-us/app/aol-today/8071b732-c391-4dc0-bc00-5af24c252c92
  • © http://www.theverge.com/2011/12/13/2612736/ios-history-iphone-ipad
  • © http://www.theverge.com/2012/10/30/3577924/microsoft-design-language-metro

×