Гонка за ppi: новое безумие хайтека. Руководство дизайнера: DPI и PPI — что это и как этим пользоваться? Какая плотность пикселей лучше для смартфона

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

Аббревиатура PPI расшифровывается как «Pixel Per Inch», то есть пиксель на дюйм. Эта величина указывает, сколько пикселей размещается в одном квадратном дюйме реальной величины монитора. Расчёт общего количества пикселей производится при помощи стандартных формул площади прямоугольника или прямоугольного треугольника, которые каждый из нас изучал в школе. Чем больше эта величина, тем выше разрешающая способность монитора.

Что значит плотность пикселей ppi

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

ВАЖНО! Имеет значение и само качество изображения – если картинка размером 20х20 пикселей отображает лесной массив, то вне зависимости от силы монитора картинка будет «зернистой».

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

Если речь идёт о мобильных устройствах (телефоны, смартфоны, планшеты и пр.), то слишком высокий ppi будет для них не столько полезен, сколько вреден. Вывод на экран качественной картинки с большим количеством пикселей пагубно сказывается на уровне батареи во время работы. То есть, устройства с большим ppi не смогут длительное время обойтись без подзарядки.

Как отрегулировать?

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

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

На мобильных устройствах свойства экрана могут быть отрегулированы в разделе «Настройки». Но не все телефоны предоставляют своим владельцам такую власть над собой.

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

В современных смартфонах можно встретить разрешение от 320х240 пикс. (самые бюджетные модели для детей и старшего поколения) до 3840х2160 пикс. (как правило, флагманы). Чем больше экран и меньше его разрешение, тем крупнее пиксели и тем больше размывается изображение. Например, если взять 6-дюймовый экран с разрешениями 1280х720 пикс. (HD) и 1920х1080 пикс. (Full HD), то в первом случае картинка будет иметь меньшую четкость.

Но стоит ли гнаться за более высокими разрешениями экранов смартфонов вплоть до 4К? Да, бывают случаи, когда они действительно требуются - например, для погружения в виртуальную реальность, где дисплей находится практически вплотную к глазам и мы различаем мельчайшие пиксели ( о смартфонах для VR). А вот с остальным контентом всё уже не так однозначно.

Пиксельная плотность

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

Чем больше пикселей помещается на дюйме пространства, тем они, соответственно, будут мельче, а изображение - более гладким и четким; тем богаче цветопередача, лучше яркость и контрастность. Более того, при высокой PPI шрифты на экране выглядят более гладкими, что улучшает читаемость текста. Например, PPI при разрешении 2560х1440 пикселей и диагонали 5,5” будет равняться 534, а если взять экран немного больше (5,7”), то при том же разрешении PPI упадет до 515, и картинка потеряет в четкости.

Обычный пользователь услышал об этом понятии в 2010 году с выпуском iPhone 4 с дисплеем Retina. Тогда в Apple заявили, что максимум пикселей на дюйм, которые может различить человеческий глаз, составляет около 300. В Колумбийском университете тоже рассчитали предел пиксельной плотности для человеческого глаза, и он оказался чуть выше - 350 PPI. А в 2014 году LG продемонстрировала три экрана - с HD-разрешением и плотностью 269 PPI, с Full HD и 403 PPI и с QuadHD (ее тогдашний флагман LG G3) и 538 PPI. И разница между ними была заметна, картинка на каждом последующем экране выглядела более четкой и качественной, и это было видно невооруженным глазом.

Раймонд Сонейра из компании DisplayMate утверждает, что человек с идеальным зрением может «увидеть» плотность до 600 PPI, что делает не такими безумными идеи о выпуске смартфонов с разрешением 4К и 800 PPI. Сейчас пиксельная плотность современных флагманов уже перевалила за 500 PPI, но в какой-то момент невооруженным взглядом пользователи перестанут различать плюсы небольшого, по сути, экрана смартфона с высокой плотностью.

Смартфоны с самыми четкими экранами

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

Samsung Galaxy S9

Samsung Galaxy S9 стал лидером по четкости экрана - его пиксельная плотность составляет 568 PPI. Из-за меньшей диагонали (5,8") он обошел своего «собрата» S9+, имеющего такое же разрешение (2960х1440 пикс.), но более крупную диагональ (6,2"), и поэтому получившего 531 PPI. Смартфон выполнен в «безрамочном» дизайне и, к счастью, без популярной сейчас «челки» - это плюс производителю.

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

LG G6 () лишь немного отстал от лидера с результатом 565 PPI (диагональ - 5,7”, разрешение - 2880х1440 пикс.). LG назвала свой экран FullVision, указывая на то, что у пользователя будет больше пространства для просмотра видео, страниц в интернете и текста. Все данные можно разделить на два окна - в смартфонах LG эту функцию поддерживает большое количество приложений. Хотя IPS-матрица считается менее яркой, чем AMOLED, ее качество все же было положительно оценено пользователями. Есть поддержка Dolby Vision и HDR 10.

Кстати, недавно был представлен LG G7 ThinQ, который может похвастаться более высоким разрешением - 3120х1440 пикселей. Но из-за увеличения диагонали до 6,1” плотность пикселей у его экрана немного ниже - 563 PPI.

Хотя к стратегии компании HMD Global у многих есть вопросы, получился достаточно удачным и расположился на третьем месте списка с результатом 554 PPI. Пусть у его экрана более низкое разрешение (2560х1440 пикс.), чем у смартфонов, оказавшиеся в топе ниже, он выигрывает за счет небольшой диагонали дисплея - 5,3 дюйма.

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

Vivo Xplay 6

Vivo Xplay 6 достаточно сильно отстал по показателям от тройки лидеров - у него 538 PPI. Но за то, что он сюда попал, следует благодарить среднюю диагональ экрана (5,46”) и высокое разрешение (2560х1440 пикс.). По внешнему виду сразу становится понятно, у кого черпали вдохновение дизайнеры - изогнутый по краям дисплей повторяет Samsung Galaxy Note 7. Да и сама матрица AMOLED тоже от южнокорейского производителя, так что неудивительно, что экран выдает качественную картинку.

Изогнутыми края экрана сделаны не просто так - здесь есть панель, полностью аналогичная Edge от Samsung. Разрешение дисплея тоже можно понизить до Full HD для повышения автономности, а вот калибровать цвета настройки не позволяют.

Google Pixel 2 XL

Еще один «четкий смартфон» -интересный, но не слишком популярный прошлогодний флагман Google Pixel 2 XL. У него большая диагональ (6") и высокое разрешение экрана (2880х1440 пикс.), а плотность пикселей составляет 537 PPI. Установлена матрица POLED производства LG, которая местами уступает SuperAMOLED от Samsung, но зато тут нет присущей последним «кислотности» оттенков. Однако, если отклоняться от прямого угла, то цвета начинают инвертироваться и уходить в синий.

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

Точно такую же плотность пикселей (537 PPI) имеет и второй смартфон производства LG в нашем списке - LG V30+. У него, как и у Google Pixel 2XL, диагональ 6" и разрешение 2880х1440 пикс. Тип матрицы - снова POLED (On-Cell touch). Но, по всей видимости, для своих флагманов LG всё же делает более качественные дисплеи.

Экран тут яркий, с качественным антибликовым покрытием и сбалансированными цветами. Есть отдельные профили отображения цвета - для серфинга в интернете, просмотра фильмов, чтения книг. Также поддерживается HDR, а у функции Always-on-display, что присутствует у всех современных OLED-экранов, имеются разные варианты настройки: времени отключения, яркости, отображения содержимого и т.д.

HTC U11 Plus

И третий подряд смартфон с 6-дюймовым экраном, разрешением 2880х1440 точек и плотностью пикселей 537 PPI - это HTC U11 Plus. Фирменная матрица Super LCD 6, по словам производителя, обеспечивает естественную цветопередачу. Такой экран очень нравится тем, для кого дисплеи от Samsung слишком яркие. А для любителей сочных оттенков экран будет казаться слишком блеклым, но глаза от него не устают.

У смартфона имеется аналог функции Always-on-display, но т.к. это LCD-матрица, отображаться будут только часы и информационные значки, а батарея сядет гораздо быстрее. Интересен режим «В перчатках» с повышенной чувствительностью экрана, а также возможность выбрать цветовой профиль и отдельно менять в нем настройки.

Есть поддержка динамического диапазона HDR10, но только на аппаратном уровне. С новыми обновлениями системы она должна появиться и программно.

Tonino Lamborghini Alpha one

Вместе со следующим смартфоном списка, Tonino Lamborghini Alpha one, нас приглашают в премиум-сегмент, предлагая наряду с впечатляющим внешним видом (корпус из «жидкого металла» и отделка натуральной кожей) еще и достойные характеристики. Диагональ в 5,5 дюймов и разрешение 2560х1440 точек создают пиксельную плотность 534 PPI.

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

Huawei P10 Plus

Huawei P10 Plus по характеристикам экрана совпадает с Tonino Lamborghini (за исключением того, что матрица - IPS), и поэтому точно так же демонстрирует 534 PPI.

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

ASUS ZenFone AR ZS571KL

Ну а смартфон ASUS ZenFone AR ZS571KL специально «заточен» под виртуальную и дополненную реальность, и поэтому он обладает большим и четким экраном с диагональю 5,7 дюймов и разрешением 2560х1440 пикс., а его пиксельная плотность составляет 515 PPI.

Сверху экран прикрыт 2,5-D стеклом Gorilla Glass 4. Превратить устройство в шлем VR можно с помощью его же упаковки - она раскрывается, туда вставляется смартфон - и вперед, навстречу виртуальным приключениям. Правда, режим VR очень быстро разряжает батарею - как, впрочем, и игры.

	Расчетная PPI	Заявленная PPI	Дисплей	Цена
Samsung Galaxy S9	567,53	568	Super AMOLED 5,8" 2960х1440 пикс.	i 59 990
LG G6	564,90	565	2880х1440 пикс.	от i 37 990
Nokia 8	554,19	554	2560х1440 пикс.	i 29 990
Vivo Xplay 6	537,95	538	2560х1440 пикс.	от i 35 990
Google Pixel 2 XL	536,66	537	2880х1440 пикс.	от i 48 990
LG V30+	536,66	537	2880х1440 пикс.	i 59 990
HTC U11 Plus	536,66	537	2880х1440 пикс.	i 49 990
Tonino Lamborghini Alpha one	534,04	534	2560х1440 пикс.	i 149 000
Huawei P10 Plus	534,04	534	2560х1440 пикс.	от i 32 190
ASUS ZenFone AR	515,3	515	2560х1440 пикс.	i 59 990

Для понимания таких важных и основополагающих понятий в полиграфии как ppi и dpi нужно понимать основы компьютерной графики в целом.

Для начала следует уяснить, что ppi и dpi - это далеко не одно и то же и между собой они зависимы весьма условно.

Итак, начнём с ppi, расшифровывается как «pixels per inch», что значит «пиксели на дюйм». Так как в РФ принята метрическая система измерения то неплохо вспомнить, что 1 дюйм равен 2,54см (хотя это округлённо, в реальности - 2,5399931см). Посему, для нас фотография 10×15см с таким разрешение как 300ppi означает примерно следующее: фотография с размерами сторон 10×15см в которой на 2,54см приходится 300px. Что равно 118px на 1см (это несложно вычисляется делением 300 на 2,54 - результат может быть только целым, потому что не бывает половины пиксела).

Размер данной фотографии также можно указать в пикселах, как часто делают в компьютерной графике. Умножаем величины физического размера фотографии на количество пикселей умещающихся в одном сантиметре 10смх118px=1180px и 15смх118px=1770px и получаем размеры фотографии в пикселах 1180×1770px. Как правило люди, которые слабо разбираются в компьютерной графике, составляют себе представление о качестве фотографии именно по её размерам в пикселах, что является заблуждением. Потому что изображение 100×150см с разрешением 30ppi также будет иметь размер в пикселах 1180×1770px. При печати такого изображения рассматривать его невозможно будет ближе чем с 20 метров, наверное, иначе оно перестанет быть понятным изображением, а превратиться в набор разноцветных квадратных пикселов.

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

Размер в пикселах - это абстрактное понятие, которое может существовать только в виртуальном пространстве компьютерной графики. Для большего понимания возьмём наше изображение 10×15px разрешением 300ppi и понизим его до 30ppi. Теперь в один см помещается не 118px, а всего только 11px, хотя само изображение осталось тех же размеров.

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

Существует минимальное разрешение изображения для воспроизведения на мониторе компьютера и минимальное разрешение при печати изображения. Скорее всего минимальная величина в 72ppi для монитора берёт своё начало всё в том же английском дюйме который состоит из 12 линий, которые, в свою очередь, состоят из 72 точек. Так или иначе, но в полиграфии (сейчас в основном используется только в офсете - печать газет, журналов) существует такая величина как lpi (Lines per inch - линий на дюйм), что в общем обычному смертному сулит трлько лишь сумятицу и неразбериху среди понятий ppi, lpi и dpi, которую мы сейчас и наблюдаем. Название «линия» носит условный характер и по сути тоже является аналогом точки или пикселя. Что весьма становится запутанно. Поэтому не станем вообще касаться термина lpi, так как он редко сегодня используется в цифровой полиграфии и до конца понятен ограниченному кругу людей, которые понимают процессы так называемой расетризации (основной процесс вывода на печать от которого заисит более чем 50% успеха при печати). Продолжим говорить лишь о ppi и dpi.

Cейчас по прежнему речь идёт про ppi - разрешении цифрового изображения: итак, минимальным приемлемым разрешением для воспроизведения графики на мониторе является 72ppi. Все мониторы имеют разрешающую способность 72ppi, поэтому если вы приблизите свой нос вплотную к монитору, то вполне сможете различить пикселы изображений. При этом неважно какого размера сам монитор - 15 дюймов или 17. Это всегда будет 72px (в последнее время стали появляться мониоры и экраны с более высоким разрешением - HD, FHD, UHD... Это приводит лишь к тому, что теперь нет единого стандарта разрешения мониоров и что одинаковое изображение на разных мониторах будет выглядеть разным по размеру. В любом случае до сих пор пока всё ориентированно на 72px).

Что происходит, когда изображение имеет разрешение большее чем 72px, например, 350ppi? Вам всё равно будет транслироваться изображение с разрешением монитора в 72ppi. Понять, что изображение имеет более высокое разрешение возможно только при изменении масштаба просмотра. Увеличивая масштаб изборажения (приближая его) будут воспроизводитсья новые детали, до этого невидимые. При приближении изображения с разрешением 72px станут отчётливо видны эти пикселы и изображение распадётся на разноцветные квадратики.

Часто можно встретить такое явление, когда изображению повышают разрешение с тех же 72ppi (например, взятого из интернета) до 300ppi и просят его напечатать в большом формате. Это свидетельствует о полном непонимании термина «разрешение» как такового. Смысла увеличивать разрешение изображению, которое изначально имело 72ppi нет никакого. Это только многократно увеличит его размер и при увеличении вместо структуры пикселей выдаст сильно размытое изображение. Детализации и качества не прибавится.

При печати фотографий минимальным разрешением считается 150ppi. Предполагается, что фотографии могут рассматриваться и вплотную. Разрешение в 150ppi при печати изображения в масштабе 1:1 не воспроизводит структуру пикселей. Однако часто можно слышать рекомендации, что чем больше будет разрешение изображения отправляемого на печать, тем будет качественее. Это глубокое заблуждение. Высокое разрешение изображения влияет только лишь на время компьютерной обработки изображения перед печатью. Для печати вполне достаточно 150ppi. Высокое разрешение в 300 и более ppi, которое изначально было у фотографии (например, снятой на широкоформатную камеру) необходимо в первую очередь для увеличения масштаба печати. Например фотографию 10×15см с разрешением 300ppi можно увеличить в два раза до 20×30см без потери качества и в четрые раза до 40×75см для печати с приемлемым качеством при условии, что фотографию не будут рассматривать в упор. В результате качество изображения зависит от изначальных настройках разрешения. В случае с фотографией - настройки камеры. В случае просто с цифровыми изображениями - настройки в программе нового файла. Если вы возьмёте фотографию с разрешением 300ppi понизите его до 72ppi, а потом вернёте прежние 300ppi, то это не вернёт прежнего качества, и детализации.

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

Теперь самое время рассмотреть вопрос - что же такое dpi?

dpi - расшифоровывается как «dots per inch» и переводится как «точек на дюйм». На первый взгляд понятия ppi и dpi идентичны, особенно если вспомнить, что термином пиксель обозначается минимальная точка компьютерной графики, которая в силу особенностей виртуального мира имеет форму квадрата. Кажется что оба понятия говорят об одном и том же - точках на дюйм. Но на самом деле эти понятия никак не связанны между собой. Чтобы лучше уяснить разницу между ними лучше всего запомнить, что ppi как термин из компьютерной графики - это понятие виртуального мира, а dpi - термин полиграфии, тоесть реальный мир. Если говорить более адекватно, то ppi - это разрешение самого цифрового изображения, а dpi - это разрешение печатающего устройства. И хотя полиграфия невозможна без графики, термины эти между собой никак не связаны.

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

Чем больше точек поместится на 1 дюйм, тем выше будет качество отпечатка.

Если, например, отпечатать с разрешением 1440dpi изображение с 40ppi в масштабе 1:1 то вы получите очень чётко отпечатанное изображение с высококачественно прорисованными пикселами, которые будет видно невооружённым глазом с расстояния 1м. Можно наоборот, отпечатать изображение высокого разрешения ppi с разрешением печати 360dpi - отпечаток будет нерезким, будет просматриваться зернистость.

Термин dpi не единственный, который характеризует качество отпечатка. Также при печати важен размер наносимой капли, её форма (чем правильнее, тем качественнее отпечаток) и др. При низком разрешении печати (360 dpi) плотность капель будет существенно ниже и размер их должен быть больше по сравнению с разрешением в 1440dpi. Это будет сказываться на детализации, точности и тонкости линий, а также насыщенности цветов. Более высокое разрешение сказывается на времени печати - требуется большее количество проходов. В широкоформатной и интерьерной печати разрешение печати задаётся как равными, так и не равными величинами. Например 360×360dpi, 360×540dpi, 540×540dpi, 540×720dpi, 540×1080, 720×720, 720×1080 и т.д. От чего так - я, признаюсь, сам не понимаю. Но как правило все придают значение только первой величине и поэтому существует 4 основных разрешения печати 360dpi, 540dpi, 720dpi, 1440dpi.

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

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

На сим я закругяюсь и желаю вам успехов в понимании столь принципильных понятий в компьютерной графике и полиграфии, как dpi и ppi.

08/08/13- Влад Рачков

Возможно, вам будут интересны следующие страницы:

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

Вывод: Идеальных инструментов не существует, но есть те, с которыми именно вам комфортно работать. Если вы располагаете достаточным количеством времени и средств, протестируйте все перечисленные программы для формирования собственного мнения.