Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

9.016 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Inicia sesión para ver los comentarios

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 />

×