Дизайн
Для удобства все координаты в figma представлены в px, а фреймы имеют размеры соответствующие базовому(Android) или логическому(iOS) разрешению экрана устройства. Это позволяет не беспокоиться о последующем представлении данных. Нужно только знать под какую модель iPhone требуется дизайн, нужна ли адаптация под другие модели и, если потребуется, с каким коэффициентом плотности (@x1,2,3,4) нужно подготовить ассеты. При работе с Android системами обычно выбирается базовый экран 360x640, для адаптации под удлиненные экраны 18:9 можно использовать размер фрейма 360x720.В большинстве случаев UI-дизайнеру этого достаточно, но если вы хотите лучше понимать, что происходит с вашим дизайном после сдачи макетов и уверенно оперировать терминологией, то прочитайте эту статью.
DPI и PPI
Из-за неоднозначности термина "пиксель" часто возникает путаница с пониманием величин DPI и PPI. Она порой проявляется даже внутри крупных программных систем, так что здесь мы будем рассматривать только то, что относится к дизайну интерфейсов для iOS и Android.Начнем с основных понятий:
Пиксель изображения (px) - это наименьший элемент составляющий растровое изображение.
Пиксель экрана (px)- это элемент матрицы дисплеев, формирующих изображение.
Размер экрана в пикселях относится к общему количеству пикселей на дисплее. Указывается как ширина × высота с единицами измерения в пикселях: например, 1080 × 1920
Разрешение экрана указывает на количество пикселей [экрана], которые умещаются в линию на одном дюйме по вертикали или горизонтали матрицы экрана устройства, называется «плотностью пикселей» и обозначается PPI экрана. Так же этот показатель сообщает о том, насколько велики пиксели на реальном экране устройства - чем меньше значение, тем крупнее пиксель.
Разрешение изображения говорит о четкости деталей растрового изображения и так же исчисляется в пикселах на дюйм (PPI изображения). Для изображения, предназначенного для печати, используют обозначение DPI - количество точек на дюйм.
Логическое разрешение на iOS и пиксели, независимые от плотности (dp) на Android нужны для сохранения видимых размеров элементов интерфейса программ на новых устройствах с различными параметрами экрана.
Android
DPI устройства задаёт разрешение изображения всего экрана, который будет показан на устройстве. Используется для масштабирования интерфейса. Значение DPI присвоено устройству и задается программно. При масштабе интерфейса по умолчанию в 100% значения DPI и PPI равны.В Android для различения значений вместо PPI изображения стали использовать DPI, что, привело дизайнеров к еще большей запутанности.
Один dp равен одному пикселю на экране с плотностью 160 DPI. Масштабируемые пиксели sp это то же, что dp, но для шрифтов. Они нужны для того, чтобы система или пользователь могли изменить масштаб шрифта без изменения размеров интерфейса. По умолчанию значение sp равно dp.
Экран с плотностью 160 DPI взят за основу и ему присвоено значение плотности mdpi. В figma такой экран соответствует фрейму 360х640.
На данный момент существует несколько значений плотности для поддержки экранов от 120 до 640 DPI. Их так же называют квалификаторы плотности. Моделей матриц экранов очень много, их плотность редко совпадает с квалификатором, так что берется приближенное значение.
Квалификатор плотности сообщает во сколько раз нужно увеличить детализацию ассетов (@1x, @2x, @3x, @4x). Этот множитель называют коэффициентом масштабирования.
iOS
Каждому устройству с iOS присвоено свое логическое разрешение. Оно приблизительно соответствует физическому разрешению экранов первых моделей iPhone и iPad. Логическое разрешение используется так же, как базовое разрешение mdpi в Android.Логическое разрешение обозначается указанием ширины и высоты экрана в поинтах (pt).
Для размеров шрифта так же, как в Android, используется sp.
Pt это еденицы координат. Они используются только для размещения элементов интерфейса и никак не отображаются для пользователя.
Коэффициент масштабирования (ретина-коэффициент) в iOS присваивается каждой новой модели в зависимости от характеристик экрана.
Подробная гайд-схема по разрешениям iPhone
Информация о дисплеях всех iPhone, iPad и iPod touch
Render
Устройство на основе верстки и ассетов выполняет отрисовку и преобразует её в пиксели изображения экрана. Этот процесс называют растеризация.Downscale
Прежде чем полученное изображение можно будет отобразить, устройству необходимо уменьшить его разрешение до разрешения матрицы дисплея. Полученные таким образом пиксели отображаются на экране устройства пользователя.
Все это может показаться сложным и нам кажется, что так оно и есть, раз уж этот вопрос неизменно поднимается на различных форумах, посвященных дизайну. Если после прочтения статьи вы все же не до конца разобрались в вопросе - не беспокойтесь, если вы опираетесь на гайдлайны и правильно используете современные инструменты UI дизайна, тогда вам не обязательно обладать техническими знаниями о том, как ваш дизайн будет работать за пределами Figma.
Спасибо за прочтение!