Мегафон

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

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

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

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

Cодержание:

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

Рассматриваемое понятие расшифровывается как 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. Такие аппараты всегда будут лучше, чем .

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

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

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

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

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

Еще пару лет назад плотность пикселей в 500 ppi казалось чем-то невероятным. Больше того, еще год назад смартфоны с QHD-экраном были очень большой редкостью. Однако время не стоит на месте, и устройства с разрешением 1440 x 2560 пикселей постепенно наполняют рынок. Так давайте посмотрим, какой смартфон сможет выбрать себе пользователь, если он предпочитает сверхкачественные экраны.

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


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

Prime

Несмотря на то, что первая версия смартфона Samsung Galaxy S5 имела дисплей с разрешением 1920 на 1080 пикселей, спустя некоторое время и, кроме более мощного процессора, установила 5,1-дюймовый QHD-экран. Таким образом, плотность пикселей составила 576 ppi. Кроме высококачественного экрана, смартфон имеет в своем арсенале процессор Snapdragon 805 с графикой Adreno 420, и 3 гигабайта оперативной памяти.

LG G3

Еще одна корейская компания LG также установила в свой экран с разрешением 2560 на 1440 точек. Однако диагональ экрана в G3 немного больше, чем в Galaxy S5 Prime и составляет 5,5 дюйма, а значит, плотность пикселей достигла 538 ppi. Таким образом, G3 занимает второе место в нашем рейтинге.

Смартфон от делит второе место с LG G3. В Find 7 установлена также матрица с разрешением 2560 на 1440 пикселей диагональю 5,5 дюйма. Кроме того, устройство из Китая оснащено процессором Snapdragon 801 и 13-мегапиксельной камерой.

Последним в нашем сегодняшнем списке идет один из самых новых смартфонов от компании Samsung. Речь идет о , который получил дисплей с разрешением QHD и диагональю 5,7 дюймов. Плотность пикселей, таким образом, составила 515 ppi. Кроме большого качественного экрана, Galaxy Note 4 может похвастаться мощным процессором Snapdragon 805, 16-мегапиксельной камерой и наличием многофункционального стилуса S-Pen.


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

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

Плотность пикселей – почему это не так важно!

Значение PPI определяет количество пикселей на один дюйм экрана устройства. Более высокие значения делают картинку более четкой, читаемой и качественной.

Как PPI влияет на качество изображения

Когда Apple представила миру iPhone 4, в нем использовался революционный на тот момент дисплей «Retina», качество изображения на котором могло сравниться с качеством картинки в глянцевых журналах (300 DPI). Тогда компания наглядно показала всему миру, что высокие разрешения на экране смартфона не какая-то сказка, я самая настоящая реальность.

На данный момент, самое высокое значение DPI (dots per inch – количество точек на дюйм) у дисплея смартфона Sony Xperia Z5 Premium. Его 5,5-дюймовый экран имеет поддержку 4К разрешения (2160 х 3840) и плотность пикселей 806 PPI.

Среди смартфонов Xiaomi, хорошее разрешение можно найти у Mi Mix (1080×2040 пикселей), (1080×2160 Full HD+) и Mi Note Pro (2560×1440 Quad HD).

Первые исследования и текущая реальность

Если раньше Apple заявляла, что 326 PPI будет достаточно и более высокие разрешения на маленьком дисплее портативного устройства станут попросту невостребованными. То теперь, глядя на дисплей нового iPhone X, с его 458 PPI, становится ясно, что Apple решила больше не следовать этой философии.

Будем откровенны. Среднестатистический пользователь невооружённым взглядом заметит разницу между 300 и 500 PPI в том случае, если будет держать экран своего телефона на расстоянии вытянутой ладони от своих глаз.

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

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

Несмотря на это, приведём некоторые значимые аргументы, в пользу экранов с высоким PPI.

Преимущества дисплеев с высоким PPI

На дисплеях Full HD+, Quad-HD и 4K намного приятнее читать текст. Такой дисплей выдает более высокий уровень яркости, качественный контраст и более глубокая цветопередача.

Высокое разрешение позволяет использовать более широкий цветовой диапазон. Гамма при этом выглядит более естественной.

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

Смартфоны Xiaomi (Сяоми) с поддержкой FullHD:

  • Mi Note 3
  • Mi A1
  • Mi Max 2
  • Mi Max
  • Mi 5 / 5s / 5s Plus / 5c
  • Mi 4 / 4s / 4c / 4i
  • Redmi Note 4 / 4x
  • Redmi 4 Prime
  • Redmi Note 3 / Note 2
  • Redmi Pro
  • Mi Note

Вывод

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

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

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой 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.

Все современные дисплеи которые производятся сегодня, состоят из цветных пикселей, и чем они мельче тем четче получаемая картинка при одинаковых размерах дисплея. Плотность пикселей как правило измеряется в PPI - что расшифровывается как pixel per inch. Чем больше данное значение в характеристиках дисплея, тем детальнее выводимая картинка.

Так же, часто PPI имеется виду и DPI что означает dots per inch (точек на дюйм), но данный термин применяется в бумажной печати. Как правило, в бумажной печати используется стандартное разрешение в 300 DPI, которого достаточно для качественной картинки, еще иногда используется и разрешение 266 DPI, которое сохраняет оптимальную четкость изображения. Чаще всего в разрешении 300 DPI печатаются в глянцевых журналах, книгах, или в постерах. При такой , большинство людей никогда не увидят отдельных точек, разве что если рассматривать лупой. Газеты как правило используют разрешение значительно ниже, примерно 170 DPI.

Не смотря на то что эта цифра почти в два раза ниже чем у глянцевых журналах, текст остается идеально читабельным. Некоторые газеты используют даже 10-20 точек на дюйм, и текст все равно остается хорошо читаемым.Смартфоны, планшеты и дисплеи компьютеров как правило находятся на схожем расстоянии что и газета или журнал, и плотность в радиусе 150 - 300 является самым оптимальным. Нужно знать еще тот факт, что в устройствах размер экрана влияет на плотность пикселей, таким образом при одинаковом разрешении в 768 на 1280 пикселей 4.5 дюймовый дисплей будет иметь 332 точек на дюйм, а 10 дюймовый дисплей всего 150 точек, но по аналогии с газетой, он остается отлично читаемым для человеческого глаза.

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

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

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

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

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

Высокая плотность (350 и выше) имеет смысл для планшета - если вы имеете профессию связанную с графикой или фотографией, для смартфона же большой разницы нет. Разница конечно будет отличаться от дисплея с 500ppi по сравнению с 320, но она не будет настолько критична, из за чего будет невозможно нормально делать привычные операции.