Евгений Беляев @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
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
Спасибо за внимание!Вопросы?