android ui optimisation

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

ux designer,

researcher,engineer

omwat nefit easy

Sunday, November 24, 2013

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


полезные


полезные

красивые

красивые


полезные

красивые

отзывчивые


красивые


красивые

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

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

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


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

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

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


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

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


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

и итеративный процесс


дизайн концепция приложения

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

коммуникация в команде

подготовка ресурсов

UI библиотеки

работа с GPU







работа с GPU


оптимизация работы с 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+ сек


мы ждем реакцию

мы наблюдаем реакцию

нам нужен статус







работа с GPU


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

работа с UI библиотеками


работа, проделанная google в 2012-ом:

- Резиновый дизайн (fluid design)

- Responsive Layout,

- Holo Visual Language



работа с UI библиотекамирезиновый дизайн пришел из веба

первые упоминания на просторах ру-нета с лета 2002

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


работа с UI библиотекамирезиновый дизайн пришел из веба

первые упоминания на просторах ру-нета с лета 2002

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


работа с UI библиотекамирезиновый дизайн, основные принципы (web):

- оптимизация расположения елементов для нескольких размеров экрана (min, mid, max)

- размеры элементов интерфейса указываются в относительных еденицах или считаются автоматически исходя из расстояний между ними

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


работа с UI библиотекамирезиновый дизайн в мобильных приложениях:

- несколько наборов изображений,

- размеры шрифтов под отдельные типы устройств,

- продумайте расположение элементов

под отдельные типы устройств


Responsive Layouts, Alternate Layouts


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

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

phone tablet

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


Responsive Layouts, примеры


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




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




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


Holo Visual Language


content

минимум рамок

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

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

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


Holo Visual Language








работа с GPU


Если вы используете по максимуму возможности

Holo, вам не надо будет много рисовать.



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



Мы входим в эру Full HD.

Накиньте пикселей на еще одну пропорцию.


XXHDPI 3x = 480 DPIXXHDPI 3x = 540 DPI

4:316:9



4:3 +

540 DPI 720 DPI

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


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


h6p://dutchicon.com/arDcles/pixel-‐perfectSunday, November 24, 2013






работа с GPU


- какие иконки?

комуникация в команде

- какой шрифт?

- какой цвет?

- какое расстояние?

Обговорите с дизайнером:

- что нарезать?

Если есть время, требуйте подробную спецификацию.

- символы и обозначения?


комуникация в команде

Как и любая инженерная дисциплина,дизайн итеративен. Поговорите с дизайнером, если:

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







работа с GPU


дизайн концепция : архитектура

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

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

архитектуру!



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

старт

регистрация главная

фунция 1

фунция 2

фунция 3

фунция 4

фунция 1

шаг 1

фунция 1

шаг 2

фунция 1

шаг 3

фунция 2

шаг 1

фунция 2

шаг 2

фунция 2

шаг 3



95% случаев покрываютстандартные патерны



95% случаев покрываютвстроенные библиотеки


дизайн концепция

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


оптимизируйте для нееSunday, November 24, 2013

android ui optimisation

Technology

gpu ui

ui android

ui responsive layouts

ui holo visual languagesunday

gpu fps

gpu overdrawfor details

google io

android graphics performance