При покупке техники многие сталкивались с одной из характеристик под аббревиатурой PPI. Этот параметр крайне важен при выборе монитора или телефона, а также других устройств с дисплеем. Он является одним из основных маркетинговых пунктов.
Что такое PPI и как его рассчитать
PPI, или Pixels Per Inch, — это единица измерения разрешения экрана . Произносится, как ПИ-ПИ-АЙ, на русском иногда пишут ППИ, что не совсем верно. В переводе с английского означает «пиксели на дюйм». Это их плотность размещенная в одном дюйме, который равен 2,54 сантиметрам. При выборе любого устройства с дисплеем следует обратить внимание на значение параметра, потому что чем он выше, тем реалистичнее будет картинка.
На примере иконки приложения смартфона или телефона можно увидеть разницу между меньшим значением и большим.
В компьютерной графике качество изображения измеряется количеством пикселей на дюйм, а в полиграфии в дюйм должна вмещаться капля чернил. Этот параметр обозначается как DPI – Dots Per Inch. Меньший параметр дает наиболее четкую картинку, в отличие от PPI.
Рассчитать плотность пикселей не слишком сложно. Для этого достаточно знать теорему Пифагора. Для примера можно взять монитор, где Wp – это ширина, Hp – высота, а диагональ в дюймах – di.
Для начала нужно рассчитать разрешение
диагонали d p , с помощью школьного курса геометрии:
В итоге получается общее число пикселей на мониторе. Чтобы узнать PPI, необходимо полученное значение разделить на диагональ устройства, воспользовавшись формулой:
Результат получается в дюймах, но для нашей страны привычнее сантиметр. Чтобы узнать количество пикселей на 1 см, получившееся число делится на 2,54.
Также для расчета PPI можно использовать онлайн сервисы, например, 7pads.com .
В чем важность показателя
Показатель важен, поскольку его значение влияет на четкость картинки , передаваемой дисплеем или монитором. Также многое зависит от физического размера самого экрана. Если поднести дисплей близко к глазам, то можно различить пиксели. А если монитор далеко от глаз, то зернистость будет не сильно ощутима. Например, с большой дистанции разницу между 2К и 4К разрешением заметить непросто.
Видимые пиксели представляют собой кубики
, на которые неприятно смотреть. На картинках ниже разница очевидна.
В тех случаях, когда работать нужно с графикой или выполнять другие задачи, где требуется вывод большого количества информации, и когда монитор находится прямо перед глазами, дисплеями с высокой плотностью комфортнее и эффективнее пользоваться.
Достоинства и недостатки
Преимущество высокой плотности параметра заключается в реалистичной картинке на которую приятно смотреть и не приходится напрягать зрение. Но в большом показателе PPI есть и недостатки. В первую очередь, это касается смартфонов и планшетов, а также других устройств, работающих от аккумулятора. Дело в том, что четкое разрешение требует большого ресурса батареи , поэтому работа мобильных гаджетов даже в автономном режиме не будет долгой без подзарядки. Но для телевизоров или персональных компьютеров это не является проблемой, так как они постоянно включены в розетку.
Влияние плотности пикселей на выбор устройства
Для выбора устройства необходимо лично ознакомиться с передаваемым изображением, чтобы понять подходит ли оно. Но иногда гаджеты заказывают через интернет, в этом случае стоит внимательно ознакомиться с характеристиками девайса. Обратить внимание следует на вкладку «Дисплей
», где указана диагональ, разрешение и значение PPI.
Так как качество изображения влияет на работу аккумулятора, емкость батареи немаловажна. Чтобы обеспечить стабильную и долгую работу устройства, она должна быть не менее , чем 3000 мА*ч.
Следует запомнить важную закономерность: чем меньше диагональ и выше плотность пикселей, тем изображение четче. Даже если дисплей огромный, но с низким показателем PPI, хорошей картинки добиться будет невозможно.
Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс-DPI и кросс-платформенном дизайне с самых азов.
Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.
Что такое DPI и PPI
DPI или Dots Per Inch (точек на дюйм) - это величина измерения плотности точек, изначально используемая в печати. Это количество чернильных точек, которое ваш принтер может поместить в одном дюйме. Чем меньше DPI, тем менее детализированная печать.
Это понятие применяется также и для компьютерных экранов под названием PPI или Pixels Per Inch (пикселей на дюйм). Тут такой же принцип: величина подсчитывает количество пикселей, которое ваш экран способен отобразить на 1 дюйме. Термин DPI также используется и для описания характеристик экрана.
Компьютеры Windows по умолчанию имеют PPI=96. В Mac используется PPI=72. Эти значения были обусловлены тем, что производимые тогда экраны отображали 72 «точки» или пикселя на дюйм. Так было в 80-х, а сейчас устройства на Windows, Mac и прочих платформах имеют множество вариаций PPI-разрешения экранов.
Разрешение, пиксель и физический размер
Спросить кого-то, каков размер пикселя, - это отличный способ смутить человека каверзностью вопроса. У пикселя нет размера, нет физического значения или смысла вне его математического представления. Это часть связи между физическим размером экрана , выраженным в дюймах, и разрешением экрана , выраженным в пикселях на дюйм, а также пиксельным размером экрана , выраженным в пикселях. В общих чертах это выглядит вот так:
Обычные декстопные экраны не-retina (включая Mac) будут иметь PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере везде.
Вот вам пример:
Экран Mac Cinema Display 27» располагает PPI = 109, что означает, что он отображает 109 пикселей на дюйме экранной площади. Ширина с фасками составляет 25.7 дюймов (65 см). Ширина самого экрана примерно 23.5 дюймов, так что 23.5*109~2560, что и формирует родное разрешение экрана в 2560x1440px.
*Я знаю, что 23.5*109 на самом деле не равно 2560. На самом деле это будет 23.486238532 дюймов. Более точный результат получится при подсчете пикселей на каждый сантиметр, но, надеюсь, вы уловили суть.
Влияние на ваш дизайн
Скажем, вы нарисовали синий квадрат размером 109*109px на экране, о котором мы только что говорили.
Этот квадрат будет иметь физический размер 1*1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма экранного пространства, чтобы отобразить квадрат со стороной в 109 пикселей. Посмотрите симуляцию этого эффекта ниже:
Не обращая внимания на разницу в цвете и разрешении, помните, что каждый будет видеть ваш дизайн по-разному. Вашей целью должен быть поиск лучшего компромисса, покрывающего наибольший процент пользователей. Не надейтесь, что у каждого пользователя будет такой же экран, как у вас.
Разрешение экрана (и родное разрешение)
Разрешение экрана может существенно влиять на то, как пользователь воспринимает ваш дизайн. Так как на смену CRT-мониторам пришли LCD, пользователи теперь имеют родное разрешение, которое гарантирует хорошее соотношение размера и PPI.
Разрешение определяет количество пикселей, отображаемых на экране (например, 2560*1440px для дисплея cinema в 27 дюймов) - 2560 по ширине и 1440 по высоте. Конечно, теперь, когда вы знаете, что означает PPI, вы понимаете, что это не может быть единицей измерения физического размера. Изображение с таким разрешением можно растянуть как на всю стену, так и на очень небольшой экран.
Сегодня LCD-мониторы идут с предустановленным или родным разрешением, отражающим количество пикселей, которое может отобразить экран. Оно немного отличалось от старых CRT-мониторов, но так как они остались в прошлом, не будем вдаваться в детали (так я смогу скрыть и свой частичный недостаток знаний в области старых-добрых телеков).
Возьмем наш 27-дюймовый Cinema Display, который может отобразить 190 PPI на родном разрешении в 2560*1440px. Если вы сократите разрешение, элементы будут больше. Но фактически у вас будет 23.5 дюймов по горизонтали, чтобы заполнить их пикселями, правда меньшим их количеством.
Я сказал «фактически», потому что в этом случае так и будет. Экран располагает родным разрешением в 2560*1440px. Если разрешение снизится, пиксели останутся на месте, отображая 109PPI. Чтобы заполнить разрыв между этими параметрами, ваша ОС попросту начнет все растягивать. Ваш графический процессор возьмет каждый пиксель и высчитает новую пропорцию для его отображения.
Если вы зададите разрешение в 1280*720 (половину прошлой ширины, половину высоты), ваш GPU будет симулировать пиксель, вдвое больший по сравнению с прежним, чтобы заполнить экран. Какой будет результат? Ну, графика может стать размытой. Если половинчатая пропорция будет выглядеть более-менее хорошо, потому что это простой делитель, то если задать пропорцию ⅓ или ¾, вы придете к дробным значениям, а пиксель делить НЕЛЬЗЯ. Вот пример:
Посмотрите на пример ниже. Возьмите линию толщиной в 1 пиксель на экране с родным разрешением. А теперь примените разрешение на 150% меньше. Чтобы заполнить экран графикой, процессору придется генерировать графику на 150%, умножая все на 1.5. 1*1.5=1.5, но у нас нет половинчатых пикселей. В итоге крайние пиксели зальются дробным оттенком цвета, что и создаст эффект размытости.
Поэтому, если у вас есть Retina Macbook Pro, и вам нужно измерить разрешение, вам отобразится окно, показанное ниже, уведомляя вас, что выбранное разрешение будет «выглядеть, как» 1280*800px. Так система выражает пропорции размера через разрешение пользователя.
Это очень субъективное представление, потому что используется пиксельное разрешение в качестве меры физического размера, но это и не ложь, как минимум, с их точки зрения.
Вывод: Если вы хотите всегда видеть дизайн в качестве pixel-perfect, никогда не используйте разрешение, отличное от вашего родного. Да, вам может быть комфортнее с меньшей пропорцией, но когда речь заходит о пикселях, желательно быть максимально точным. К сожалению, некоторые люди используют разрешение как способ лучше видеть то, что на экране (особенно на компьютерном экране). Тут ваш дизайн тоже может выглядеть плохо, но тут пользователям важнее удобочитаемость, чем аутентичность дизайна.
Что такое 4K разрешение?
Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде. Чтобы понять, что это такое, давайте сначала разберем, что же означает «HD». Помните, что это супер-упрощенный вариант объяснения. Я просто поясню на примере самых распространенных разрешений. Есть разные категории HD.
Термин HD применим к любому разрешению, начиная с 1280x720px или 720p на 720 горизонтальных линий. Некоторые могут назвать такое разрешение SD, по стандартному определению.
Термин full HD применяется к экранам 1920x1080px. Большая часть телевизоров использует это разрешение, как и все большее количество продвинутых high-end телефонов (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).
Разрешение 4K начинается от 3840×2160 пикселей. Его также называют Quad HD, UHD от Ultra HD. Грубо говоря, вы можете вместить 4 по 1080p в 4K-дисплей по количеству пикселей.
Вторым разрешением 4K является 4096×2160. Оно немного больше, используется для проекторов и профессиональных камер.
Что случится, если я подключу 4K-дисплей к моему компьютеру
Современные операционные системы не масштабируют 4K, что означает, если вы подключите 4K-дисплей к Chromebook или macbook, будет использоваться исходник с самым большим DPI, в этом случае 200% или @2x, и отобразится в нормальной пропорции. Все будет выглядеть хорошо, но довольно мелко.
Гипотетический пример: если вы подключите дисплей размером 12″ и разрешением 4K к компьютеру 12″ с высоким разрешением (2х), все отобразится в размере вдвое меньше.
Вывод:
- 4K в 4 раза больше Full HD.
- Если ОС поддерживает 4K, но не масштабирует, значит нет специального 4K-исходника.
- На данный момент нет телефонов или планшетов с разрешением 4k.
Частота мерцания монитора
твлечемся ненадолго от PPI и разрешений экрана. Вы наверняка видели, что в настройках экрана также значится значение в Герцах (Hz). Это не имеет никакого отношения к PPI, но если вам интересно, частота мерцания монитора или частота обновления изображения- это единица измерения скорости, с которой ваш монитор будет отображать фиксированное изображение или фрейм, в секунду. Монитор с частотой 60Hz сможет отображать 60 кадров в секунду (60 fps). Монитор с частотой 120Hz - 120fps и т.д.
В контексте пользовательского интерфейса, частота мерцания монитора определит, насколько плавно и детализировано будет выглядеть ваша анимация. Большинство экранов имеют частоту 60Гц. Помните, что количество кадров, отображаемое за секунду, также зависит от процессорной и графической мощности устройства. Нет смысла адаптировать экран 120Гц под Atari 2600.
Для лучшего понимания посмотрите на пример ниже. Ти-рекс идет из точки А в точку Б в быстром и точно постоянном ритме на обоих экранах - 60 Гц и 120 Гц. Экран с частотой 60fps способен отображать 9 кадров во время аримации, а экран 120 Гц по логике вещей отобразить в два раза больше кадров за ту же единицу времени. Анимация будет гораздо плавнее на экране с частотой 120 Гц.
Вывод: Некоторые утверждают, что человеческий глаз не может улавливать частоту свыше 60fps. Это не так. Не слушайте таких умников, смейтесь им в лицо как можно более очевидно.
Что такое экран retina
Само название «Retina display» было представлено Apple в релизе iPhone 4. Экран называется Retina, потому что PPI устройства было таким высоким, что сетчатка человеческого глаза (по-англ. retina) не должна была различать пиксели на экранах.
Это утверждение справедливо для некоторых размеров экрана, но так как экраны постоянно улучшаются, наши глаза теперь натренированы достаточно, чтобы различать пиксели, особенно на закругленных элементах интерфейса.
Технически, такие экраны отображают вдвое больше пикселей в высоту и в ширину на таком же физическом размере.
iPhone 3G/S имел диагональ в 3.5 дюйма и разрешение 480*320px, что соответствует 163PPI.
Phone 4/S также имел диагональ в 3.5 дюйма и разрешение 960*640px, что соответствует 326PPI.
УХТЫ! Точно в два раза. Простой множитель. Так что, вместо того, чтобы быть меньше, элементы на экране в два раза резче, так как в них вдвое больше пикселей, и такой же физический размер. 1 нормальный пиксель = 4 пикселя retina, в четыре раза больше пикселей.
Используйте пример ниже по прямому назначению при разработке сложных дизайнов.
Примечание: довольно сложно симулировать разное качество изображения с двух устройств на третьем, т.е. на которое вы сейчас смотрите. Музыкальный плеер на retina, даже занимая такое же физическое пространство, будет смотреться вдвое четче и качественнее на iPhone 4. Если вы хотите проверить, воспользуйтесь одним из моих бесплатных примеров для демо.
Название «Retina» принадлежит Apple, так что другие компании используют вместо него «HI-DPI» или совсем никакого названия.
Вывод: Продукты Apple - это отличный способ познакомиться с конвертацией DPI, чтобы понять различия между разрешением, PPI и соотношением с физическим размером, потому что вам придется использовать всего 1 множитель.
Что такое множитель?
Множитель - это ваш математический спаситель, когда дело доходит до конвертации дизайна в разных PPI-разрешениях. Когда вы знаете множитель, вам не нужно париться о детальных спецификациях устройства.
Давайте возьмем для примера iPhone 3G и 4. У вас есть в 4 раза больше пикселей (ширина 2х и высота 2х) при том же физическом размере. Следовательно, ваш множитель равен 2. Это означает, чтобы ваши исходники были совместимы с разрешением 4G, вам нужно просто умножить размер исходников на 2, и все.
Скажем, вы создаете кнопку размером 44*44px, что является рекомендованным размером для сенсорных кнопок в iOS (мы к этому еще вернемся позже в этом посте). Назовем ее типичной кнопкой с именем «Jim.»
Чтобы наш Джим выглядел красиво на iPhone 4, вам нужно создать вдвое большую версию. Это мы и делаем здесь:
Все довольно просто. Теперь есть версия Jim.png для нормального PPI (iPhone 3) и версия [email protected] для 200% PPI (iPhone 4.)
Теперь вы скажете: «Я почти уверен, что есть и другие множители, кроме двойки». Так и есть, и тут начинается самый кошмар. Может, и не кошмар, но я уверен, что вы предпочтете провести весь день, гладя носки, вместо работы с этим бесчисленным множеством множителей. Слава Богу, это не так страшно, как кажется на первый взгляд. Мы к этому еще вернемся.
Поговорим о единицах измерения сначала, потому что вам понадобится именно условная единица, а не пиксель, для спецификаций мульти-DPI дизайнов. И тут на сцену выходят DP и PT.
Вывод: Множитель нужно знать для любого дизайна, над которым вы работаете. На множителях и держится весь этот мир хаоса, делая все эти размеры экрана, PPI и прочие размерности понятными для человека.
Что такое DP, PT и SP?
DP или PT - это единица измерения, которую можно использовать для описания макетов дизайна для множества устройств, во множестве DPI.
DP или DiP - это аббревиатура от Device independent Pixel, а PT означает Point (точка). PT относится к Apple, DP - к Android, но означают примерно то же самое.
Если вкратце, эти единицы определяют размер независимо от множителя устройства. Это очень выручает, когда нужно обсуждать спецификации с разными участниками рабочего процесса вроде дизайнера и инженера. Вернемся к примеру с кнопкой-Джимом.
Ширина Джима 44px на нормальных экранах не-retina и 88px на экранах retina. Добавим вокруг кнопки отступ в 20px, потому что Джиму нравится свободное пространство. Тогда для retina отступы будут 40px. Но считать пиксели retina совсем не имеет смысла, когда вы создаете дизайн для экранов не-retina.
Так что мы просто возьмем нормальную 100% пропорцию не-retina в качестве основы для всего.
В этом случае размер Джима будет 44*44DP или PT и отступ в 20DP или PT. Вы можете давать спецификации в любом PPI, Джим всегда будет 44*44dp или pt.
Android и iOS адаптирует этот размер к экрану и конвертирует с правильным множителем. Вот почему мне кажется проще всегда создавать дизайн в родном PPI для вашего экрана.
SP - это отдельный от DP и PT термин, но работает по такому же принципу. SP - это аббревиатура Scale-independent pixel (пиксель, независимый от масштаба). На SP будут влиять настройки шрифтов пользователя на устройстве Android. Как дизайнеру, мне задание SP кажется заданием DP для чего-то другого. базируйте его на том, что читабельно в масштабе 1х (16sp - отличный размер шрифта, например).
Вывод: Для отступов всегда используйте значения, независимые от разрешения и масштаба. Всегда. Чем разнообразнее размеры и разрешения экрана, тем важнее это становится.
Конфигурация PPI
Теперь, когда вы знаете, что такое PPI, retina и множитель, важно поговорить о том,«А что будет, если я изменю настройки PPI в моем дизайн-редакторе?»
Если вы задавали этот вопрос себе, это означает, что вы немного разбираетесь в программном обеспечении для дизайнеров. Вот то, на понимание чего у меня ушло немного времени, и это важный момент:
Любой непечатный контент использует пиксельные размерности независимо от того, какая PPI-конфигурация задана изначально.
PPI-конфигурация в ПО - это прерогатива печати. Если вы создаете дизайн под веб, PPI не будет никак влиять на размер вашего растра.
Вот почему мы используем множители, а не прямые значения PPI. Ваш канвас и графика будут всегда конвертироваться в пиксели программой, используя соответствующий множитель.
Вот пример. Вы можете попробовать самостоятельно проделать то же самое в программе с поддержкой настроек PPI, как Photoshop. Я нарисовал прямоугольник 80*80px и текст размером 16pt в photoshop с настройками 72PPI. Второй - то же самое, но с настройками на 144PPI.
Как видите, текст стал немного больше, вдвое больше, если быть точным, в то время, как квадрат не изменился. Причина в том, что программа (в данном случае Photoshop) масштабирует значения pt (как и должна) на основе значения PPI, что в результате дает удвоение размера при рендеринге текста при удвоенной конфигурации PPI. С другой стороны, то, что было определено в пикселях, т.е. синий квадрат, остается в том же размере. Пиксель - это пиксель, и останется пикселем, какой бы PPI ни задать. Изменит его только PPI экрана, который его отображает.
Важно помнить, что при дизайне для цифровых устройств PPI будет влиять только на то, как вы воспринимаете дизайн, а также на процесс его создания и на графику в размерности pt, такую как шрифты. Если вы включите в свой процесс дизайна исходники с разными значениями PPI, программа отресайзит все файлы по пропорции PPI получаемого файла. Это может стать для вас проблемой.
Решение? Используйте PPI (предпочтительно в диапазоне 72-120 для дизайна в 1x). Лично я использую 72PPI, потому что это настройка по умолчанию в Photoshop, и большинство моих коллег используют то же самое.
Вывод:
- Настройки PPI не имеют никакого влияния на экспорт под веб.
- Настройки PPI будут влиять только на графику, генерируемую на основе PPI-независимых измерений вроде PT.
- Пиксель - это единица измерения любой цифровой графики.
- Помните о множителях, а также для чего вы создаете дизайн, вместо фокуса на PPI.
- Используйте реалистичные настройки PPI при цифровом дизайне. Используйте то, что дает вам четкое представление о конечном отображении на устройстве (72-120ppi для 1x web/desktop, например).
- Используйте одно и то же PPI значение на всех файлах.
Более детально этот вопрос освещен в посте на StackExchange .
Как быть с PPI на iOS
Настало время погрузиться в дизайн под конкретные платформы.
Вспомним, какие устройства iOS вышли с начала 2014.
Когда речь заходит о размере экрана и DPI, в iOS есть 2 типа мобильных устройств и 2 типа экранов под планшет и десктопы.
В мобильной ветке у них есть iPhone и, конечно же, iPad.
В категории телефонов есть старый 3GS (до сих пор поддерживается iOS6) и выше. Только iPhone 3GS является не-retina. iPhone 5 и выше используют более длинный экран с тем же DPI, как iPhone 4 и 4s. Вот вам шпаргалка:
В сентябре 2014 был анонсирован 2014 Apple Keynote, теперь у вас есть 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus.
iPhone 6 немного больше, чем 5 (на 0.7″), но PPI тот же. iPhone 6 Plus, с другой стороны, представляет совсем новый множитель для iOS - @3x, из-за своего размера в 5.5″.
Есть что-то особенное в том, как iPhone 6 Plus работает со своим экраном по сравнению с другими моделями iPhone: Он уменьшает графику.
Когда вы, к примеру, создаете дизайн для iPhone 6, вы будете рисовать на канвасе размером 1334*750px, и телефон будет рендерить 1334*750 физических пикселей. В случае с Iphone 6 Plus, телефон имеет меньшее разрешение, чем изображение, так что нужно будет делать дизайн в разрешении 2208*1242px, а телефон уже уменьшит его до идеального размера. Посмотрите иллюстрацию ниже:
Физическое разрешение на 15% меньше, чем разрешение рендеринга, будет немного глюков вроде полупикселей, из-за чего самые мелкие детали могут быть немного размытыми. Разрешение настолько высоко, что эти недостатки будут практически незаметны, разве что если слишком придирчиво вглядываться. Так что рисуйте на канвасе 2208*1242px и помните возможные глюки для супер-крошечных деталей вроде разделителей. Посмотрите на симуляцию:
Вывод, правила Android:
- В Android есть 7 разных DPIs, вам нужно побеспокоиться о 4 из них: mdpi,hdpi,xhdpi,xxhdpi плюс один, если вы хотите создать версию на будущее, в XXXHDPI
- MDPI - это базовый DPI на множителе 1x
- Android использует dp вместо pt для спецификаций, но по сути это одно и то же
- Округляйте пиксели, полученные от десятичных множителей.
- Поставляйте исходники в.png формате.
- Выработайте единую систему названий для файлов-исходников вместе с человеком, ответственным за их внедрение.
PPI в Mac и Chrome OS
Mac (OSX) и Chrome OS ведут себя довольно одинаково в плане PPI. Обе операционные системы поддерживают стандартный PPI (100%) и более высокие разрешения, включая retina (200%). Как и в случае с моделями iPhone и iPad, здесь используется только множитель 2x.
Даже если большинство ваших пользователей, как Mac, так и Chrome OS, будут сидеть на устройствах с низким разрешением, я очень рекомендую подготавливать и версии экранов в высоком разрешении. Исходники для будущих версий Chrome OS включают файлы в высоком разрешении. Поверьте, это не будет пустой тратой времени.
Сейчас всего три ноутбука используют это PPI - Macbook pro 13″, 15″ и Chromebook Pixel. Вдобавок, Chromebook Pixe еще и сенсорный.
Требуемые исходники, пример Chrome
Идеальный пример этого сходства - исходники кнопки тулбара Chrome. Мы используем одни и те же кнопки в обеих платформах. Если код и отличается, то графика идентична. Посмотрите на меню Chrome и кнопки закладок:
Вывод:
- Chrome OS и OSX используют один множитель, 2.
- Только экран Chrome OS в высоком разрешении поддерживает еще и сенсорное управление.
Растягиваемые исходники
Неважно, десктопное или мобильное приложение вы разрабатываете, почти всегда требуются растягиваемые исходники (stretchable assets). Этот исходник позволяет коду изменять размер до нужного без потери качества при рендеринге.
Это не одно и то же с повторяющимися исходниками (repeatable assets), которые работают по-разному, хоть иногда и показывают идентичный результат.
Посмотрите на пример внизу. Панель инструментов на iOS генерируется из одного супертонкого исходника, который повторяется по оси Х по всему экрану.
Теперь посмотрим, как разные платформы используют растягиваемые исходники.
Растягиваемые исходники на iOS
В iOS работа дизайнера упрощается, потому что растягивание задается в коде. Все, что нужно от вас, - предоставить базовое изображение и, если вы сами не реализуете дизайн в коде, задать для него спецификации растягивания по-горизонтали, по-вертикали или в обоих направлениях. Вот пример стандартной кнопки Chrome в iOS.
Растягиваемые исходники на Android
Android использует такие исходники не так, как iOS. Сам исходник окружен 4 линиями. Их надо задать в слайсе/изображении как часть графики, в буквальном смысле визуально отобразить спецификации исходника в самом исходнике.
Эти 4 линии определяют две вещи: область масштабирования и область заливки. Если эти два параметра заданы, код просто сможет растянуть исходник и поместить контент в заданное место. Посмотрите на пример ниже - Android-версия стандартной кнопки Chrome, которую вы уже видели ранее.
Как вы видите, изображение 9-patch - это набор 4 чистых полос #000000. У них должна быть ширина в 1px для любого DPI; это индикация кода. Область растягивания не включает в себя закругленные углы, потому что это не то, что может повторяться (иначе выглядеть будет ужасно). В этом случае мы добавили отступы по 10dp вокруг кнопки. Это то, что не придется задавать в спецификациях.
Использование 9-patch требует добавления.9 к названию файла, так же, как вы добавляете @2x для исходников iOS. Еще один пример с нашей кнопкой:
Помните, что нужно быть осторожными с размером исходника. Если я сделал его довольно большим для демонстрации, важно оптимизировать вес исходника, уменьшив его размер до минимума, как показано ниже. Я оставил углы, как они были, но уменьшил область растяжения и контента к минимуму.
Следите, чтобы метки 9-patch не накладывались на ваш дизайн, чтобы обрезка исходника была корректной. .9 должна быть максимально возможно близка к исходнику без перекрывания его, попытайтесь не делать встроенный отступ. Предыдущий пример имел встроенные поля из-за тени.
9-patch не заменяет экспорт исходника для каждого DPI. Это нужно проделывать для каждой версии исходника.
И последнее, .9 может содержать множество растягиваемых областей (верхняя и левая). Я сам нечасто пользовался таким, если вообще когда-либо использовал это в своей работе, но это стоит упомянуть.
Вывод: Всегда спрашивайте человека, который будет заниматься реализацией вашего дизайна, какое решение лучше всего использовать, особенно для десктопа. Чем больше изображений у вас будет, тем тяжеловеснее будет приложение, и будет тяжелее для вас обновлять исходники в случае необходимости изменений. 9-patch нужно использовать только с правильными названиями и правильной организацией исходников.
Векторные исходники
Так как разнообразие экранов, использующих больший диапазон DPI, постоянно растет, переключение на векторные исходники вместо растровых более чем заслуживает внимания.
Самая часто используемая и распростраенная форма векторного исходника - формат.svg. Это файл на основе.xml, читаемый и редактируемый большинством программ, включая веб-браузеры, так как он изначально был создан для веба. Другой формат поддерживает векторы, такие как.ai (Adobe illustrator), .eps или даже.pdf.
Главное преимущества векторных изображений - их масштабируемость. Нет необходимости создавать растровые изображения для всех PPI-вариаций, вектор будет автоматически масштабироваться на основе экранного множителя.
Svg содержит XML-информацию о том, как рисовать графику. ПО/ОС/браузер затем интерпретирует эти команды для рендеринга исходника в выбранном размере.
Использование такого формата дает потрясающие преимущества:
- Сокращение размера приложения
- Тотальное сокращение использования растра
- Проще менять цвета программно
- Автоматическое и недеструктивное масштабирование
Хотя есть и недостатки:
- Меньше визуальной свободы, не очень удобно для сложной графики, особенно сложных теней, градиентов и прочих эффектов
- Может плохо влиять на работу приложения или сайта из-за требуемых ресурсов для обработки.
- Нет контроля над пикселями из-за автоматического масштабирования.
В связи с эволюцией дизайна интерфейсов в сторону более «плоских» стилей, меньшего использования теней, градиентов, .vector становится все более и более полезным и используемым. Несмотря на это, нужно с осторожностью использовать векторные исходники.
Как уже было упомянуто в недостатках, .svg может сильно повлиять на работу продукта. Формат работает отлично на вебе, для iOS и Android предпочтительнее отдельные векторные решения. iOS использует.pdf, Android - VectorDrawable .
Спецификации Chrome OS по этому вопросу еще не вышли. Хотя, учитывая, что все приложения Chrome OS являются веб-приложениями, я бы предложил все равно создавать сенсорный дизайн. Мой совет: применяйте стандарты сенсорных элементов для Android .
Веб, гибридные устройства и будущее
Если вы создаете дизайны под мобильные устройства, будет понятно, каким путем идти - однозначно, сенсорное управление. Если вы разрабатываете дизайне под десктоп, делайте из не-сенсорными. Звучит просто, но при этом игнорируется последний тренд с растущей популярностью - гибридные устройства.
Гибридное устройство может управляться и сенсорно и не-серсорно. Chromebook Pixel, Surface Pro и Lenovo Yoga - хорошие тому примеры.
Как поступать в данном случае? Простого ответа на этот вопрос нет, но я попробую посоветовать выбрать сенсорное управления. Именно в этом направлении развивается технология.
Если вы создаете дизайн под веб, думайте о сенсорном управлении заранее.
Вывод:
- Что бы вы ни делали для будущего, обдумывайте свои проекты в разрезе мобильных устройств и сенсорного управления.
- Используйте стандарты областей прикосновения для каждой ОС. Это поможет улучшить дизайн и помочь в достижении постоянства. Стандартные размеры областей касания больше даны для справок, не обязательно строго им следовать. Вы сами контролируете процесс и принимаете решения.
Программы для дизайна интерфейсов
Программное обеспечение не определяет мастерство дизайнера, но выбор правильного инструмента под конкретную задачу может значительно улучшить продуктивность и упростить сам процесс разработки. «Ноу-хау» в программах не должны стать единственным вашим навыком, но изучение и освоение подходящих инструментов дадут отличную основу для воплощения ваших идей в реальность.
К работе с вариациями DPI в дизайне интерфейсов разное ПО подходит по-разному. Некоторые из программ особенно хороши под какие-то определенные цели. Вот наиболее популярные решения:
Photoshop
Мать всех дизайн-инструментов. Возможно, самый популярный выбор для дизайна интерфейсов сегодня. Есть бесконечное множество ресурсов, уроков и статей, посвященных Photoshop. Этот «старичок» стоял еще у истоков развития отрасли дизайна интерфейсов.
Первоначально программа создавалась для обработки растровой графики и фотографий, что видно даже из названия. С годами она развивалась, и дизайнеры стали использовать ее и для дизайна интерфейсов. Частично это было продиктовано привычкой, а также тем, что это был чуть ли не единственный инструмент, способный обеспечить нужное качество.
Photoshop на сегодняшний день является лидером в редактировании растра, а также занимает первое место по популярности для дизайна интерфейсов. За счет существования десятки лет, программа слишком обросла функционалом, из-за чего ее не так легко освоить. Это как раз тот случай, когда в ней можно сделать практически все, но далеко не всегда наиболее оптимальным способом.
Так как изначально он был создан для растровой графики, Photoshop не зависим от DPI-разрешения, в отличие от Illustrator и Sketch, описанных ниже.
Illustrator
Это векторный брат Photoshop. Как говорит само название, он создан для иллюстраторов, но также активно применяется и в дизайне интерфейсов.
Illustrator хорошо адаптирован под печатные дизайны, как и его интерфейс, работу с цветами, масштаб, линейки и единицы измерения сначала могут сбить вас с толку, потребуется немного времени и небольших переделок для адаптации под дизайн интерфейсов. Как и Photoshop, это невероятно мощный инструмент с очень крутой кривой обучения.
В отличие от Photoshop, Illustrator является DPI-независимым из-за своей векторности. В отличие от растровых изображений, векторная графика основана на математических формулах, и ее можно масштабировать программно без потери качества.
Понимание разницы между растровым и векторным изображением - это ключ в постороении масштабируемых дизайнов и исходников.
Sketch 3.0
Sketch - относительно новый инструмент в сравнении с Photoshop и Illustrator. Появившись всего 4 года назад, эта программа наделала много шума (в хорошем смысле) в индустрии дизайна интерфейсов. Причина в том, что Sketch изначально был задуман с одной целью - дизайн интерфейсов. Sketch позиционирует себя как инструмент, идеально адаптированный под свою нишевую аудиторию - дизайнеров интерфейсов.
Sketch подходит для грубого прототипирования, а также для более комплексного визуального дизайна. Он полностью векторный, как Illustrator, с минималистичным и очень продуманным интерфейсом. Комбинация артбордов с простотой работы и гибкостью системы генерации исходников делает Sketch самым быстрым решением для мульти-DPI и мульти-платформенного дизайна. Последние релизы делают его очень достойной альтернативой Photoshop.
Из недостатков можно отметить, что Sketch разрабатывается меньшей командой, и он все еще не так популярен, как Photoshop. К тому же, в нем довольно скудный набор возможностей для обработки растра. В этом отношении Photoshop подойдет гораздо лучше. И, наконец, будучи еще достаточно молодым, он не располагает таким огромным количеством ресурсов, уроков и таким большим сообществом, как Photoshop. Но нужно отметить, что сообщество очень активно и мотивированно на развитие.
Из личного опыта, я был пользователем Photoshop с 8-летнего возраста, но недавно перешел на Sketch 3.0 для большинства задач по дизайну. Это не свидетельство качества, я считаю Photoshop до сих пор шикарным инструментом. Просто Sketch лучше соответствует моим потребностям.
Figma
Новичок конца 2015 года, Figma является браузерным инструментом для векторного дизайна (работает преимущественно через Chrome). Он похож на облачную версию Sketch с возможностями командной работы и интеграцией Slack. Впечатляющее достижение инженерного искусства в попытке реализовать дизайн-инструмент будущего.
Самое большое преимущество Figma в его кросс-платформенности (работает везде, где работает Chrome) и в возможностях командной работы и одновременного редактирования несколькими людьми. Тем не менее, если вы или ваша компания не особо привыкли работать в веб-сервисах, выбор может быть неудачным, так как нет локальной версии программы.
Вывод: Идеальных инструментов не существует, но есть те, с которыми именно вам комфортно работать. Если вы располагаете достаточным количеством времени и средств, протестируйте все перечисленные программы для формирования собственного мнения.
Давным-давно я работал в сфере производства LCD-мониторов и телевизоров. И однажды участвовал в разговоре с инженерами из ведущих компаний, разрабатывающих схемы управления дисплеями. Они обвиняли всех нас, кто проектировал и создавал экраны, в «носодисплейной инженерии» («nose on glass engineering» - N.O.G.E.).
По их мнению, мы сосредоточились на улучшениях, которые можно заметить, лишь уткнувшись носом в экран. Мы наращивали показатели, которые в повседневном использовании не играют роли. И они были абсолютно правы.
Сегодня мобильная индустрия занимается тем же. Обратите внимание на то, что называют основными характеристиками экрана в планшете и смартфоне. По большому счёту это только количество пикселей да ещё, пожалуй, определённая технология дисплея (IPS, OLED или другая). Но действительно ли это единственные детали, на которые нужно обращать внимание? И вообще, являются ли они самыми важными?
Вернёмся на семь лет назад, к моменту, когда был представлен iPhone 4 с -дисплеем. Apple выбрала такое название, поскольку этот экран имел плотность 326 пикселей на дюйм, что соответствовало разрешающей способности человеческого глаза (retina - сетчатка).
Скорее всего, вы не нуждаетесь в более высокой плотности, поскольку не сможете заметить разницу.
Некоторые специалисты, включая доктора Рэя Сонейру (Ray Soneira) из компании DisplayMate Technologies, оспаривали это утверждение. Но даже критики согласились, что такой показатель подобрался очень близко к пределу, который имеет смысл для практического применения. 300 точек на дюйм - плотность фотографий в глянцевых журналах. И на их качество ещё никто не жаловался.
А теперь о настоящем. Максимальная плотность экрана в доступном на рынке смартфоне составляет 806 пикселей на дюйм. Речь идёт о Sony Xperia Z5 Premium, 5,5-дюймовый дисплей которого вмещает полное 4K-изображение (2 160 на 3 840 пикселей). Есть несколько телефонов с разрешением около 1 440 на 2 960 точек и размерами экранов от 5,5 до 6 дюймов, плотность которых превышает 550 точек на дюйм.
Даже Apple, которая первой заверила нас, что 326 пикселей на дюйм будет предостаточно, увеличила этот показатель до 458 единиц в дисплее Super Retina для iPhone X.
Технический термин для этого всего - безумие.
Без сомнения, вы можете замечать крохотные различия вплоть до уровня плотности 500 пикселей на дюйм. При условии, что у вас идеальное зрение и вы держите телефон не дальше чем 30 см от глаз. Но всё равно, если сегодня есть возможности создавать такие продукты, это не значит, что их нужно создавать. Это также не значит, что эти дисплеи в целом работают лучше остальных.
Для обеспечения работы всех этих пикселей требуется больше вычислительной мощности и энергии . Чем больше точек на экране, тем меньше остаётся места для «открытой области» - части, которая излучает свет - в каждой из них. Таким образом, страдают яркость и энергоэффективность подсветки - или то и другое вместе.
На какие же параметры стоит обращать внимание?
Сегодня дисплеи больше не страдают от проблем вроде дисторсии и нарушений линейности изображения. Мы не сталкивались с ними с тех пор, как производители перестали использовать ЭЛТ-экраны более десяти лет назад. Так разве наши современные дисплеи не идеальны? Ответ - конечно же, нет. Я могу перечислить по меньшей мере три свойства дисплея, которые нуждаются в улучшениях гораздо больше, чем количество пикселей.
Качество изображения в условиях яркого света
Первое - это качество изображения при солнечном свете. Улучшить его можно за счёт повышения яркости и различимой пользователем контрастности. Чтобы нам было комфортно смотреть на эмиссионный дисплей (излучающий свет), он должен отображать белый цвет таким же ярким, как и его окружение.
Помимо яркости (которая расходует энергию), экран должен обеспечивать контрастность, достаточную для работы в условиях хорошего освещения. В характеристиках OLED-дисплеев обычно указывают показатель контрастности на уровне 100 000: 1 или даже 1 000 000: 1. Но это тоже чепуха. Такие цифры вы получаете лишь в абсолютно тёмном помещении между чёрным и белым цветами дисплея.
В реальных условиях работы контрастность снижается под действием окружающего света. И это проблема для современных дисплеев. Редкий экран способен обеспечить показатель, превышающий 50: 1 в типичном помещении, а в более ярких условиях освещения это значение ещё ниже. Нам бы хотелось увидеть полноцветную отражающую технологию отображения, но пока ничего такого на рынке нет.
Точность цветопередачи
Следующее свойство, которое должно нас интересовать, - это точность цветопередачи. Но не путайте его с показателями цветовой палитры. Значение последней определяет спектр цветов, которые способен отображать дисплей. Дисплеи OLED, а теперь и QLED навязывают широкую палитру цветов, но они не обеспечивают высокую точность цветопередачи.
Широкая цветовая палитра была бы идеальной при наличии исходного материала, потенциал которого она могла бы раскрыть. Но типичный дисплей с широкой цветовой палитрой лишь делает изображение слишком ярким и мультяшным.
Вместо этого, нам нужны экраны, которые точно передают цвета из палитры создателя контента (sRGB или Rec. 709). Точность передачи выражается метрикой ΔE*, которая показывает разницу между двумя цветами. Если её значение достигает 1, погрешность становится заметной. Покажите мне параметр дисплея, который гарантирует низкую разницу в расчёте ΔE* по итогам нескольких тестов, и тогда у нас будет хоть что-то.
Воспроизведение тона
Точность цветопередачи и общее качество изображения во многом зависят от воспроизведения тона - свойства, более известного как правильная гамма. Большинство ошибок в отображении цветов на LCD- и OLED-дисплеях связаны с неправильным воспроизведением тона в рамках трёх основных цветов.
Заключение
Хватит считать пиксели. Вместо этого, давайте требовать улучшения тех характеристик, которые действительно могут повысить качество картинки. Есть ещё много способов сделать хороший экран, помимо того, чтобы просто мериться количеством точек.
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 дюймов!
В индустрии высоких технологий вовсю набирает обороты новая забава – разместить как можно больше пикселей на единицу площади экрана. А то мы уж было соскучились по технологическим соревнованиям, после того как ушли в прошлое гонки за мегагерцами и мегапикселями.
Развязала новую гонку, как это принято в последнее десятилетие, компания 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-мегапиксельные «мыльницы» с мутной пластмассовой оптикой.