Подробно о плотности пикселей в дизайне мобильных интерфейсов. Важна ли высокая плотность пикселей на дисплее смартфона

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

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

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

Теоретическая страничка и расчеты

Рассматриваемое понятие расшифровывается как pixels per inch, то есть количество пикселей на дюйм. Произносится также как пи-пи-ай.

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

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

• dp – диагональное разрешение;
• di – размер диагонали, дюймов;
• Wp – ширина;
• Hp – высота.

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

Рис. 1. Ширина, высота и размер диагонали на мониторе

Чтобы показать, как используются все эти формулы, возьмем для примера монитор с диагональю 20 дюймов и разрешением 1280х720 (HD).

Таким образом Wp будет равным 1280, Hp – 720, а Di – 20. Благодаря наличию этих данных мы можем рассчитать пи-пи-ай. Сначала используем формулу (2).

А теперь применим эти данные для формулы (2).

Примечание: На самом деле у нас получилось 73,4 пикс., но нецелого числа пикселей быть не может, используются только целые значения величины.
Точно таким же образом можно рассчитать реальные значения количества пикселей на дюйм в любом устройстве.

Чтобы понять, сколько это в сантиметрах, более привычной величине для нашей местности, нужно поделить получившееся число на 2,54 (в одном дюйме именно столько сантиметров). Таким образом, в нашем примере это 73/2,54=28 пикс. в сантиметре.

В нашем примере это 73, а 25,4/73=0,3. То есть размер каждого пикселя равен 0,3х0,3 мм.

Это хорошо или плохо?

Разберемся вместе.

Важна ли эта величина

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

Чем выше величина показателя, тем более четкое изображение получит юзер.

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

Рис. 2. Разница при показателях меньше и больше

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

Найти показатель в характеристиках того же смартфона обычно просто. Обычно она содержится в разделе «Дисплей». Пример можно видеть на рисунке 3.

Рис. 3. Показатель в характеристиках смартфона

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

Плюсы и минусы

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

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

На рисунке №2 фото слева имеет 30 ppi, а фотография справа – 300. Ниже еще один подобный пример.

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

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

Таким образом мы плавно перешли к теме выбора.

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

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

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.

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

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

У планшетов она должна быть еще выше, так как их диагональ больше, чем у телефонов

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

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

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

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

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

Итоги

ppi или пи-пи-ай – это плотность пикселей или показатель пикселей в дюйме изображения. Чтобы перевести показатель в сантиметры, нужно поделить его на 2,54. Нецелого количества быть не может, только целое.

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

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

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

Что такое ppi

Говоря простым языком - любое растровое изображение состоит из пикселов - цветных прямоугольных точек. Уточним, что растровое изображение - это изображение, по структуре своей представляющее сетку пикселей на мониторе компьютера. Популярные растровые форматы - psd , tiff , png , bmp или jpg - редактирование которых возможно в среде специализированного ПО, наподобие Adobe PhotoShop . Растровых форматов, разумеется, намного больше перечисленных, но для понимания того, о чем идет речь, приведенных форматов будет вполне достаточно.

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

Для примера возьмем полоску из 1000 таких квадратиков (пикселей). На одном конце будет черный квадратик на другом белый. Между ними будут находится квадратики разных оттенков. Каждый квадратик с удалением от серного и приближения к белому будет чуть светлее предыдущего. При большом увеличении мы конечно будем видеть, что все квадратики разного оттенка. Но при отдалении возникнет иллюзия плавного перетекания цвета или градиент.

Поскольку изображение имеет не только длину, но ширину, заполняя плоскость, то величина ppi показывает сколько квадратиков (пикселей) приходится на сторону условной единицы измерения. За единицу измерения пикселей в растровых изображениях за стандарт принят один дюйм. Следовательно, маркировка в 100 ppi говорит нам о том, что на один дюйм приходится 100 пикселов. В квадратном же дюйме пикселов при таком разрешении графического изображения будет 10000 (100х100). Повторимся, что цвет квадратного дюйма может быть каким угодно. Цвет же одного пиксела только один.

Что такое lpi

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

Проблему нанесения объема краски на конкретных участках печатники решили с присущей им изящностью. Они попросту осуществляют регулировку площади закрашиваемой поверхности в конкретном месте на бумаге. При таком подходе даже с одинаковой толщиной нанесенного слоя краски можно регулировать яркость путем увеличения или уменьшения напечатанных точек. Этот процесс называется растрированием.

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

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

Видя у принтера в настройках величину lpi вы должны понимать, что ни на что, кроме как на количество растровых точек в дюйме, она не влияет. Для более полного понимания различий между ppi и lpi стоит сказать, что самая маленькая часть изображения на компьютере – пиксель. Самая маленькая часть изображения на бумаге - точка.

В принципе, эти показатели должны совпадать при печати изображения. Однако, зачастую дизайнеры совершают не то что бы ошибку… Просто они сдают макет в печать, который в разы превышает технические возможности печатного оборудования. Наиболее распространенным разрешением изображения у дизайнеров является 300 ppi. Они приносят проект с таким разрешением в газету. Но при печати газет применяется растрирование максимум в 100 lpi. В итоге мы получаем что исходный файл мог бы быть в 9 раз меньше.

Что такое dpi

Теперь разберемся с величиной dpi. Эта величина применяется только к растрирующему печатному устройству. На самом деле, точки, из которых складывается показатель lpi, в свою очередь состоят из более мелких точек. Ряд этих мельчайших точек, равен одному проходу лазера на фото-барабане или пленке. Получается, что для изображения одного lpi используется множество dpi.

Понятно, что чем выше отношение lpi к dpi тем более высокого качества печать мы получим на выходе. Здесь опять срабатывает эффект мозаики. Чем меньше ее кусочки, тем более точной и детальной она становится. Так же и dpi влияет на lpi, чем больше маленьких точек будет использовано для создания большой точки растра, тем более точной будет эта точки. Изображения высокого разрешения при печати могут использовать соотношения от 150 lpi 2540 dpi и выше. Что касается печати газет, то там достаточно соотношения 100 lpi 1200 dpi.

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

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

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

Чтобы поддерживать тот же физический размер пользовательского интерфейса, пиксельные размерности удвоились. Кнопка, которая ранее занимала 44px, сейчас стала занимать 88px. Для совместимости между разными устройствами, дизайнеры должны выпускать графику (по типу иконок) в “1x” и в новом формате “2x”. Но тут возникла еще одна проблема: вы не можете больше сказать: “Привет, эта кнопка должна быть 44 пикселя в высоту”, потому что она должна быть также 88 пикселей на другом устройстве. Раньше не было единицы измерения, не зависимой от пикселя. Решением стали “точки” (points), или “pt”. 1 точка соответствует 1 пикселю на экранах до поколения retina и 2 пикселям на экране retina в 2х. Точки позволяют сказать: “привет, эта кнопка должна быть 44 точки в высоту”, и потом любое устройство может адаптировать этот размер под свой коэффициент плотности пикселей… как 1х или 2х. Или же 3х в случае с iPhone 6 Plus.

PT и DP

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

Возможно, вас интересует физический размер точки. На самом деле, UI-дизайнерам не особо это важно, потому что у нас нет никакого контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно просто знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке дизайнов в 1x, 2x, 3x и прочих нужных коэффициентах. Но если вам реально любопытно, знайте, что в Apple нет постоянной конверсии между дюймами и точками. Другими словами, нет единой плотности пикселей, которая представляет 1 точку – это зависит от конкретного устройства (посмотрите раздел “Восприятие масштаба” ниже). В iOS точка варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.

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

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

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

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

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

Макеты для стандартных размеров iPhone должны быть 375×667, а не 750×1334, это как раз то разрешение, в котором оно будет отображаться. Большинство инструментов дизайна не отличают точки от пикселей (Flinto – исключение из этой тенденции), так что дизайнеры могут притвориться, что точки это и есть пиксели, а затем просто экспортировать исходники в 2х- и 3х-кратном размерах.

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

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

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

(Брюс Вонг написал об экране iPhone 6 Plus).

Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не очень качественно. Масштабирование такого плана нежелательно, так как все, что вы хотите сделать четким и pixel-perfect в одном масштабе, станет размытым из-за интерполяции (например, линия в 1px становится 1.15 пикселей). Даже если вы не фанатичны в подгонке идеальных пикселей, как я, нет смысла отрицать, что элементы дизайна должны быть целопиксельными, чтобы на вид быть четкими, как задумано
К сожалению, по мере того, как плотность пикселей доходит до 4х и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат!

Восприятие масштаба вашими глазами

Давайте на минуту отложим все эти плотности пикселей и рассмотрим вопрос: должна ли кнопка быть одного и того же физического размера на разных устройствах? Конечно, мы просто используем кнопку, как пример, но мы бы могли рассматривать и иконку, и текст, и панель инструментов. Должны ли эти элементы быть одного размера на всех устройствах? Ответ зависит:

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

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

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

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

Более низкая плотность пикселей

Более крупные экраны, которые мы используем на расстоянии, обычно располагают меньшей пиксельной плотностью. Телевизор может иметь разрешение в 40 пикселей на дюйм! Для обычного телепросмотра это вполне допустимо. Экран retina в iPad имеет разрешение около 264ppi, а экран retina на iPhone – 326ppi. Так как пиксели на iPad больше (экран менее плотный), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.

Разные размеры

Но, время от времени, использования более низкой плотности пикселей недостаточно… отдельные элементы дизайна должны быть еще больше. Это случилось и с иконками на iPad. На iPhone они 60×60 пикселей, но более крупный экран iPad дает больше пространства, так что практичнее иконки размером 76×76.

Изменение размеров под разные устройства прибавляет работы дизайнерам. Это один из нескольких сценариев, когда устройства Apple требуют больше размеров, чем устройства Android! К счастью, это не совсем типичный случай для иконок приложений.

Санитарная проверка?

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

Важные ресурсы

Google Device Metrics : Впечатляющий список спецификаций для устройств всех типов (Android, iOS, Mac, Windows и т.д.). Узнайте размеры экрана, плотность пикселей и даже примерное расстояние, на котором экран расположен от глаз пользователя. ScreenSiz.es – похожий ресурс.

: Эти шаблоны дизайна (доступные для всех главных дизайн-редакторов) очень полезны, как в практическом смысле, так и для справок по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone и т.д.

Руководство дизайнера по DPI и PPI : Подробное руководство Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.

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

Развязала новую гонку, как это принято в последнее десятилетие, компания Apple. Первый смартфон iPhone 4 с экраном повышенной чёткости представил в июне 2010 года ещё сам Стив Джобс. Это был довольно небольшой по нынешним меркам 3,5-дюймовый дисплей, получивший при этом аппаратное разрешение 960х640 точек. Ширина одного пикселя на таком экране составила всего 78 мкм, а плотность точек – 326 пикселей на дюйм (128 пикселей на см). Для сравнения: плотность пикселей в экране обычного смартфона – около 160 ppi, а в компьютерных мониторах и вовсе меньше сотни.

Новый экран был торжественно назван Retina display – от английского слова, означающего «сетчатка глаза», чему было дано красивое объяснение: некие исследования показали, что человек не способен различить невооружённым глазом отдельные точки при плотности выше 300 ppi на расстоянии 10-12 дюймов, то есть примерно 25-30 см. На таком расстоянии от глаз обычно держат мобильные телефоны, поэтому было выбрано именно это значение, чуть больше 300 ppi.

Разумеется, сразу же нашлись желающие оспорить результаты этих анонимных исследований. Так, известный американский популяризатор науки и астроном Филипп Плейт заявил, что если у вас острое зрение, то вы легко различите отдельные пиксели на таком экране и с 30 см, но при этом для обычного человека эти точки заметны не будут.

Между тем эксперт по качеству изображения и президент компании DisplayMate Technolоgies Реймонд Сонейра заметил, что реальное разрешение Retina display значительно ниже разрешающей способности сетчатки глаза. Дело в том, что разрешение в значительной степени зависит от того, под каким углом мы смотрим на объект. Для человека с идеальным зрением разрешающая способность глаза составляет около 0,6 угловой минуты, то есть 0,01 градуса. Это означает, что два отдельных объекта, находящиеся на расстоянии более 5730 футов, или 1,75 км, будут восприниматься как одна точка. Исходя из этого, Сонейра заключил, что если мы смотрим на смартфон на расстоянии 30 см, то разрешающая способность нашего глаза достигает 477 ppi, а если приближаем до 20 см, то и все 716 ppi. Чтобы получить 318 ppi, нужно отнести телефон на расстояние 45 см.

Сонейра не учёл одного: в реальности людей с идеальным зрением не так уж и много, и разрешающая способность сетчатки среднестатистического человека с нормальным зрением – порядка 1 угловой минуты. Сделав соответствующую поправку, мы и получим заветные 300 ppi – значение, которое можно вывести несложными подсчётами, а вовсе не какими-то мифическими исследованиями, о которых говорил Джобс.

Поскольку разрешающая способность глаз зависит от расстояния, на котором мы наблюдаем объект, чтобы добиться эффекта «безпиксельной» картинки в экранах разных устройств, требуется разная плотность точек. Поэтому 9,7-дюймовый Retina Display планшета iPad имеет меньшую плотность 264 ppi (105 пикселей на см), а 15- и 13-дюймовые экраны ноутбуков MacBook Pro – 220 ppi (87 пикселей на см) и 227 ppi (89 пикселей на см).

Джобс был прав в главном: для того чтобы перестать различать пиксели на экране самого близко подносимого к глазам гаджета – смартфона, достаточно плотности чуть большей, чем 300 ppi. Но курок уже был спущен, и масса компаний ввязалась в не имеющую даже теоретического смысла гонку за повышение плотности пикселей экрана. Главное – обогнать Apple, а есть в этом толк или нет, дело десятое.

В результате мы уже получили массу курьёзных изделий, при взгляде на которые не знаешь, плакать или смеяться. Японская Sharp одной из первых выпустила для внешних рынков смартфон с пятидюймовым экраном Full HD: при разрешении 1920х1080 плотность пикселей дисплея SH930W составляет 440 ppi. Аналогичный по характеристикам (а может, и попросту точно такой же) экран – у HTC J Butterfly. Цифры впечатляют, но, во-первых, малопонятно, зачем карманному устройству вообще разрешение Full HD на пятидюймовом экране, а во-вторых, портить глаза, вглядываясь в мельчайшие детали, можно и на менее высокотехнологичных устройствах.

Разрешение десятидюймового экрана нового планшета Google Nexus 10 ещё больше: 2560х1600 точек. То есть такое же, как у настольного монитора с диагональю 27-30 дюймов. Плотность точек при этом составляет 300 пикселей на дюйм. Означает ли это, что в Google предлагают смотреть в дисплей этого планшета с расстояния 25-30 дюймов? Вы когда-нибудь пробовали смотреть 50-дюймовый телевизор с полутора метров? Ощущения примерно те же.

Апогей безумия – прототип 9,6-дюймового экрана, разработанный японской компанией Ortus Technology. Его разрешение – 3840х2160 точек, что в точности соответствует перспективному телевизионному стандарту Ultra HD, или 4K, который предусматривает отображение в четыре раза больше точек, чем привычный Full HD. Плотность пикселей у этого экрана – 485 точек.

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

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

Программная проблема напрямую связана с главным требованием к электронному устройству – удобством его использования. И если, как показывает практика, гаджеты под управлением Android без особого труда справляются с масштабированием пользовательского интерфейса и приложений под повышенное разрешение, то у техники на Windows, как ни странно, с этим возникают большие проблемы.

К примеру, у планшета Samsung Slate 7, оснащённого 11,6-дюймовым экраном с разрешением 1366х768 точек и довольно скромной плотностью пикселей 135 ppi, невозможно оптимальным образом настроить пользовательский интерфейс под управлением Windows 7: либо его элементы выглядят слишком мелкими, либо края окон скрываются за границами дисплея. И это штатный интерфейс операционной системы! Чего уж говорить о приложениях третьих фирм, разработчики которых не особенно задумываются над масштабированием под разные разрешения: многие из них рассчитаны на 96 ppi, и ни пикселем больше! И даже в Windows 8, где, как хвастались в Microsoft, проблема с интерфейсом практически решена, она всё так же актуальна, как и проблема с приложениями сторонних разработчиков, окна которых приходится разглядывать под увеличительным стеклом.

Так или иначе, старт дан, и мы становимся свидетелями очередной гонки за красивыми числами, смысла в которых не больше, чем в полётах со стерхами. Остаётся надеяться, что у ввязавшихся в это сомнительное мероприятие компаний появятся какие-то действительно полезные разработки и технологические прорывы. Иначе мы снова рискуем получить никому не нужные 20-мегапиксельные «мыльницы» с мутной пластмассовой оптикой.

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

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.

В видео затронуто большинство тем статьи, но если вы заинтересованы в подробностях, - продолжайте читать

Плотность пикселей - это количество пикселей, вмещающееся в определенном физическом размере (обычно, в дюйме). На первом компьютере 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.

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

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

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

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

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

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

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

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

Создавайте дизайн под iPhone Plus так, как если бы он был 3x. Телефон сам отмасштабирует его в 87%

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

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

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

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

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

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

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

Низкая плотность пикселей

Крупные экраны, на которые мы смотрим на расстоянии, обычно располагают меньшей пиксельной плотностью. У телевизора может быть 40 пикселей на дюйм - и, как правило, этого хватает. Плотность пикселей Retina-дисплеев на iPad составляет около 264 ppi; на iPhone - 326 ppi. Так как пиксели на iPad больше (а плотность меньше), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.