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

Разрешение экрана и плотность пикселей:

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

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

• 240 х 320. Данное разрешение дисплея наиболее часто используется в устройствах с очень маленькими экранами, или же в бюджетных телефонах (которые отмирают).
• 320 х 480. Это разрешение также чаще всего получают телефоны с маленькими экранами, как правило, до четырех дюймов.
• 480 х 800 (WVGA). Еще несколько лет назад именно это разрешение применялось в устройствах высокого класса, таких как Samsung Galaxy S2. Теперь же, это разрешение характерно для смартфонов среднего и бюджетного классов, которые имеют дисплей менее пяти дюймов.
• 960 х 540 (qHD). Раньше подобное разрешение использовалось в высококлассных устройствах. А сейчас им обладают телефоны среднего класса.
• 1280 х 720 (HD/720р). На сегодняшний день это разрешение экрана характерно для смартфонов высокого класса. Иногда встречаются бюджетные телефоны и планшеты с таким же разрешением.
• 1920 х 1080 (Full HD/1080р). Как правило, такое высокое разрешение применяется при создании современных телевизоров. В этом году все чаще стали появляться еще и смартфоны/планшеты с Full HD дисплеями. Однако Full HD экран в настоящее время можно найти исключительно на мощных смартфонах и планшетах.
• 2560 х 1600 (WQXGA). Как вы сами наверняка понимаете, это супер высокое разрешение дисплея. Поддерживать его могут только самые мощные устройства. Например, планшет Nexus 10 получил именно такое разрешение экрана.

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

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

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

Что такое LCD-дисплей?

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

TFT-дисплеи:

А это самый популярный тип ЖК-дисплеев, который расшифровывается, как Thin Film Transistor, т.е. тонкопленочный транзистор. Он содержит активную матрицу, которая собственно и управляет транзистором. А транзистор, в свою очередь, отвечает за «включение и выключение» каждого пикселя. Это улучшает время реакции и обеспечивает больший контраст изображения. Причем другие типы ЖК-дисплеев этого сделать не могут, но являются более дорогими и потребляющими значительно большее количество энергии.

IPS-дисплеи:

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

Super LCD дисплеи:

Несмотря на то, что создателем первых технологий Super LCD экранов является компания Samsung, эти дисплеи чаще всего использует HTC. Данная технология способна устранить блики, при этом такой экран потребляет небольшое количество заряда аккумулятора, а находясь на открытом воздухе, пользователю не придется напрягать свои глаза, чтобы увидеть изображение на экране. Super LCD-дисплей обеспечивает отличную видимость на улице, нежели это могут сделать обычные жидкокристаллические экраны.

Последняя версия экрана Super LCD под названием LCD3 потребляет еще меньшее количество энергии, чем все предыдущие версии. Такой тип дисплея уже получили смартфоны HTC Butterfly, HTC Droid DNA, HTC One.

Что такое OLED-дисплей?

Аббревиатура OLED расшифровывается, как Organic Light-Emitting Diode, а сам OLED-дисплей состоит из органического полимера. Как только появляется доступ к энергии, полимер загорается, и, соответственно, включается экран. У OLED-дисплея есть множество преимуществ, по сравнению с LCD-экранами, потому что он тоньше, ярче, потребляет меньше энергии и обеспечивает широкие углы обзора. При этом увеличивается контрастность и время реакции.

Самый популярный тип OLED-дисплеев – это AMOLED экраны. AMOLED можно расшифровать, как Active Matrix Organic Light-Emitting Diode. Эти дисплеи потребляют намного меньше энергии, чем стандартные экраны OLED.

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

Samsung иногда устанавливает матрицы PenTile на различные типы экранов AMOLED. При этом используется два субпикселя, в каждом из которых применяется технология RGBG (красный – зеленый – синий - зеленый) для красивого воспроизведения цветов, вместо стандартной модели RGB (красный – зеленый - синий). Некоторые критикуют матрицу PenTile, говоря, что она не придает экрану нужной четкости, но большинство пользователей соглашаются с тем, что при более высокой плотности пикселей, отсутствует какая-либо размытость. PenTile-матрица используется для увеличения срока службы дисплея.

AMOLED против LCD-дисплеев: что лучше выбрать?

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

AMOLED-дисплеи считаются более экономичными, а LCD-экраны потребляют меньшее количество заряда батареи во время просмотра веб-страниц. Кроме этого, одной из положительных сторон AMOLED-дисплеев являются широкие углы обзора, а вот LCD-экраны позволяют даже при низком разрешении создавать довольно качественную картинку, поскольку в их основе лежит технология RGB вместо PenTile RGBG.

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

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

10.09.2012

Apple никогда не пыталась быть в тренде. Она всегда эти тренды создавала, и за ней шли и покупатели и конкуренты. Одним интересным, с моей точки зрения, трендом пары последних лет стало значение ppi (Pixel Per Inch) – количество точек на дюйм дисплея. Показатель, информирующий о четкости изображения, превратился в манию.

Перед тем как делать выводы и оценивать перспективы, давайте вернемся в прошлое и посмотрим, какой плотностью пикселей обладали дисплеи прошлого. Тогда на этот параметр никто не обращал внимания, поэтому это вдвойне интересно.
Отбросим дисплеи с ЭЛТ, и начнем с первых ЖК. Типовым размером первых моделей были 15 дюймов, и разрешение 1024 на 768. Плотность в данном случае будет около 85 точек на дюйм. Затем появились 17 и 19 дюймовые модели с разрешением 1280 на 1024, у них ppi оказался равен 96 и 86 точкам. Редкие 22 дюймовые панели того времени радовали разрешением 1600 на 1200 и плотностью в 91 пиксель на дюйм.

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

Все домашние решения лежат в пределах от 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.

Повальное увлечение уплотнением пикселей и созданием дисплеев с еще более высокими значениями 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.

То есть, 330 точек на дюйм – оптимум для смартфонов, планшетов, электронных книг. Это и возьмем за точку отсчета – расстояние просмотра – 50 сантиметров, и плотность 330 пикселей на дюйм. С таким подходом, оптимальным разрешением для 10.1-дюймового планшета будет 2800 на 1800 точек. Как видите, iPad пока не дотягивает слегка. Зато среди смартфонов такое решение уже есть – iPhone 4 и 4S, их плотность как раз составляет 330 точек на дюйм.

Что касается телевизоров, то здесь стоит учитывать, что их просмотр проводится с расстояния от 2.5 метров – это в пять раз больше чем при использовании смартфонов и планшетов, как следствие – плотность пикселей там может быть в пять раз ниже, при сохранении той же четкости изображения. То есть, этим устройствам вполне хватит плотности в 66 точек на дюйм. Теперь высчитываем идеальные соотношения разрешений и диагоналей. Унылые 1366 на 768 точек будут вполне прилично смотреться только на 23-дюймовых дисплеях. Современное FullHD будет радовать кристальной четкостью на телевизорах с диагональю 32 дюйма. Такой же четкости, но при разрешении 4Kx2K, можно добиться уже на дисплеях с диагональю до 65 дюймов!

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

Что такое 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.

Буквально везде можно услышать о DPI и PPI, какие они все такие важные и нужные, даже использовать нужно умудряться все и сразу. О, да, и в веб-дизайне обязательно, а иначе, ну, какой же ты веб-мастер?! Но что на самом деле означают спецификации размера и как веб-дизайнер может их использовать? Нужно ли вообще обращать внимание на это или достаточно только использовать настройки по умолчанию?

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

В этом материале мы поговорим о DPI и PPI более подробно и на примерах, чтобы разобраться, когда и в каких случаях веб-дизайнеру стоит обращать на них внимание. Сразу оговоримся, что статья может показаться «сухой» и скучной, но мы уверены, интересные моменты вы в ней найдете. Как ни странно, но значения PPI могут и не могут влиять на дизайн и на изображения , даже на сторонние файлы PSD и копируемые данные. А еще ведь существует PPI монитора. И представьте, что все это связано. В конце мы подведем итог и обобщим все умозаключения.

Пиксели и PPI

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

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

Веб-стандарт для изображений составляет 72 пикселя на дюйм. При таком значении изображения выглядят красиво, если они изначально имеют хорошее качество (не искажены, четкие). Имейте в виду, что ваша фотография всегда должна иметь полный размер и быть широкой, чтобы полностью заполнять рамки и границы размещения. Например, большое изображение в шапке страницы Facebook. Изображение должно обладать шириной 851 пикселей. Чтобы предотвратить пикселезацию при разрешении в 72 пикселя на дюйм ширина вашей готовой картинки должны быть почти на 12 дюймов шире.

Сравните разницу.

И

Удивительно, но на текст PPI тоже имеет свое влияние. Аналогично тому, как большое количество пикселей на дюйм делает фотографию более четкой, текст тоже становится удобочитаемым. Шрифты с высоким PPI легче воспринимать, они разборчивее, даже если буквы созданы маленьким размером. Иными словами, текст может четким и нечетким, точно также как и фотографии.

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

Одновременно с важностью PPI для интернета, для печати данные значения мало что могут сделать полезного. Для спецификаций печати более уместно использовать точки на дюйм или DPI.

Точки и DPI

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

Но в обыденности, зачастую, люди используют DPI для обозначения любого разрешения и путают с PPI. Если же вы работаете с проектом, непредназначенным для печати, то путаницы и проблем с DPI быть не должно. Если же создаете логотип, который будет использоваться и в печати (визитки, бланки и пр.) и на сайте, то необходимо создавать качественные изображения изначально. Создавайте копию изображения с высоким DPI, которое будет предназначаться исключительно для печати.

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

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

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

Мегапиксели

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

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

Цифры в веб-дизайне

У пикселя нет размера, значения, смысла вне его представления в математике. Он только связующее звено между физическим размером экрана (дюймы), экранным разрешением (пиксель на дюйм) и пиксельным размером экрана (пиксели). Обычные десктопные экраны (не Retina) обычно имеют PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере.

Общая формула расчета и вычисления изменения размеров в зависимости от разрешения и размеров выглядит так:

Вот вам пример: экран монитора LG w2253tq 22 дюйма располагает PPI = 102, что означает, что он отображает 102 пикселя на дюйм экранной площади. Ширина самого экрана примерно 18,8 дюймов, так что 18,8*102 приблизительно 1920, что и формирует родное разрешение экрана в 1920х1080 рх.

Нашли удобный калькулятор PPI мониторов, думаем, пригодится вам.

Например, вы нарисовали синий квадрат размером 102х102px на экране с PPI 102.

Этот квадрат будет иметь физический размер 1х1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма (грубо округлили) экранного пространства, чтобы отобразить квадрат со стороной в 100 пикселей. По формуле выше это рассчитывается легко и быстро.

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

Интересен еще один момент

Что будет, если менять значение PPI в Photoshop и создавать проекты под PPI 100 или 120. Дело в том, что цифровой контент изначально измеряется в пикселях вне зависимости от значения PPI. На дизайн PPI не имеет влияние, как таковое. Именно поэтому при необходимости увеличения изображений используются множители.

В Photoshop создаем новый документ и выбираем PPI 72. Создаем квадрат 102х102 пикселя и текст 14 пунктов.

Затем аналогично создаем квадрат и текст в документе с PPI 102.

Сравниваем, что получилось. Текст во втором случае (родном для монитора) стал крупнее, а квадрат остался тем же самым, он не изменился. Дело в том, что Photoshop автоматически масштабирует значение пунктов в соответствии с PPI документа. Вот и получилось увеличение размера текста при рендеринге.

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

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

Есть еще вариант, если у вас несколько разных PSD с разными настройками в файлах PPI . Что произойдет в Photoshop? Приложение автоматически настроит размеры элементов пропорционально вашему экрану и значениям PPI. То же самое будет, если вы работаете с макетом сайта в разрешении 72 PPI, а логотип вставляете из документа 100 PPI. Изображение будет изменено автоматически и это может вызвать проблемы.

Решение, впрочем, есть. Изначально работайте в общепринятом разрешении 72 PPI. Это настройка по умолчанию в Photoshop. Но если вам говорят клиенты или знакомые/друзья, что с макетом как-то не так всё, подумайте, а как они открывают его и какие у них настройки приложения.

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

Выводы

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

PPI играет важную роль в веб-дизайне, поскольку влияет на изображения и на соотношение элементов. С одной стороны, фотографии могут быть размытыми или четкими, с другой, размерность может изменяться, если она изначально не выражалась в пикселях. Если вы хотите, чтобы весь дизайн выглядел превосходно, то используйте только значения вашего родного монитора или значения по умолчанию. Пиксели не любят полумер. Не существует полпикселя или полтора пикселя. Есть один или два, поэтому точность важна, прежде всего. А добиться её можно только при работе с родными для вас параметрами.

Другой момент в том, что многие пользователи сами изменяют разрешение страницы сайта, чтобы было комфортнее читать/смотреть. Тут уже дизайн сайта может выглядеть удручающе плохо и неказисто. Но сделать навряд ли что-то можно, поскольку посетителям важно удобство. Поэтому помните, что разрешение файлов принято использовать в 72 PPI. Это сэкономит больше места на сервере. Файлы изображений будут небольшими и загружаться быстрее станут. И хотя они будут меньше оригинальных фотографий, в большинстве же случаев, на экране пользователей они будут больше, поскольку PPI мониторов у всех разный и преимущественно 100+ PPI.