Эта статья и видео были созданы как часть курса обучения UX в Sketch Master. Руководство дизайнера по DPI и PPI Это анимированное видео покрывает большинство тем в статье, но если вы заинтересованы в более педантичных подробностях, обязательно прочитайте этот пост целиком.
Пиксельная плотность обозначает количество пикселей, которое вмещается в определенном физическом размере (обычно, это дюйм). На первом Mac-е было 72 пикселя на дюйм — число вроде кажется большим, но на самом деле это были огромные пиксели, под которые еще не каждая графика подойдет. Иконки на первом Mac, дизайн Сьюзан Каре.
Технологии экранов с тех времен очень продвинулась вперед, и сейчас даже самые базовые компьютерные экраны имеют разрешение где-то между 115 и 160 пикселей на дюйм (ppi — pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с экраном Retina — суперчеткий экран, который удвоил количество пикселей на дюйм.
В результате этого релиза графика стала четче, чем мы когда-либо видели. Видите разницу в иконке конверта Mail, а также четкость текста? Чтобы поддерживать тот же физический размер пользовательского интерфейса, пиксельные размерности удвоились. Кнопка, которая ранее занимала 44px, сейчас стала занимать 88px.
2 Выбор монитора, МегаГайд ч.2 — размер и разрешение экрана
Для совместимости между разными устройствами, дизайнеры должны выпускать графику (по типу иконок) в “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.
Сага о PPI II часть: разрешение монитора, сглаживание, 1080p vs 1440p vs 4k vs 8k | ГНЖ | Мониторы
Контролируемый хаос
А теперь приготовьтесь окунуться в реальность. На ранних порах развития мобильных устройств с высоким разрешением, плотность пикселей была просто 1х или 2х. Но сейчас все совсем сошли с катушек — есть масса пиксельных плотностей, которые должен поддерживать дизайн.
В Android есть отличный пример: на момент написания этого поста разные производители поддерживают шесть разных плотностей пикселей. Это означает, что иконка, которая имеет одинаковый размер на всех экранах, на самом деле должна быть выполнена в 6 разных вариациях. Для Apple актуально два или три разных исходника.
Дизайн в векторе. Дизайн в 1х.
Есть пара практических уроков, которые вам стоит извлечь из всего этого. Для начала, вы должны создавать дизайны в векторе. Это позволяет нашим интерфейсам, иконкам и прочей графике масштабироваться в любой нужный размер. Второй урок: мы должны все рисовать в масштабе 1х.
Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. вместо дизайна в конечных пиксельных разрешениях конкретных устройств (2x, 3x и т.д.) и возникновения массы проблем при экспорте. Так как масштабирование 2x-графики в 150% для генерации версии в 3х провоцирует появление размытых контуров, это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить визуальную четкость. Макеты для стандартных размеров iPhone должны быть 375×667, а не 750×1334, это как раз то разрешение, в котором оно будет отображаться. Большинство инструментов дизайна не отличают точки от пикселей (Flinto — исключение из этой тенденции), так что дизайнеры могут притвориться, что точки это и есть пиксели, а затем просто экспортировать исходники в 2х- и 3х-кратном размерах.
Притворяйся, пока это не станет правдой!
Тут уже немного сложнее, но все же стоит это упомянуть: иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в точку один, например, 3х, а на самом деле, оно 2.61х, а сам исходник масштабируется в 3х просто для удобства. Вот что iPhone Plus сейчас и делает.
Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920 (графический чип телефона реализует это масштабирование в реальном времени). Создавайте дизайн под 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! К счастью, это не совсем типичный случай для иконок приложений.
Санитарная проверка?
Что такое разрешение, частота обновления, соотношение сторон и плотность пикселей для дисплея
Windows
Всякий раз, когда вы читаете о мониторе или выходите в магазин за такими мониторами, как телевизор или монитор для компьютера, вы наверняка слышали о различных параметрах, по которым можно судить об основном качестве и производительности дисплея. Разрешение, частота обновления, соотношение сторон и плотность пикселей – все эти параметры являются обязательными для получения правильного, четкого и правильно насыщенного цвета изображения. Дисплей является наиболее ценным для геймеров. Чем лучше Frames выполняет свои процессы в секунду, тем плавнее выглядит игровой процесс.
Давайте просто проверим эти термины немного подробнее.
Что такое разрешение, частота обновления, соотношение сторон, плотность пикселей
Pixel
Пиксель – это самый маленький элемент, который можно отобразить на экране. Это не что иное, как точка на экране. Скопления этих точек загораются вместе, образуя изображение на дисплее.
Теперь давайте начнем с резолюции.
Разрешение
Размер дисплея измеряется физическим размером расстояния между 2 диагонально противоположными углами дисплея. Это обычно измеряется в дюймах или сантиметрах. Но это не делает никакой справедливости, позволяя нам судить о качестве дисплея. Следовательно, нам нужно знать точные горизонтальные и вертикальные размеры дисплея. Это просто обозначено в резолюции.
Количество пикселей, расположенных по горизонтали на количество пикселей, расположенных по вертикали, является разрешением дисплея. Это означает, что чем больше пикселей внутри дисплея, тем лучше будет качество изображения и тем четче будет изображение. Но это не совсем так. Мы обсудим это дальше.
Ниже приведены некоторые из распространенных разрешений экрана:
- 2560 x 1440 (1440p)
- 1920 x 1080 (FHD или Full HD или 1080p)
- 1600 х 900
- 1024 х 768
- 1280 x 720 (HD или 720p)
Вы можете изменить разрешение вашего дисплея, выполнив следующие действия,
Откройте Настройки Windows . Перейдите по этому пути, Система> Показать . Здесь вы можете изменить разрешение в раскрывающемся меню в разделе Масштаб и макет.
Пиксельная плотность
Плотность пикселей дисплея обозначается тем, что количество пикселей отображается на дюйм на дисплее. Общее количество пикселей на экране является произведением горизонтально расположенных и вертикально расположенных пикселей дисплея. Это разрешение дисплея. Например, для дисплея Full HD количество пикселей на дисплее составляет 1920 * 1080, что составляет 2073600 пикселей. Теперь фактическая плотность пикселей дисплея рассчитывается по этой формуле:
Пиксельная плотность = Root ((горизонтальное число пикселей ^ 2) + (вертикальное количество пикселей ^ 2))/размер экрана
Следовательно, для 1080p Full HD дисплея размером 15 дюймов будет,
Квадратный корень ((1920) ^ 2 + (1080) ^ 2)/15
Это будет равно 146,86 PPI или 146,86 пикселей на дюйм.
Следовательно, чем меньше пикселей на дисплее, чем меньше его физическая площадь, тем четче будет изображение.
Соотношение сторон
Соотношение сторон дисплея – это соотношение горизонтального и вертикального расположения пикселей на дисплее. Это означает, что разрешение дисплея решает, каким будет соотношение сторон того же дисплея. Следовательно, дисплей с разрешением Full HD 1920 x 1080, соотношение сторон будет 16: 9. Другие действительно известные соотношения сторон, которые мы видим на дисплеях:
Чем больше соотношение сторон, тем больше будет физический, а также виртуальный отпечаток и область просмотра изображения. Наиболее известные соотношения сторон для ПК и ноутбуков – 16: 9 и 4: 3. В то время как для мобильных телефонов 16: 9 считался обычным явлением, но в последнее время в отрасли наблюдается тенденция 18: 9.
Частота обновления
Этот термин говорит само за себя. Это способность дисплея, с помощью которой он меняет изображения на дисплее. Наиболее часто встречающиеся частоты обновления – 50 Гц и 60 Гц. Это также можно рассчитать как 50 кадров в секунду (кадров в секунду) и 60 кадров в секунду.
Это означает, что на дисплее может отображаться 60 различных экземпляров изображения на дисплее, если установлено значение 60 Гц или 60 кадров в секунду. Это означает, что чем выше частота обновления экрана, тем более плавный переход изображения будет отображаться на экране.
Вы можете установить его по своему выбору в Windows 10 следующим образом:
Откройте «Настройки Windows» и перейдите к «Система»> «Экран»> «Дополнительные параметры дисплея»> «Свойства адаптера дисплея для дисплея X». Здесь X обозначает номер дисплея, который используется вашим компьютером.
Откроется новое мини-окно со свойствами вашего дисплея. Переключитесь на вкладку под названием Монитор. И теперь вы можете переключать частоту обновления для вашего дисплея.
Существуют различные программы, которые утверждают, что могут переключать эти аппаратно-зависимые функции с помощью программного обеспечения компьютера. Но они ограничены в функциональности. Они не могут обеспечить качество из-за ограничений, налагаемых реальным оборудованием. Следовательно, долгое их использование может не дать должного опыта, как задумано.
Источник: techarks.ru
Насколько важна плотность пикселей?
Сегодня все экраны имеют цветные пиксели. Чем меньше пиксели, тем лучше изображение на экране. Пиксельная плотность измеряется в PPI (пикселях на дюйм). Чем выше PPI, тем четче изображение.
В цифровой печати PPI часто переводят в DPI (количество точек на дюйм). В офсетной печати для оптимального качества изображения и гладкости обычно необходимо разрешение 300 DPI, но иногда используются и разрешение 266 DPI. Изображения с таким разрешением можно увидеть в журналах, книгах и на плакатах с цветной глянцевой печатью. Без лупы большинство людей никогда и не заметит отдельные точки при этом разрешении.
В газетах обычно используется намного более низкое разрешение в пределах 170 DPI. Даже при том, что держат газеты на таком же расстоянии от глаз, что и журнал, изображения с более низким разрешением такие же четкие. Изображения для рекламных щитов пчатают с разрешением приблизительно 10-20 точек на дюйм, но издали этого не видно и картинка выглядит очень четкой.
Мобильные телефоны и планшеты держат на том же расстоянии, что и газеты или журналы, так что в них применяется разрешение в диапазоне 150-300 точек на дюйм. На пиксельную плотность влияют физические размеры экрана. У 4,5-дюймовых экранов с разрешением 768 x 1280 пикселей чрезвычайно высокое разрешение — 332 точки на дюйм. 10-дюймовые экраны с тем же числом пикселей имеют пиксельную плотность 150 точек на дюйм, почти такую же, что и газеты. Это позволяет различать шрифт, изображения и цвета.
Но разве разная пиксельная плотность помогает быстрее набирать электронные письма? Или вы не в состоянии разобрать буквы и слова, если они состоят из пикселей немного большего размера? Разве цвета и оттенки нельзя разобрать при плотности 200 точек на дюйм? Разве именно высокое разрешение экрана помогает управлять календарем, организовывать контакты?
Понятно, что при плотности 300 точек на дюйм изображение четче и детальнее, но так уж часто нужна такая четкость? Это немаловажно при просмотре фильмов, но смартфонами для этого пользуется достаточно маленькое число людей. Плотность важна при просмотре изображений.
Этим на своих телефонах занимается уже намного большее количество пользователей, но разве фотографии при плотности 150 точек на дюйм совсем неразличимы? Если же необходимо рассмотреть какие-то детали, можно просто увеличить масштаб. Важна ли плотность пикселей для просмотра веб-сайтов? Отнюдь нет. Все веб-сайты разработаны под стандартное разрешение экрана 72 точек на дюйм.
Экран с плотностью пикселей 300 точек на дюйм сделает все изображения чрезвычайно маленькими и неразборчивыми, и вынудит пользователей увеличить масштаб.
Существует немало людей, помешанных на разрешении экранов смартфонов и планшетов. Хвастаться высоким разрешением экрана — то же самое, что хвастаться цифровой подсветкой спидометра в автомобиле. Несомненно, он может быть более удобочитаемым, но разве в этом есть какое-то реальное функциональное преимущество?
С другой стороны, разрешение или разрешающая способность идеального человеческого зрения 20/20 составляет приблизительно 0,2 мм на минимальном расстоянии фокусировки. На расстоянии приблизительно 10 дюймов наилучшим является разрешение приблизительно 700 пикселей на дюйм, так как разрешающая способность глаза составляет одну угловую минуту.
При увеличении этого расстояния приблизительно до 20 дюймов разрешение уменьшается приблизительно до 533 пикселей на дюйм. Разрешающая способность уменьшается с увеличением расстояния или уменьшением углового разрешения. Другими словами, способность глаза различать детали изменяется в зависимости от расстояния до объекта. Она также зависит от большого количества других факторов, таких как диаметр диафрагмы, уровень освещенности, длина волны света и т.д.
Источник: tech-guide.ru