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

Алексей Копылов

Отличия UX iOS и Android
Наблюдения проектировщика
пользовательских интерфейсов

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru

Автор доклада: Алексей Копылов

 Около 10 лет опыта проектирует
пользовательских интерфейсов
 В 2003 основал компанию
«UIDesign Group» по
проектированию интерфейсов
 Ведет общественную деятельность
 Редактирует книги (Алан Купер, Гарретт)

2


Модель взаимодействия
UX специалист отвечает за пользовательский
интерфейс продукта и инфраструктуры

UX специалист

Графический
Разработчик
дизайнар

3


Вкладки сверху VS вкладки снизу
Только ли этим отличаются 2 платформы?

4


Дух iOS

Запрещено все, что не разрешено
Разработчикам страшно!

5


Дух Android

Разрешено все, что не запрещено
Однако гайки закручиваются

6


Стандарты и принципы
Стандарты iOS более детальны, больше внимания
уделяется духу программ. Однако последние
обновления стандартов Android двигаются в том
же направлении.

Для Android имеются разные версии стандартов.
Новые версии проще!

7


Плотность экрана

8


Плотность экрана 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


Плотность экрана 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


Варианты плотностей экранов
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


Плотность экрана
Тестировать, тестировать и тестировать на
реальном устройстве

13


Паттерны и парадигмы
Присутствие аппаратных кнопок освобождает
место на экране

14


Следование программным парадигмам и
паттернам снимает головную боль

SplitView берет головняк на себя!
15


А можно все нарисовать самим

16


Но и в этом случае надо все равно
соответствовать стандартам UI

17


В Android 3.0 (Honeycomb) появится много новых
парадигм и паттернов взаимодействия

18


Прототипирование для 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


Преимущества реализма

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


Имеется масса фотореалистичных шаблонов для
Visio, Fireworks, InDesign, Omnigraffle…

21


Прототипирование прямо на устройстве

22


iOS эмулятор
Эмулятор только под iOS

23


Прототипирование для Android
Количество шаблонов не меньше, чем для iOS

24


Android эмулятор
Под все платформы! – Windows, Mac OS X, Linux

25


Draw 9-patch
Редактор для растягиваемых картинок
(форма NinePatch)

26


Иконки запуска программы в 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


Иконки запуска программы в iOS
Надо учитывать работу спецэффектов

28


Иконки запуска программы в Android

Требования такие же, как и для других иконок +
иконка для магазина приложений

29


Стоимость проектирования, дизайна и
разработки

Учтите возросшую стоимость поддержки разных
разрешений и разных плотностей экрана,
горизонтальную и вертикальную ориентации.

30


Вопросы и предложения?
twitter, friendfeed, facebook: copylove
email: akopylov@uidesign.ru

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru
31

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

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (12)

More from UIDesign Group

More from UIDesign Group (20)

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