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

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

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

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

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

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

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

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

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

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

Брифинг
Android
Windows Phone 7
Symbian
20
10 минут
3030
25
25
25
15

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

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

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

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

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

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

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

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

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

Брифинг
Android
Windows Phone 7
Symbian
20
10
30 минут30
25
25
25
15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация
35

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

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

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

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

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

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

Гайдлайны
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

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

до 11:30

Брифинг
Android
Windows Phone 7
Symbian
20
10
3030
25 минут
25
25
15

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

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

48

49

50

51

52

53

54

55

56

57

58

59

Навигация
60

61
стартовые
экраны
вкладки
меню

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

63
меню
меню
диалоговые
окна
кнопки
в панелях

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

65
системные

66
системные
кнопка “Back”

Гайдлайны
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

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

Брифинг
Android
Windows Phone 7
Symbian
20
10
3030
25
25 минут
25
15

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

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

72

73

74

75

76

77

78

79

80

81

82

83

Навигация
84

85
вкладки
хабы и
панорамы

86
кнопки внутри экрана
поиск
контент
элементы
списков
панели
контекстное меню

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

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

89
алерты
подтверждения

90
алерты

Гайдлайны
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

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

Брифинг
Android
Windows Phone 7
Symbian
20
10
3030
25
25
25 минут
15

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

95

96

97

98

99

100

101

102

103

104

105

106

107

Навигация
108

109
стартовые
экраны
вкладки
меню
панель кнопок

110
фильтры
контент
элементы списков
поиск

111
меню
диалоги

112
фильтры
кнопки
в контенте

113
алерты

114
алерты

Гайдлайны
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

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

Брифинг
Android
Windows Phone 7
Symbian
20
10
3030
25
25
25
15

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

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

http://www.jvetrau.com	1298
http://feeds.feedburner.com	166
http://a0.twimg.com	19
http://paper.li	10
http://mobdevelopers.ru	8
http://work-n-stuff.posterous.com	6
http://gridread.com	2
http://localhost	2
http://us-w1.rockmelt.com	1
http://tweetedtimes.com	1
http://posterous.com	1
http://hghltd.yandex.net	1

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

by Yury Vetrov on Oct 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 1,515

Statistics

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