Мастер-класс Юрия Ветрова "Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian" с конференции User Experience 2011.

1. Юрий Ветров Кросс-платформенноепроектирование для мобильных Android, iPhone, Symbian, Windows Phone

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

3. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 минут 10 30 30 25 25 25 15

4. Брифингплан и формат мастер-класса 4 20 минут

5. Задача Спроектировать мобильное приложение для конференции User Experience Russia 5

6. 6 Версии для 4 платформ: Android, iPhone, Symbian, Windows Phone 7 1

7. 7 Соответствие официальным гайдлайнам и следование общепринятым паттернам 2

8. 8 Спроектировать 3 ключевых экрана – стартовый, расписание, информация о конкретном докладе Остальное – на ваше усмотрение. 3

9. 9 Используйте шаблоны для проектирования – они лежат у вас на стульях 4

10. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 минут 3030 25 25 25 15

11. Мини-лекцияистория платформ, тренды в России и мире 11 10 минут

12. 12 Какие платформы выбрать для своего приложения? 1

13. 13 В каком порядке выпускать приложения? 2

14. 14 Использовать ли кросс-платформенные фреймворки? 3

15. 15 Что делать сначала – мобильный сайт или приложение? 4 vs

16. 16 Как насчет мобильного сайта в оболочке приложения? 5

17. ОС смартфонов, продажи в 2011 17 -> ~30% -> ~55% TomiAhonen Связной

18. ОС телефонов, на руках в 2011 18 ? по слухам

19. Готовы ли пользователиплатить за приложения? 19 ?

20. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 30 минут30 25 25 25 15

21. iPhoneкомпоновка и типы экранов, паттерны, навигация 21 15 минут

22. Компоновка экрана 22 область уведомлений действия с текущим экраном информация о текущем объекте элемент списка действий название группы элементов навигация по экранам активная вкладка

23. Типы экранов: Стартовый 23

24. Типы экранов: Список 24

25. Типы экранов: Объект 25

26. Типы экранов: Медиа 26

27. Типы экранов: Карта 27

28. Типы экранов: Форма 28

29. Типы экранов: Настройки 29

30. Типы экранов: Справочные 30

31. Типы экранов: Камера 31

32. Типы экранов: Загрузка приложения 32

33. Типы экранов: Блокировка 33

34. Типы экранов: Домашний 34

35. Навигация 35

36. Общая навигация между разделами 36 стартовые экраны вкладки

37. Навигация внутри экрана 37 элементы списков поиск контент панели инструментов

38. Действия с объектами 38 кнопки внутри экрана кнопки в панелях контекстные меню кнопки в панелях

39. Навигация между близкими по контексту экранами 39 кнопки в панелях

40. Событийная навигация 40 алерты уведомления

41. Навигация между приложениями 41 алерты уведомления многозадачность

42. Гайдлайны Human Interface Guidelines – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Human Interface Guidelines for Web Applications – http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html Safari Web Content Guide – http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html System-Provided Buttons and Icons – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW41 Custom Icon and Image Creation Guidelines – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1 42

43. Проектируем для iPhoneпрактическое задание 43 15 минут

44. до 11:30

45. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 3030 25 минут 25 25 15

46. Androidкомпоновка и типы экранов, паттерны, навигация 46 15 минут

47. Компоновка экрана 47 область уведомлений активная вкладка навигация по экранам информация о текущем объекте элемент списка название группы элементов действия с текущим экраном

48. Типы экранов: Стартовый 48

49. Типы экранов: Список 49

50. Типы экранов: Объект 50

51. Типы экранов: Медиа 51

52. Типы экранов: Карта 52

53. Типы экранов: Форма 53

54. Типы экранов: Настройки 54

55. Типы экранов: Справочные 55

56. Типы экранов: Камера 56

57. Типы экранов: Загрузка приложения 57

58. Типы экранов: Блокировка 58

59. Типы экранов: Домашний 59

60. Навигация 60

61. Общая навигация между разделами 61 стартовые экраны вкладки меню

62. Навигация внутри экрана 62 элементы списков вкладки 2го уровня поиск панели инструментов контент контекстное меню

63. Действия с объектами 63 контекстное меню контекстное меню диалоговые окна кнопки в панелях

64. Между близкими по контексту экранами 64 кнопки в панелях

65. Событийная навигация 65 системные уведомления

66. Навигация между приложениями 66 системные уведомления многозадачность кнопка “Back”

67. Гайдлайны User Interface Guidelines – http://developer.android.com/guide/practices/ui_guidelines/index.html Icon Design Guidelines – http://developer.android.com/guide/practices/ui_guidelines/icon_design.html 67

68. Проектируем для Androidпрактическое задание 68 10 минут

69. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 3030 25 25 минут 25 15

70. Windows Phone 7компоновка и типы экранов, паттерны, навигация 70 15 минут

71. Компоновка экрана 71 область уведомлений название приложения или (родительского) экрана активная вкладка навигация по экранам информация о текущем объекте элемент списка системный цвет для выделения объектов действия с текущим экраном

72. Типы экранов: Стартовый 72

73. Типы экранов: Список 73

74. Типы экранов: Объект 74

75. Типы экранов: Медиа 75

76. Типы экранов: Карта 76

77. Типы экранов: Форма 77

78. Типы экранов: Настройки 78

79. Типы экранов: Справочные 79

80. Типы экранов: Камера 80

81. Типы экранов: Загрузка приложения 81

82. Типы экранов: Блокировка 82

83. Типы экранов: Домашний 83

84. Навигация 84

85. Общая навигация между разделами 85 вкладки хабы и панорамы

86. Навигация внутри экрана 86 кнопки внутри экрана поиск контент элементы списков панели инструментов контекстное меню

87. Действия с объектами 87 диалоговые окна контекстное меню кнопки внутри экрана кнопки в панелях

88. Навигация между близкими по контексту экранами 88 кнопки в панелях

89. Событийная навигация 89 алерты подтверждения

90. Навигация между приложениями 90 алерты многозадачность

91. Гайдлайны User Experience Design Guidelines for Windows Phone – http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx UI Design and Interaction Guide – http://go.microsoft.com/?linkid=9713252 (PDF) Windows Phone 7 Interoperability Bridges – http://windowsphone.interoperabilitybridges.com/ Windows Phone 7 Series Icon Pack – http://windowsteamblog.com/blogs/wpdev/archive/2010/03/27/windows-phone-7-series-icon-pack.aspx 91

92. Проектируем для WP7практическое задание 92 10 минут

93. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 3030 25 25 25 минут 15

94. Symbianкомпоновка и типы экранов, паттерны, навигация 94 15 минут

95. Компоновка экрана 95 область уведомлений активная вкладка навигация по экранам информация о текущем объекте элемент списка действия с текущим экраном

96. Типы экранов: Стартовый 96

97. Типы экранов: Список 97

98. Типы экранов: Объект 98

99. Типы экранов: Медиа 99

100. Типы экранов: Карта 100

101. Типы экранов: Форма 101

102. Типы экранов: Настройки 102

103. Типы экранов: Справочные 103

104. Типы экранов: Камера 104

105. Типы экранов: Загрузка приложения 105

106. Типы экранов: Блокировка 106

107. Типы экранов: Домашний 107

108. Навигация 108

109. Общая навигация между разделами 109 стартовые экраны вкладки меню панель кнопок

110. Навигация внутри экрана 110 фильтры контент элементы списков панель кнопок поиск

111. Действия с объектами 111 контекстное меню панель кнопок диалоги

112. Навигация между близкими по контексту экранами 112 фильтры кнопки в контенте

113. Событийная навигация 113 алерты уведомления

114. Навигация между приложениями 114 алерты уведомления многозадачность

115. Гайдлайны Updated Symbian Design Guidelines – http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/ UI Style Guide – http://www.forum.nokia.com/info/sw.nokia.com/id/5c419b14-75ff-4791-b1a8-db1e0d72e36e/Symbian_3_UI_Style_Guide.html Carbide UI Theme Edition tutorial – http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-3D81EB35-DC3B-4DAA-A6CF-F698D0FA0CF0.html Mobile Web Browsing – http://www.forum.nokia.com/Develop/Web/ Icons and metaphors – http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-02FA611E-CA7B-4C05-9697-78D88695C12C.html 115

116. Проектируем для Symbianпрактическое задание 116 10 минут

117. Брифинг Мини-лекция iPhoneкофе-брейк Android Windows Phone 7 Symbian Проверка совместимости 20 10 3030 25 25 25 15

118. Проверка совместимостисопоставление получившихся интерфейсов 118

119. Спасибо! Юрий Ветров www.jvetrau.com twitter.com/jvetrau www.mail.ru facebook.com/pages/MailRu Всеиллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.comи я уберу их из слайдов.