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

Twitter

28

Twitter

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

Спасибо!

SurfStudio

vladimir.makeev@surfstudio.ru

@vmakeev