Это анимированное видео покрывает большинство тем в статье, но если вы заинтересованы в более педантичных подробностях, обязательно прочитайте этот пост целиком.
Пиксельная плотность обозначает количество пикселей, которое вмещается в определенном физическом размере (обычно, это дюйм). На первом 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х.
Есть пара практических уроков, которые вам стоит извлечь из всего этого. Для начала, вы должны создавать дизайны в векторе. Это позволяет нашим интерфейсам, иконкам и прочей графике масштабироваться в любой нужный размер.
Второй урок: мы должны все рисовать в масштабе 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 и т.д.
Руководство дизайнера по DPI и PPI : Подробное руководство Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.
Сейчас разрешение и плотность пикселей дисплея в мобильном устройстве являются одним из главных маркетинговых пунктов. Узнайте, на что влияет значение PPI.
На днях компания Samsung Galaxy S8 и Galaxy S8+, особенностью которых стал «безграничный» экран. Дисплей практически лишился рамок, получил высокое разрешение 2960×1440 точек и плотность пикселей 570/529 PPI соответственно. В феврале на международной выставке MWC 2017 бренд LG анонсировал смартфон с аналогичным разрешением и плотностью 564 PPI , а Sony - аппарат с 4K-экраном (3840×2160 пикселей, 806 PPI ). Очевидно, что будущее за дисплеями с высоким разрешением.
При выборе смартфона многие обращают внимание на разрешение экрана, а вот плотность пикселей зачастую остается в стороне. Учитывая развитие экранных технологий и разработок в области виртуальной реальности, значение ppi также играет большую роль в качестве дисплея.
Что такое PPI?
Сокращение PPI происходит от Pixel Per Inch (пикселей на дюйм) и используется для описания плотности пикселей во всех видах дисплеев, включая камеры, компьютеры, мобильные устройства и т. д. Плотность пикселей может быть показателем четкости экрана, но при этом необходимо учитывать другие аспекты: его физические размеры и расстояние до глаз.
Если вы придвинете экран ближе к глазам, вы сможете разглядеть пиксели. Если устройство находится на большом расстоянии от вас, высокая плотность пикселей не будет особо ощущаться. Таким образом, чем больше дисплей, тем меньше значение PPI.
Стандарт зрения
Обычно острота зрения человека измеряет при помощи теста Снеллена, который был изобретен в 1860 году в медицинских целях. Важно отметить, что по этой системе офтальмолог пытался выявить слабое зрение, которое является медицинской проблемой. Ни один пациент никогда не жаловался на остроту зрения выше среднего.
Значит, острота зрения 20/20 вовсе не является идеальной. Этот показатель означает нормальное зрение, при котором человек может прочитать таблицу на расстоянии 3 метров.
Миф о 300 ppi
Существует миф о том, что человек не может различать пиксели при плотности 300 ppi. В 2010 году Стив Джобс использовал это утверждение во время презентации iPhone 4, оснащенного инновационным на тот момент Retina-дисплеем с 326 ppi. Отчасти это соответствует действительности, но только для тех пользователей, у которых острота зрения 20/20.
Согласно различным исследованиям, человеческий глаз может различать пиксели при плотности до 900-1000 ppi.
На что влияет плотность пикселей?
Чем выше плотность пикселей, тем более четкое изображение вы будете видеть на экране. Если раньше это не имело особого значения, то с наступлением эры виртуальной и дополненной реальности ситуация постепенно меняется. Едва ли вам захочется в режиме виртуальной реальности видеть вокруг себя пиксельную картинку. Чем выше разрешение и плотность пикселей, тем реальнее изображение. Причем это может быть заметно не только при использовании гарнитуры виртуальной реальности, но и при просмотре фильмов.
Качественное изображение на дисплее – это одна из самых важных составляющих любого хорошего смартфона. Дорогие читатели, мы расскажем вам, что такое плотность пикселей (PPI) на дисплее телефона, и объясним, почему этот показатель не всегда важен.
Плотность пикселей – почему это не так важно!
Значение PPI определяет количество пикселей на один дюйм экрана устройства. Более высокие значения делают картинку более четкой, читаемой и качественной.
Как PPI влияет на качество изображения
Когда Apple представила миру iPhone 4, в нем использовался революционный на тот момент дисплей «Retina», качество изображения на котором могло сравниться с качеством картинки в глянцевых журналах (300 DPI). Тогда компания наглядно показала всему миру, что высокие разрешения на экране смартфона не какая-то сказка, я самая настоящая реальность.
На данный момент, самое высокое значение DPI (dots per inch – количество точек на дюйм) у дисплея смартфона Sony Xperia Z5 Premium. Его 5,5-дюймовый экран имеет поддержку 4К разрешения (2160 х 3840) и плотность пикселей 806 PPI.
Среди смартфонов Xiaomi, хорошее разрешение можно найти у Mi Mix (1080×2040 пикселей), (1080×2160 Full HD+) и Mi Note Pro (2560×1440 Quad HD).
Первые исследования и текущая реальность
Если раньше Apple заявляла, что 326 PPI будет достаточно и более высокие разрешения на маленьком дисплее портативного устройства станут попросту невостребованными. То теперь, глядя на дисплей нового iPhone X, с его 458 PPI, становится ясно, что Apple решила больше не следовать этой философии.
Будем откровенны. Среднестатистический пользователь невооружённым взглядом заметит разницу между 300 и 500 PPI в том случае, если будет держать экран своего телефона на расстоянии вытянутой ладони от своих глаз.
Поэтому, дисплеи с большей плотностью пикселей, действительно останутся не востребованы у большей части пользователей, так как никто не захочет переплачивать.
Плюс, при наличии большой плотности пикселей, устройству приходится задействовать больше ресурсов на обработку выводимой картинки. Стоит ли напоминать, что это сказывается на производительности, и сроке службы батареи смартфона?
Несмотря на это, приведём некоторые значимые аргументы, в пользу экранов с высоким PPI.
Преимущества дисплеев с высоким PPI
На дисплеях Full HD+, Quad-HD и 4K намного приятнее читать текст. Такой дисплей выдает более высокий уровень яркости, качественный контраст и более глубокая цветопередача.
Высокое разрешение позволяет использовать более широкий цветовой диапазон. Гамма при этом выглядит более естественной.
Любители побаловаться с виртуальной реальностью найдут множество преимуществ экрана с большой плотностью пикселей PPI. Естественно, что смартфоны с низким разрешением дисплея совершенно не подходят для использования их с очками виртуальной реальности. Однако, устройства с Full-HD разрешением или более высокими, могут без проблем использоваться в режиме VR для просмотра фильмов и для игр.
Смартфоны Xiaomi (Сяоми) с поддержкой FullHD:
- Mi Note 3
- Mi A1
- Mi Max 2
- Mi Max
- Mi 5 / 5s / 5s Plus / 5c
- Mi 4 / 4s / 4c / 4i
- Redmi Note 4 / 4x
- Redmi 4 Prime
- Redmi Note 3 / Note 2
- Redmi Pro
- Mi Note
Вывод
Очевидно, что производителям не стоит гнаться за высокими разрешениями и большим количеством пикселей на экране. Вместо этого им стоит задуматься над возможностью внедрения новых технологий, которые смогут вывести качество изображения на совершенно новый уровень. Именно этой стратегии и следует сейчас компания Xiaomi.
Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на [email protected]. Вы также можете найти на меня Twitter , или Facebook .
Что такое DPI и PPI
DPI или (Dots Per Inch) «точек на дюйм» является мерой пространственной плотности точек, первоначально использовавшейся в печати. Это количество капель чернил, которое ваш принтер может вместить в один дюйм. Меньшее DPI дает менее детальное изображение.Эта концепция применяется к компьютерным экранам под названием PPI (пикселей на дюйм). Тот же принцип: подсчитывается количество пикселей, которые экран может отображать на дюйм. Название DPI также используется в экранах.
У компьютеров с Windows по умолчанию 96 PPI. Mac использует 72, хотя это значение не было точным с 80-х. Обычные, не retina ПК (Mac также) будут иметь от 72 PPI минимум до около 120 максимум. Проектирование с PPI между 72 и 120 обеспечит вашей работе везде примерно то же самое соотношение размеров.
Вот прикладной пример: экран Mac Cinema 27 дюймов имеет 109 PPI, что означает, что он отображает 109 пикселей на дюйм экрана. Ширина с рамкой является 25,7 дюймов (65 см). Ширина фактического экрана составляет примерно 23,5 дюйма, так 23,5 * 109 ~ 2560, что делает физическое разрешение экрана 2560x1440px. *Я знаю, что 23,5 * 109 не равно точно 2560. Это на самом деле +23,486238532 дюймов. Было бы точнее пикселей на сантиметр, но вы меня поняли.
Влияние на ваш дизайн
Допустим, вы рисуете синий квадрат 109 * 109 px на экране, оговоренном выше. Этот квадрат будет иметь физический размер на экране 1 * 1 дюйм. Но если ваш пользователь имеет экран с 72 PPI, синий квадрат будет выглядеть физически больше, поскольку для 72 PPI экрану понадобится приблизительно полтора дюйма, чтобы отобразить ваш синий квадрат 109px. Смотрите ниже моделирование эффекта.
Запомните: оставив в сторону разногласия цвета и разрешения, имейте в виду, что все будут видеть ваш дизайн по разному. Вы должны стремиться к наилучшему компромиссу и создавать для наибольшего процента пользователей. Не думайте, что у пользователь такой же экран, как у вас.
Разрешение экрана (и родное разрешение)
Разрешение экрана может иметь огромное влияние на то, как пользователь воспринимает ваш дизайн. К счастью, так как ЖК-мониторы заменили ЭЛТ, теперь пользователи, как правило, имеют родные разрешения экрана с хорошим соотношением размер экрана к PPI.Разрешение определяет количество отображаемых на экране пикселей (например: 2560 * 1440px для Cinema экрана 27 дюймов) 2560 ширина, 1440 высота. Теперь, конечно, когда вы знаете, что означает PPI, вы понимаете, что это не может быть единицей измерения физического размера. Вы можете иметь экран 2560x1440 размером с вашу стену и другой размером с вашу голову.
Современные ЖК-мониторы имеют разрешение, определенное по умолчанию, оно же родное, которое будет обрабатывать точное число пикселей, которое экран способен отображать. У старых ЭЛТ-мониторов немного по-другому, но так как их можно считать мертвыми, давайте не вдаваться в детали (и не затрагивать мое частичное понимание старых добрых телевизоров).
Возьмем наш 27 дюймовый Cinema экран, который может отображать 109 PPI в родном разрешении 2560 * 1440 px. Если уменьшить разрешение, элементы будут казаться больше. В конце концов, у вас только 23,5 горизонтальных дюйма для заполнения виртуально меньшим числом пикселей.
Я сказал виртуально, потому что в этом случае так и будет. Экран имеет родное разрешение 2560 * 1440 px. Если разрешение уменьшается, то пикселы все также отображаются в 109 PPI. Чтобы заполнить это пространство и весь экран, ваша ОС будет все растягивать, ваш GPU / CPU возьмет все пиксели и вычислит их с новым соотношением.
Если вы хотите сделать разрешение 1280 * 720 (половина ширины, половина высоты от предыдущего) на 27 дюймов, то вашему GPU, чтобы заполнить экран, придется имитировать вдвое увеличенный пиксель. Какой будет результат? Так вот - размытие. Пока деление на два отношения сторон будет выглядеть довольно хорошо, из-за простого делителя, но если вы захотите 1/3 или 3/4 от отношения сторон, то у вас в итоге будут числа со знаками после запятой, и вы НЕ МОЖЕТЕ разделить пиксель. Смотрите пример ниже.
Примечание: слева: рендеринг окна OSX в родном разрешении (1400*900px): справа рендеринг окна OSX в симулированном меньшем разрешении (1024*640px retina).
Рассмотрим ниже другой пример. Возьмем линию в 1 пиксель на экране с родным разрешением. Теперь сделаем разрешение на 50% меньше. Для заполнения экрана CPU придется генерировать 150% изображения, умножая все на 1,5, 1 * 1,5 = 1,5, но вы не можете поделить пиксели вдвое. А будет следующее: он заполнит окружающие пиксели долей цвета (by a fraction of the color), создавая размытие.
Примечание: слева линия толщиной в 1 пиксель на любом разрешении по умолчанию, справа линия толщиной в 1 пиксель в меньшем на 150% разрешении.
Поэтому, если у вас есть Retina Macbook Pro и вы хотите изменить разрешение, он покажет окно ниже, давая вам знать (на скриншоте ниже) как это разрешение будет «выглядеть» 1280 * 800px. Он использует опыт восприятия пользователем разрешения экрана, чтобы выразить отношение размеров.
Это очень субъективное представление, потому что он использует разрешение пикселя в качестве единицы физического размера, но это правда, по крайней мере, с их точки зрения.
Запомните: если вы хотите всегда видеть свой дизайн (или любой дизайн) пиксельно идеально, никогда не используйте для вашего экрана разрешение, отличное от родного. Да, вам может быть более удобно с меньшим соотношением, но когда дело доходит до пикселей, вам хочется быть как можно более точным. К сожалению, некоторые люди используют разрешение как способ, чтобы лучше видеть, что происходит на экране (особенно на рабочем столе), когда им следовало бы использовать настройки специальных возможностей. От этого ваш дизайн по-прежнему будет выглядеть плохо, но с этой точки зрения, пользователи ищут улучшения читаемости, а не блеска.
Что такое 4k
Возможно, в последнее время вы много слышали о термине 4K (по крайней мере, когда я писал об этом, в начале 2014-го года), 4k довольно модная тема. Чтобы понять, что это такое, давайте сначала поймем, что означает «HD».
Осторожно, это сильное упрощение. Я буду говорить только о наиболее распространенных разрешениях. Существует различные категории HD. Термин HD применимо к любым разрешениям, начиная с 1280x720px или 720p для горизонтальных линий в 720 пикселей. Также некоторые могут называть это разрешение SD (standard definition; стандартное определение).
Термин Full HD применяется к экранам 1920x1080px. Большинство телевизоров и телефонов высокого класса (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) использует это разрешение.
4K начинается с 3840x2160 пикселей. Его также называют Quad (четверной) HD и может называться UHD от Ultra (сверх) HD. Проще говоря, на экране 4K вы можете вложить 4 1080p, в понятии числа пикселей. Другое разрешение 4K - 4096x2160. Это немного больше и используется для проекторов и профессиональных камер.
Что произойдет, если я подключу 4K дисплей к компьютеру
Современные ОС не масштабируют 4K, это означает, что если вы подключите дисплей 4K к Chromebook или MacBook, он будет использовать ресурсы с наибольшим DPI, в этом случае 200% или @ 2x (в два раза больше) и показывать их в обычном соотношении. От этого все будет выглядеть хорошо, но маленьким.
Гипотетический пример: если вы подключите 12 дюймовый 4K экран к компьютеру с 12 дюймовым экраном высокого разрешения (2x), все будет выглядеть в два раза меньше.
Запомните:
Герцы монитора
Здесь мы немного отдохнем от PPI и разрешения экрана. Возможно, вы видели, что возле настроек разрешения для экрана есть значение Гц монитора. Оно не имеет ничего общего с PPI, но на всякий случай, если вам интересно, Герц монитора - или частота обновления - это единица скорости, с которой ваш монитор будет отображать фиксированное изображение или кадр за секунду времени. Монитор с 60 Гц сможет отображать 60 кадров в секунду. Монитор 120 Гц - 120 кадров в секунду и т.д.
В контексте интерфейса пользователя значение Герц(Гц) будет определять, насколько гладкой и детализированной будет выглядеть ваша анимация. Большинство экранов работают на 60 Гц. Обратите внимание, что количество кадров, отображаемых в секунду, также зависит от вычислительной и графической мощности устройства. Подключение экрана 120 Гц к Atari 2600 будет совершенно бесполезным.
Для лучшего понимания взгляните на пример ниже. T-Rex идет из точки А в точку B с одинаково равным и быстром и шагом на 60 Гц и 120 Гц экране. Экран с частотой 60 кадров в секунду способен отображать 9 кадров во время анимации, в то время как с 120 кадров в секунду отображает в том же отрезке времени логически вдвое больше кадров. Анимация будет выглядеть более гладко на экране 120 Гц.
Запомните: Некоторые люди могут сказать, что человеческий глаз не может увидеть более 60 кадров в секунду. Это неправильно. Не слушайте и уходите, смеясь истерическим хохотом.
Что такое дисплей retina
Apple представила термин дисплей «Retina » для выпуска смартфонов iPhone 4. Он называется Retina (в переводе сетчатка) потому, что PPI устройства была настолько высоко, что вероятно, сетчатка человека не смогла бы увидеть отдельные пиксели на экране.Это утверждение верно для размеров экрана диапазона устройства, в которых оно используется, но в то время как экраны становятся все лучше и лучше, наши глаза сейчас обучены достаточно для восприятия пикселей - особенно для округлых элементов пользовательского интерфейса.
Технически они отображают в два раза больше пикселей по высоте и ширине в том же физическом размере.
IPhone 3G / S был с диагональю 3,5 дюйма и разрешением 480 * 320px и 163PPI.
iPhone 4 / S был с диагональю 3,5 дюйма и разрешением 960 * 640px и 326ppi.
БУМ! Ровно в два раза. Простой множитель. Поэтому элементы на экране вместо того, чтобы быть меньше, выглядят вдвойне визуально резче, потому что они имеют в два раза больше пикселей и точно таких же физических размеров. Один нормальный пиксель равен 4 пикселям retina.
Рассмотрим пример ниже для прямого применения в сложном дизайне.
Примечание к изображению: трудно имитировать различное качество изображения с двух устройств на третье устройство, то есть то, на которое вы смотрите на прямо сейчас. Качество изображения будет выглядеть в два раза лучше и резче для музыкального плеера на retina, даже занимая то же физическое пространство, Если вы хотите проверить его сами, я использовал одну из моих бесплатных программ, вы можете загрузить исходный код .
Термин дисплей «Retina» принадлежит Apple, поэтому другие компании будут использовать «HI-DPI» или " Super power pixel maximum sp33d display " (я собираюсь зарегистрировать последнюю марку) или вообще ничего из этого. Вам останется, читая характеристики устройства, выяснить, какой же DPI и размер экрана (как весело).
Запомните: продукты Apple, являются отличным способом познакомиться с преобразования DPI и понять различия между разрешением, PPI и соотношением физического размера, потому что вам надо беспокоиться только о 1 множителе.
Что такое множитель
Когда дело дойдет до преобразования вашего дизайна для всех возможных PPI, множитель будет вашим математическим спасителем. Если вы знаете множитель, вам больше не придется заботиться о детальных характеристиках устройства.Давайте возьмем наш пример с iPhone 3G и 4. У вас есть в два раза больше пикселей в том же физическом размере. Поэтому ваш множитель 2. Это означает, чтобы сделать ваши графические ресурсы совместимыми с разрешением 4G, вы просто должны умножить размер своих графических ресурсов на 2 - и все.
Допустим, вы создаете кнопку 44 * 44px, которая является рекомендованной iOS сенсорной целью (я буду говорить об этом позже). Давайте назовем его типичным названием кнопки «JIM».
Чтобы хорошо сделать JIM на iPhone 4, вам надо создать его версию увеличенную вдвое. Что мы и делаем ниже.
Примечание: слева - 2px закругленные углы 16px размер шрифта, справа 4px закругленные углы 32px размер шрифта .
Довольно просто. Теперь JIM имеет версию 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, однако по существу - они одинаковы. Короче говоря, они определяют размер независимо от множителя устройства. Это очень помогает при обсуждении тех. заданий между такими различными субъектами, как дизайнер и инженер.
Давайте возьмем наш предыдущий пример кнопки, „JIM“.
Джим имеет ширину 44px для обычных, не retina экранов, и ширину 88px для retina экранов. Перейдем к техническим подробностям и добавим отступы (padding) вокруг Джима на 20px, потому что он любит свободное пространство. Тогда отступ будет 40px для retina. Но на самом деле не имеет смысла учитывать retina пиксели при проектировании на не retina экране.
Мы поступим следующим образом: возьмем за основу 100% соотношение сторон обычного не retina экрана.
В этом случае JIM будет иметь размер 44 * 44DP или PT и отступы 20DP или PT. Вы можете отдавать свое тех. задание в любом PPI, JIM по прежнему будет 44 * 44dp или pt.
Android и IOS адаптируют этот размер к экрану и конвертируют с правильным множителем. Вот почему я думаю, что легче всегда проектировать с PPI по умолчанию для вашего экрана.
SP используется отдельно от DP и PT, но работает так же. SP расшифровывается Scale-independent pixels (масштабно независимый пиксель) и используется для определения размеров шрифта. 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 (для 1x дизайна предпочтительно в диапазоне 72-120) и придерживайтесь его. Я лично использую 72 ppi, потому что это настройка по умолчанию в Photoshop, и большинство моих коллег делают то же самое.
Запомните:
Обработка PPI в iOS
Пришло время для погружения в платформенно-зависимый дизайн. Давайте пройдемся по устройствам с IOS на начало 2014 года. Касательно размеров экрана и DPI, c iOS есть 2 типа мобильных устройств и 2 типа экранов для ноутбуков / настольных компьютеров. В категории мобильных у них, конечно, есть iPhone и iPad.В категории телефонов у вас есть старый 3GS (еще поддерживается iOS6) и выше. Только iPhone 3GS не с retina. iPhone 5 и выше используют более высокий экран с тем же DPI, как у iPhone 4 и 4s. Смотрите шпаргалку ниже:
Примечание: 1) множитель 1х, 2) множитель 2х, 3) множитель 2х.
В сентябре 2014-го Apple представила 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus. iPhone 6 больше, чем iPhone 5 (на 0.7 дюйма), но с тем же PPI. С другой стороны, iPhone 6 представляет совершенно новый множитель для iOS, @3x из-за своего размера, 5.5 дюймов.
Есть кое-что особенное, что вам надо знать о том, как iPhone 6 Plus обрабатывает свой дисплей относительно всех остальных iPhone.
Он уменьшает размер изображений.
Например, когда вы проектируете для iPhone 6, вы проектируете на холсте 1334*750px и телефон также рендерит 1334*750 физических пикселей. В случае iPhone 6 Plus у телефона разрешение меньше, чем рендеринг изображения, так что вам надо проектировать для разрешения 2208*1242px и телефон уменьшит размер до разрешения 1920*1080px. Смотрите рисунок ниже:
Физическое разрешение на 13% ниже, чем отрендеренное разрешение. Это создает пару глюков, таких как полу-пиксели, делая очень мелкие детали размытыми. Хотя разрешение так велико, что это будет незаметно, только если вы будете смотреть очень близко. Так что проектируйте на холсте 2208*1242px и будьте осторожны с очень маленькими элементами дизайна, такими как супер разделители. Смотрите ниже симуляцию того, что происходит:
Руководство для Chrome OS еще не выпущено, но и использование Pixel (с сенсорным экраном) не большое. Однако, поскольку все приложения Chrome OS основаны на веб, я предложил бы в любом случае проектировать для сенсорных экранов. Моей рекомендацией будет применять руководство Android для сенсорных целей .
Веб, гибридные устройства и будущее
Вам будет ясно, какое принять решение, если вы разрабатываете для мобильных. Делайте для сенсорных экранов. Если вы разрабатываете для настольных компьютеров, выберите несенсорные. Это звучит просто, но это игнорирует новую растущую тенденцию - гибридные устройства.Гибридным устройством является устройство, которое якобы предоставляет как сенсорное управление, так и несенсорное. Chromebook Pixel, Surface Pro и Lenovo Yoga являются хорошим примером.
Что делать в этом случае? Ну, здесь нет простого ответа, но я забегу вперед и дам один: выберите сенсорное управление. Вот куда будет развиваться технология.
Если дизайн для веб, или чего-нибудь подобного, думайте о сенсорном управлении.
Запомните:
Графическое программное обеспечение
Программное обеспечение не сделает из вас дизайнера, но выбор правильного программного обеспечения для поставленной задачи может сильно улучшить вашу производительность и упростить работу. «Ноу-хау” программного обеспечения не должно быть вашим единственным умением, но обучение и освоение правильного инструмента будет большим вкладом для воплощения ваших идей.Когда дело доходит до обработки изменения DPI в дизайне интерфейса, все программы работают по-разному. Некоторые из них лучше, чем другие в конкретных задачах. Вот наиболее распространенные:
Photoshop
Мать инструментов проектирования интерфейса. Вероятно, наиболее используемый инструмент сегодня. Для него существует бесконечное количество ресурсов, учебных пособий, статей. Photoshop существует почти с момента возникновения дизайна интерфейса.Как следует из названия, первая цель программы не была в дизайне интерфейса, а была в ретуши фотографий или растровых изображений. Он развивался в течение года и с рождением дизайна интерфейса, дизайнеры изменили его предназначение. Отчасти это было потому, что они привыкли к нему, и потому, что он был единственной программой, которая была в состоянии сделать вещи так хорошо, как это необходимо.
Photoshop и по сей день является мастером редактирования растровых изображений и по-прежнему является наиболее используемой программой для дизайна пользовательского интерфейса. Его десятилетнее наследие делает „Фотошоп“ труднодоступной программой для обучения. Используя „Фотошоп“ как гигантской швейцарский армейский нож вы сможете сделать все, но не всегда в наиболее эффективным способом.
Так как он изначально основан на растровом изображении, он DPI зависим, противоположно ему Illustrator и Sketch описаны ниже.
Иллюстратор
Векторный редактор, родной брат Photoshop. Как указывает его название, он направлен на иллюстраторов, но его также можно использовать в качестве инструмента дизайна интерфейса.Иллюстратор подходит для полиграфического дизайна, а поэтому его интерфейс, управление цветом, масштаб, линейки и единицы измерения могут оттолкнуть вас и он требует несколько настроек для того, чтоб его легко можно было использовать только для дизайна интерфейса. Как и Photoshop, это невероятно мощный инструмент, с крутой кривой обучения.
Он отличается от Photoshop тем, что он не зависит DPI за счет основания на векторных формах. В отличие от растровых изображений, графика, сделанная с помощью векторных фигур, опирается на математические формулы и будет пересчитана программно без потери качества.
Понимание разницы между растровым и векторным изображением является ключом к созданию масштабируемого визуального дизайна и графических ресурсов.
Если вы хотите начать работу с использованием Illustrator для веб-дизайна / интерфейса, я рекомендую прочитать
И другой техники, в которой есть экран, мы часто слышим о таком понятии, как ppi, но немногие из нас могут точно сказать, что это такое и на что оно влияет.
А на самом деле эта характеристика является одной из главных при выборе.
Мы расскажем вам какое значение этого понятия на самом деле (ведь в интернете можно найти множество мифов по этому вопросу). Поехали!
Cодержание:
Теоретическая страничка и расчеты
Рассматриваемое понятие расшифровывается как pixels per inch, то есть количество пикселей на дюйм. Произносится также как пи-пи-ай.
Она буквально означает то, сколько пикселей помещается в одном дюйме изображения, которое мы видим на , планшета или другой техники.
Также это понятие называют единицей измерения разрешающей способности. Расчет этой величины производится с помощью двух простых формул:
где:
- dp – диагональное разрешение;
- di – размер диагонали, дюймов;
- Wp – ширина;
- Hp – высота.
Вторая формула предназначена для расчета диагонального разрешения и основана на использовании знаменитой теоремы Пифагора.
Рис. 1. Ширина, высота и размер диагонали на мониторе
Чтобы показать, как используются все эти формулы, возьмем для примера монитор с диагональю 20 дюймов и разрешением 1280х720 (HD).
Таким образом Wp будет равным 1280, Hp – 720, а Di – 20. Благодаря наличию этих данных мы можем рассчитать пи-пи-ай. Сначала используем формулу (2).
А теперь применим эти данные для формулы (2).
Примечание: На самом деле у нас получилось 73,4 пикс., но нецелого числа пикселей быть не может, используются только целые значения величины.
Чтобы понять, сколько это в сантиметрах, более привычной величине для нашей местности, нужно поделить получившееся число на 2,54 (в одном дюйме именно столько сантиметров).
Таким образом, в нашем примере это 73/2,54=28 пикс. в сантиметре.
В нашем примере это 73, а 25,4/73=0,3. То есть размер каждого пикселя равен 0,3х0,3 мм.
Это хорошо или плохо?
Разберемся вместе.
Важна ли эта величина
Пи-пи-ай, исходя из всего вышесказанного, влияет на четкость изображения, которое получает пользователь на своем экране.
Чем выше величина показателя, тем более четкое изображение получит юзер.
Фактически, чем больше эта величина, тем меньше «квадратиков» будет видеть человек.
То есть каждый пиксель будет маленьким, а не большим, и это даст возможность вообще не обращать на это внимание. Наглядно значение характеристики можно видеть на рисунке 2
Рис. 2. Разница при показателях меньше и больше
Конечно же, никому не хочется иметь на своем такую картинку, как показано слева.
Поэтому при выборе подобной техники очень важно обращать внимание на эту характеристику.
Особенно это актуально, когда вы покупаете в интернете и не имеете возможности своими глазами оценить картинку и понять, насколько она четкая.
Найти показатель в характеристиках того же смартфона обычно просто. Обычно она содержится в разделе «Дисплей» . Пример можно видеть на рисунке 3.
Рис. 3. Показатель в характеристиках смартфона
Важно! В интернете нередко можно найти информацию о том, что ppi важнее, чем, к примеру, разрешение или диагональ и какая-то из этих характеристик должна играть более важную роль при выборе. Это вовсе не так. Как мы могли убедиться выше, все эти три понятия неразрывно связаны между собой.
Плюсы и минусы
Количество пикс. на дюйм позитивно влияет на четкость картинки, а соответственно, и на ее качество.
Пользователю будет в разы приятнее смотреть на изображение с большим показателем.
На рисунке №2 фото слева имеет 30 ppi, а фотография справа – 300. Ниже еще один подобный пример.
Но есть у данного понятия и минусы. В частности, речь идет об автономности устройства.
Все достаточно просто – если картинка четкая, смартфон, планшет или другое устройство с экраном не смогут работать долго без подзарядки.
Можно даже составить простое правило: чем больше пи-пи-ай, тем меньше время автономной работы.
Конечно, для ПК это не проблема, так как там монитор все равно постоянно включен в розетку, а вот для некоторых телефонов это может стать большой проблемой.
Поэтому при выборе устройства обязательно обращайте внимание не только на число пикс. на дюйм, а еще и на !
Таким образом мы плавно перешли к теме выбора.
О выборе дисплеев
Есть несколько правил, которые помогут выбрать дисплей правильно с учетом пикселей, звучат они следующим образом:
1 Обязательно обращайте внимание на тип дисплея. В приоритете должны быть AMOLED, еще лучше SuperAMOLED или же OLED. Такие аппараты всегда будут лучше, чем .
Допустим, мы пришли в магазин и видим, к примеру, два отличных аппарата – и . Цена у них практически одинаковая, второй аппарат, кстати, мощнее.
В характеристиках указано, что у Сяоми 400 ppi (почему-то некоторые пишут 400,53, но, как мы говорили выше, нецелого числа пикс. быть не может).
У Самсунга 267 PPI и разрешение, соответственно, меньше (1280х720 против 1920х1080). Диагональ одинаковая – 5,5 дюймов.
Но почему-то картинка более четкая именно на . А все из-за использования фирменной технологии SuperAMOLED+. Вы можете в этом убедиться сами, если обратите внимание на рисунок 5.
2 Постарайтесь найти возможность лично посмотреть на все образцы, которые вы выбрали. Можно сначала просмотреть их опции в интернете, а потом пойти в магазин электроники и увидеть, как реально они отображают картинки. Личный взгляд в данном случае просто незаменим.
