Документ представляет собой программу мастер-класса по кросс-платформенному проектированию мобильных приложений для Android, iPhone, Symbian и Windows Phone, нацеленного на начинающих проектировщиков и опытных специалистов. В рамках мероприятия участники изучат проектирование интерфейсов, соответствие гайдлайнам, а также выполнит практические задания по созданию приложений для различных платформ. Также в документе приведены ссылки на полезные руководства и гайдлайны для каждой платформы.

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

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

3. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости20 минут10303025252515

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

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

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

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

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

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

10. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости2010 минут303025252515

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

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

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

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

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

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

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

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

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

20. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости201030 минут3025252515

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

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.htmlHuman Interface Guidelines for Web Applications – http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.htmlSafari Web Content Guide – http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.htmlSystem-Provided Buttons and Icons – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW41Custom Icon and Image Creation Guidelines – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW142

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

44. до 11:30

45. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости2010303025 минут252515

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

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.htmlIcon Design Guidelines – http://developer.android.com/guide/practices/ui_guidelines/icon_design.html67

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

69. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости201030302525 минут2515

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

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).aspxUI 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.aspx91

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

93. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости20103030252525 минут15

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

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.htmlCarbide UI Theme Edition tutorial – http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-3D81EB35-DC3B-4DAA-A6CF-F698D0FA0CF0.htmlMobile 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.html115

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

117. БрифингМини-лекцияiPhoneкофе-брейкAndroidWindows Phone 7SymbianПроверка совместимости2010303025252515

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

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