Android UI Optimisation

Оптимизация UI для Android
подготовила Таня Завьялова
Sunday, November 24, 2013

ux
designer,
researcher,
engineer

omwat


neﬁt easy

мы все хотим делать
успешные приложения


полезные


полезные

красивые

красивые


полезные

красивые
отзывчивые

красивые


красивые


визуально сбалансированны,

быстро загружаются,

разумно используют
пространство,

предсказуемо реагируют
на действия пользователя,

с хорошо подобранной
цветовой гаммой
и типографикой

с плавной анимацией
переходов


красивые


оптимальный UI


вдумчивый подход к
проектированию и дизайну,
и итеративный процесс


что оптимизировать и как сильно это повлияет на результат

работа с GPU
UI библиотеки
подготовка ресурсов
коммуникация в команде
дизайн концепция приложения

оптимизация работы с GPU
95% случаев покрывают
встроенные библиотеки


если совсем плохо, прогоните GPU Overdraw

for details check Google I/O 2013 - Android Graphics Performance


for details check Google I/O 2013 - Android Graphics Performance

добиваясь высоких FPS-ов, обратите внимание на
интересные нетехнические цифры

0.01 сек мы ждем реакцию
0.1 сек мы наблюдаем реакцию
1+ сек нам нужен статус


работа с UI библиотеками
работа, проделанная google в 2012-ом


работа, проделанная google в 2012-ом:
- Резиновый дизайн (fluid design)
- Responsive Layout,
- Holo Visual Language


резиновый дизайн пришел из веба
первые упоминания на просторах ру-нета с лета 2002

когда появились мониторы с большой диагональю


резиновый дизайн пришел из веба
первые упоминания на просторах ру-нета с лета 2002

Сайт издательского центра «Академия» 02.06.2005, Студия Лебедева

резиновый дизайн, основные принципы (web):
- оптимизация расположения елементов для
нескольких размеров экрана (min, mid, max)
- размеры элементов интерфейса указываются
в относительных еденицах или считаются
автоматически исходя из расстояний между ними
- такой дизайн должен быть протестирован
на всех возможных разрешениях


резиновый дизайн в мобильных приложениях:
- несколько наборов изображений,
- размеры шрифтов под отдельные типы устройств,
- продумайте расположение элементов
под отдельные типы устройств


Responsive Layouts, Alternate Layouts
phone

Master/Detail Flow
комбинация нескольких скринов
на больших устройствах

Micro Re-Flow
адаптация расположения элементов
на устройствах с другой шириной экрана

Table to Grid
переключение между разными типами
отображения контента


tablet

Responsive Layouts, примеры

Master/Detail Flow
комбинация нескольких скринов на больших устройствах


Micro Re-Flow
адаптация расположения элементов
на устройствах с другой шириной экрана


Table to Grid
переключение между разными типами отображения контента

Holo Visual Language
минимум рамок

максимум места
для контента
content

минимум
декоративных
элементов


чистый и
плоский дизайн

Holo Visual Language


Если вы используете по максимуму возможности
Holo, вам не надо будет много рисовать.


Начинайте прорисовку экранов из самого мелкого
или самого крупного устройства и потом в фотошопе
доводите пиксели до идеального состояния.


Мы входим в эру Full HD.
Накиньте пикселей на еще одну
пропорцию.
4:3 XXHDPI 3x = 480 DPI
16:9 XXHDPI 3x = 540 DPI


Мы входим в эру Full HD.
Накиньте пикселей на еще одну пропорцию
для больших устройств.

4:3

+

540 DPI

720 DPI

И если вам всетаки пришлось открыть фотошоп или
иллюстратор и нарисовать иконку, сделайте ее четкой

h6p://dutchicon.com/arDcles/pixel-‐perfect

комуникация в команде
Обговорите
с дизайнером:
- какие иконки?
- какой шрифт?
- какой цвет?
- какое расстояние?
- что нарезать?
- символы и обозначения?
Если есть время, требуйте
подробную спецификацию.

комуникация в команде
Как и любая инженерная дисциплина,
дизайн итеративен. Поговорите с дизайнером, если:
- появилась новая/ушла старая функциональность
- не понятно, что нарисованно
- подобранный шрифт не помещается в поле
- вам кажется, что так красивее
- у вас нет ресурса или вы не знаете, какой выбрать
- надо ужать или растянуть лейаут


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

Требуйте
информационную
архитектуру!

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

главная

фунция
1

фунция
1

фунция
1

шаг
1

шаг
2

шаг
3

фунция
2

фунция
2

фунция
2

шаг
1

шаг
2

шаг
3

фунция
1

старт

фунция
2
фунция
3
фунция
4



стандартные патерны


встроенные библиотеки

дизайн концепция
Сконцентрируйтесь на основной функции/цели
и постарайтесь не перегружать дизайн


оптимизируйте для нее

Android UI Optimisation

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Android UI Optimisation

Similar a Android UI Optimisation (20)

Más de Tanya Zavialova

Más de Tanya Zavialova (11)

Android UI Optimisation