Интеграция дизайна
14 likes37,610 views
Документ обсуждает важность интеграции дизайна приложений между дизайнерами и разработчиками, акцентируя внимание на спецификациях и метриках для различных мобильных платформ. Также приводятся подробности о плотностях экранов, разрешениях и требованиях к графическим ресурсам для устройств Android и iOS. Эффективная интеграция дизайна критически важна для конечного пользователя, что подчеркивает необходимость точного выполнения технического задания.
Интеграция дизайна
- 1. По ту сторону дрибббла: между дизайнерами и разработчиками Евгений Беляев @30PP0 Дизайнер, Mail.Ru
- 2. Макет (psd)
- 4. ?
- 7. Спецификация дизайна (ТЗ) Metrics Fonts Res - размеры - размеры - ресурсы графики - отступы - начертания - цвета эл-тов - цвета и PS-стили - межстрочный интервал
- 8. metrics fonts res Пристальное внимание надо уделить интеграции дизайна, т.к. именно это видит на экране своего устройства конечный пользователь продукта, а не макеты дизайнера
- 9. Мобильные платформы Samsung Windows Android iOS bada Phone
- 10. Android
- 11. Нельзя просто так взять и интегрировать ваш дизайн приложения под андроид
- 12. Экран смартфона: - разрешение плотность экрана - диагональ dip (dots per inch) Категории плотности экрана: - ldpi (240x320) - mdpi (320x480) - hdpi (480x800) - xhdpi (720x1280) - xxhdpi (1080x1920)
- 13. Density-independent pixel (dp) 1 dp = 1 px для экранов с плотностью 160 dpi (mdpi) - ldpi (0.75x) - mdpi (x) - hdpi (1.5x) - xhdpi (2x)
- 14. metrics
- 15. Metrics
- 16. Metrics xhdpi: 1 dp = 2 px image size: 50% 1 dp = 1 px
- 18. PNG EXPRESS 1. 2. 3. 1 dp = 1 px
- 19. PNG EXPRESS 1. 2. 3. 1 dp = 1 px
- 20. fonts
- 21. Fonts
- 22. Fonts Scale-independent pixels (sp) 1 sp = 1 dp SP учитывает настройки размера шрифта , которые пользователь выбрал для операционной системы
- 23. PNG EXPRESS 1. 2. 3. 1 dp = 1 px
- 24. res
- 25. Res
- 27. Cut&Slice me 1. 2. 3. 4. xhdpi
- 28. Res button.png
- 29. Res button.png button.9.png
- 31. Nine Patch Editor “Тянется” по горизотали “Тянется” по вертикали Контент Контент
- 32. Теперь мы умеем интегрировать дизайн под андроид!
- 33. iOS
- 34. Экран iPhone: - Retina (iPhone 4, 5) - не Retina (iPhone 3GS)
- 35. metrics
- 36. Metrics
- 37. Metrics retina не retina image size: 50%
- 39. PNG EXPRESS 1. 2. 3. не retina
- 40. fonts
- 41. Fonts
- 42. PNG EXPRESS 1. 2. 3. не retina
- 43. res
- 44. Res retina excel@2x.png не retina excel.png
- 46. Cut&Slice me 1. 2. 3. 4. retina
- 47. Samsung bada 2.0 Помним, скорбим...
- 48. Windows Phone
- 49. Экран WP-устройств: - WVGA 480x800 15:9 - WXGA 768x1280 15:9 - 720p 720x1280 16:9
- 50. metrics
- 51. Metrics
- 52. PNG EXPRESS 1. 2. 3. WVGA
- 53. fonts
- 54. Fonts
- 55. PNG EXPRESS 1. 2. 3. ` WVGA
- 56. res
- 57. Res
- 58. Cut&Slice me 1. 2. 3. 4. WVGA
- 59. Metrics WVGA (480x800) WXGA (768x1280) image size: 160%
- 60. Cut&Slice me 1. 2. 3. 4. WXGA
- 61. Спасибо за внимание! Вопросы? Евгений Беляев @30PP0 Дизайнер, Mail.Ru