Дизайнер Питер Ноуэлл в своем блоге написал о плотности пикселей в дизайне мобильных приложений - объяснил, что это такое и рассказал о проблемах, с которыми сталкиваются дизайнеры, проектируя интерфейсы для разных устройств.
Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой 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.
10.09.2012
Apple никогда не пыталась быть в тренде. Она всегда эти тренды создавала, и за ней шли и покупатели и конкуренты. Одним интересным, с моей точки зрения, трендом пары последних лет стало значение ppi (Pixel Per Inch) – количество точек на дюйм дисплея. Показатель, информирующий о четкости изображения, превратился в манию.
Количество пикселей на дюйм действительно очень важный показатель, который говорит о том, насколько четким будет изображение на дисплее. Чем больше это значение, тем менее различимы будут пиксели невооруженным взглядом, и соответственно, тем менее заметны будут ступеньки на наклонных линиях изображения. В абсолюте – чем больше точек на дюйм, тем лучше. Хотя, беспредельно увеличивать плотность пикселей, уменьшая их размер, не удастся – технологические ограничения имеются, но до них еще очень далеко. Совсем другой вопрос – нужны ли нам дисплеи со столь высоким ppi?
Перед тем как делать выводы и оценивать перспективы, давайте вернемся в прошлое и посмотрим, какой плотностью пикселей обладали дисплеи прошлого. Тогда на этот параметр никто не обращал внимания, поэтому это вдвойне интересно.
Отбросим дисплеи с ЭЛТ, и начнем с первых ЖК. Типовым размером первых моделей были 15 дюймов, и разрешение 1024 на 768. Плотность в данном случае будет около 85 точек на дюйм. Затем появились 17 и 19 дюймовые модели с разрешением 1280 на 1024, у них ppi оказался равен 96 и 86 точкам. Редкие 22 дюймовые панели того времени радовали разрешением 1600 на 1200 и плотностью в 91 пиксель на дюйм.
Как видите, все диагонали обладали близкой плотностью, которая считалась достаточной. При этом, думаю никто не будет спорить, что пиксели в таких дисплеях видны, и "лесенки" на шрифтах очень даже различимы. Но это никого не волновало, кроме разработчиков видеокарт, которые в борьбе с пресловутыми лесенками в течение многих лет разрабатывали и улучшали технологии сглаживания, которые позволяли замаскировать этот эффект.
Современные домашние мониторы имеют чуть большую плотность пикселей – и все благодаря моде на Full HD. Например, 21.5 дюймовый монитор с разрешением 1920 на 1080 радует 102 ppi. А дисплей ноутбука ASUS при диагонали 11.1 дюйма и разрешении 1366 на 768 характеризует плотность в 141 пиксель на дюйм. Более или менее доступных по разумной цене решений в ряде мониторов для компьютеров или ноутбуков с большей плотностью пикселей найти, скорее всего, не удастся.
Все домашние решения лежат в пределах от 100 до 140 ppi. В телевизорах ситуация еще хуже. Например, плотность пикселей у 32 дюймового телевизора с разрешением Full HD составляет 69 точек на дюйм, у 40 дюймового с тем же разрешением всего 55 точек. А уж о больших диагоналях и говорить страшно. Например, 55 дюймовая панель порадует плотность в 40 ppi.
Зато телефоны и планшеты благодаря Apple стали лидерами в плотности пикселей. Первые iPhone, как и его конкуренты был не самым четким по сегодняшним меркам, обладая при диагонали в 3.5 дюйма разрешением 320 на 480 точек, и как результат плотностью в 165 точек на дюйм. Чуть позже, без особого шума появился первый смартфон Sony Ericsson Xperia X1, который обладал 3 дюймовым дисплеем с разрешением 480 на 800 пикселей, и соответственно плотностью 311 ppi. Но Sony не смогла правильно "подать" такую высокую четкость покупателю, а вот Apple идею подметила, подсуетилась, и выпустила iPhone 4 с дисплеем высокой четкости, который характеризуется разрешением 640 на 960 при диагонали 3,5 дюйма. 330 точек на дюйм этой модели телефона, под ярким маркетинговым названием Retina Display мгновенно завоевали любовь покупателей. Именно с этого момента всех стало интересовать значение ppi. Сама Apple на волне успеха подогнала под Retina и новое поколения iPad, разрешение дисплея которого составило 2048 на 1536 при диагонали в 9,7 дюйма. Его значение ppi равно 264 точки на дюйм, что хоть и меньше чем у iPhone текущего поколения, зато в два раза больше чем у iPad 2 и заметно больше чем у большинства конкурентов, дисплеи которых при схожих размерах диагонали имели разрешение не более 1280 на 800.
Впрочем, к чести конкурентов, они довольно быстро наверстали отставание, заметно увеличив разрешение дисплеев своих устройств. В частности Samsung Galaxy Nexus может похвастать разрешением 1280 на 720 своего 4.65 дюймового дисплея, плотность пикселей которого составляет 316 ppi. А дисплей планшета ASUS Transformer Pad Infinity имеет разрешение 1920 на 1200 при диагонали 10,1 дюйма, что дает 224 ppi. Но что самое интересное, на этом они не остановились…
Повальное увлечение уплотнением пикселей и созданием дисплеев с еще более высокими значениями PPI охватило практически всех производителей. Это уже даже не работа на улучшение характеристик, а соревнование. LG анонсирует 5 дюймовый дисплей с Full HD разрешением, и ppi а уровне 440 точек. Toshiba отвечает дисплеем с диагональю 6.1 дюйма, разрешением 2560 на 1600 точек, что соответствует плотности в 495 точек на дюйм. Ну а лидером пока является консорциум Japan Display, который недавно анонсировал 2.3 дюймовый дисплейчик с разрешением 1280 на 800 точек. Его плотность равна 651 ppi. Потрясающе! Но нужны ли дисплеи с такой высокой плотностью пикселей?
С одной стороны – хуже от этого дисплеи точно не становятся – ведь кашу маслом не испортишь. С другой стороны, у огромных разрешений небольших диагоналей есть недостатки. Главным недостатком из всех можно считать значительный рост нагрузки на графические карты. Для десктопных компьютеров это не очень критично – видеокарты с огромным энергопотреблением на этом рынке норма. Да и повышение разрешения позволит отказаться от тяжелого режима со сглаживанием, так как "лесенки" с которым он призван бороться станут практически незаметны. А вот для мобильных устройств значительное увеличение количества пикселей наносит сильнейший удар по времени автономной работы. Мало того, что видеокарта трудится в поте лица дабы отрисовать такое изображение, что требует значительных затрат энергии, так еще и сам дисплей при увеличении кол-ва пикселей становится более прожорливым. Так что здесь нужно соблюдать паритет между желаниями разработчика и возможностями.
Но дело не только в этом – зачем усложнять производство и делать более дорогие продукты, если высочайшая плотность пикселей просто не нужна в некоторых устройствах. Например, телевизор с диагональю 32 дюйма установленный на расстоянии более трех метров, не позволяет разглядеть разницы в четкости изображения при разрешениях HD и FullHD, при этом плотность пикселей в них разниться заметно – 49 ppi и 69 ppi, соответственно. Причина в том, что с такого расстояния, мы не можем разглядеть отдельных точек – наш глаз просто физически не может их различить. А если мы сделаем телевизор такой же диагонали с грядущим разрешением 4Kx2K? При разрешении 3840 на 2160 мы получим плотность в 138 ppi, которая находится на уровне современных дисплеев для ноутбуков и десктопных компьютеров. Работать с таких монитором с расстояния 70-100 сантиметров будет очень удобно, но с такого расстояния телевизор никто не смотрит! А человек сидящий в трех метрах от устройства вновь не увидит разницы телевизора с 4Kx2K и FullHD.
Вывод из этого достаточно прост – бессмысленное увеличение количества пикселей на дюйм совершенно не улучшит объективные ощущения от дисплеев. Здесь важен баланс – расстояние просмотра/плотность пикселей. За точку отсчета можно условно принять то соотношение что принято в типографском деле – 300 точек на дюйм. Такая плотность позволяет нам не замечать пикселизации на журнальных фото. Однако краска при нанесении на бумагу немного растекается, что улучшает восприятие. А потому оптимальной плотностью пикселей у дисплеев стоит принять 330 точек на дюйм. И это в том случае, если устройство вы располагаете на том же расстоянии, что и газету или журнал. Здесь стоит оговорится, что речь дальше пойдет не об минимально требуемых разрешениях и плотности, а наоборот, о тех что нужны для получения идеального изображения, схожего по четкости с той же фотографией отпечатанной в глянцевом журнале, ну или изображением на экране последнего iPhone.
То есть, 330 точек на дюйм – оптимум для смартфонов, планшетов, электронных книг. Это и возьмем за точку отсчета – расстояние просмотра – 50 сантиметров, и плотность 330 пикселей на дюйм. С таким подходом, оптимальным разрешением для 10.1-дюймового планшета будет 2800 на 1800 точек. Как видите, iPad пока не дотягивает слегка. Зато среди смартфонов такое решение уже есть – iPhone 4 и 4S, их плотность как раз составляет 330 точек на дюйм.
Мониторам и телевизорам такая плотность уже не нужна, в силу того, что их просмотр проводится с большего расстояния. После несложных вычислений, получаем оптимальный результат для домашних мониторов, которые в среднем находятся на расстоянии одного метра. Учитывая, что при удвоении расстояния просмотра требуется в два раза меньшая плотность – оптимальным ppi для них станет 165 точек на дюйм. То есть разрешение 4Kx2K (которое составляет 3840 на 2160 точек) будет оптимальным для 27-дюймовых мониторов. А привычное в наше время FullHD оптимально смотрится только на 13.3-дюймовых дисплеях. Ну а разрешение 2800 на 1800 точек будет в самый раз 20-дюймовым мониторам.
Что касается телевизоров, то здесь стоит учитывать, что их просмотр проводится с расстояния от 2.5 метров – это в пять раз больше чем при использовании смартфонов и планшетов, как следствие – плотность пикселей там может быть в пять раз ниже, при сохранении той же четкости изображения. То есть, этим устройствам вполне хватит плотности в 66 точек на дюйм. Теперь высчитываем идеальные соотношения разрешений и диагоналей. Унылые 1366 на 768 точек будут вполне прилично смотреться только на 23-дюймовых дисплеях. Современное FullHD будет радовать кристальной четкостью на телевизорах с диагональю 32 дюйма. Такой же четкости, но при разрешении 4Kx2K, можно добиться уже на дисплеях с диагональю до 65 дюймов!
PPI это сокращение от английского «pixels per inch», буквально означает количество пикселей на дюйм. Естественно, чем больше это значение, тем выше плотность пикселей, сами пиксели при этом меньше по размеру, что в результате дает более четкую картинку на экране смартфона (и экране любого другого устройства – планшета, монитора, телевизора и так далее). При маленьких значениях PPI вы можете увидеть отдельные пиксели на экране, изображение будет зернистым, что не очень комфортно для глаз. Обычно телефоны с маленьким значением PPI - это бюджетные модели.
Полная формула расчета PPI выглядит так: необходимо извлечь квадратный корень от суммы квадратов количества пикселей по высоте и ширине, и после разделить полученный результат на диагональ экрана в дюймах. То есть формула будет такая:
Посчитаем на примере iPhone 7, его разрешение составляется 1334 на 750 пикселей, а диагональ экрана 4.7 дюйма, то есть:
- 1334 в квадрате = 1779556;
- 750 в квадрате = 562500;
- Сумма квадратов, 1779556 562500 = 2342056;
- Извлекаем квадратный корень из 2342056 = 1530.378;
- Делим полученное значение на 4.7 = 325.6123;
- Округляем значение и получаем цифру 326. Это и есть PPI для iPhone 7.
Какое значение PPI должно быть в телефоне
Не стоит гнаться за самым большим значением PPI. На рынке есть модели смартфонов со значением PPI более 400, и даже с более чем 500. Но проблема в том, что человеческий глаз не видит разницы при повышении значения PPI более 300. Конечно, при желании, вы сможете рассмотреть пиксели вблизи, но при обычном использовании, на расстоянии 20-25 см от глаз, экран будет очень комфортным. К тому же, обработка очень высоких разрешений, накладывает свой отпечаток на время работы телефона.
Еще пару лет назад плотность пикселей в 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.
На днях компания Samsung Galaxy S8 и Galaxy S8+, особенностью которых стал «безграничный» экран. Дисплей практически лишился рамок, получил высокое разрешение 2960×1440 точек и плотность пикселей 570/529 PPI соответственно. В феврале на международной выставке MWC 2017 бренд LG анонсировал смартфон с аналогичным разрешением и плотностью 564 PPI , а Sony - аппарат с 4K-экраном (3840×2160 пикселей, 806 PPI ). Очевидно, что будущее за дисплеями с высоким разрешением.
При выборе смартфона многие обращают внимание на разрешение экрана, а вот плотность пикселей зачастую остается в стороне. Учитывая развитие экранных технологий и разработок в области виртуальной реальности, значение ppi также играет большую роль в качестве дисплея.
Что такое PPI?
Сокращение PPI происходит от Pixel Per Inch (пикселей на дюйм) и используется для описания плотности пикселей во всех видах дисплеев, включая камеры, компьютеры, мобильные устройства и т. д. Плотность пикселей может быть показателем четкости экрана, но при этом необходимо учитывать другие аспекты: его физические размеры и расстояние до глаз.
Если вы придвинете экран ближе к глазам, вы сможете разглядеть пиксели. Если устройство находится на большом расстоянии от вас, высокая плотность пикселей не будет особо ощущаться. Таким образом, чем больше дисплей, тем меньше значение PPI.
Стандарт зрения
Обычно острота зрения человека измеряет при помощи теста Снеллена, который был изобретен в 1860 году в медицинских целях. Важно отметить, что по этой системе офтальмолог пытался выявить слабое зрение, которое является медицинской проблемой. Ни один пациент никогда не жаловался на остроту зрения выше среднего.
Значит, острота зрения 20/20 вовсе не является идеальной. Этот показатель означает нормальное зрение, при котором человек может прочитать таблицу на расстоянии 3 метров.
Миф о 300 ppi
Существует миф о том, что человек не может различать пиксели при плотности 300 ppi. В 2010 году Стив Джобс использовал это утверждение во время презентации iPhone 4, оснащенного инновационным на тот момент Retina-дисплеем с 326 ppi. Отчасти это соответствует действительности, но только для тех пользователей, у которых острота зрения 20/20.
Согласно различным исследованиям, человеческий глаз может различать пиксели при плотности до 900-1000 ppi.
На что влияет плотность пикселей?
Чем выше плотность пикселей, тем более четкое изображение вы будете видеть на экране. Если раньше это не имело особого значения, то с наступлением эры виртуальной и дополненной реальности ситуация постепенно меняется. Едва ли вам захочется в режиме виртуальной реальности видеть вокруг себя пиксельную картинку. Чем выше разрешение и плотность пикселей, тем реальнее изображение. Причем это может быть заметно не только при использовании гарнитуры виртуальной реальности, но и при просмотре фильмов.
