Your SlideShare is downloading. ×
  • Like
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian (Юрий Ветров)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 7,923 views
Published

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Отличная презентация, жалко только, что в ней не раскрыты ответы на вопросы, которые заданы. Будем ждать видео.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,923
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
88
Comments
1
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • © http://www.nato.int/kfor/media/photos/2010/photo_week/index.html
  • © Horace Dideuhttp://www.asymco.com/2011/09/04/the-proliferation-of-mobile-platforms-continues/
  • ©http://www.uxbooth.com/blog/mobile-form-design-strategies/
  • © http://communities-dominate.blogs.com/brands/2011/08/smartphone-market-shares-at-q2-and-report-card-for-half-year-performance.html + http://www.svyaznoy.ru/about/press-centre/index.php?ID=1309305
  • © http://churchm.ag/an-online-mockup-tool-for-developing-iphone-apps/
  • © http://thewopabillykid.blogspot.com/2011/03/android-application-brief-and-sketches.html

Transcript

  • 1. Юрий Ветров
    Кросс-платформенноепроектирование для мобильных
    Android, iPhone, Symbian, Windows Phone
  • 2. Для кого этот мастер-класс?
    Начинающим проектировщикам и дизайнерам – разобраться в том, как проектировать мобильные приложения.
    Опытным – улучшить свои знания и понимание особенностей проектирования для мобильных.
    Менеджерам и заказчикам – научиться контролировать процесс проектирования и дизайна для мобильных.
    2
  • 3. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20 минут
    10
    30
    30
    25
    25
    25
    15
  • 4. Брифингплан и формат мастер-класса
    4
    20
    минут
  • 5. Задача
    Спроектировать мобильное приложение для конференции User Experience Russia
    5
  • 6. 6
    Версии для 4 платформ:
    Android, iPhone, Symbian, Windows Phone 7
    1
  • 7. 7
    Соответствие официальным гайдлайнам и следование общепринятым паттернам
    2
  • 8. 8
    Спроектировать 3 ключевых экрана – стартовый, расписание, информация о конкретном докладе Остальное – на ваше усмотрение.
    3
  • 9. 9
    Используйте шаблоны для проектирования – они лежат у вас на стульях
    4
  • 10. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10 минут
    3030
    25
    25
    25
    15
  • 11. Мини-лекцияистория платформ, тренды в России и мире
    11
    10
    минут
  • 12. 12
    Какие платформы выбрать для своего приложения?
    1
  • 13. 13
    В каком порядке выпускать приложения?
    2
  • 14. 14
    Использовать ли кросс-платформенные фреймворки?
    3
  • 15. 15
    Что делать сначала – мобильный сайт или приложение?
    4
    vs
  • 16. 16
    Как насчет мобильного сайта в оболочке приложения?
    5
  • 17. ОС смартфонов, продажи в 2011
    17
    -> ~30%
    -> ~55%
    TomiAhonen
    Связной
  • 18. ОС телефонов, на руках в 2011
    18
    ?
    по слухам
  • 19. Готовы ли пользователиплатить за приложения?
    19
    ?
  • 20. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10
    30 минут30
    25
    25
    25
    15
  • 21. iPhoneкомпоновка и типы экранов, паттерны, навигация
    21
    15
    минут
  • 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.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
  • 43. Проектируем для iPhoneпрактическое задание
    43
    15
    минут
  • 44. до 11:30
  • 45. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10
    3030
    25 минут
    25
    25
    15
  • 46. Androidкомпоновка и типы экранов, паттерны, навигация
    46
    15
    минут
  • 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.html
    Icon Design Guidelines – http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
    67
  • 68. Проектируем для Androidпрактическое задание
    68
    10
    минут
  • 69. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10
    3030
    25
    25 минут
    25
    15
  • 70. Windows Phone 7компоновка и типы экранов, паттерны, навигация
    70
    15
    минут
  • 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).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
  • 92. Проектируем для WP7практическое задание
    92
    10
    минут
  • 93. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10
    3030
    25
    25
    25 минут
    15
  • 94. Symbianкомпоновка и типы экранов, паттерны, навигация
    94
    15
    минут
  • 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.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
  • 116. Проектируем для Symbianпрактическое задание
    116
    10
    минут
  • 117. Брифинг
    Мини-лекция
    iPhoneкофе-брейк
    Android
    Windows Phone 7
    Symbian
    Проверка совместимости
    20
    10
    3030
    25
    25
    25
    15
  • 118. Проверка совместимостисопоставление получившихся интерфейсов
    118
  • 119. Спасибо!
    Юрий Ветров
    www.jvetrau.com
    twitter.com/jvetrau
    www.mail.ru
    facebook.com/pages/MailRu
    Всеиллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.comи я уберу их из слайдов.