Your SlideShare is downloading. ×
Отличия в дизайне приложений под iOS и Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

5,241
views

Published on


0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,241
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
8
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

Transcript

  • 1. Алексей Копылов Отличия UX iOS и Android Наблюдения проектировщика пользовательских интерфейсовUIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru
  • 2. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruАвтор доклада: Алексей Копылов  Около 10 лет опыта проектирует пользовательских интерфейсов  В 2003 основал компанию «UIDesign Group» по проектированию интерфейсов  Ведет общественную деятельность  Редактирует книги (Алан Купер, Гарретт) 2
  • 3. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruМодель взаимодействияUX специалист отвечает за пользовательскийинтерфейс продукта и инфраструктуры UX специалист Графический Разработчик дизайнар 3
  • 4. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruВкладки сверху VS вкладки снизуТолько ли этим отличаются 2 платформы? 4
  • 5. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruДух iOSЗапрещено все, что не разрешеноРазработчикам страшно! 5
  • 6. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruДух AndroidРазрешено все, что не запрещеноОднако гайки закручиваются 6
  • 7. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruСтандарты и принципыСтандарты iOS более детальны, больше вниманияуделяется духу программ. Однако последниеобновления стандартов Android двигаются в томже направлении.Для Android имеются разные версии стандартов.Новые версии проще! 7
  • 8. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана 8
  • 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. Отличия 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. Отличия 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. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экрана AndroidФизические размеры сохраняются! 12
  • 13. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПлотность экранаТестировать, тестировать и тестировать нареальном устройстве 13
  • 14. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыПрисутствие аппаратных кнопок освобождаетместо на экране 14
  • 15. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыСледование программным парадигмам ипаттернам снимает головную боль SplitView берет головняк на себя! 15
  • 16. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыА можно все нарисовать самим 16
  • 17. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыНо и в этом случае надо все равносоответствовать стандартам UI 17
  • 18. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПаттерны и парадигмыВ Android 3.0 (Honeycomb) появится много новыхпарадигм и паттернов взаимодействия 18
  • 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. Отличия 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. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSИмеется масса фотореалистичных шаблонов дляVisio, Fireworks, InDesign, Omnigraffle… 21
  • 22. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для iOSПрототипирование прямо на устройстве 22
  • 23. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruiOS эмуляторЭмулятор только под iOS 23
  • 24. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruПрототипирование для AndroidКоличество шаблонов не меньше, чем для iOS 24
  • 25. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruAndroid эмуляторПод все платформы! – Windows, Mac OS X, Linux 25
  • 26. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruDraw 9-patchРедактор для растягиваемых картинок(форма NinePatch) 26
  • 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. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruИконки запуска программы в iOSНадо учитывать работу спецэффектов 28
  • 29. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruИконки запуска программы в AndroidТребования такие же, как и для других иконок +иконка для магазина приложений 29
  • 30. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ruСтоимость проектирования, дизайна иразработкиУчтите возросшую стоимость поддержки разныхразрешений и разных плотностей экрана,горизонтальную и вертикальную ориентации. 30
  • 31. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru Вопросы и предложения? twitter, friendfeed, facebook: copylove email: akopylov@uidesign.ruUIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru 31