dribbble meetup odessa
DESCRIPTION
Доклад о проектировании интерфейса "информационных карточек" для Android планшетов.TRANSCRIPT
![Page 1: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/1.jpg)
Сетка для ленивого дизайнера
![Page 2: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/2.jpg)
Product DesignerИван Клименко
@5takdesign
![Page 3: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/3.jpg)
![Page 4: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/4.jpg)
Безумие
![Page 5: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/5.jpg)
DEVICE PX PX PPI
Kindle Fire HD 8.9" 2560 1600 340
Kindle Fire HD 8.9" 1920 1200 260
Kindle Fire HDX 1920 1200 320
Kindle Fire HD 7" 1280 800 220
Transformer Pad Infinity 1920 1200 220
Nexus 7 2012 1280 800 220
Nexus 7 2013 1920 1200 320
Nexus 10 2560 1600 300
Galaxy Tab2 10.1" 1280 800 150
Galaxy Tab 7.7" 1280 800 200
Galaxy Tab 2 7.0 1024 600 170
Galaxy Note II 1280 720 270
Galaxy Note 3 1920 1080 390
Galaxy Note 10.1 1280 800 150
Galaxy Note 10.1 (2014) 2560 1600 300
![Page 6: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/6.jpg)
Как же мне лень начинать проект
![Page 7: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/7.jpg)
DP
![Page 8: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/8.jpg)
Плотность-независимая точка эквивалентна
одному физическому пикселу на 160 DPI,
которая является базовой плотностью и
берется в системе как «средняя» плотность
экрана. Во время работы система фоново
обрабатывает любое масштабирование единиц
DP по мере необходимости, исходя из
фактической плотности использованого экрана.
![Page 9: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/9.jpg)
Преобразование единиц DP на экране пикселей
проста: пиксел= DP * (DPI/ 160). Например, на
экране 240 DPI, 1 DP равна 1,5 физических
пикселей. Всегда используйте DP-единицы при
проектировании UI приложения, чтобы
убедиться, что пользовательский интерфейс
отображается правильно на экранах с
различной плотностью.
![Page 10: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/10.jpg)
DP ≈ 1/160 дюйма
![Page 11: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/11.jpg)
DPI
![Page 12: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/12.jpg)
Плотность (точек на линейный дюйм),
которая может принимать только
одно из фиксированных значений:
120, 160, 240, 320, 480 и т.д.
![Page 13: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/13.jpg)
DP = PX*160/DPI
![Page 14: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/14.jpg)
DPIreal
![Page 15: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/15.jpg)
Плотность, которая соответствует
конкретному устройству. У большинства
устройств отличается от DPI, например у
некоторых устройств реальное разрешение
может быть 220, но при этому будут
использоваться файлы для DPI=240
![Page 16: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/16.jpg)
DP = PX*160/DPIreal
![Page 17: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/17.jpg)
DEVICE DP DP
Kindle Fire HD 8.9" 1204 752
Kindle Fire HD 8.9" 1181 738
Kindle Fire HDX 960 600
Kindle Fire HD 7" 930 581
Transformer Pad Infinity 1396 872
Nexus 7 2012 930 582
Nexus 7 2013 960 600
Nexus 10 1365 853
Galaxy Tab2 10.1" 1365 853
Galaxy Tab 7.7" 1024 640
Galaxy Tab 2 7.0 964 565
Galaxy Note II 1365 800
Galaxy Note 3 788 443
Galaxy Note 10.1 1365 853
Galaxy Note 10.1 (2014) 1365 853
![Page 18: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/18.jpg)
DEVICE DP DP
Kindle Fire HD 8.9" 1204 752
Kindle Fire HD 8.9" 1181 738
Kindle Fire HDX 960 600
Kindle Fire HD 7" 930 581
Transformer Pad Infinity 1396 872
Nexus 7 2012 930 582
Nexus 7 2013 960 600
Nexus 10 1365 853
Galaxy Tab2 10.1" 1365 853
Galaxy Tab 7.7" 1024 640
Galaxy Tab 2 7.0 964 565
Galaxy Note II 1365 800
Galaxy Note 3 788 443
Galaxy Note 10.1 1365 853
Galaxy Note 10.1 (2014) 1365 853
![Page 19: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/19.jpg)
1396 850
1200 750
1024 640
930 580
![Page 20: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/20.jpg)
220x322 DP
![Page 21: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/21.jpg)
1396x850
![Page 22: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/22.jpg)
1200x750
![Page 23: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/23.jpg)
1024x640
![Page 24: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/24.jpg)
930x580
![Page 25: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/25.jpg)
PX = DPIreal/160*DP
![Page 26: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/26.jpg)
Nexus 7 (2012)
ideal ~1,375x302x442 px
real ~1,5x330x483 px
![Page 27: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/27.jpg)
IDEAL
Trancscendence Boyhood Legends of Oz: Dorothy’s return
Guardians of the Galaxy
Nexus 7 (2012)
![Page 28: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/28.jpg)
Trancscendence Boyhood Legends of Oz: Dorothy’s return
Guardians of the Galaxy
REAL
Nexus 7 (2012)
![Page 29: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/29.jpg)
Trancscendence Boyhood Legends of Oz: Dorothy’s return
Guardians of the Galaxy
REAL
Nexus 7 (2012)
![Page 30: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/30.jpg)
![Page 31: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/31.jpg)
CTA
![Page 32: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/32.jpg)
dework.com.ua
![Page 33: Dribbble Meetup Odessa](https://reader033.vdocuments.site/reader033/viewer/2022051313/54806889b4af9faf158b5d95/html5/thumbnails/33.jpg)
Product DesignerИван Клименко
@5takdesign