Интеграция дизайна

Евгений Беляев @30PP0Дизайнер, Mail.Ru

По ту сторону дрибббла:между дизайнерами и разработчиками

Макет (psd)

Реализованное приложение

?

Криворукие программисты!

Плохо составленная спецификация дизайна (ТЗ)

Спецификация дизайна (ТЗ)

- размеры- отступы- цвета эл-тов

- размеры- начертания- цвета и PS-стили- межстрочный интервал

Metrics- ресурсы графики

Fonts Res

metrics

Пристальное внимание надо уделить интеграции дизайна, т.к. именно это видит на экране своего устройства конечный пользователь продукта, а не макеты дизайнера

fonts res

Мобильные платформы

iOSAndroid Samsungbada

WindowsPhone

Android

Нельзя просто так взять и интегрировать ваш дизайн приложения под андроид

Экран смартфона:- разрешение- диагональ

плотность экранаdip (dots per inch)

Категории плотности экрана:- ldpi (240x320)

- mdpi (320x480)

- hdpi (480x800)

- xhdpi (720x1280)

- xxhdpi (1080x1920)

Density-independent pixel (dp)

1 dp = 1 px для экранов с плотностью 160 dpi (mdpi)

- ldpi (0.75x)

- mdpi (x)

- hdpi (1.5x)

- xhdpi (2x)

metrics

Metrics

Metrics

xhdpi: 1 dp = 2 px

image size: 50%

1 dp = 1 px

PNG EXPRESS (pngexpress.com)

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

fonts

Fonts

Fonts

Scale-independent pixels (sp)

1 sp = 1 dp

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

PNG EXPRESS

1.

2. 3.

1 dp = 1 px

res

Res

Cut&Slice me (cutandslice.me)

Cut&Slice me

1. 3.

2. 4.

xhdpi

Res

button.png

Res

button.png button.9.png

Nine Patch Editor

Nine Patch Editor

“Тянется”по вертикали

“Тянется”по горизотали

Контент

Контент

Теперь мы умеем интегрировать дизайн под андроид!

iOS

Экран iPhone:- Retina (iPhone 4, 5)- не Retina (iPhone 3GS)

metrics

Metrics

Metrics

image size: 50%

retina не retina

PNG EXPRESS (pngexpress.com)

PNG EXPRESS

1.

2. 3.

не retina

fonts

Fonts

PNG EXPRESS

1.

2. 3.

не retina

res

Res

retina excel@2x.png

не retina excel.png

Cut&Slice me (cutandslice.me)

Cut&Slice me

1. 3.

2. 4.

retina

Samsung bada 2.0

Помним, скорбим...

WindowsPhone

Экран WP-устройств:- WVGA 480x800 15:9

- WXGA 768x1280 15:9

- 720p 720x1280 16:9

metrics

Metrics

PNG EXPRESS

1.

2. 3.

WVGA

fonts

Fonts

PNG EXPRESS

1.

`

2. 3.

WVGA

res

Res

Cut&Slice me

1. 3.

2. 4.

WVGA

Metrics

WVGA (480x800) WXGA (768x1280)

image size: 160%

Cut&Slice me

1. 3.

2. 4.

WXGA

Евгений Беляев @30PP0Дизайнер, Mail.Ru

Спасибо за внимание!Вопросы?