Владимир Макеевв «Проектирование интерфейса Android...
50
1
description
http://mmeetup.ru
Transcript of Владимир Макеевв «Проектирование интерфейса Android...
1
2
О чем пойдет речь
• Android UI — как обстоит дело
• Паттерны UI
• Портирование iOS → Android
• UI планшетов
• Инструменты
Как же обстоит дело?
4
iOS
• iOS Human Interface Guidelines• Назначение компонентов• Использование• Размеры
• Правила игры!
5
Проблемы Android
• Google не регламентирует UI
• Нет модерации в Market
• Свобода творчества
• Страдает качество
6
Вместо стандартов
• Сообщество разработчиков
• Евангелисты
• Паттерны
• Google IO
• Правильные приложения
7
Размеры экранов
8
На самом деле
17,7%
70,8%
9
Алгоритм
• Дизайн для hdpi
• Проверка mdpi(mdpi меньше по высоте)
• Версия для xhdpi(если нужно)
10
Масштабируемая графика (9-patch)
UI Patterns
12
UI Patterns
0. Back/Menu
1. ActionBar
2. Dashboard
3. Tabs
4. Workspaces
13
Back button
14
Menu
Action BarСостояние приложения и ключевые действия
Action BarСостояние приложения и ключевые действия
Логотип
Action BarСостояние приложения и ключевые действия
Логотип
Навигация
Action BarСостояние приложения и ключевые действия
Логотип
Навигация
Действия
Action BarТипы навигации
Текст
Вкладки
Выпадающее меню
Action BarДействия
• Иконка и/или текст / Custom View• Однозначный смысл
21
Dashboard
22
Tabs: Android & iOS
23
Android 4 Tabs
24
Workspaces
25
UI Patterns Sitespatternsofdesign.co.ukmobile-patterns.compttrns.com
iOS → Android
27
28
29
Foursquare
30
Foursquare
31
Ключевые отличия
• NavigationBar vs ActionBar
• Back button ↩
• Menu button
• Styles
• Icons
• Tabs
Как делать нельзя
33
Найди 10 отличий
34
Вконтакте
35
iOS и Android версии должны отличаться.Не создавайте монстров.
Планшеты
37
Отличие планшета от смартфона
Ориентация
• Горизонтально по умолчанию
• Вертикальный вариант• Используйте
фрагменты
Ориентация — стратегии
• Поддержка узкого варианта колонок
Растягиваемые колонки
Ориентация — стратегии
• Иконка «Назад» возвращает к А
Скрытие колонки
Ориентация — стратегии
• Поддержка сжатого вида
• Кнопка «Показать»
Сжатие колонки
Orientation Strategies
• b и c образуют стек
Стек
43
Android 4
• Единая ОС для смартфонов и планшетов
• Новый уровень UI
Инструменты
45
Balsamiq Mockups
http://t.co/rn2dmMJW
46
Android Design Preview
http://t.co/PyoGeBam
47
Генерация иконок
http://code.google.com/p/android-ui-utils/
48
Правильные приложения
• Google+• Google Docs• Google I/O 2011• Android Market• Catch Notes• Foursquare• Twitter• Evernote
49
Ссылки
• @romannurik
• @lehtimae
• @cyrilmottier
• androiduipatterns.com
• androidpatterns.com
• pttrns.com
• mobile-patterns.com
