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

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

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

В современных смартфонах можно встретить разрешение от 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

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

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

Технологии экранов с тех времен очень продвинулась вперед, и сейчас даже самые базовые компьютерные экраны имеют разрешение где-то между 115 и 160 пикселей на дюйм (ppi - pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с экраном Retina - суперчеткий экран, который удвоил количество пикселей на дюйм. В результате этого релиза графика стала четче, чем мы когда-либо видели.

Видите разницу в иконке конверта Mail, а также четкость текста?

Чтобы поддерживать тот же физический размер пользовательского интерфейса, пиксельные размерности удвоились. Кнопка, которая ранее занимала 44px, сейчас стала занимать 88px. Для совместимости между разными устройствами, дизайнеры должны выпускать графику (по типу иконок) в “1x” и в новом формате “2x”. Но тут возникла еще одна проблема: вы не можете больше сказать: “Привет, эта кнопка должна быть 44 пикселя в высоту”, потому что она должна быть также 88 пикселей на другом устройстве. Раньше не было единицы измерения, не зависимой от пикселя. Решением стали “точки” (points), или “pt”. 1 точка соответствует 1 пикселю на экранах до поколения retina и 2 пикселям на экране retina в 2х. Точки позволяют сказать: “привет, эта кнопка должна быть 44 точки в высоту”, и потом любое устройство может адаптировать этот размер под свой коэффициент плотности пикселей… как 1х или 2х. Или же 3х в случае с iPhone 6 Plus.

PT и DP

Конечно, это все не только актуально для устойств Apple, в эти дни каждая операционная система - будь то десктопная или мобильная версии, поддерживает экраны с высоким ppi/dpi. В Google придумали свою единицу измерения для Android, независимую от пикселей . Она не называется “точка”, она называется “DIP” - пиксель, не зависящий от плотности, сокращенно “dp”. Это не эквивалент точек в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x и т.д.).

Возможно, вас интересует физический размер точки. На самом деле, UI-дизайнерам не особо это важно, потому что у нас нет никакого контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно просто знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке дизайнов в 1x, 2x, 3x и прочих нужных коэффициентах. Но если вам реально любопытно, знайте, что в Apple нет постоянной конверсии между дюймами и точками. Другими словами, нет единой плотности пикселей, которая представляет 1 точку - это зависит от конкретного устройства (посмотрите раздел “Восприятие масштаба” ниже). В iOS точка варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.

Контролируемый хаос

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

Дизайн в векторе. Дизайн в 1х.

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

Второй урок: . Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте… вместо дизайна в конечных пиксельных разрешениях конкретных устройств (2x, 3x и т.д.) и возникновения массы проблем при экспорте. Так как масштабирование 2x-графики в 150% для генерации версии в 3х провоцирует появление размытых контуров, это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить визуальную четкость.

Макеты для стандартных размеров iPhone должны быть 375×667, а не 750×1334, это как раз то разрешение, в котором оно будет отображаться. Большинство инструментов дизайна не отличают точки от пикселей (Flinto - исключение из этой тенденции), так что дизайнеры могут притвориться, что точки это и есть пиксели, а затем просто экспортировать исходники в 2х- и 3х-кратном размерах.

Притворяйся, пока это не станет правдой!

Тут уже немного сложнее, но все же стоит это упомянуть: иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в точку один, например, 3х, а на самом деле, оно 2.61х, а сам исходник масштабируется в 3х просто для удобства. Вот что iPhone Plus сейчас и делает. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920 (графический чип телефона реализует это масштабирование в реальном времени).

Создавайте дизайн под iPhone Plus, как если бы он на самом деле был 3х. Телефон сам смасштабирует его в 87%.

Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно - линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шансы, хотя я не располагаю никакой инсайдерской информацией, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах. Текущая версия iPhone Plus попросту существует, пока это не станет возможным.

(Брюс Вонг написал об экране iPhone 6 Plus).

Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не очень качественно. Масштабирование такого плана нежелательно, так как все, что вы хотите сделать четким и pixel-perfect в одном масштабе, станет размытым из-за интерполяции (например, линия в 1px становится 1.15 пикселей). Даже если вы не фанатичны в подгонке идеальных пикселей, как я, нет смысла отрицать, что элементы дизайна должны быть целопиксельными, чтобы на вид быть четкими, как задумано
К сожалению, по мере того, как плотность пикселей доходит до 4х и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат!

Восприятие масштаба вашими глазами

Давайте на минуту отложим все эти плотности пикселей и рассмотрим вопрос: должна ли кнопка быть одного и того же физического размера на разных устройствах? Конечно, мы просто используем кнопку, как пример, но мы бы могли рассматривать и иконку, и текст, и панель инструментов. Должны ли эти элементы быть одного размера на всех устройствах? Ответ зависит:

• От точности метода ввода (сенсор или курсор)
• От физических размеров экрана
• От расстояния до экрана

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

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

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

Более низкая плотность пикселей

Более крупные экраны, которые мы используем на расстоянии, обычно располагают меньшей пиксельной плотностью. Телевизор может иметь разрешение в 40 пикселей на дюйм! Для обычного телепросмотра это вполне допустимо. Экран retina в iPad имеет разрешение около 264ppi, а экран retina на iPhone - 326ppi. Так как пиксели на iPad больше (экран менее плотный), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.

Разные размеры

Но, время от времени, использования более низкой плотности пикселей недостаточно… отдельные элементы дизайна должны быть еще больше. Это случилось и с иконками на iPad. На iPhone они 60×60 пикселей, но более крупный экран iPad дает больше пространства, так что практичнее иконки размером 76×76.

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

Санитарная проверка?

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

Важные ресурсы

Google Device Metrics : Впечатляющий список спецификаций для устройств всех типов (Android, iOS, Mac, Windows и т.д.). Узнайте размеры экрана, плотность пикселей и даже примерное расстояние, на котором экран расположен от глаз пользователя. ScreenSiz.es - похожий ресурс.

: Эти шаблоны дизайна (доступные для всех главных дизайн-редакторов) очень полезны, как в практическом смысле, так и для справок по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone и т.д.

: Подробное руководство Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.

Есть еще некоторые ресурсы по пиксельной плотности для дизайнеров.

Теги: , , , , ,

При покупке техники многие сталкивались с одной из характеристик под аббревиатурой 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, или плотность пикселей (сокращение от английского pixels per inch - пикселей на дюйм) - это количество пикселей, вмещающееся в одном дюйме экрана устройства: смартфона, планшета, ноутбука. Чем больше пикселей может разместиться в одном дюйме, тем меньший размер имеет один пиксель и тем менее они видимы невооруженным глазом. Чем больше пикселей умещается на одном дюйме экрана (чем больше цифра ppi) - тем, соответственно, выше четкость и реалистичность изображения.

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

Экран первого компьютера Mac обладал плотностью пикселей 72 ppi. Число кажется большим, но пиксели на самом деле были огромными, а качество картинки - низким. Все из-за того, что сам экран был большим.

Современные смартфоны ушли далеко вперед и оснащаются дисплеями с плотностью пикселей куда более большей. Даже простенькие бюджетные аппараты обладают экранами с и выше, а у флагманских моделей этот показатель достигает 458 ppi (), 522 ppi ) и 642 точек на дюйм (). Смартфон отличается рекордным показателем плотности пикселей - при разрешении экрана 3840×2160 пикселей.

Почему плотность пикселей важна?

PPI – один из важнейших показателей качества экрана! Если вы покупаете смартфон с размером экрана, скажем, 6 дюймов. А разрешение у него всего 720×1280… То экран такого телефона будет зернистым из-за того, что в одном дюйме (2,54 см) будет меньше точек и они будут более крупными. Качество картинки из-за этого будет отличаться в худшую сторону. Производитель в гонке за размером экрана, не позаботился сделать его качественным.

Поэтому при выборе смартфона, смотрите не только на его , но обязательно посмотрите на PPI.

Зачем экран хорошего смартфона должен иметь плотность пикселей больше 300 точек на дюйм

Человеческий глаз в состоянии различить отдельные пиксели при значении 300-350 ppi. Считается, если плотность пикселей выше, среднестатистический человек невооруженным глазом их уже не сможет разглядеть. Некоторые люди с идеальным зрением могут различать пиксели вплоть до уровня плотности 600 ppi. Но это редкость.

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

Хотите смартфон с качественным экраном и максимально четкой картинкой - выбирайте модели с плотностью пикселей около и немного выше 300-350 ppi.

Чем ppi отличается от dpi и почему не стоит путать

D pi (сокращение от английского dots per inch - точек на дюйм) - это разрешение печатающего устройства. Dpi - говоря простым языком, это величина, показывающая, насколько маленькую точку может нарисовать печатающее устройство. Термин d pi применяется в полиграфии.

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

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

Как рассчитать плотность пикселей экрана самостоятельно

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