Юрий Ветров

Кросс-платформенноепроектирование для мобильных

Android, iPhone, Symbian, Windows Phone

2

Для кого этот мастер-класс?

— Начинающим проектировщикам и дизайнерам – разобраться в том, как проектировать мобильные приложения.

— Опытным – улучшить свои знания и понимание особенностей проектирования для мобильных.

— Менеджерам и заказчикам – научиться контролировать процесс проектирования и дизайна для мобильных.

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20 минут

10

30

30

25

25

25

15

4

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

20минут

5

Задача

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

6

Версии для 4 платформ:

Android, iPhone, Symbian, Windows Phone 71

7

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

8

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

9

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

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10 минут

3030

25

25

25

15

11

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

10минут

12

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

13

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

2

14

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

15

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

vs

16

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

17

ОС смартфонов, продажи в 2011

45%

19%

16%

12%

5%

1% 1% 1%

В мире, Q2

Android

iOS

Symbian

BlackBerry OS

Bada

Windows Phone 7

Windows Mobile

другие

12%

5%

70%

9%4%

Россия, Q1

AndroidiOSSymbianBlackBerry OSBadaWindows Phone 7Windows Mobileдругие

Tomi Ahonen Связной

→ ~55%

→ ~30%

18

ОС телефонов, на руках в 2011

?2% 1%

97%

Россия

Android

iOS

Symbian, Bada, J2MEпо слухам

19

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

?

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10

30 минут30

25

25

25

15

21

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

15минут

22

Компоновка экранаобласть уведомлений

информация о текущем объекте

элемент списка действий

действия с текущим экраном

название группы элементов

активная вкладканавигация по экранам

23

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

24

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

25

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

26

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

27

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

28

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

29

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

30

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

31

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

32

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

33

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

34

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

35

Навигация

36

Общая навигация между разделами

вкладки

стартовыеэкраны

37

Навигация внутри экрана

поиск

панелиинструментов

элементысписков контент

38

Действия с объектами кнопки внутри экрана

кнопкив панелях

контекстныеменю

кнопкив панелях

39

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

кнопкив панелях

40

Событийная навигация

алертыуведомления

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

43

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

15минут

до 11:30

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10

3030

25 минут

25

25

15

46

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

15минут

47

Компоновка экрана

область уведомлений

активная вкладка

информация о текущем объекте

элемент списка

навигация по экранам

название группы элементов

действия с текущим экраном

48

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

49

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

50

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

51

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

52

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

53

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

54

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

55

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

56

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

57

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

58

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

59

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

60

Навигация

61

Общая навигация между разделами

меню

вкладкистартовые

экраны

62

Навигация внутри экрана

поиск

панелиинструментов

элементысписков

вкладки2го уровня

контент контекстноеменю

63

Действия с объектамиконтекстное

менюдиалоговые

окна

кнопкив панелях

контекстноеменю

64

Между близкими по контексту экранами

кнопкив панелях

65

Событийная навигация

системныеуведомления

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

68

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

10минут

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10

3030

25

25 минут

25

15

70

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

15минут

71

Компоновка экрана

название приложения или (родительского)

экрана

активная вкладка

информация о текущем объекте

элемент списка

навигация по экранам

действия с текущим экраном

область уведомлений

системный цвет для выделения объектов

72

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

73

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

74

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

75

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

76

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

77

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

78

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

79

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

80

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

81

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

82

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

83

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

84

Навигация

85

Общая навигация между разделами

хабы ипанорамы

вкладки

86

Навигация внутри экрана

поиск

панелиинструментов

элементысписков

контент

кнопки внутри экрана

контекстное меню

87

Действия с объектами

кнопкив панелях

кнопкивнутриэкрана

контекстное меню

диалоговые окна

88

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

кнопкив панелях

89

Событийная навигация

алерты

подтверждения

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

92

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

10минут

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10

3030

25

25

25 минут

15

94

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

15минут

95

Компоновка экрана

область уведомлений

активная вкладка

информация о текущем объекте

элемент списка

навигация по экранам

действия с текущим экраном

96

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

97

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

98

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

99

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

100

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

101

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

102

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

103

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

104

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

105

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

106

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

107

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

108

Навигация

109

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

экраны

менюпанель кнопок

вкладки

110

Навигация внутри экрана

панель кнопокпоиск

элементы списков

фильтры

контент

111

Действия с объектами

панель кнопокконтекстное

менюдиалоги

112

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

фильтры

кнопкив контенте

113

Событийная навигация

алертыуведомления

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

116

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

10минут

1. Брифинг

2. Мини-лекция

3. iPhoneкофе-брейк

4. Android

5. Windows Phone 7

6. Symbian

7. Проверка совместимости

20

10

3030

25

25

25

15

118

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

Спасибо!

Юрий Ветровwww.jvetrau.com

twitter.com/jvetrau

www.mail.ru

facebook.com/pages/MailRu

Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я

уберу их из слайдов.