dribbble meetup odessa
DESCRIPTION
Доклад о проектировании интерфейса "информационных карточек" для Android планшетов.TRANSCRIPT
Сетка для ленивого дизайнера
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