Отличия в дизайне приложений под iOS и Android

6,990 views
6,676 views

Published on

Отличия в дизайне приложений под iOS и Android

  1. 1. Алексей Копылов Отличия UX iOS и Android Наблюдения проектировщика пользовательских интерфейсовUIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru
  2. 2. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruАвтор доклада: Алексей Копылов  Около 10 лет опыта проектирует пользовательских интерфейсов  В 2003 основал компанию «UIDesign Group» по проектированию интерфейсов  Ведет общественную деятельность  Редактирует книги (Алан Купер, Гарретт) 2
  3. 3. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruМодель взаимодействияUX специалист отвечает за пользовательскийинтерфейс продукта и инфраструктуры UX специалист Графический Разработчик дизайнар 3
  4. 4. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruВкладки сверху VS вкладки снизуТолько ли этим отличаются 2 платформы? 4
  5. 5. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruДух iOSЗапрещено все, что не разрешеноРазработчикам страшно! 5
  6. 6. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruДух AndroidРазрешено все, что не запрещеноОднако гайки закручиваются 6
  7. 7. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruСтандарты и принципыСтандарты iOS более детальны, больше вниманияуделяется духу программ. Однако последниеобновления стандартов Android двигаются в томже направлении.Для Android имеются разные версии стандартов.Новые версии проще! 7
  8. 8. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана 8
  9. 9. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана iOSiPhone 3G 320x480 3,5” 163 ppiiPhone 4 640x960 3,5” 326 ppiiPad/iPad 2 1024x768 9,7” 132 ppiКак правило, делается 2 набора иконок – для iPhone/iPad иiPhone 4. Исключение – иконка запуска приложения(далее). 9
  10. 10. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана AndroidGoogle Nexus One 480x800 3,7” 254 ppiHTC Magic 320x480 3,5” 181 ppiGalaxy Tab 1024x600 7” 171 ppiКак правило, делается 2 набора иконок – для iPhone/iPad иiPhone 4. Исключение – иконка запуска приложения(далее). 10
  11. 11. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана AndroidВарианты плотностей экранов LDPI (120) MDPI (160) HDPI (240) XHDPI (320) Small screen QVGA (240x320) Normal WQVGA400 (240x400) HVGA WVGA800 (480x800) screen WQVGA432 (240x432) (320x480) WVGA854 (480x854) Large screen WVGA800 (480x800) WVGA854 (480x854) Extra Large screen 11
  12. 12. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана AndroidФизические размеры сохраняются! 12
  13. 13. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экранаТестировать, тестировать и тестировать нареальном устройстве 13
  14. 14. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыПрисутствие аппаратных кнопок освобождаетместо на экране 14
  15. 15. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыСледование программным парадигмам ипаттернам снимает головную боль SplitView берет головняк на себя! 15
  16. 16. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыА можно все нарисовать самим 16
  17. 17. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыНо и в этом случае надо все равносоответствовать стандартам UI 17
  18. 18. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыВ Android 3.0 (Honeycomb) появится много новыхпарадигм и паттернов взаимодействия 18
  19. 19. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSНужно сделать выбор между фотореализмом иусловностью Carrier 4-3-2 12:34 PM Удалить Готово Контакты все abcdef@abcdef.ru А Василий Островский * Прикольный чел, всем хорош Д * И abcdef@abcdef.ru * Василий Островский Удалить П Прикольный чел, всем хорош * У * abcdef@abcdef.ru Ч Василий Островский * Я Прикольный чел, всем хорош A * abcdef@abcdef.ru E Василий Островский * I Прикольный чел, всем хорош * M abcdef@abcdef.ru * Василий Островский R * Прикольный чел, всем хорош V * abcdef@abcdef.ru Z Василий Островский * # Прикольный чел, всем хорош Прикольный чел, всем хорош ... Поиск Журнал Контакты VIP Еще 19
  20. 20. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSПреимущества реализма Button Name Meaning Edit Enter an editing or content-manipulation mode Cancel Exit the editing or content-manipulation mode without saving changes Save changes and, if appropriate, exit the editing or content-manipulation Save mode Done Exit the current mode and save changes, if any Undo Undo the most recent action Redo Redo the most recent undone action Нюансы с цветом кнопок 20
  21. 21. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSИмеется масса фотореалистичных шаблонов дляVisio, Fireworks, InDesign, Omnigraffle… 21
  22. 22. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSПрототипирование прямо на устройстве 22
  23. 23. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruiOS эмуляторЭмулятор только под iOS 23
  24. 24. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для AndroidКоличество шаблонов не меньше, чем для iOS 24
  25. 25. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruAndroid эмуляторПод все платформы! – Windows, Mac OS X, Linux 25
  26. 26. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruDraw 9-patchРедактор для растягиваемых картинок(форма NinePatch) 26
  27. 27. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruИконки запуска программы в iOSПод все платформы! – Windows, Mac OS X, LinuxApp Store Icon Spotlight Search Results and Document Icon1. 512x512 Settings Icon 8. 320x320 5. 58x58 (iPad)Application Icon (iPhone 4) 9. 64x642. 114x114 6. 50x50 (iPad) (iPhone 4) (Spotlight results for iPad) 10. 44x583. 57x57 7. 29x29 (iPhone 4) (older iPhones) (Settings for iPad and older 11. 22x294. 72x72 iPhones) (older iPhones) (iPad) 27
  28. 28. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruИконки запуска программы в iOSНадо учитывать работу спецэффектов 28
  29. 29. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruИконки запуска программы в AndroidТребования такие же, как и для других иконок +иконка для магазина приложений 29
  30. 30. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruСтоимость проектирования, дизайна иразработкиУчтите возросшую стоимость поддержки разныхразрешений и разных плотностей экрана,горизонтальную и вертикальную ориентации. 30
  31. 31. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru Вопросы и предложения? twitter, friendfeed, facebook: copylove email: akopylov@uidesign.ruUIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru 31

×