Дизайн ИнтерфейсовMaterial DesignМобильные ПриложенияОбразованиеКурсы

Material Design на русском. Часть 6 — Плотность пикселей

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь

Плотность пикселей экрана и разрешение может отличаться в зависимости от платформы.

Плотность пикселей

Количество пикселей, которые помещаются на 1 дюйм устройства, называется плотностью пикселей.

Экраны с высокой плотностью пикселей имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы пользовательского интерфейса с одинаковыми размерами пикселей выглядят больше на экранах с низкой плотностью и меньше на экранах с высокой плотностью.

В Material Design есть пару слов о том как высчитывается плотность пикселей, но я посчитал что это лишнее.

Экран с высокой плотностью пикселей

Экран с низкой плотностью пикселей

Про независимость от плотности

Суть в том что бы прийти к одинаковому отображению элементов интерфейса на экранах с различной плотностью. Потому что устройств очень и очень много и все они разные, а некоторые из них еще и «врут».

Например, большой физический размер экрана не означает то, что на экране будет отображаться большая плотность. Также, не факт что заявленная плотность пикселей соответствует действительности, поскольку иногда плотность пикселей увеличивается програмно, чтобы подогнать интерфейс под стандартный множитель.

Как дизайнеру тебе тут нечего ловить, однако важно понимать следующее:

Всегда проверяй дизайн-макеты на реальных устройствах

DP или DiP — это аббревиатура от Device independent Pixel — это независимые от плотности пиксели. Это единицы измерения в андроид, которые могут масштабироваться для того, чтобы на любом устройстве были одинаковые размеры и отступы независимо от множителя (1x, 2x, 3x и т.д.) экрана.

  1. Это экран с низкой плотностью. 2. Это экран с высокой плотностью

Про плотность пикселей в Андроид

При разработке приложения для Android используй dp для одинакового отображения элементов на экранах с различной плотностью.

DP и плотность пикселей

1dp = 1px на экране при плотности пикселей на дюйм 160. То есть это значение 1 к 1. Это называется mdpi. MDPI является базовой точкой отсчета. Ниже примеры других множителей, где 1dp равен:

1dp = 0.75px при плотности ниже ~120 dpi — LDPI (0.75x)

1dp = 1px при плотности ~160 dpi — MDPI (1x)

1dp = 1.5px при плотности ~240 dpi — HDPI (1.5x)

1dp = 2px при плотности ~320 dpi — XDPI (2x)

1dp = 3px при плотности ~480 dpi — XXDPI (3x)

1dp = 4px при плотности ~640 dpi — XXXDPI (4x)

Кнопка выглядит как бы одинаково, но на разных устройствах с разной плотностью у кнопки будут разные размеры. Зеленый — оригинальный размер. Красный —получившееся значение, учитывающее плотность.

Отсюда 4 вывода:

  1. Для начала запомни: создавай дизайны в векторных редакторах: figma, sketch, adobe xd, illustrator и т.д. Это позволит элементам, блокам, иконкам и иллюстрациям масштабироваться в любой нужный размер без потери качества.
  2. Макет и все его элементы надо делать изначально 1к1, то есть в MDPI. В любом редакторе это 360px на 640px — это общепринятый размер экрана. То есть под остальные разрешения рисовать не надо. Исключение: какой-то уникальный или целевой девайс, чтобы посмотреть как смотрится макет.
  3. Затем экспорт под необходимые разрешения 1x, 2x, 3x, 4x. Потому что если дизайн будет спроектирован в 2х изначально, то увеличив иллюстрацию на 150% чтобы получить 3x, то ты увидишь размытые контуры — это плохо.
  4. Ранее я писал, что устройства могут врать и доводить плотность пикселей до какого-то значения програмно, поэтому тестируй и смотри макеты на реальном устройстве.

Масштабируемые пиксели — SP

Масштабируемые пиксели (sp) это то же самое что и dp, но для типографики. Значение по умолчанию для sp совпадает со значением по умолчанию для dp.

Основное различие между sp и dp заключается в том, что sp сохраняют настройки шрифта пользователя, которые он сам поставил в системе. То есть пользователь, у которого установлен к примеру большой размер текста в настройках, увидит, что размер шрифта в твоем приложении соответствует настройке в системе на его девайсе.

Аналогичная ситуация с типографиокй. Только тут 20x32 — оригинальное значение. 20 — размер шрифта. 32 — высота строки

Про плотность пикселей в iOS

Проектируя под iOS, нужно использовать точки (point или сокращенно pt). Касательно iOS будет отдельная серия статей и перевод всего гайда.

Про плотность пикселей в вебе

Используй разрешение экрана устройства и изменяй значения исходя из него по своему вкусу и задачам. В вебе используются пиксели.

Как следить за обновлениями гайдлайна и переводом?

RRuslan Sharipov