Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,781 views

Published on

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

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

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

  1. 1. Юрий Ветров<br />Кросс-платформенноепроектирование для мобильных<br />Android, iPhone, Symbian, Windows Phone<br />
  2. 2. Для кого этот мастер-класс?<br />Начинающим проектировщикам и дизайнерам – разобраться в том, как проектировать мобильные приложения.<br />Опытным – улучшить свои знания и понимание особенностей проектирования для мобильных.<br />Менеджерам и заказчикам – научиться контролировать процесс проектирования и дизайна для мобильных.<br />2<br />
  3. 3. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20 минут<br />10<br />30<br />30<br />25<br />25<br />25<br />15<br />
  4. 4. Брифингплан и формат мастер-класса<br />4<br />20<br />минут<br />
  5. 5. Задача<br />Спроектировать мобильное приложение для конференции User Experience Russia<br />5<br />
  6. 6. 6<br />Версии для 4 платформ:<br />Android, iPhone, Symbian, Windows Phone 7<br />1<br />
  7. 7. 7<br />Соответствие официальным гайдлайнам и следование общепринятым паттернам<br />2<br />
  8. 8. 8<br />Спроектировать 3 ключевых экрана – стартовый, расписание, информация о конкретном докладе Остальное – на ваше усмотрение.<br />3<br />
  9. 9. 9<br />Используйте шаблоны для проектирования – они лежат у вас на стульях<br />4<br />
  10. 10. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10 минут<br />3030<br />25<br />25<br />25<br />15<br />
  11. 11. Мини-лекцияистория платформ, тренды в России и мире<br />11<br />10<br />минут<br />
  12. 12. 12<br />Какие платформы выбрать для своего приложения?<br />1<br />
  13. 13. 13<br />В каком порядке выпускать приложения?<br />2<br />
  14. 14. 14<br />Использовать ли кросс-платформенные фреймворки?<br />3<br />
  15. 15. 15<br />Что делать сначала – мобильный сайт или приложение?<br />4<br />vs<br />
  16. 16. 16<br />Как насчет мобильного сайта в оболочке приложения?<br />5<br />
  17. 17. ОС смартфонов, продажи в 2011<br />17<br />-> ~30%<br />-> ~55%<br />TomiAhonen<br />Связной<br />
  18. 18. ОС телефонов, на руках в 2011<br />18<br />?<br />по слухам<br />
  19. 19. Готовы ли пользователиплатить за приложения?<br />19<br />?<br />
  20. 20. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10<br />30 минут30<br />25<br />25<br />25<br />15<br />
  21. 21. iPhoneкомпоновка и типы экранов, паттерны, навигация<br />21<br />15<br />минут<br />
  22. 22. Компоновка экрана<br />22<br />область уведомлений<br />действия с текущим экраном<br />информация о текущем объекте<br />элемент списка действий<br />название группы элементов<br />навигация по экранам<br />активная вкладка<br />
  23. 23. Типы экранов: Стартовый<br />23<br />
  24. 24. Типы экранов: Список<br />24<br />
  25. 25. Типы экранов: Объект<br />25<br />
  26. 26. Типы экранов: Медиа<br />26<br />
  27. 27. Типы экранов: Карта<br />27<br />
  28. 28. Типы экранов: Форма<br />28<br />
  29. 29. Типы экранов: Настройки<br />29<br />
  30. 30. Типы экранов: Справочные<br />30<br />
  31. 31. Типы экранов: Камера<br />31<br />
  32. 32. Типы экранов: Загрузка приложения<br />32<br />
  33. 33. Типы экранов: Блокировка<br />33<br />
  34. 34. Типы экранов: Домашний<br />34<br />
  35. 35. Навигация<br />35<br />
  36. 36. Общая навигация между разделами<br />36<br />стартовые<br />экраны<br />вкладки<br />
  37. 37. Навигация внутри экрана<br />37<br />элементы<br />списков<br />поиск<br />контент<br />панели<br />инструментов<br />
  38. 38. Действия с объектами<br />38<br />кнопки внутри экрана<br />кнопки<br />в панелях<br />контекстные<br />меню<br />кнопки<br />в панелях<br />
  39. 39. Навигация между близкими по контексту экранами<br />39<br />кнопки<br />в панелях<br />
  40. 40. Событийная навигация<br />40<br />алерты<br />уведомления<br />
  41. 41. Навигация между приложениями<br />41<br />алерты<br />уведомления<br />многозадачность<br />
  42. 42. Гайдлайны<br />Human Interface Guidelines – http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html<br />Human Interface Guidelines for Web Applications – http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html<br />Safari Web Content Guide – http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html<br />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<br />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<br />42<br />
  43. 43. Проектируем для iPhoneпрактическое задание<br />43<br />15<br />минут<br />
  44. 44. до 11:30<br />
  45. 45. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10<br />3030<br />25 минут<br />25<br />25<br />15<br />
  46. 46. Androidкомпоновка и типы экранов, паттерны, навигация<br />46<br />15<br />минут<br />
  47. 47. Компоновка экрана<br />47<br />область уведомлений<br />активная вкладка<br />навигация по экранам<br />информация о текущем объекте<br />элемент списка<br />название группы элементов<br />действия с текущим экраном<br />
  48. 48. Типы экранов: Стартовый<br />48<br />
  49. 49. Типы экранов: Список<br />49<br />
  50. 50. Типы экранов: Объект<br />50<br />
  51. 51. Типы экранов: Медиа<br />51<br />
  52. 52. Типы экранов: Карта<br />52<br />
  53. 53. Типы экранов: Форма<br />53<br />
  54. 54. Типы экранов: Настройки<br />54<br />
  55. 55. Типы экранов: Справочные<br />55<br />
  56. 56. Типы экранов: Камера<br />56<br />
  57. 57. Типы экранов: Загрузка приложения<br />57<br />
  58. 58. Типы экранов: Блокировка<br />58<br />
  59. 59. Типы экранов: Домашний<br />59<br />
  60. 60. Навигация<br />60<br />
  61. 61. Общая навигация между разделами<br />61<br />стартовые<br />экраны<br />вкладки<br />меню<br />
  62. 62. Навигация внутри экрана<br />62<br />элементы<br />списков<br />вкладки<br />2го уровня<br />поиск<br />панели<br />инструментов<br />контент<br />контекстное<br />меню<br />
  63. 63. Действия с объектами<br />63<br />контекстное<br />меню<br />контекстное<br />меню<br />диалоговые<br />окна<br />кнопки<br />в панелях<br />
  64. 64. Между близкими по контексту экранами<br />64<br />кнопки<br />в панелях<br />
  65. 65. Событийная навигация<br />65<br />системные<br />уведомления<br />
  66. 66. Навигация между приложениями<br />66<br />системные<br />уведомления<br />многозадачность<br />кнопка “Back”<br />
  67. 67. Гайдлайны<br />User Interface Guidelines – http://developer.android.com/guide/practices/ui_guidelines/index.html<br />Icon Design Guidelines – http://developer.android.com/guide/practices/ui_guidelines/icon_design.html<br />67<br />
  68. 68. Проектируем для Androidпрактическое задание<br />68<br />10<br />минут<br />
  69. 69. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10<br />3030<br />25<br />25 минут<br />25<br />15<br />
  70. 70. Windows Phone 7компоновка и типы экранов, паттерны, навигация<br />70<br />15<br />минут<br />
  71. 71. Компоновка экрана<br />71<br />область уведомлений<br />название приложения или (родительского) экрана<br />активная вкладка<br />навигация по экранам<br />информация о текущем объекте<br />элемент списка<br />системный цвет для выделения объектов<br />действия с текущим экраном<br />
  72. 72. Типы экранов: Стартовый<br />72<br />
  73. 73. Типы экранов: Список<br />73<br />
  74. 74. Типы экранов: Объект<br />74<br />
  75. 75. Типы экранов: Медиа<br />75<br />
  76. 76. Типы экранов: Карта<br />76<br />
  77. 77. Типы экранов: Форма<br />77<br />
  78. 78. Типы экранов: Настройки<br />78<br />
  79. 79. Типы экранов: Справочные<br />79<br />
  80. 80. Типы экранов: Камера<br />80<br />
  81. 81. Типы экранов: Загрузка приложения<br />81<br />
  82. 82. Типы экранов: Блокировка<br />82<br />
  83. 83. Типы экранов: Домашний<br />83<br />
  84. 84. Навигация<br />84<br />
  85. 85. Общая навигация между разделами<br />85<br />вкладки<br />хабы и<br />панорамы<br />
  86. 86. Навигация внутри экрана<br />86<br />кнопки внутри экрана<br />поиск<br />контент<br />элементы<br />списков<br />панели<br />инструментов<br />контекстное меню<br />
  87. 87. Действия с объектами<br />87<br />диалоговые окна<br />контекстное меню<br />кнопки<br />внутри<br />экрана<br />кнопки<br />в панелях<br />
  88. 88. Навигация между близкими по контексту экранами<br />88<br />кнопки<br />в панелях<br />
  89. 89. Событийная навигация<br />89<br />алерты<br />подтверждения<br />
  90. 90. Навигация между приложениями<br />90<br />алерты<br />многозадачность<br />
  91. 91. Гайдлайны<br />User Experience Design Guidelines for Windows Phone – http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx<br />UI Design and Interaction Guide – http://go.microsoft.com/?linkid=9713252 (PDF)<br />Windows Phone 7 Interoperability Bridges – http://windowsphone.interoperabilitybridges.com/<br />Windows Phone 7 Series Icon Pack – http://windowsteamblog.com/blogs/wpdev/archive/2010/03/27/windows-phone-7-series-icon-pack.aspx<br />91<br />
  92. 92. Проектируем для WP7практическое задание<br />92<br />10<br />минут<br />
  93. 93. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10<br />3030<br />25<br />25<br />25 минут<br />15<br />
  94. 94. Symbianкомпоновка и типы экранов, паттерны, навигация<br />94<br />15<br />минут<br />
  95. 95. Компоновка экрана<br />95<br />область уведомлений<br />активная вкладка<br />навигация по экранам<br />информация о текущем объекте<br />элемент списка<br />действия с текущим экраном<br />
  96. 96. Типы экранов: Стартовый<br />96<br />
  97. 97. Типы экранов: Список<br />97<br />
  98. 98. Типы экранов: Объект<br />98<br />
  99. 99. Типы экранов: Медиа<br />99<br />
  100. 100. Типы экранов: Карта<br />100<br />
  101. 101. Типы экранов: Форма<br />101<br />
  102. 102. Типы экранов: Настройки<br />102<br />
  103. 103. Типы экранов: Справочные<br />103<br />
  104. 104. Типы экранов: Камера<br />104<br />
  105. 105. Типы экранов: Загрузка приложения<br />105<br />
  106. 106. Типы экранов: Блокировка<br />106<br />
  107. 107. Типы экранов: Домашний<br />107<br />
  108. 108. Навигация<br />108<br />
  109. 109. Общая навигация между разделами<br />109<br />стартовые<br />экраны<br />вкладки<br />меню<br />панель кнопок<br />
  110. 110. Навигация внутри экрана<br />110<br />фильтры<br />контент<br />элементы списков<br />панель кнопок<br />поиск<br />
  111. 111. Действия с объектами<br />111<br />контекстное<br />меню<br />панель кнопок<br />диалоги<br />
  112. 112. Навигация между близкими по контексту экранами<br />112<br />фильтры<br />кнопки<br />в контенте<br />
  113. 113. Событийная навигация<br />113<br />алерты<br />уведомления<br />
  114. 114. Навигация между приложениями<br />114<br />алерты<br />уведомления<br />многозадачность<br />
  115. 115. Гайдлайны<br />Updated Symbian Design Guidelines – http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/<br />UI Style Guide – http://www.forum.nokia.com/info/sw.nokia.com/id/5c419b14-75ff-4791-b1a8-db1e0d72e36e/Symbian_3_UI_Style_Guide.html<br />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<br />Mobile Web Browsing – http://www.forum.nokia.com/Develop/Web/<br />Icons and metaphors – http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-02FA611E-CA7B-4C05-9697-78D88695C12C.html<br />115<br />
  116. 116. Проектируем для Symbianпрактическое задание<br />116<br />10<br />минут<br />
  117. 117. Брифинг<br />Мини-лекция<br />iPhoneкофе-брейк<br />Android<br />Windows Phone 7<br />Symbian<br />Проверка совместимости<br />20<br />10<br />3030<br />25<br />25<br />25<br />15<br />
  118. 118. Проверка совместимостисопоставление получившихся интерфейсов<br />118<br />
  119. 119. Спасибо!<br />Юрий Ветров<br />www.jvetrau.com<br />twitter.com/jvetrau<br />www.mail.ru<br />facebook.com/pages/MailRu<br />Всеиллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.comи я уберу их из слайдов.<br />

×