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

1. ЮРИЙ ВЕТРОВ
метро-дизайн
в mail.ru
…и немного о flat design и
будущем мобильных платформ

2. Я на Windows Phone полтора года
Samsung Omnia 7 HTC Mozart Nokia Lumia 800 Nokia Lumia 920
2

3. Осенью 2011 года в России появились первые
телефоны на Windows Phone. Включая модели Nokia
– одного из самых популярных брендов в стране.
3

4. Агент и ICQ для Windows Phone 1

5. Мы начали с Агента, одного из наиболее развитых на
тот момент продуктов на мобильных. Уже были версии
для Android, iPhone, Symbian, WinMobile и J2ME.
5

6. Продать Metro-стиль сначала было непросто – менеджеры
видели его впервые и боялись «пустоты» на экране,
«скучности». Но с появлением первых телефонов на руках
стало проще – многие вопросы и страхи отпали.
6

7. В случае с Windows Phone взрослые оказываются
меньшими ретроградами – у них нет iOS-привычек,
а молодые уже обросли ими и боятся нового.
7

8. Привычка – опасная штука. В 1995 году не было кнопки
«Пуск» и Microsoft положил много усилий, чтобы продать эту
концепцию. Спустя почти 20 лет ее убрали и в интернете
полно криков – «верните мою любимую кнопку!».
8

9. Второй проблемой был обширный функционал Агента. Были убраны
многие второстепенные индикаторы и урезаны посторонние фичи.
Минималистичные гайдлайны платформы помогли «продать» эти
непростые решения менеджерам.

10. Пробовали разные концепции – стартовый экран, который дает
обзор всех функций и упор на основную задачу – общение.

11. Проектировать интерфейс оказалось очень легко – «прямоугольный
стиль» Windows Phone отлично передается прототипами.

12. Но ведь такой подход ограничивает дизайнера!
Проектировщик и гайдлайны выполнили за него
всю работу – даже сетка известна до пикселя.
12

13. Но работы дизайнеру хватает – нужно брендировать
приложение, а значит отходить от гайдлайнов,
требующих минимума ненужных декораций.
13

14. Легкая текстура и Metro-иконки статусов

15. Как и в любой платформе, отхождение от гайдлайнов вызывает
критику: «Как можно?! Это же не Metro-стиль!» Но важен дух, а не
буква гайдов – он помогает создавать новые решения и выделить
продукт среди конкурентов, не ломая при этом experience.
15

16. Правда, если вы хотите попасть в топ приложений –
требованиям придется следовать более четко. Мы общались с
Microsoft для того чтобы решить несоответствия и проблемы.
И готовили обязательный пакет документов для ревью.
16

17. Процесс утверждения имеет нюансы. Аттестующие имеют разное
мнение о деталях интерфейса. Нам указывали на ошибку, хотя
такое же решение использует стандартное приложение WP. Но
это дискуссионный процесс – можно донести свою позицию.
17

18. Информационная карта

19. Приложение вышло в марте 2012 года. И стало
первым релизом Mail.Ru для Windows Phone.
19

20. Интерфейс Агента используется и для ICQ

21. Хаб для Windows Phone 2

22. В Windows Phone есть концепция хабов – портала в вебовском
понимании, собирающего наиболее важную информацию от
компании. Он стал нашим вторым приложением для платформы.

23. И снова прототип определил основную часть продукта. Это
позволило начать программирование еще до дизайна.

24. Специфика платформы – бесконечное «полотно», которое
объединяет связку из нескольких тематических экранов. Стандартные
«поэкранные» шаблоны проектирования тут не подходят – нужно
рисовать сразу всю панораму или pivot.

25. К сожалению, столкнулись с обидной проблемой текущей версии
WinPhone – ограниченность live tiles для сторонних разработчиков.
Информация получается с задержкой и для ее регулярного
обновления нужен серверно-затратный механизм.

26. Futubra для Windows Phone 3

27. Благодаря скорости и удобству разработки первым
приложением недавно запустившегося на тот
момент сервиса Futubra стало приложение для WP7.
27

28. Новости для Windows Phone 4

29. Приложение делалось подрядчиками. На этапе ТЗ возникла
проблема – проектировщик делал интерфейс по мотивам
iPhone-решений. Перекомпоновка экранов спасла ситуацию.
А дизайн оказался очень удачным.
29

30. Почта для Windows Phone 5

31. Еще одно приложение, которое было достаточно оперативно. За
основу первой версии был взят стандартный почтовый клиент, в
который были добавлены специфичные для почты Mail.Ru функции.

32. Мы предложили интересный концепт live tile. Но анимация в
WP7 ограничена двумя сторонами тайла. А индикатор можно
выводить только стандартный – черная точка, которая
ложится не на всякий дизайн.
32

33. Радикальный выход – генерировать нужную цифру на тайле
картинкой. Посчитали – нужно 100 картинок, это примерно
+1МБ к весу приложения, так что вариант не самый удачный.
Пришлось вернуться к простому решению.
33

34. Из-за монохромной одноцветности тайлов в стартовом экране
сложнее ориентироваться – остается только один способ отличить
приложения друг от друга, детали пиктограммы. Поэтому мы делаем
тайлы умеренно цветными, не используем дефолтную тему.

35. Люди, не использовавшие WP в реальной жизни, обычно боятся
анимации на тайлах – мол, мельтешит. Опасение ложное – вы не
смотрите часами на главный экран, а бегло ищете там нужное
приложение. И наверняка помните, что «оно во втором экране».

36. Агент и ICQ для Windows 8 6

37. 30 сентября 2011 года на конференции Build наши
разработчики получили первый тестовый планшет на
Windows 8. Вскоре появилась задача создания первых
приложений для нее. И снова был выбран Агент.
37

38. Нам пришлось проектировать вслепую – платформа работала
в совсем сыром статусе Developer Preview, примеров
приложений почти не было, не говоря уже об интерфейсных
гайдлайнах.
38

39. Помог опыт работы над приложением Агента для
Windows Phone и понимание духа Metro-дизайна. Мы
много брейнштормили и нашли подходящий концепт.
39

40. Модель работы приложения – единый «холст»

41. Стартовый экран похож на десктопную версию со списком контактов
и обзором самого интересного.

42. При открытии диалога viewport уезжает вправо и показывает
историю сообщений, а также информацию о пользователе.

43. В ходе видео-звонка контакт-лист сворачивается до минимального
состояния и не мешает общению. При этом хватает места для чата.

44. Для режима snap view мы подумали об интересном кейсе –
коллективная работа с сайтом или документом.

45. Весной 2012 года продукт был передан в отдельное
подразделение, так что доработку и запуск приложения для
Windows 8 вела уже другая команда. Но для нас эта задача стала
первым опытом в работе с платформой, очень и очень ценным.
45

46. Новости для Windows 8 7

47. Мы начали работу над типовым приложением контент-
проектов для Windows 8 в начале 2012 года. Аналогичных
примеров на платформе почти не было, так что обратились к
опыту печатных журналов.
47

48. Журнальная стилистика позволяет представить контент
в приятном для чтения виде, когда материалы приятно
листать. Что-то похожее делает Flipboard.
48

49. Но мы пошли дальше. Нужно было
представить в красивом виде огромные
статьи с кучей фотографий и видео.
Причем в интернете они были
представлены без всякой семантики. А
тратить ресурсы редакции на разметку –
слишком дорого.

50. Мы спроектировали сложную модульную сетку и
описали алгоритм, с помощью которого существующий
неразмеченный контент аккуратно становится в нее.
50

51. Одним из главных споров было
использование горизонтального
механизма чтения новостей. Microsoft
приучает к такому способу, но весь
остальной мир читает контент
вертикально. Включая Internet Explorer
для самой Windows 8.

52. После долгих споров мы остановились на горизонтальном формате.
Приложение Новостей использует короткие материалы, где пока не
нужен наш алгоритм построения журнальной сетки. Но в будущем
мы вернемся к ней.

53. В отличие от Windows Phone, при проектировании уже не получается
сделать выверенный до пикселя прототип. Так что работа дизайнера
в Windows 8 гораздо интереснее.

54. Дизайнер сделал сетку списков новостей более реалистичной, исходя
из существующего контента. Получилась интересная асинхронная
подача, которая выглядит свежо и цепляет глаз.

55. На экране новости фон получается из основного фото – делается
размытие и накладывается корректирующая текстура.

56. Также продумали semantic zoom для разных экранов. Для стартового
хотели давать сводку актуального контента, но это перегружало его.

57. Для snap view использовали компоновку из приложения для WP7 –
по смыслу и ширине оно отлично ложится сюда.

58. Почта для Windows 8 8

59. Весной 2012 года стала известна официальная дата
запуска Windows 8 и мы стали работать над Почтой,
приложением для одного из ключевых продуктов.
59

60. Изначально проектирование пошло достаточно легко – у нас уже
были наработки по Windows 8, да и свой продукт мы знаем отлично.

61. Первый дизайн вышел интересным и приятным. Но интерфейс
платформы был еще непривычным, и началась война за детали.

62. Панель действий включает много операций, касающихся почтового
ящика в целом, списка писем в выбранной папке и конкретного
письма. Как разместить на одной панели? Мы много раз
перекомпоновывали кнопки и отказались от логотипа.
1

63. Поиск нужно прятать в charms bar, если следовать гайдлайнам. Но
что если пользователи не узнают об этой панели? Да и в целом
механика работы с ней вызывала много вопросов, а хороших
работающих примеров особо не было.
2

64. Множество мелких вопросов вроде того, насколько понятен
стандартный механизм выделения элементов в списке.
3

65. Кстати, о логотипе. Во всех приложениях стараемся
убирать его из панелей действий. Он есть на экране
загрузки, да и цветовое брендирование помогает.
65

66. Также важно помнить о том, что приложение может
использоваться как в планшетном (тач), так и в десктопном
режиме (клавиатура+мышь). Важно, чтобы основные
функции были доступны в обоих режимах.
66

67. Итоговая версия приложения стала более чистой и аккуратной, а
детали взаимодействия – более отточенными.

68. Приложение вместе с Новостями успело попасть в
Market к 26 октября 2012 года, официальной дате
запуска платформы.
68

69. Как прокачаться в Metro-дизайне?

70. Изучайте сетки в дизайне

71. Ищите интересные паттерны и дизайн-решения, легкие
декорации, которые освежают продукт

72. Смотрите на эксперименты со Metro-стилистикой в вебе
– их сейчас очень много

73. Хотя они не всегда логичны и уместны

74. Многие iOS-дизайнеры прониклись Metro-стилистикой
и принесли ее в приложения для iPhone и iPad

75. iMetro?

76. iMetro?

77. iMetro?

78. iMetro?

79. Дискуссия о «плоском дизайне» бурлит в сообществе –
каждый второй попробовал его или написал статью

80. Версию этой стилистики от Google называют «почти
плоский дизайн»

81. Хотя гимн плоского дизайна появился еще в 1999 году

82. Много отличнейших приложений есть в Market

83. Toshl

84. The Daily Beast

85. Ski School

86. Fontli

87. Nike Kinect Training

88. Nike Kinect Training

89. Cocktail Flow

90. Weather Flow

91. ТКС Банк

92. The Caddie+

93. Концепт приложения для гольфистов

94. Burton

95. Nokia Drive

96. Moquu

97. Clearer

98. AccuWeather

99. USA Today

100. Skype

101. OneNote

102. iCookBook

103. ТКС Банк

104. Kayak

105. Cocktail Flow

106. ESPN

107. IM+

108. The Wall Street Journal

109. Los Angeles Times

110. NASCAR

111. Weather Flow

112. Nook

113. Expedia

114. StumbleUpon

115. Aol Today

116. Как развиваются мобильные платформы

117. В первые годы iOS очень жестко держался за гайдлайны и
приложения старались вписываться в эти требования.

118. Но в последние годы платформа полна инноваций, а
приложения развивают или вообще рушат гайдлайны

119. С Android другая история – раньше это была не особо аккуратная
калька с iOS.

120. Теперь появился свой стиль, хотя и явно вдохновленный
визуальными и интерфейсными решениями Metro.

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

122. ЮРИЙ ВЕТРОВ
спасибо!
вопросы?
www.jvetrau.com www.mail.ru
facebook.com/pages/MailRu
twitter.com/jvetrau