codefest 2011. Копылов А. — Чужой против хищника: ios и android с...
DESCRIPTION
TRANSCRIPT
![Page 1: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/1.jpg)
Алексей Копылов
Отличия UX iOS и Android
Наблюдения проектировщика
пользовательских интерфейсов
UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru
![Page 2: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/2.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
2
Автор доклада: Алексей Копылов
Около 10 лет опыта проектирует
пользовательских интерфейсов
В 2003 основал компанию
«UIDesign Group» по
проектированию интерфейсов
Ведет общественную деятельность
Редактирует книги (Алан Купер, Гарретт)
![Page 3: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/3.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
3
Модель взаимодействия
UX специалист отвечает за пользовательский
интерфейс продукта и инфраструктуры
UX специалист
Графический дизайнар
Разработчик
![Page 4: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/4.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
4
Вкладки сверху VS вкладки снизу
Только ли этим отличаются 2 платформы?
![Page 5: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/5.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
5
Дух iOS
Запрещено все, что не разрешено
Разработчикам страшно!
![Page 6: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/6.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
6
Дух Android
Разрешено все, что не запрещено
Однако гайки закручиваются
![Page 7: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/7.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
7
Стандарты и принципы
Стандарты iOS более детальны, больше внимания
уделяется духу программ. Однако последние
обновления стандартов Android двигаются в том
же направлении.
Для Android имеются разные версии стандартов.
Новые версии проще!
![Page 8: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/8.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
8
Плотность экрана
![Page 9: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/9.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
9
Плотность экрана 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. Исключение – иконка запуска приложения
(далее).
![Page 10: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/10.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
10
Плотность экрана 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. Исключение – иконка запуска приложения
(далее).
![Page 11: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/11.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
11
Плотность экрана Android
Варианты плотностей экранов
LDPI (120) MDPI (160) HDPI (240) XHDPI (320)
Small screen QVGA (240x320)
Normal screen
WQVGA400 (240x400) WQVGA432 (240x432)
HVGA (320x480)
WVGA800 (480x800) WVGA854 (480x854)
Large screen WVGA800 (480x800) WVGA854 (480x854)
Extra Large screen
![Page 12: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/12.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
12
Плотность экрана Android
Физические размеры сохраняются!
![Page 13: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/13.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
13
Плотность экрана
Тестировать, тестировать и тестировать на
реальном устройстве
![Page 14: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/14.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
14
Паттерны и парадигмы
Присутствие аппаратных кнопок освобождает
место на экране
![Page 15: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/15.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
15
Паттерны и парадигмы
Следование программным парадигмам и
паттернам снимает головную боль
SplitView берет головняк на себя!
![Page 16: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/16.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
16
Паттерны и парадигмы
А можно все нарисовать самим
![Page 17: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/17.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
17
Паттерны и парадигмы
Но и в этом случае надо все равно
соответствовать стандартам UI
![Page 18: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/18.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
18
Паттерны и парадигмы
В Android 3.0 (Honeycomb) появится много новых
парадигм и паттернов взаимодействия
![Page 19: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/19.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
19
Прототипирование для iOS
Нужно сделать выбор между фотореализмом и
условностью
Carrier 12:34 PM
Контакты
Прикольный чел, всем хорош
Поиск Журнал Контакты
...ЕщеVIP
Удалить все
Прикольный чел, всем хорош
Василий Островский
Прикольный чел, всем хорош
Василий Островский
Прикольный чел, всем хорош
Василий Островский
Прикольный чел, всем хорош
Василий Островский
Прикольный чел, всем хорош
Василий Островский
Прикольный чел, всем хорош
Василий Островский
Готово
А*Д*И*П*У*Ч*ЯA*E*I*M*R*V*Z*#
Удалить
4-3-2
![Page 20: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/20.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
20
Прототипирование для iOS
Преимущества реализма
Button Name Meaning
Edit Enter an editing or content-manipulation mode
Cancel Exit the editing or content-manipulation mode without saving changes
Save Save changes and, if appropriate, exit the editing or content-manipulation mode
Done Exit the current mode and save changes, if any
Undo Undo the most recent action
Redo Redo the most recent undone action
Нюансы с цветом кнопок
![Page 21: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/21.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
21
Прототипирование для iOS
Имеется масса фотореалистичных шаблонов для
Visio, Fireworks, InDesign, Omnigraffle…
![Page 22: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/22.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
22
Прототипирование для iOS
Прототипирование прямо на устройстве
![Page 23: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/23.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
23
iOS эмулятор
Эмулятор только под iOS
![Page 24: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/24.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
24
Прототипирование для Android
Количество шаблонов не меньше, чем для iOS
![Page 25: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/25.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
25
Android эмулятор
Под все платформы! – Windows, Mac OS X, Linux
![Page 26: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/26.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
26
Draw 9-patch
Редактор для растягиваемых картинок
(форма NinePatch)
![Page 27: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/27.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
27
Иконки запуска программы в iOS
Под все платформы! – Windows, Mac OS X, Linux
App Store Icon
1. 512x512
Application Icon
2. 114x114 (iPhone 4)
3. 57x57 (older iPhones)
4. 72x72 (iPad)
Spotlight Search Results and Settings Icon
5. 58x58 (iPhone 4)
6. 50x50 (Spotlight results for iPad)
7. 29x29 (Settings for iPad and older iPhones)
Document Icon
8. 320x320 (iPad)
9. 64x64 (iPad)
10. 44x58 (iPhone 4)
11. 22x29 (older iPhones)
![Page 28: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/28.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
28
Иконки запуска программы в iOS
Надо учитывать работу спецэффектов
![Page 29: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/29.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
29
Иконки запуска программы в Android
Требования такие же, как и для других иконок +
иконка для магазина приложений
![Page 30: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/30.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
30
Стоимость проектирования, дизайна и
разработки
Учтите возросшую стоимость поддержки разных
разрешений и разных плотностей экрана,
горизонтальную и вертикальную ориентации.
![Page 31: CodeFest 2011. Копылов А. — Чужой против хищника: iOS и Android с точки зрения проектировщика интерфейсов](https://reader033.vdocuments.site/reader033/viewer/2022051609/5478eab7b4af9fb9158b46fd/html5/thumbnails/31.jpg)
Отличия UX iOS и Android | RADUG 03.03.11 www.uidesign.ru
31
Вопросы и предложения?
twitter, friendfeed, facebook: copylove
email: [email protected]
UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru