user experience 2011: Мастер-класс: Кросс-платформенное...

Юрий Ветров

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

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. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


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. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


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

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html



http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html




http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html




http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html%23//apple_ref/doc/uid/TP40006556-CH13-SW41




http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html%23//apple_ref/doc/uid/TP40006556-CH14-SW1




43

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

15минут

до 11:30

1. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


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

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html



68

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

10минут

1. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


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

http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx



http://go.microsoft.com/?linkid=9713252

http://go.microsoft.com/?linkid=9713252

http://windowsphone.interoperabilitybridges.com/

http://windowsteamblog.com/blogs/wpdev/archive/2010/03/27/windows-phone-7-series-icon-pack.aspx



92

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

10минут

1. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


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

http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/

http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/

http://www.forum.nokia.com/info/sw.nokia.com/id/5c419b14-75ff-4791-b1a8-db1e0d72e36e/Symbian_3_UI_Style_Guide.html




http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-3D81EB35-DC3B-4DAA-A6CF-F698D0FA0CF0.html



http://www.forum.nokia.com/Develop/Web/

http://www.forum.nokia.com/Develop/Web/

http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-02FA611E-CA7B-4C05-9697-78D88695C12C.html



116

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

10минут

1. Брифинг



4. Android

5. Windows Phone 7

6. Symbian


20

10

3030

25

25

25

15

118

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

Спасибо!

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

twitter.com/jvetrau

www.mail.ru

facebook.com/pages/MailRu

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

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

http://www.jvetrau.com/

http://twitter.com/jvetrau

http://twitter.com/jvetrau

http://www.mail.ru/

http://facebook.com/pages/MailRu

http://facebook.com/pages/MailRu