Отличия в дизайне приложений под iOS и Android
13 likes6,608 views
Доклад Алексея Копылова обсуждает отличия в пользовательском опыте (UX) между платформами iOS и Android, включая аспекты проектирования интерфейсов и юзабилити. Основные темы включают различные подходы к стандартам, плотности экранов, паттернам взаимодействия и прототипированию для каждой из платформ. Также рассматриваются технические нюансы, связанные с поддержкой разных разрешений и форматов устройств.
Отличия в дизайне приложений под iOS и Android
- 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 Плотность экрана iOS iPhone 3G 320x480 3,5” 163 ppi iPhone 4 640x960 3,5” 326 ppi iPad/iPad 2 1024x768 9,7” 132 ppi Как правило, делается 2 набора иконок – для iPhone/iPad и iPhone 4. Исключение – иконка запуска приложения (далее). 9
- 10. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru Плотность экрана Android Google Nexus One 480x800 3,7” 254 ppi HTC Magic 320x480 3,5” 181 ppi Galaxy 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.ru iOS эмулятор Эмулятор только под 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.ru Android эмулятор Под все платформы! – Windows, Mac OS X, Linux 25
- 26. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru Draw 9-patch Редактор для растягиваемых картинок (форма NinePatch) 26
- 27. Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru Иконки запуска программы в iOS Под все платформы! – Windows, Mac OS X, Linux App Store Icon Spotlight Search Results and Document Icon 1. 512x512 Settings Icon 8. 320x320 5. 58x58 (iPad) Application Icon (iPhone 4) 9. 64x64 2. 114x114 6. 50x50 (iPad) (iPhone 4) (Spotlight results for iPad) 10. 44x58 3. 57x57 7. 29x29 (iPhone 4) (older iPhones) (Settings for iPad and older 11. 22x29 4. 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.ru UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru 31