April 19, 2021

Единицы измерения в iOS и Android.

При работе с Android системами обычно выбирается базовый фрейм 360×640, для адаптации под удлиненные экраны 18:9 можно использовать размер фрейма 360×720.
Размер фрейма для приложения на системе IOS чаще всего используется 375×812.
В большинстве случаев UI дизайнеру этого достаточно, но если вы хотите лучше понимать, что происходит с вашим дизайном после сдачи макетов и уверенно оперировать терминологией, то прочитайте эту статью.

Дизайн приложений Android и IOS

Для удобства все координаты в Figma представлены в px, а фреймы имеют размеры соответствующие базовому (Android) или логическому (iOS) разрешению экрана устройства. Это позволяет не беспокоиться о последующем представлении данных. Нужно только знать под какую модель iPhone требуется дизайн, нужна ли адаптация под другие модели и, если потребуется, с каким коэффициентом плотности (@x1,2,3,4) нужно подготовить ассеты.

Что такое DPI и PPI

Из-за неоднозначности термина «пиксель» часто возникает путаница с пониманием величин DPI и PPI. Она порой проявляется даже внутри крупных программных систем, так что здесь мы будем рассматривать только то, что относится к дизайну интерфейсов для iOS и Android.

Начнем с основных понятий:

Пиксель изображения (px) — это наименьший элемент, составляющий растровое изображение.

Пиксель экрана (также px)— это элемент матрицы дисплеев, формирующих изображение.
Размер экрана в пикселях относится к общему количеству пикселей на дисплее. Указывается как ширина x высота с единицами измерения в пикселях: например, 1080×1920

Разрешение экрана указывает на количество пикселей [экрана], которые умещаются в линию на одном дюйме по вертикали или горизонтали матрицы экрана устройства, называется «плотностью пикселей» и обозначается PPI экрана. Так же этот показатель сообщает о том, насколько велики пиксели на реальном экране устройства — чем меньше значение, тем крупнее пиксель.

Разрешение изображения говорит о четкости деталей растрового изображения и так же исчисляется в пикселах на дюйм (PPI изображения). Для изображения, предназначенного для печати, используют обозначение DPI — количество точек на дюйм.

Логическое разрешение на iOS и пиксели, независимые от плотности (dp) на Android нужны для сохранения видимых размеров элементов интерфейса программ на новых устройствах с различными параметрами экрана.

Соотношение экранов различных моделей iPhone

Система Android

DPI устройства задаёт разрешение изображения всего экрана, который будет показан на устройстве. Используется для масштабирования интерфейса. Значение DPI присвоено устройству и задается программно. При масштабе интерфейса по умолчанию в 100% значения DPI и PPI равны.

В Android для различения значений вместо PPI изображения стали использовать DPI (возможно подразумевая, что вывод изображения на дисплей смартфона и печать на лист бумаги это подобные процессы), что, привело дизайнеров к еще большей запутанности.

Dp это логическая (абстрактная) еденица измерения — пиксель независимый от плотности.

Один 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.

Спасибо за прочтение!

Подробнее

10 дней

Курс по гайдлайнам IOS и Android

Онлайн

старт 28 июля

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