Презентация Юрия Ветрова (Mail.ru Group)

Жизнь со множеством платформОсобенности проектирования и дизайна для Android, iPhone, Symbian, WP7

Юрий Ветров

2

О чем этот рассказ?

— Продукты выпускаются сразу на нескольких мобильных платформах. Что делать дизайнеру и проектировщику?

— Чем отличаются интерфейсы Android, iOS, Symbian, Windows Phone 7.

1. Android

2. iPhone

3. Windows Phone 7

4. Symbian

4

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

5

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

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

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

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

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

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

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

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

6

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

7

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

8

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

9

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

10

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

11

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

12

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

13

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

14

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

15

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

16

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

17

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

18

Навигация

19

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

меню

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

экраны

20

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

поиск

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

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

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

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

21

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

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

окна

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

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

22

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

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

23

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

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

24

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

уведомления

кнопка “Back”

многозадачность

25

Гайдлайны

User Interface Guidelineshttp://developer.android.com/guide/practices/ui_guidelines/index.html

Icon Design Guidelineshttp://developer.android.com/guide/practices/ui_guidelines/icon_design.html

1. Android

2. iPhone

3. Windows Phone 7

4. Symbian

27

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

28

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

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

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

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

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

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

29

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

30

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

31

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

32

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

33

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

34

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

35

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

36

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

37

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

38

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

39

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

40

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

41

Навигация

42

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

вкладки

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

43

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

поиск

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

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

44

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

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

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

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

45

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

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

46

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

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

47

Навигация между приложениями

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

многозадачность

48

Гайдлайны

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

1. Android

2. iPhone

3. Windows Phone 7

4. Symbian

50

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

51

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

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

экрана

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

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

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

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

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

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

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

52

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

53

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

54

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

55

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

56

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

57

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

58

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

59

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

60

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

61

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

62

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

63

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

64

Навигация

65

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

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

вкладки

66

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

поиск

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

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

контент

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

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

67

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

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

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

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

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

68

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

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

69

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

алерты

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

70

Навигация между приложениями

алерты

многозадачность

71

Гайдлайны

User Experience Design Guidelines for Windows Phonehttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx

UI Design and Interaction Guidehttp://go.microsoft.com/?linkid=9713252

Windows Phone 7 Interoperability Bridgeshttp://windowsphone.interoperabilitybridges.com/

Windows Phone 7 Series Icon Packhttp://windowsteamblog.com/blogs/wpdev/archive/2010/03/27/windows-phone-7-series-icon-pack.aspx

1. Android

2. iPhone

3. Windows Phone 7

4. Symbian

73

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

74

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

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

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

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

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

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

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

75

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

76

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

77

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

78

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

79

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

80

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

81

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

82

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

83

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

84

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

85

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

86

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

87

Навигация

88

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

экраны

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

вкладки

89

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

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

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

фильтры

контент

90

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

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

менюдиалоги

91

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

фильтры

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

92

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

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

93

Навигация между приложениями

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

многозадачность

94

Гайдлайны

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

Было приятно видеть вас! Вопросы?

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

www.mail.ru facebook.com/pages/MailRu

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

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