Извечный вопрос: что такое DPI?

Что такое DPI? Не все знают ответ на этот вопрос. И данная статья поможет.

DPI (Dots Per Inch) – количество точек на дюйм. Оно применяется для определения разрешающей способности экрана. Но некоторые путают DPI монитора с PPI (Pixels Per Inch). Последнее обозначает количество пикселей на дюйм.

Для примера: для квадрата в один дюйм необходимо вывести на экран монитора с разрешающей способностью 96 dpi картинку, где каждая сторона будет содержать 96 пикселей; для печати на бумаге необходимы 600 пикселей на сторону, когда разрешение DPI 600.

Для сравнения: говорят о большом разрешении фотографий (например 3000х1500, где ширина изображения в пикселях 3000, а высота — 1500). Извлечь из этого можно то, что картинка достаточно большая при просмотре на экране. А что будет, если вывести ее на печать? Для этого и существует термин DPI, который определяет количество точек, которые нанесет принтер на дюйм бумаги.

Историческая ремарка: DPI монитора

Старенькие VGA мониторы начала 80-ых имели разрешение DPI от 70 до 74, когда аналогичные продукты Apple (мониторы Macintosh) имели разрешающую способность в 72 DPI, в которых один пиксель соответствовал реальному типографическому показателю в 1/72 дюйма.

Исследования показали, что расстояние человеческого глаза до экрана монитора в три раза больше, чем расстояние до бумажного носителя (газета, книга), тем самым изображение на мониторе заметно меньше. Для комфортной работы и соответствия действительным размерам изображения было принято решение программно устанавливать разрешающую способность в 96 DPI. Но в действительности разрешающая способность мониторов была 70 — 74 DPI.

Только позже компания IBM выпустила монитор с разрешением 96 DPI. Сразу после этого была сделана программная поддержка в 120 DPI. Это свело на нет привязку к действительному типографическому показателю в 72 DPI.

Что такое DPI: изменение разрешающей способности монитора

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

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

Есть несколько рекомендаций для разработчиков и любителей кастомного ПО. Лучше создавать программы или презентации по шаблонам, что исключит несоответствие показателей DPI. Любой такой интерфейс будет правильно отображаться на любых мониторах с различной разрешающей способностью. При использовании растрового изображения стоит подготовить два рисунка с различным показателем DPI (96 и 120). И при разном разрешении монитора картинка будет выбираться соответствующая.

Что такое DPI: вывод

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

Для полноты картины еще раз объясним, что такое DPI на простом примере. Физические размеры монитора остаются неизменными при любом раскладе, а при изменении разрешения с 1024х768 на 1280х1024 меняется и DPI. Визуально уменьшается экран и появляется много свободного места, но все элементы рабочего стола и шрифт остались прежними. Сами пиксели уменьшились, чтобы уместиться на той же площади экрана, при том же размере.

Как узнать dpi экрана моего ноутбука

мой ноутбук HP 250 G2 с диагональю 15,6″ LED-подсветкой HD2 с антибликовым покрытием (1366 x 768).
Пожалуйста, как узнать значение dpi?

источник

1366 x 768 пикселей по диагонали 1567 пикселей (теорема Пифагора, √(1366²+768²)=1567; и вы думали, что никогда не будете использовать это).

Если экран измеряет 15,6 «по диагонали, 1567 пикселей / 15,6» составляет около 100 пикселей на дюйм.

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

источник

если вы используете Windows 7:

• на Control Panel > Appearance and Personalization > Display
• в левом (синем) столбце нажмите Set custom text size(DPI)

окно под названием Custom DPI Scaling появится.
Он покажет, какой процент «нормального размера» (DPI монитора по умолчанию) он масштабируется и позволит вам настроить его.

вы должны увидеть линейку посередине. Ниже, что он будет говорить 9 точка Segoe UI на X пикселей на дюйм.

X ваш текущий DPI.

источник

по состоянию на DPI калькулятор

• размер дисплея: 13.6″ × 7.65 » = 103.96in2 (34.54 CM × 19.42 cm = 670.72см2)
• DPI = PPI = 100.45
• 0.2529 mm тангаж многоточия, 10091 PPI2

отвечен Fabian 2016-06-05 19:10:14

источник

попробовать себя: калькулятор DPI

Формула:

PPI = √(pixels_horizontal^2 + pixels_vertical^2) / inches_diagonal

PPI = √(1366² + 768²) / 15.6 = 100.45

таким образом, 100.45 dpi

источник

Сложности современного масштабирования, часть 1

Откуда взялись 96 dpi

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

Одной из изюминок Acer Aspire S7, который я недавно тестировал, был его экран: при диагонали всего лишь 11,6 дюйма он имеет разрешение Full HD, т. е. 1920×1080 точек.

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

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

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

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

Acer Aspire S7, экран которого имеет разрешение 1920×1080 точек при диагонали 11,6 дюйма, в принципе уже может потихоньку начинать конкурировать по плотности пикселей с новыми ноутбуками Apple с экраном Retina.

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

Что такое Retina?

Итак, начнем с Retina (в переводе это слово означает «сетчатка», т. е. сетчатка глаза). В современном мире это слово употребляют для обозначения одной из самых известных технологий, выведенных на рынок компанией Apple, возглавляемой на тот момент Стивом Джобсом.

Для начала давайте определимся, что такое Retina и зачем эта технология нужна (если хотите, можете почитать англоязычную википедию). Впервые на рынке она появилась в 2010 году, с выходом iPhone 4. В принципе, можно дать слово самому Стиву Джобсу (видео презентации на Youtube), ибо кто сможет рассказать об этой технологии лучше?

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

С технической частью понятно, но что это дает пользователю?

• Большая детализация. Это самый очевидный плюс: вы сможете показать больше деталей, а изображение в целом будет более четким. Думаю, все знакомы с эффектом от перехода телевизоров и контента на Full HD, и насколько картинка в этом формате детальнее и четче, чем, например, у DVD. Поэтому переходим дальше:
• Большая плавность линий. В отрисовке кривой линии участвует большое количество мелких элементов, поэтому теперь эти линии выглядят не как лесенка из квадратиков, а как плавная нарисованная кривая. Это важно и с точки зрения детализации, но основной плюс состоит в том, что человеческий глаз гораздо лучше воспринимает плавную кривую линию, чем прямую или, тем более, нагромождение квадратиков. Этот момент хорошо иллюстрируется на видео презентации, но наверняка вы и сами можете представить себе, о чем идет речь. На всех обычных экранах Windows пиксели (т. е. зубчатые грани) шрифтов всегда очень сильно заметны. Это и есть следующее преимущество:
• Большая четкость линий. Кривые на экране — это не только графики и графическая информация вообще. Это еще и отрисовка букв: ведь шрифты состоят не только из прямых линий. При большой плотности пикселей глазу гораздо легче различить буквы, он меньше напрягается. Соответственно, можно либо делать шрифты меньше (т. е. на экране поместится больше информации), либо просто расслабить глаза при чтении (больший комфорт при чтении). Это особенно заметно на маленьких экранах, где очень большой дефицит места. Читать текст с экранов современных смартфонов с большой плотностью пикселей гораздо комфортнее.
• Наконец, в случае Retina количественный рост переходит в качественный. Плотность пикселей на экране Retina для iPhone официально составляет 326 пикселей на дюйм (многочисленные калькуляторы дают результат 329,6). По словам Стива Джобса, человеческий глаз способен разглядеть отдельный пиксель максимум при уровне в районе 300 пикселей/дюйм, а дальше перестает выделять отдельные элементы и воспринимает кривую линию как гладкую. Технически это не совсем верно, ибо для восприятия важен не только размер элемента, но и расстояние до глаз. Поэтому, например, для смартфона комфортная плотность пикселей должна быть выше, чем для более крупных устройств. Например, у Macbook Pro Retina плотность пикселей на дюйм меньше, но их экраны находятся от пользователя дальше.

Все эти выводы вполне подтверждаются и моим собственным опытом: я параллельно использовал два смартфона — iPhone 4s (960×640 пикселей при 3,5″, 329,6 пикселей на дюйм) и HTC Mozart (разрешение 800×480 пикселей при 3,7″, 252 пикселей на дюйм). Маленький экран с высокой четкостью действительно существенно комфортнее в повседневной жизни, особенно при чтении: мелкие шрифты становятся гораздо яснее и четче, глаза перестают уставать, устройством можно пользоваться дольше, глазам не нужен отдых. Эти достоинства заметно выделяют его среди устройств с «обычными» разрешениями экрана.

В нашем современном мире, где очередным технологическим прорывом уже трудно удивить (да и происходят они не так часто), «Retina Display» предложил прорыв в удобстве использования, который действительно очень сильно изменил впечатления от работы с экраном. Поэтому неудивительно, что другие производители и другие устройства попытались последовать примеру компании Apple. Правда, повысились требования к технической части: теперь смартфонам и ноутбукам приходится обсчитывать для вывода на экран гораздо большее количество пикселей (в приведенном примере их стало на 60% больше), т. е. растет нагрузка на графический адаптер, от него требуется больше работы, растет выделение тепла и энергопотребление.

Как растянуть экран вчетверо так, чтобы никто не заметил?

Секрет относительно простого перехода на экраны Retina в iOS состоит в том, что новое разрешение… вдвое больше старого по каждой оси. На момент его появления у iOS было всего два форм-фактора экрана и два разрешения, что создает практически идеальные условия работы для разработчиков (в отличие от Android, например). И то все мы помним, какие «глобальные сложности» были при появлении iPad — ведь приходилось «переделывать интерфейс» под еще одно разрешение. С появлением Retina ситуация радикально не изменилась: добавилось два разрешения, которые вдвое больше по каждой оси (т. е. вчетверо по площади).

В результате условия для перехода получились практически идеальными: достаточно увеличить размер шрифтов и графических элементов в пикселях вдвое, и при этом их видимый размер остается тем же. Современные векторные шрифты рисуются системой, т. е. могут быть произвольного масштаба и переносятся на Retina без каких-либо проблем. С графическими элементами немного сложнее, т. к. они обычно имеют четкий размер в пикселях, поэтому их приходилось перерисовывать. Однако даже если ничего не делать, то для iPad или iPhone ничего страшного не произойдет: построение интерфейса и графических элементов сохранится, т. е. эргономика останется на прежнем уровне, а картинки достаточно растянуть вдвое (да, станет заметна некоторая размытость и угловатость, но ничего критичного). В общем, для iOS проблема решилась ударным перерисовыванием иконок и графических элементов (что привело к росту размера приложений, которым теперь зачастую тесно на младшей модели iPad с 16 ГБ памяти). Для браузеров и веб-страниц все немного сложнее, но и там есть относительно простое решение через понятия реального и виртуального пикселя. Сложности, опять же, могут возникать только при масштабировании картинок с четко заданным размером в пикселях, но это небольшие проблемы: картинка просто не будет настолько красивой, как окружающие элементы.

Другими словами, более простой переход придумать сложно. Ситуацию не сравнить с Windows или Android, где практически мгновенно составился такой длинный список из диагоналей экрана и разрешений, что чем оптимизировать индивидуально — проще было сразу застрелиться. Впрочем, разработчики Android исторически переносили сложности с завидным спокойствием: делали интерфейс под удобные им параметры — и гори оно всё остальное синим пламенем! Ситуация, конечно, исправляется потихоньку, но до сих пор то, как выглядят очень многие известные приложения под Android на планшетах, иначе как «стыд и срам» не назовешь. Тем более что у телефонов Android ориентация преимущественно вертикальная, а у планшетов — горизонтальная из-за соотношения сторон и разрешения. Тем не менее, современные приложения под Android умеют разворачиваться на весь экран и более-менее корректно размещать на экране элементы управления (даже с этим у них в свое время были серьезные проблемы).

Думаю, что адаптировать MacOS под высокую плотность пикселей было гораздо сложнее, но т. к. это тоже Apple, мы об этом не узнаем. Впрочем, и в этом случае речь шла об устройствах одной компании, с ограниченным набором диагоналей и разрешений (фактически сейчас речь идет о двух диагоналях и четырех разрешениях, так ведь?), куда добавилось еще два (и опять же с легким для масштабирования фактором 2), так еще и при условии жестко заданного соотношения сторон, 16:10. Тоже больше походит на тепличные условия. В общем, iOS и MacOS перешли на новые экраны относительно безболезненно, хотя процесс адаптации сторонних приложений идет до сих пор, но это незаметно значительному числу пользователей, которые ограничиваются использованием только самых основных приложений (как правило, идущих в комплекте с системой). Такова особенность экосистемы Apple и ее пользователей.

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

История: откуда взялись 96 DPI?

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

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

При работе с полиграфией возникла необходимость в некоем универсальном параметре, который привязывал бы размер виртуальных элементов (тех же букв) на экране к размеру их же на бумаге. Для этого был предложен параметр «количество точек на дюйм», DPI. Этот параметр стоит отличать от другого — «пикселей на дюйм», PPI. Несмотря на то, что эти параметры часто совпадают (и поэтому многие считают их тождественными), на самом деле они считаются от совершенно разных вещей. Их значение можно посмотреть в википедии (DPI и PPI), чуть ниже мы поговорим о разнице между ними.

Так получилось, что на очень долгое время параметр DPI стал одним из краеугольных камней построения графических интерфейсов персональных компьютеров, и хотя сейчас он кажется нам тщательно продуманным, наполненным глубоким смыслом и освященным традициями, на самом деле он получился практически случайно. Просто у первых Macintosh был монитор с диагональю 9 дюймов и разрешением 512×342 точки; и на нем буква высотой 72 пикселя выглядела по размеру так же, как буква высотой один дюйм на бумаге. В общем, так получилось 72 пикселя на дюйм

Я уверен, что многие из читателей неоднократно встречали этот параметр в самых разных сферах применения (хотя чаще всего речь идет о параметрах графики или, например, сканирования). Изначально этот коэффициент действительно позволял довольно точно соотнести размер элемента на экране (букв или графики) и на бумаге. Однако по мере распространения электронных изображений он стал источником всё большей и большей путаницы. Сколько, например, было написано в интернете статей с объяснениями, что этот параметр нужен только для вывода на бумагу, а для электронного изображения важен размер в пикселях — не сосчитать.

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

Тем более что в современном мире и сама привязка уже давно не может похвастаться точностью, поскольку сегодня существует огромное количество вариантов соотношения физического размера экрана и его разрешения. Для сравнения, в современных ноутбуках разрешение 1366×768 имеют экраны с диагональю от 11,6 до 15,6 дюймов. Как вы думаете, будут ли у них элементы под 72 dpi одинакового размера?

Причем 72 dpi — это параметр, специфический для компьютеров Apple. Компания Microsoft применила другую, производную формулу: там посчитали, что экран находится от глаз пользователя в среднем на 33% дальше, чем мы обычно держим лист бумаги. Поэтому, чтобы буквы казались нам одинакового размера, на экране они должны быть крупнее.

Так что если приложить лист бумаги (или линейку) к экрану, то изображение на экране будет крупнее, чем на бумаге (т. е. формально коэффициент неверный). Но если сравнивать размеры элементов в обычной рабочей обстановке, когда мы держим лист в руках, а монитор стоит на столе, то размеры элементов должны для нас выглядеть одинаково. Иначе говоря, 96 dpi — еще более виртуализированный параметр. Зато у этого решения Microsoft проявился большой побочный плюс: читаемость шрифтов. На Macintosh все было «честно», но зато самый часто используемый шрифт 10 кегля выглядел мелко, тогда как на экране Windows тот же шрифт выглядел крупнее и был вполне читаемым. Почитать подробнее можно, например, в блоге на msdn.com.

Таким образом, 96 dpi — это виртуальный параметр, полученный в результате виртуальных же вычислений и усреднений. Он высчитан на основе оценки субъективного восприятия пользователем размера буквы в зависимости от расстояния и представляет собой поправочный коэффициент к параметру 72 dpi, который, в свою очередь, является просто отражением того факта, что 72 точки одного монитора с определенной диагональю и разрешением (причем вышедшего на рынок очень-очень давно) совпадает с виртуальным дюймом, используемым в печати. Сложно? Весьма.

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

Как построен интерфейс Windows, почему 96 dpi стали базой, как эта база используется?

Тем не менее, параметр 96 dpi стал важнейшим элементом для построения интерфейсов системы и приложений. Как же так получилось?

Во времена, когда Windows только захватывала рынок, технологии и индустрия ПК не развивались такими безумными темпами, как сейчас, однако развитие шло, и тогда казалось весьма динамичным. Сменяли друг друга стандарты вывода изображения на экран: CGA, EGA и, наконец, VGA, ставший последним стандартом IBM, широко распространившимся на рынке. Постепенно росли диагонали мониторов и доступные разрешения. И разрешение постепенно из константы превращалось в одну из переменных.

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

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

При этом, хочу еще раз напомнить, сам по себе параметр dpi — виртуальный и не имеет никакого отношения к аппаратной части компьютера. Компьютер всегда рисует изображение в пикселях и выводит его на экран в определенном разрешении. Ему, по большому счету, все равно, на какую диагональ выводить картинку, и уж тем более он не знает, как далеко от экрана сидит пользователь, а ведь этот параметр учитывался при выборе наиболее «выгодного» dpi. Следовательно, dpi как параметр нужен нам в двух случаях: при выводе на бумагу (тогда он задает масштаб и организацию элементов на листе бумаги) и как некая базовая величина, определяющая субъективно удобный масштаб элементов изображения на экране.

Поскольку это случайное удачное сочетание параметров монитора (размеры изображения/разрешение, дающие нужный PPI) и системы (dpi) хорошо работало, его воспринимали как нечто постоянное и незыблемое. Считалось, что параметр dpi = 96 сохранит свою актуальность всегда. Вот почему не всегда следует слепо доверять «удачному опыту» — это может оказаться не общее правило, а просто удачно работающее сочетание случайных параметров, которое рассыплется, как карточный домик, стоит измениться одному из них. Собственно, это произошло и с dpi: все настолько поверили в его незыблемость, что для упрощения жизни стали рассматривать его как константу. А когда изменить dpi все-таки понадобилось, с интерфейсами случилась катастрофа. Вот об этом и поговорим.

Организация интерфейса Windows, ЖК-экраны и связанные с ними сложности

Итак, dpi стал базовой величиной, которая легла в основу всех элементов (текстовых и графических) и ОС Windows, и приложений. При увеличении разрешения размер элементов в dpi оставался тем же, просто их больше помещалось на экран, а видимый размер, т. е. то, как эти элементы выглядели на экране, определялся соотношением физического размера экрана и его разрешения. Долгое время разрешение и диагональ экрана росли примерно одинаковыми темпами, так что ничего страшного не происходило.

В принципе, концепция dpi немного зашаталась уже по мере развития ЭЛТ-мониторов, т. к. нужное соотношение размер/разрешение даже для них отнюдь не всегда выдерживалось точно. В результате, на разных мониторах элементы на экране имели разные видимые размеры. Но в большинстве случаев с небольшими отклонениями мирились, а в случае значительных отклонений от «нормы» на помощь приходили сами мониторы. Ведь ЭЛТ-трубки хорошо работали с несколькими разрешениями, так что проблему скорее всего можно было устранить, поставив на мониторе другое разрешение — таким образом, чтобы визуальный размер элементов был ближе к заветному dpi. Поэтому большинство пользователей воспринимали слишком мелкую или слишком крупную картинку не как неправильный масштаб, а скорее как неправильное разрешение для конкретного монитора. Например, помните про 800×600 vs 1024×768 для 14-дюймовых мониторов?

Этот способ перестал работать с переходом на мониторы с ЖК-матрицами, ибо они способны хорошо работать только с одним разрешением. И уже на втором шаге развития ЖК-мониторы показали, насколько они могут испортить всем жизнь.

Первый раз пользователи ПК глобально столкнулись с проблемой масштабирования, когда на рынок стали массово выходить ЖК-мониторы с диагональю 17-дюймов и разрешением 1280×1024 точек. Я думаю, многие читатели помнят проблемы с их настройкой. В погоне за красивыми спецификациями производители выбрали разрешение побольше, но в результате для этого типа матриц баланс размер/разрешение получился крайне неудачным: плотность пикселей оказалась слишком высокой, и при стандартных настройках монитора и системы изображение элементов на экране было слишком мелким для комфортной работы. Тут выяснилось, что масштабирование в Windows работает плохо.

Дело доходило до того, что пользователи от отчаяния понижали разрешение на ступень, хотя для ЖК-мониторов это имело очень неприятные последствия: изображение становилось нечетким, шрифты — расплывчатыми, глаза все равно болели. Ко всем бедам, разрешение 1280×1024 предполагает нестандартное соотношение сторон: 5:4 вместо 4:3, т. е. при переводе монитора на 1024×768 еще и пропорции нарушались. Вот такое неудачное стечение обстоятельств…

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

Однако масштабирование в Windows выполнить не так просто, как кажется.

Сложности масштабирования интерфейса

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

Иконка на рабочем столе — это простое растровое изображение с жестко фиксированным размером в точках (пикселях), например 32×32, и такого размера она и останется (насколько я помню, сейчас есть варианты 16×16, 32×32, 64×64 точек, но это просто еще одна иконка, нарисованная в другом размере; подробнее о создании иконок, например). Интерфейс выглядит целостно только до тех пор, пока сохраняются заданные создателем пропорции текстовой и графической составляющих.

Возьмем простейший пример: в интерфейсе есть диалоговое окно, на нем кнопка «сохранить изменения», фоном которой служит растровая картинка. Предположим, мы выставили масштаб графики 100%, а dpi=96, и при этих условиях нарисовали интерфейс. Все элементы отлично подогнаны друг под друга и выглядят замечательно. Теперь выставим dpi=120, что произойдет? Текст станет больше, а размер кнопки останется прежним — т. е. текст вылезет за рамки отведенного ему места. Теперь представим себе, что все отрисованное окно — это растровое изображение (битмап), и выставим масштаб 120%. И текст, и фоновые картинки станут размытыми, потеряют четкость. Выглядит такой интерфейс неаккуратно и неприятно. Собственно, это две основных проблемы при масштабировании интерфейсов, и ниже мы поговорим, как они решались и решаются в Windows.

Зоопарк устройств

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

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

Однако в реальной жизни производители «железок» оглядываются на маркетинговые цифры больше, чем на своих коллег по производству софта. Например, хотелось бы кинуть гранату и в стан производителей мониторов: эти ребята со спокойной совестью выпускают мониторы с одним и тем же разрешением Full HD 1920×1080, но с диагональю матрицы от 21,5 до 27 дюймов. Причем найти хороший 27-дюймовый монитор с разрешением Full HD (которое мне лучше всего подходит в силу не очень хорошего зрения) до последнего времени было не так-то просто, да и цена там была соответствующая.

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

Более того, компания Microsoft сама смело шагнула дальше, включив в парадигму еще и планшеты: т. е. теперь у нас одна и та же операционная система (Windows 8) с одним и тем же интерфейсом должна не просто работать, а обеспечивать высокое удобство использования и схожие ощущения от работы на любом экране, начиная с 10-дюймового планшета с разрешением 1366×768 (это первоначально заявленное минимальное стандартное разрешение для системы, однако сейчас Microsoft снизила это требование до экранов в 7 дюймов и разрешения 1024×768) и до… ну, пусть будет 30-дюймовый (а на самом деле выше) монитор с разрешением, уже превосходящим Full HD (например, 2560×1600).

Таким образом, Full HD (1920×1080) тоже отнюдь не предел. Но основной юмор ситуации даже не в этом, а в том, что экран с разрешением Full HD может оказаться и на громадном 27-дюймовом мониторе (или телевизоре с еще большей диагональю), и на 11-дюймовом экране планшета.

Игры как пример

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

В принципе, даже все любимые 3D-игры нашего детства, начиная с Wolfenstein 3D, использовали спрайты. В качестве их лебединой песни можно назвать незабвенный Duke Nukem 3D. Это, пожалуй, последняя успешная игра, в которой монстры были спрайтовыми, при том что сам игровой мир уже довольно давно был реально трехмерным.

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

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

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

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

есть ли связь между настройкой dpi и разрешением экрана?

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

«разрешение» — общее количество [пиксели, точки или точек] широкий, от общего числа [точек, точек или точек] высокой. Так принтер смог иметь разрешение 1200×1200 точек на дюйм, в то время как монитор может иметь разрешение 1280×1024.

DPI и PPI являются просто отношения. DPI — «точек на дюйм», PPI — » точек на дюйм «или» пикселей на дюйм.»Эти соотношения увеличиваются и уменьшаются в зависимости от разрешения (ширина х высота, в пикселях) и размера (в дюймах) данной среды.

чтобы рассчитать DPI, вам нужно определить фактические физические ширины и высоты среды. Распространенным примером является Apple iPhone 4 экран:

физическая ширина = 1.94 дюймов
Физическая Высота = 2,91 дюйма

ширина (в пикселях) = 640
Высота (в пикселях) = 960

предполагается, что все пиксели, точки, или точки занимают площадь пространства. Поэтому простым уравнением для определения PPI / DPI является деление высоты пикселя на физическую высоту, что дает примерно 329 DPI.

эта информация поможет ответить на ваш вопрос. Windows не имеет ни малейшего представления, что такое разрешение экрана, потому что оно не имеет никакую принципиальную схему чего физические размеры дисплея. Вы можете купить 20 «мониторов с разрешением 1920×1080, а также 70» мониторов с таким же разрешением 1920×1080. Оба имеют совершенно разные DPI, но Windows понятия не имеет и не имеет к этому никакого отношения.

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

Apple Mac OS (особенно iOS) имеет значительно лучшую поддержку DPI и знает, основываясь на устройствах, на которых он установлен, какой параметр DPI использовать.

Руководство дизайнера по DPI, PPI и 4K разрешении

Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс-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, программа отресайзит все файлы по пропор

Связь между DPI мыши, разрешением экрана и размером экрана

насколько я понимаю, размер экрана не имеет значения.
Важно, скорее, разрешение экрана.

в простейшем (несуществующем) случае каждая точка на клавиатуре мыши соответствует одному пикселю на экране.
Так, например, если ваше разрешение экрана было 1920×1200 и ваша мышь была способна к максимальному DPI 600, Вы должны были бы переместить мышь два дюйма, чтобы получить от нижней части экрана к вершине. Если мыши 1200 dpi для его один дюйм для того чтобы сделать такое же движение на экране.

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

чувствительность основана на программном обеспечении. Он получает ваш dpi и делит или умножает его, чтобы получить окончательную чувствительность точек к пикселям. Это просто множитель входного сигнала, посылаемого мышью.
Например, если бы у вас была мышь на 3600 DPI, а затем установить чувствительность 2.5 / 10, он будет функционировать так же, как 900 DPI на 10/10 чувствительности.

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

Итак, вопросы:

такое же DPI но более низкое разрешение: мышь покроет более большое физическое края экрана с той же стороны-движение. Будет сложнее нажимать точно на определенную небольшую область
на экране.

тот же DPI, но более высокое разрешение: мышь будет охватывать меньшую физическую территорию экрана с тем же движением руки. Работать с маленькими экранными объектами проще, так как мышь «медленнее».

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

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

Сложности современного масштабирования, часть 5: выводы

Смерть пикселя и разрешения экрана как определяющих параметров

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

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

Ссылки на предыдущие части:

История вопроса

В начале своей истории, когда компьютеры были очень сильно привязаны к бумаге, необходим был универсальный параметр, который связывал бы размер изображения на бумаге и на экране. Компания Apple предложила параметр 72 точки на дюйм (dpi): при физических параметрах экранов Apple Macintosh того времени изображение на экране и на бумаге имело одинаковый физический размер. Microsoft для Windows была предложена система «субъективного восприятия»: элемент на экране и на бумаге должен казаться одинаковым с учетом того, что экран находится от глаз на треть дальше, чем мы держим лист бумаги. Так появился параметр 96 dpi (96 — виртуальный пересчет 72 на большее расстояние до экрана), во многом определивший дальнейшее развитие интерфейсов ПК на базе Windows.

Очень быстро параметр 96 dpi стал своего рода базовой точкой отсчета для построения интерфейса системы и приложений. Впрочем, не для всех: для графики всё активнее стало применяться прямое указание размера в пикселях. В перспективе это и привело к проблемам: размер графических элементов задавался жестко в пикселях, шрифтов — в dpi, а других элементов — и вовсе как бог на душу положит: они могли быть и в пикселях, и в dpi, и в процентах от размера окна… При этом свое первоначальное значение параметр dpi быстро потерял: постоянно появлялись новые типы мониторов с разным соотношением физического размера экрана и разрешения, на которых элементы с одинаковым dpi выглядели по-разному.

Вторая большая проблема — комфортный размер изображения на экране. На ЭЛТ-мониторах можно было выставлять любое комфортное разрешение, не жертвуя качеством картинки. Однако ЖК-мониторы, пришедшие им на смену, хорошо работают только в одном разрешении. А производители ЖК-мониторов в угоду маркетингу стали изобретать самые разные сочетания физического размера и разрешения: у ноутбуков разрешение 1366×768 используется при диагонали экрана от 11,6 до 15,6 дюймов, у десктопов мониторы с разрешением 1920×1080 могут быть от 21,5 до 27 дюймов.

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

Алгоритмы масштабирования в Windows

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

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

В результате существенная часть (чтобы не сказать — большинство) даже современных приложений не оптимизирована под корректное масштабирование. Учитывая остроту проблемы, Microsoft активно работает над созданием и внедрением универсальных инструментов и рекомендаций для разработчиков, благодаря которым любое приложение сможет корректно работать при любом масштабе (или значении dpi) интерфейса (см. WPF). Современные версии ОС и приложений Microsoft обладают нужной оптимизацией, хотя даже в системе иногда встречаются досадные недоработки. Однако значительная часть разработчиков, пользуясь открытостью платформы (т. е. отсутствием контроля над ними), до сих пор игнорирует эти стандарты и указания.

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

• Старый алгоритм (окончательно оформился в Windows XP): система допускает любой масштаб с шагом в 1%. Система сообщает приложению текущий dpi десктопа и сама занимается масштабированием системных ресурсов (в том числе задействованных в приложении). Приложение само занимается масштабированием своих ресурсов.
• Новый алгоритм (внедрен в Vista, используется в последующих системах): если приложение оптимизировано для масштабирования и сообщает об этом системе (это называется dpi-aware), то система сообщает ему корректный текущий dpi интерфейса, масштабирование приложение осуществляет самостоятельно. Если приложение само не уведомляет систему о поддержке масштабирования, то включаются системные алгоритмы — либо старый, либо новый (зависит от настроек системы и выбора пользователя). Грубо говоря, новый механизм берет уже полностью сформированное изображение окна приложения при масштабе по умолчанию (96 dpi) и растягивает его до размера, соответствующего текущему масштабированию, как обычную картинку. Подробнее о том, когда какой механизм задействуется, как они работают и какие у каждого плюсы и минусы, можно почитать во второй части исследования.

Что касается нового интерфейса Windows 8 (Metro), то там все работает совершенно по-другому. Система сама определяет параметры экрана (его физический размер и разрешение) и сама выбирает нужный масштаб, у пользователя нет прямого контроля над этим процессом. Для приложений существует три базовых масштаба: 100%, 140% и 180%, и при выполнении всех требований должна обеспечиваться корректная работа при любом масштабе. То, что установка приложений под новый интерфейс возможна только из магазина Windows Store, дает Microsoft очень сильный рычаг контроля над разработчиками: приложение, не соответствующее требованиям (в т. ч. по масштабированию), просто не будет в него допущено. Подробнее об этом можно почитать во второй части обзора.

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

Можно ли пользоваться экраном с высоким PPI?

Устройства с высоким показателем PPI (pixel per inch, пикселей на дюйм) выходят на рынок уже сейчас. Поэтому перед тем, как переходить к выводам, давайте суммируем впечатления от использования ноутбука с экраном с высокой плотностью пикселей. Помимо Acer Aspire S7 я использовал Lenovo Helix — это трансформер, планшет с доком, превращающийся ультрабук. Оба имеют 11,6-дюймовые экраны с разрешением Full HD. PPI для этого размера экрана составляет 189,91 (примерно), у новых Apple Macbook Pro Retina 15 — 220, у Retina 13 — 227. В общем, по цифрам эти экраны немного отстают от ноутбуков Apple. Если поднести экран к глазам, то пиксели действительно различить можно — однако при реальной работе и на такой диагонали экрана вы их, скорее всего, не увидите.

С новым интерфейсом Windows 8 проблем нет: элементы интерфейса и шрифты по размерам примерно такие же, как на экране планшета с той же диагональю, но разрешением 1366×768. Однако дисплей с высоким разрешением выдает красивую картинку с гладкими линиями и окружностями шрифтов без заметных «лесенок» — и в этом случае если поставить два устройства рядом, то разница очень заметна. Таким образом, проблем с работой в новом интерфейсе быть не должно.

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

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

Из приложений, так сложилось, я пользовался в основном MS Office и HTML-редактором Dreamweaver CS 5.5. Ситуация с этими приложениями полярная: одно масштабируется просто отлично, второе — отвратительно (впрочем, продукция Adobe вообще славится, скажем так, неоптимальными решениями). Об обнаруженных проблемах мы уже подробно говорили в практическом исследовании (в третьей части). Из других приложений запомнился (и немало забавлял меня) плеер (на той системе был установлен только КMPlayer): масштабироваться его интерфейс отказался, так что настройки и информацию можно было разглядеть только с лупой. Впрочем, с основной своей обязанностью он справлялся.

Сложнее оказалось с интернетом, ибо приходится активно пользоваться масштабированием. Детальное описание работы разных браузеров можно прочитать в четвертой части. Что же касается личных впечатлений, то жест увеличения масштаба становится лучшим другом, быстро осознаешь разницу между масштабированием интерфейса и страницы (и насколько важно и то, и другое), начинаешь различать нюансы в схемах масштабирования различных браузеров… Просмотр страниц с настройками «по умолчанию» на этом экране просто невозможен, поэтому масштабирование придется задействовать обязательно. В результате я очень много стал пользоваться браузером Internet Explorer, который допускает масштабирование и пальцами, и через настройки (причем с разными алгоритмами), это очень удобно. Также отмечу, что ситуация на рынке меняется очень быстро, и любые рассказы о ПО быстро устаревают. Например, при эксплуатации Acer Aspire S7 браузеры вели себя не так, как при тестировании. Просто знайте, что масштабирование вам понадобится обязательно, и то, насколько удобно и качественно оно реализовано, во многом предопределяет выбор браузера.

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

• В ситуациях, когда приложение адаптировано, вы получаете примерно те же преимущества, что и от использования экрана Retina: более ясную и четкую картинку, более четкие шрифты, меньшую усталость глаз.
• Для нового интерфейса Windows 8 и большинства приложений под него разрешение Full HD на экране с диагональю 11,6 дюйма не увеличивает доступное экранное пространство для размещения информации — оно остается таким же, как в случае разрешения 1366×768. Увеличивается качество отображения элементов на экране. Количество информации, скорее, зависит от физического размера экрана, а не от его разрешения.
• На традиционном десктопе по умолчанию вы получаете очень-очень мелкий (практически нечитаемый) интерфейс системы и приложений при масштабе 100%, что крайне неудобно. Зато у вас появляется возможность настроить масштаб интерфейса системы и приложений под себя, ориентируясь на свои потребности и свои особенности зрения.
• Большинству пользователей, как мне кажется, будет достаточно компромиссного варианта 120 dpi.
• Правильность масштабирования приложений в подавляющем большинстве случаев зависит от разработчиков.
• Следует учитывать, что если для работы на традиционном десктопе вы пользуетесь какими-то специфическими приложениями, не относящимися к мейнстриму, то есть очень большой шанс, что программисты проигнорировали требования к поддержке масштабирования, и при попытке выставить комфортный для глаз размер элементов и шрифтов ситуация не улучшится, а ухудшится. Поэтому стоит заранее проверить способность таких приложений к масштабированию.

Выводы

Итак, давайте уже наконец переходить к тем выводам, которые можно сделать на основе изложенной в нашем исследовании информации. Самый общий вывод, который можно сделать: сейчас идет очень интересный процесс. Фактически получается, что постепенно отмирают понятия, параметры и характеристики, которые мы привыкли воспринимать как базовые на протяжении более чем 30 лет развития индустрии персональных компьютеров.

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

В первую очередь — свое значение потеряет пиксель.

И никаких больше пикселей

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

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

Однако легко сказать «избавиться»: мозги большинства современных разработчиков тоже «отформатированы» старой школой, и они тоже воспринимают пиксель как меру всему (разработчики для настольных систем — уж точно). Поэтому велик соблазн сначала нарисовать интерфейс под «масштаб 100%» с определенными параметрами в пикселях, а уже после этого думать, как он будет масштабироваться. Но это неправильный подход — как технически (легко ошибиться и что-то не будет нормально масштабироваться), так и концептуально. Грубо говоря, кнопки в интерфейсе и для 13-дюймового экрана ноутбука, и для 27-дюймового моноблока должны быть одинакового физического размера. При этом другие элементы лучше растягивать, т. е. на большом экране они будут выглядеть больше. Если об этом не думать изначально, то интерфейс при смене масштаба обязательно где-то будет портиться. Возможность отображения в произвольном масштабе должна быть базовым принципом формирования интерфейса, а не нашлепкой на финальном этапе.

Наша старая добрая логика уже готова подсказать нам решение: надо всего лишь создать единую точку отсчета для всех элементов интерфейса, признаваемую и используемую всеми участниками рынка. И тогда элементы интерфейса (в первую очередь, шрифты) всегда будут комфортного размера. Логично, правда? И просто. Проблема в том, что этот параметр у нас уже был, и назывался он dpi…

Однако dpi не только не уменьшил путаницу в интерфейсах, а увеличил ее. Поэтому dpi тоже должен (даже, можно сказать, «обязан») перестать восприниматься как базовый параметр, от которого считается всё остальное. Нет, он может сохранить свое значение в системе (например, при выводе на печать), но разработчики больше не имеют права опираться на него при создании приложений.

У проблемы «жесткого указания масштаба» есть еще одна старая причина. Если вдуматься, то использование dpi, построение интерфейсов в пикселях, 100-процентный масштаб — это костыли, намеренные упрощения, которые в свое время позволяли нам экономить вычислительные ресурсы компьютера: ему не надо было заниматься сложными расчетами для формирования картинки, нужно было просто «рисовать, как приказано» — а это гораздо проще. При слабых компьютерах нам приходилось с этим считаться (посмотрите, например, на параметры Windows типа «отключить анимацию для экономии ресурсов компьютера»), но ведь сейчас у нас достаточно ресурсов. Однако многие параметры и принципы до сих пор живы, во многом благодаря инерции.

Поэтому вполне логично, что сейчас идет движение в сторону виртуализации интерфейсов. Цель этого процесса — вообще разорвать связь между программной и аппаратной частью. В мире ПО нет такого понятия, как «пиксель», и интерфейс должен рассчитываться не в пикселях, а в абстрактных линиях и пропорциональных величинах. Это позволит компьютеру легко и просто «собрать» интерфейс приложения для любого монитора. Если мы посмотрим, как развивается платформа Windows в последнее время (создание WDM и т. д.) — то это и есть это направление.

А разрешение станет означать совсем другое

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

Традиционно параметр «разрешение экрана» говорил нам, сколько информации поместится на экран. Размеры элементов задавались через dpi, dpi приравнивался к ppi (ну, или, для графики, напрямую в пикселях), соответственно, чем больше разрешение экрана, тем больше элементов на него поместится. Раньше экраны были маленькие и с небольшим разрешением, поэтому любой рост размера или разрешения приносил существенное увеличение удобства работы.

Сегодня разрешение современных настольных мониторов достаточно велико, чтобы можно было не волноваться о каждом пикселе. Да и в ноутбуках ситуация постепенно улучшается. При этом на том же ноутбуке с разрешением экрана 1920×1080 точек придется увеличивать масштаб, и в результате количество информации на экране будет примерно таким же, как при разрешении 1366×768. Вспомните, новый интерфейс Windows показывает шесть вертикальных рядов плиток на 27-дюймовом мониторе и всего лишь три — на ноутбуке, хотя физическое разрешение матрицы у них одинаково.

Таким образом, с отказом от dpi и в ситуации, при которой одно и то же физическое разрешение может быть у экрана с диагональю от 11,6 до 27 дюймов, мы приходим к выводу, что в современных и будущих системах количество информации на экране должно определяться физическим размером экрана, а не его разрешением. Что же до разрешения, то оно станет характеристикой четкости изображения на экране: сам элемент будет того же размера, но в его отрисовке будет принимать участие больше пикселей, что позволит нарисовать его на экране с более высоким качеством. Это уже реализовано в мобильных ОС и Mac OS, сейчас на очереди Microsoft Windows.

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

Впрочем, думаю, некоторое время маркетинговое значение этого термина сохранится именно в силу инерции. Этот этап мы наблюдаем сейчас во флагманских смартфонах на Android — производители почему-то взяли на вооружение параметр PPI и постоянно выпускают торжествующие пресс-релизы, что в их новой модели он вырос с 441 до 446. Потрясающе! Через некоторое время, когда пользователи поймут, что это ни на что не влияет, его потихоньку закопают в недрах теххарактеристик устройства, а маркетологи придумают нам другие красивые циферки, например «цветовой охват 98%». Что? Уже используют? Ну вот видите…

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

Заключение

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

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

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

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

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

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

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

Калькулятор

PPI и Калькулятор DPI

Имеет ли значение размер (PPI)?

Ой, извечный вопрос! Больше лучше? Такой общий вопрос требует такого же старого и используемого ответа: АД ДА! это зависит . Шутки в сторону, иметь более высокий PPI или DPI в целом лучше, поскольку это означает более тонкое изображение, которое сохраняет большее количество деталей. Однако всегда есть компромисс, и есть определенные сценарии, в которых более высокое значение PPI может быть вредным для .

Если у нас маленький экран, например, в наших смартфонах, или если мы смотрим на изображение издалека (например, телевизор или кинопроектор), есть точка , в которой наши глаза не могут обнаружить каждый отдельный пиксель. , а увеличение PPI имеет все меньший и меньший эффект. Это принцип, лежащий в основе так называемого «дисплея Retina», который Apple использует в своих устройствах.

Этот порог зависит от расстояния , с которого мы обычно смотрим на экран, а также от размера экрана.Например, у iPhone XR PPI равен 326, а у iMac с дисплеем 5K — 218 пикселей на дюйм. Число PPI iPhone XR явно выше, поскольку мы склонны смотреть на наши смартфоны гораздо ближе , чем мы (должны) смотреть на монитор компьютера.

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

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

Итак, даже если больший PPI обычно лучше, действительно зависит от , как мы видели при сравнении iPhone XR PPI и iMac.

.

Измените настройку точек на дюйм (DPI) монитора

2. Компьютеры
3. ПК
4. Измените настройку точек на дюйм (DPI) монитора

Автор: Dan Gookin

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

Dpi , , что означает количество точек на дюйм, является ключевой концепцией использования компьютерной графики.Ваш компьютер, несомненно, использует разрешение монитора 96 точек на дюйм. Это значение можно изменить на 120 dpi или любое другое значение dpi.

Вам не нужно менять разрешение монитора. 96 dpi подходит для использования на ПК. Фактически, большинство программ и веб-страниц предполагают, что на мониторе вашего ПК установлено разрешение 96 dpi.

Однако, когда просмотр экрана затруднен, лучше выбрать 120 dpi. А для художников-графиков, которым требуется более реалистичное представление информации на экране, различные разрешения dpi могут решить некоторые проблемы.

Чтобы установить dpi в Windows 7 и Vista, начните со следующих шагов:

1. Щелкните рабочий стол правой кнопкой мыши и выберите команду «Персонализировать».

2. В Windows 7 щелкните ссылку «Показать» в нижнем левом углу окна «Персонализация».

3. В списке задач в левой части окна выберите «Установить произвольный размер текста (DPI)» или «Настроить размер шрифта (DPI)».

4. В Windows Vista нажмите кнопку «Продолжить» или введите пароль администратора, когда будет предложено сделать это.

   На этом этапе в Windows Vista можно выбрать масштаб по умолчанию (96 точек на дюйм) или больший масштаб (120 точек на дюйм). Вместо этого будьте более гибкими, как Windows 7, и продолжайте с этого шага:

5. В Windows Vista выберите Custom DPI.

   Откроется диалоговое окно «Масштабирование DPI». Вы можете использовать меню, чтобы выбрать настраиваемое масштабирование DPI или перетащить линейку влево и вправо.

6. Нажмите кнопку ОК, чтобы зафиксировать новую настройку DPI.

7. Закройте оставшиеся открытые диалоговые окна, окна и многое другое на экране.

Чтобы установить dpi в Windows XP, выполните следующие действия:

1. Щелкните правой кнопкой мыши по дисплею и выберите «Свойства» во всплывающем меню.

2. Щелкните вкладку «Параметры» в диалоговом окне «Свойства экрана».

3. Нажмите кнопку «Дополнительно».

4. Выберите 96 точек на дюйм или 120 точек на дюйм в раскрывающемся меню.

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

5. Используйте диалоговое окно Custom DPI для настройки разрешения экрана.

   Вы можете выбрать процентное значение в раскрывающемся меню или с помощью мыши перетащить линейку в большем размере. К сожалению, вы не можете сбросить dpi до значения менее 100 процентов.

6. Нажмите кнопку ОК, чтобы подтвердить настройки, или нажмите Отмена, если вы просто возились.

   Выполняйте любые дополнительные указания, например перезагрузите компьютер.Да, и закройте любые другие диалоговые окна или окна, которые вы могли открыть.

Windows, возможно, придется установить или настроить новые шрифты и, возможно, перезагрузить компьютер при изменении разрешения.

.

DPI любовь ♥ Легко найти DPI / PPI любого экрана

Есть аргументы в пользу обоих терминов. В целом PPI немного более правильный, но DPI более распространен, поэтому он используется на этом сайте (также ppi.lv не был доступен: P).
Если вам интересно, вы можете прочитать об этом в статье Википедии о плотности пикселей.

В более поздней терминологии, DPI часто используется для фактических пикселей устройства и Dots Per Pixel (dppx) для количества пикселей устройства на пиксель CSS (например,грамм. в дисплеях Retina это будет 2).

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

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

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

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

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

.

MONITOR_DPI_TYPE (shellscalingapi.h) — приложения Win32

• 05.12.2018
• 2 минуты на чтение

В этой статье

Обозначает настройку количества точек на дюйм (dpi) для монитора.

Синтаксис

  typedef enum MONITOR_DPI_TYPE {
  MDT_EFFECTIVE_DPI,
  MDT_ANGULAR_DPI,
  MDT_RAW_DPI,
  MDT_DEFAULT
};
  

Константы

Примечания

Все эти настройки зависят от PROCESS_DPI_AWARENESS вашего приложения

Требования

См. Также

GetDpiForMonitor

.