Что такое плотность пикселей и как её учитывать при проектировании мобильных интерфейсов

Плотность пикселей — это количество пикселей, вмещающееся в определенном физическом размере (обычно, в дюйме). На первом компьютере Mac было 72 пикселя на дюйм, — число кажется большим, но на самом деле это были огромные пиксели, под которые подходила не каждая графика.

Иконки на компьютере Macintosh 1984 года. Дизайнер Сьюзан Каре
С тех времен технологии экранов заметно продвинулись вперед, — сейчас даже самые простые дисплеи имеют разрешение между 115 и 160 пикселей на дюйм (PPI— pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с Retina-дисплеем — суперчетким экраном, удвоившим количество пикселей на дюйм. В результате графика стала четче, чем когда-либо.

Разница особенно хорошо заметна в иконке приложения почты и в тексте

Чтобы поддерживать те же физические размеры элементов пользовательского интерфейса, пришлось увеличить количество пикселей на дюйм. Кнопка, которая раньше занимала 44px, стала занимать 88px.

Для совместимости между разными устройствами дизайнеры должны выпускать графику для обычных дисплеев и для Retina-дисплеев. Но тут возникла еще одна проблема: теперь дизайнер не может сказать, что какой-то элемент должен быть, например, 44 пикселя в высоту, потому что на другом устройстве этот же элемент должен быть в два раза выше.

Решением стали пункты (points), или pt. Один пункт соответствует одному пикселю на экранах до поколения Retina и двум пикселям на экранах с Retina. Теперь, если дизайнеру говорят, что высота какого-либо элемента — 44 пикселя, он может адаптировать этот размер под любой коэффициент плотности пикселей — 1х, 2х или 3х в случае с iPhone 6 Plus.

PT и DP

Конечно, это все актуально не только для устройств Apple. Каждая операционная система — десктопная или мобильная — поддерживает экраны с высоким ppi/dpi. В Google придумали свою независимую от пикселей единицу измерения для Android, которая называется DIP — пиксель, не зависящий от плотности, сокращенно «dp». Это не эквивалент пунктам в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x и так далее).

Возможно, вас интересует физический размер пункта. На самом деле, дизайнеры интерфейсов не должны об этом думать, так как у них нет контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов в 1x, 2x, 3x и так далее.

В устройствах Apple нет единой плотности пикселей, которая представляет один пункт — это зависит от конкретного устройства (см. «Восприятие масштаба» ниже). В iOS пункт варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.

Понятие «HiDPI»[ | ]

Поддержка высокой плотности пикселей (маркетинговый термин — HiDPI) для прикладной программы — сложная задача. В частности, разработчик прикладной программы (и интерфейсного фреймворка наподобие VCL или ) должен:

• Сообщить ОС, что обходные методы (например, механическое масштабирование, введённое в Windows Vista) нужно отключить.
• Уточнить компоновку окон.
• Растровые изображения впрямую не масштабируются. В зависимости от PPI, назначения картинок и дизайна программы нужно подменить их на более качественные, механически увеличить или ничего не делать и смириться, что картинки будут выглядеть уменьшенно.
• Если программа пользуется визуальными компонентами собственного изготовления — нужно нарисовать и их в увеличенном виде.
• Бывает, что в многомониторной системе один монитор новый с высоким PPI, второй — старый. В Windows 10 попытались решить этот вопрос, задавая разные PPI для разных мониторов, но это требует и поддержки со стороны прикладного ПО.

Поскольку выяснилось, что часто разработчик программы заявляет, что программа поддерживает HiDPI, но не может это слово сдержать (или наоборот, как в µTorrent — поддерживает HiDPI, но не заявляет системе), в Windows 10 в настройках ярлыка появляется ручное задание метода масштабирования.

Контролируемый хаос

На ранних порах развития мобильных устройств с высоким разрешением плотность пикселей была просто 1х или 2х. Но сейчас все иначе — есть масса пиксельных плотностей, которые должен поддерживать интерфейс. В Android есть отличный пример: на момент написания этого поста разные производители поддерживают шесть разных плотностей пикселей. Это означает, что иконка, которая имеет одинаковый размер на всех экранах, на самом деле должна быть выполнена в шести разных вариациях. Для Apple актуально два или три разных исходника.

Вывод

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

Источники

• https://MonitorVsem.ru/lajf-hak/piksel
• https://AndroidLime.ru/what-is-ppi
• https://fps-up.ru/monitor/chto-takoe-plotnost-pikselej-i-kolichestvo-na-dyujm-ppi
• https://voprosoff.net/1978/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-ppi-%D0%B8-%D0%BA%D0%B0%D0%BA%D0%B8%D0%BC-%D0%BE%D0%BD%D0%BE-%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE-%D0%B1%D1%8B%D1%82%D1%8C
• https://sravnismart.ru/ppi/
• https://pomogaemkompu.temaretik.com/1879045553371482940/chto-takoe-ppi-ili-naskolko-vazhna-plotnost-pikselej/?comment=1881188554165193790&single
• https://xiaomishka.ru/vazhna-li-vysokaya-plotnost-pikselej-na-displee-smartfona
• https://geek-nose.com/ppi-chto-eto/

Дизайн в векторе

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

Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.

Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 — это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.

На что влияет плотность пикселей?

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

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

А на самом деле эта характеристика является одной из главных при выборе.

Мы расскажем вам какое значение этого понятия на самом деле (ведь в интернете можно найти множество мифов по этому вопросу). Поехали!

Притворяйся, пока это не станет правдой

Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.

Создавайте дизайн под iPhone Plus так, как если бы он был 3x. Телефон сам отмасштабирует его в 87%
Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно — линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.

Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не слишком качественно.

Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.

Как измерить PPI?

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

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

• Здесь ω — ширина экрана в пикселях (например, 1920 для Full HD);
• h — высота экрана в пикселях (1080 для Full HD);
• d — диагональ дисплея в дюймах.

Например, у стандартного офисного 21.5-дюймового монитора с разрешением Full HD плотность пикселей составит 102.5 PPI, а телефон с диагональю 5 дюймов и HD-разрешением может похвастаться уже 293 PPI.

Восприятие масштаба

Должна ли кнопка быть одинакового размера на разных устройствах? Ответ зависит от

• точности метода ввода (сенсор или курсор);
• физических размеров экрана;
• расстояния до экрана.

Последние два фактора идут рука об руку, потому что у планшетов большие экраны по сравнению со смартфонами, и мы держим его дальше от себя. Еще есть ноутбуки, настольные компьютеры, телевизоры — расстояние между глазами и экраном увеличивается вместе с размером последнего.

Кнопка на экране телевизора должна быть размером с телефон — потому что иначе ее нельзя будет увидеть, сидя на диване.

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

О выборе дисплеев

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

1Обязательно обращайте внимание на тип дисплея. В приоритете должны быть AMOLED, еще лучше SuperAMOLED или же OLED. Такие аппараты всегда будут лучше, чем IPS, LCD и другие. Допустим, мы пришли в магазин и видим, к примеру, два отличных аппарата – Samsung Galaxy J7 и Xiaomi Redmi Note 3. Цена у них практически одинаковая, второй аппарат, кстати, мощнее.

В характеристиках указано, что у Сяоми 400 ppi (почему-то некоторые пишут 400,53, но, как мы говорили выше, нецелого числа пикс. быть не может).

У Самсунга 267 PPI и разрешение, соответственно, меньше (1280х720 против 1920х1080). Диагональ одинаковая – 5,5 дюймов.

Но почему-то картинка более четкая именно на Samsung. А все из-за использования фирменной технологии SuperAMOLED+. Вы можете в этом убедиться сами, если обратите внимание на рисунок 5.

Рис. 5. Xiaomi Redmi Note 3 и Samsung Galaxy J7

2Постарайтесь найти возможность лично посмотреть на все образцы, которые вы выбрали. Можно сначала просмотреть их опции в интернете, а потом пойти в магазин электроники и увидеть, как реально они отображают картинки. Личный взгляд в данном случае просто незаменим.

3Обращайте внимание на батарею. Если говорить о смартфонах, то чтобы обеспечить долгую работу аппарата с четким изображением (большим показателем ppi и/или хорошей технологией), то емкость аккумулятора должна составлять порядка 3000 мАч. У планшетов она должна быть еще выше, так как их диагональ больше, чем у телефонов

4Помните: чем меньше диагональ и чем выше плотность пикселей (количество таковых на дюйм), тем четче изображение. Не стоит обманывать самих себя – добиться очень четкой картинки с огромным дисплеем и небольшим значением пи-пи-ай не получится. Здесь важно соблюдать золотую середину.

5Важно учитывать и покрытие. Так матовые экраны будут выдавать менее четкое и насыщенное изображение, зато будут более щадяще относиться к вашим глазам. А вот глянцевые дисплеи будут негативно влиять за зрение, зато изображение на них будет намного более красивым. При этом значение ppi у них может быть одинаковым.

Это, в основном, актуально для выбора мониторов к ПК и ноутбуков. Если вы работаете за компьютером полный рабочий день или даже больше, лучше остановиться на матовом варианте.

Рис. 6. Глянцевый (слева) и матовый (справа) экраны ноутбуков

Все это позволит вам выбрать наиболее подходящий дисплей для себя.

Материалы по теме

Мы только что обсудили массу сложностей, с которыми сталкиваются дизайнеры. К счастью, в разработке интерфейсов используются единицы, которые не зависят от плотности (как pt или dp).

Список ресурсов по данной теме:

• Google Device Metrics — список спецификаций для устройств всех типов (Android, iOS, macOS, Windows). Размеры экранов, плотность пикселей и даже примерное расстояние, на котором экран расположен от глаз пользователя.
• Шаблоны иконок приложений Bjango. Эти шаблоны (доступные всем главным дизайн-редакторам) полезны как в практическом смысле, так и для справок по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone.
• Руководство по DPI и PPI. Подробное руководство дизайнера Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.

Есть еще некоторые ресурсы по пиксельной плотности для дизайнеров.

Стандарт зрения

Обычно острота зрения человека измеряет при помощи теста Снеллена, который был изобретен в 1860 году в медицинских целях. Важно отметить, что по этой системе офтальмолог пытался выявить слабое зрение, которое является медицинской проблемой. Ни один пациент никогда не жаловался на остроту зрения выше среднего.

Значит, острота зрения 20/20 вовсе не является идеальной. Этот показатель означает нормальное зрение, при котором человек может прочитать таблицу на расстоянии 3 метров.

Стандартные разрешения мониторов

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

Разрешение 720p

Другие названия: HD, HD Ready, Standard HD

Разрешение 720p или 1280×720 – это разрешение монитора прогрессивного стиля. Это самое низкое из разрешений, поддерживающих HD, и оно используется всеми распространенными вещательными компаниями HDTV.

Разрешение 1080p

Другие названия: Full HD, FHD
1080p или 1920×1080 – это разрешение монитора без чересстрочной развертки, которое позиционируется как первое разрешение, в котором полностью используются все возможности HD. 1080p в настоящее время является стандартным разрешением для телевидения, потоковых интернет-сервисов, видеоигр и смартфонов.

Разрешение 1440p

Другие названия: 2K, WQHD, QHD
Разрешение 1440p – это прогрессивное разрешение, содержащее 2560×1440 пикселей. 1440p, известный как «Quad HD», в 4 раза «сильнее», чем базовый вариант HD. 1440p не получил широкого распространения, но его можно найти в сфере смартфонов, в том числе от таких известных компаний, как HTC, Samsung, ViewSonic и Apple.

Разрешение 4K

Другие названия: UHD, Ultra HD, 4K UHD
Разрешение 4K так называется из-за количества пикселей по горизонтали – 3840×2160. Разрешение 4K также имеет в 4 раза больше пикселей, чем 1080p. Хотя с 2014 года доля рынка разрешения 4K увеличивалась, до сих пор его внедрение ограничивается техническими возможностями существующих устройств и каналов связи.

Разрешение 8K

Другие названия: 8K UHD
Разрешение 8K составляет 7680×4320 пикселей и в настоящее время является самым высоким разрешением монитора, доступным на рынке. Эта технология настолько нова, что коммерчески доступные телевизоры 8K UHD и программы вещания только сейчас получают распространение.