Дизайнер Питер Ноуэлл в своем блоге написал о плотности пикселей в дизайне мобильных приложений — объяснил, что это такое, и рассказал о проблемах, с которыми сталкиваются дизайнеры при проектировании интерфейсов для разных устройств.
Редакция раздела «Интерфейсы» публикует перевод материал создан командой Sketchapp. 
Видео охватывает большую часть тем статьи, но если вас интересует более подробная информация, продолжайте читать.
Плотность пикселей — это количество пикселей, которые укладываются в определенный физический размер (обычно дюйм).
Первый Mac имел 72 пикселя на дюйм, что звучит очень много, но на самом деле это были огромные пиксели, с которыми могла справиться не каждая видеокарта.
Значки на компьютере Macintosh 1984 года выпуска.
Дизайнер Сьюзен Каре С тех пор технология экранов значительно продвинулась: даже самые простые дисплеи теперь имеют разрешение от 115 до 160 пикселей на дюйм (PPI).
Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с дисплеем Retina — сверхчетким экраном с удвоенным количеством пикселей на дюйм.
В результате графика становится более четкой, чем когда-либо.
Особенно заметна разница в значке почтового приложения и в тексте.
Кнопка, которая раньше занимала 44 пикселя, теперь занимает 88 пикселей.
ПТ и ДП
Конечно, это все актуально не только для устройств Apple. Каждая операционная система — настольная или мобильная — поддерживает экраны с высоким разрешением на дюйм.Google придумал свою собственную, независимую от пикселей единицу измерения для Android, названную DIP — Density Independent Pixel, сокращенно «dp».
Это не аналог iOS, но идея схожая.
Это универсальные единицы измерения, которые можно преобразовать в пиксели с использованием масштабного коэффициента устройства (2x, 3x и т. д.).
Возможно, вас интересует физический размер предмета.
По сути, дизайнерам интерфейсов не приходится об этом думать, поскольку они не имеют контроля над аппаратными особенностями экранов различных устройств.
Дизайнерам необходимо знать, какую плотность пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов на уровне 1x, 2x, 3x и так далее.
Устройства Apple не имеют единой плотности пикселей, которая представляет одну точку — это зависит от конкретного устройства (см.
«Восприятие масштаба» ниже).
В iOS точка варьируется от 132 dpi до 163 dpi. На Android DIP всегда составляет 160 ppi.
Контролируемый хаос
На заре появления мобильных устройств с высоким разрешением плотность пикселей была просто 1x или 2x. Но теперь все по-другому — очень много плотностей пикселей, которые должен поддерживать интерфейс.У Android есть отличный пример: на момент написания этой статьи разные производители поддерживали шесть разных плотностей пикселей.
Это означает, что значок одинакового размера на всех экранах должен иметь шесть разных вариантов.
Для Apple актуальны два или три разных источника.
Векторный дизайн
Из всего этого вам следует вынести несколько практических уроков.Для начала вам следует создать свои проекты в векторе.
Это позволяет нашим интерфейсам, значкам и другой графике масштабироваться до любого необходимого размера.
Второй урок: надо все рисовать в масштабе 1х.
Другими словами, создайте дизайн, используя точки для всех размеров, а затем масштабируйте его до различной большей плотности пикселей при экспорте.
Масштабирование графики в 2 раза на 150% для создания версии в 3 раза приводит к размытию краев, поэтому это не лучший вариант. Но масштабирование графики 1x на 200% и 300% позволяет сохранить четкость.
Разрешение макетов приложений iPhone должно быть не 750x1334, а 375x667 — именно в таком разрешении будет отображаться приложение.
Большинство инструментов дизайнера не различают точки и пиксели, поэтому вы можете предположить, что точки — это пиксели, а затем просто экспортировать исходный код в 2- или 3-кратном размере.
Притворяйся, пока это не правда
Стоит отметить, что иногда устройства врут. Они делают вид, что у них коэффициент преобразования пикселей в точки, например, 3х, но на самом деле он 2,61х, а сам исходник для удобства масштабируется в 3х.Это то, что делает, например, iPhone Plus. Он сжимает интерфейс, созданный с разрешением 1242x2208, до разрешения экрана 1080x1920.
Дизайн для iPhone Plus такой же, как если бы он был 3x. Телефон сам масштабирует его до 87% Поскольку графика уменьшена лишь незначительно (87%), результат по-прежнему выглядит прилично — линия толщиной 1 пиксель на экране с почти 3-кратным увеличением по-прежнему выглядит невероятно четкой.
И есть шанс, что в будущем Apple представит настоящий 3х iPhone Plus, поскольку необходимые аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.
Приемлем ли этот подход нецелочисленного масштабирования? Все проверено на практике.
Неужели результат такого масштабирования совершенно незаметен? Многие устройства Android также прибегают к масштабированию, чтобы соответствовать более стандартному соотношению пикселей к точкам, но, к сожалению, некоторые из них делают это не очень хорошо.
Такое масштабирование нежелательно, поскольку все, что вы хотите сделать резким, станет размытым из-за интерполяции.
К сожалению, когда плотность пикселей достигает 4x и выше, размытие, вызванное нецелочисленным масштабированием, становится гораздо менее заметным, поэтому я прогнозирую, что производители устройств со временем будут все чаще использовать этот подход. Мы можем только надеяться, что недостатки производительности сдержат их.
Восприятие масштаба
Должна ли кнопка быть одинакового размера на разных устройствах? Ответ зависит от точность метода ввода (сенсор или курсор); физические размеры экрана; расстояние до экрана.Последние два фактора идут рука об руку, потому что у планшетов экраны больше, чем у смартфонов, и мы держим их подальше от себя.
Есть еще ноутбуки, настольные компьютеры, телевизоры — расстояние между глазами и экраном увеличивается с размером последнего.
Вот менее драматичный и очень верный пример: значки приложений на планшете должны быть крупнее таких же значков на телефоне.
Это реализуется двумя способами: с использованием меньшей плотности пикселей или других размеров значков.
Низкая плотность пикселей
Большие экраны, на которые мы смотрим издалека, обычно имеют меньшую плотность пикселей.Телевизор может иметь 40 пикселей на дюйм — и, как правило, этого достаточно.
Плотность пикселей дисплеев Retina на iPad составляет около 264 пикселей на дюйм; на iPhone — 326 пикселей на дюйм.
Поскольку пиксели на iPad больше (и менее плотные), весь интерфейс становится немного больше.
Это связано с дополнительным расстоянием между глазами пользователя и экраном iPad.
Различные размеры
Иногда низкой плотности пикселей недостаточно — отдельные элементы дизайна должны быть еще крупнее.Так произошло с иконками на iPad. На iPhone они имеют размер 60х60 пикселей, но экран на iPad больше, поэтому значки размером 76х76 пикселей более практичны.
Изменение размера элементов интерфейса для разных устройств — дополнительная работа для дизайнера.
Похожие материалы
Мы только что обсудили массу проблем, с которыми сталкиваются дизайнеры.К счастью, при проектировании интерфейсов используются единицы измерения, независимые от плотности (например, pt или dp).
Список ресурсов по этой теме: Показатели устройства Google — список характеристик для устройств всех типов (Android, iOS, macOS, Windows).
Размеры экрана, плотность пикселей и даже примерное расстояние, на котором экран находится от глаз пользователя.
Шаблоны Иконки приложений Bjango. Эти шаблоны (доступны всем основным редакторам дизайна) полезны как в практическом смысле, так и для справки по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone. Управление по DPI и PPI. Подробное руководство от дизайнера Себастьяна Габриэля, которое описывает еще больше деталей и практических приемов для дизайнеров Android и iOS. Есть ли еще некоторый Ресурсы по плотности пикселей для дизайнеров.
-
Пристли, Джозеф
19 Oct, 24 -
О Протоколах Передачи Данных
19 Oct, 24
