Dribbble Meetup Odessa

Сетка для ленивого дизайнера

Product DesignerИван Клименко

@5takdesign

Безумие

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

Как же мне лень начинать проект

DP

Плотность-независимая точка эквивалентна

одному физическому пикселу на 160 DPI,

которая является базовой плотностью и

берется в системе как «средняя» плотность

экрана. Во время работы система фоново

обрабатывает любое масштабирование единиц

DP по мере необходимости, исходя из

фактической плотности использованого экрана.

Преобразование единиц DP на экране пикселей

проста: пиксел= DP * (DPI/ 160). Например, на

экране 240 DPI, 1 DP равна 1,5 физических

пикселей. Всегда используйте DP-единицы при

проектировании UI приложения, чтобы

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

отображается правильно на экранах с

различной плотностью.

DP ≈ 1/160 дюйма

DPI

Плотность (точек на линейный дюйм),

которая может принимать только

одно из фиксированных значений:

120, 160, 240, 320, 480 и т.д.

DP = PX*160/DPI

DPIreal

Плотность, которая соответствует

конкретному устройству. У большинства

устройств отличается от DPI, например у

некоторых устройств реальное разрешение

может быть 220, но при этому будут

использоваться файлы для DPI=240

DP = PX*160/DPIreal

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

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

1396 850

1200 750

1024 640

930 580

220x322 DP

1396x850

1200x750

1024x640

930x580

PX = DPIreal/160*DP

Nexus 7 (2012)

ideal ~1,375x302x442 px

real ~1,5x330x483 px

IDEAL

Trancscendence Boyhood Legends of Oz: Dorothy’s return

Guardians of the Galaxy

Nexus 7 (2012)

Trancscendence Boyhood Legends of Oz: Dorothy’s return

Guardians of the Galaxy

REAL

Nexus 7 (2012)

Trancscendence Boyhood Legends of Oz: Dorothy’s return

Guardians of the Galaxy

REAL

Nexus 7 (2012)

CTA

dework.com.ua

Product DesignerИван Клименко

@5takdesign