Доклад о проектировании интерфейса "информационных карточек" для Android планшетов.

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

2. Иван Клименко
Product Designer
@5takdesign

4. Безумие

5. 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

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

7. DP

8. Плотность-независимая точка эквивалентна
одному физическому пикселу на 160 DPI,
которая является базовой плотностью и
берется в системе как «средняя» плотность
экрана. Во время работы система фоново
обрабатывает любое масштабирование единиц
DP по мере необходимости, исходя из
фактической плотности использованого экрана.

9. Преобразование единиц DP на экране пикселей
проста: пиксел= DP * (DPI/ 160). Например, на
экране 240 DPI, 1 DP равна 1,5 физических
пикселей. Всегда используйте DP-единицы при
проектировании UI приложения, чтобы
убедиться, что пользовательский интерфейс
отображается правильно на экранах с
различной плотностью.

10. DP ≈ 1/160
дюйма

11. DPI

12. Плотность (точек на линейный дюйм),
которая может принимать только
одно из фиксированных значений:
120, 160, 240, 320, 480 и т.д.

13. DP = PX*160/DPI

14. DPIreal

15. Плотность, которая соответствует
конкретному устройству. У большинства
устройств отличается от DPI, например у
некоторых устройств реальное разрешение
может быть 220, но при этому будут
использоваться файлы для DPI=240

16. DP = PX*160/DPIreal

17. 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

18. 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

19. 1396 850
1200 750
1024 640
930 580

20. 220x322 DP

21. 1396x850

22. 1200x750

23. 1024x640

24. 930x580

25. PX = DPIreal/160*DP

26. ideal ~1,375x
Nexus 7 (2012)
302x442 px
real ~1,5x
330x483 px

27. IDEAL
Trancscendence Boyhood Legends of Oz:
Dorothy’s return
Guardians of the
Galaxy
Nexus 7 (2012)

28. Trancscendence Boyhood Legends of Oz:
Dorothy’s return
Guardians of the
Galaxy
REAL
Nexus 7 (2012)

29. Trancscendence Boyhood Legends of Oz:
Dorothy’s return
Guardians of the
Galaxy
REAL
Nexus 7 (2012)

31. CTA

32. dework.com.ua

33. Иван Клименко
Product Designer
@5takdesign