0
По ту сторону дрибббла:между дизайнерами и разработчикамиЕвгений Беляев@30PP0Дизайнер, Mail.Ru
Макет (psd)
Реализованное приложение
?
Криворукие программисты!
Плохо составленнаяспецификация дизайна (ТЗ)
Спецификация дизайна (ТЗ) Metrics             Fonts                Res- размеры           - размеры            - ресурсы г...
metrics           fonts            resПристальное внимание надо уделитьинтеграции дизайна, т.к. именно это видитна экране ...
Мобильные платформы                      Samsung   WindowsAndroid       iOS       bada     Phone
Android
Нельзя просто так взять и интегрировать вашдизайн приложения под андроид
Экран смартфона:- разрешение                  плотность экрана- диагональ                   dip (dots per inch)Категории п...
Density-independent pixel (dp)1 dp = 1 px для экранов с плотностью 160 dpi (mdpi)- ldpi (0.75x)- mdpi (x)- hdpi (1.5x)- xh...
metrics
Metrics
Metrics          xhdpi:   1 dp = 2 px                     image size: 50%                         1 dp = 1 px
PNG EXPRESS (pngexpress.com)
PNG EXPRESS1.            2.   3.1 dp = 1 px
PNG EXPRESS1.            2.   3.1 dp = 1 px
fonts
Fonts
FontsScale-independent pixels (sp)                  1 sp = 1 dpSP учитывает настройки размера шрифта , которыепользователь...
PNG EXPRESS1.            2.   3.1 dp = 1 px
res
Res
Cut&Slice me (cutandslice.me)
Cut&Slice me1.       2.    3.   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      retina   не retina               image size: 50%
PNG EXPRESS (pngexpress.com)
PNG EXPRESS1.          2.   3.не retina
fonts
Fonts
PNG EXPRESS1.          2.   3.не retina
res
Res      retina      excel@2x.png      не retina   excel.png
Cut&Slice me (cutandslice.me)
Cut&Slice me1.       2.    3.   4.retina
Samsung bada 2.0         Помним, скорбим...
WindowsPhone
Экран WP-устройств:- WVGA   480x800    15:9- WXGA   768x1280   15:9- 720p   720x1280   16:9
metrics
Metrics
PNG EXPRESS1.        2.   3.WVGA
fonts
Fonts
PNG EXPRESS1.        2.       3.               `WVGA
res
Res
Cut&Slice me1.       2.    3.   4.WVGA
Metrics  WVGA (480x800)   WXGA (768x1280)                   image size: 160%
Cut&Slice me1.       2.    3.   4.WXGA
Спасибо за внимание!Вопросы?Евгений Беляев@30PP0Дизайнер, Mail.Ru
Upcoming SlideShare
Loading in...5
×

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

36,015

Published on

Презентация с Dribbble Meetup 2013

Published in: Design
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
36,015
On Slideshare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
61
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×