Вредоносное ПО (malware) - это назойливые или опасные программы,...
Существует широкое разнообразие дисплеев, но мы хотим вам дать несколько рекомендаций, которые могут помочь вам выбрать правильный экран. Качество передаваемого изображения зависит от разрешения экрана, плотности пикселей, типа экрана, и даже от размера. Есть много факторов, которые определяют, хороший это дисплей или нет. Так что, наверняка, многим будет полезно почитать, какой именно экран стоит выбрать для смартфона или планшета.
Разрешение экрана и плотность пикселей:
Когда вы читаете информацию о том или ином устройстве, то первое, что вы видите о дисплее – это размер и разрешение экрана, а также количество пикселей на дюйм, т.е. плотность пикселей. Из-за огромного количества Android-устройств и, соответственно, их ценового диапазона, существует широкий спектр различных разрешений экрана, поэтому мы можем рассмотреть только самые популярные из них.
Когда приводится конкретное разрешение дисплея, то оно, как правило, включает в себя ширину и высоту. Вот некоторые из самых популярных разрешений экранов:
- 240 х 320. Данное разрешение дисплея наиболее часто используется в устройствах с очень маленькими экранами, или же в бюджетных телефонах (которые отмирают).
- 320 х 480. Это разрешение также чаще всего получают телефоны с маленькими экранами, как правило, до четырех дюймов.
- 480 х 800 (WVGA). Еще несколько лет назад именно это разрешение применялось в устройствах высокого класса, таких как Samsung Galaxy S2. Теперь же, это разрешение характерно для смартфонов среднего и бюджетного классов, которые имеют дисплей менее пяти дюймов.
- 960 х 540 (qHD). Раньше подобное разрешение использовалось в высококлассных устройствах. А сейчас им обладают телефоны среднего класса.
- 1280 х 720 (HD/720р). На сегодняшний день это разрешение экрана характерно для смартфонов высокого класса. Иногда встречаются бюджетные телефоны и планшеты с таким же разрешением.
- 1920 х 1080 (Full HD/1080р). Как правило, такое высокое разрешение применяется при создании современных телевизоров. В этом году все чаще стали появляться еще и смартфоны/планшеты с Full HD дисплеями. Однако Full HD экран в настоящее время можно найти исключительно на мощных смартфонах и планшетах.
- 2560 х 1600 (WQXGA). Как вы сами наверняка понимаете, это супер высокое разрешение дисплея. Поддерживать его могут только самые мощные устройства. Например, планшет Nexus 10 получил именно такое разрешение экрана.
Итак, теперь стало ясно, что на смартфонах более низкого качества устанавливают соответствующее низкое разрешение экрана, а для более крупных дисплеев характерно высокое разрешение дисплея, конечно, и цена в этом случае будет не маленькая.
Что касается плотности пикселей, то она важна, когда дело доходит до общей резкости экрана. Например, когда вы просматриваете веб-страницы или читаете электронные книги, комфортность просмотра зависит именно от плотности пикселей, которая варьируется в зависимости от разрешения экрана и его размера. Если дисплей большой, а разрешение совсем низкое, то и плотность пикселей будет невелика.
Сегодня плотность пикселей, равная 300ppi считается отличной, потому что пользователь вряд ли заметит какие-то погрешности в картинке или увидит хотя бы один пиксель. Плотность пикселей ниже 200ppi характерна для маломощных устройств, а качество дисплея, соответственно, тоже ниже. Поэтому стоит выбирать смартфоны и планшеты с плотностью пикселей в диапазоне от 200 до 300ppi и выше.
Что такое LCD-дисплей?
LCD расшифровывается, как жидкокристаллический дисплей, и это самый популярный тип экрана для мобильных устройств. Спрос на него такой высокий из-за хорошего качества изображения, которое он передает и относительно низкого потребления мощности.
TFT-дисплеи:
А это самый популярный тип ЖК-дисплеев, который расшифровывается, как Thin Film Transistor, т.е. тонкопленочный транзистор. Он содержит активную матрицу, которая собственно и управляет транзистором. А транзистор, в свою очередь, отвечает за «включение и выключение» каждого пикселя. Это улучшает время реакции и обеспечивает больший контраст изображения. Причем другие типы ЖК-дисплеев этого сделать не могут, но являются более дорогими и потребляющими значительно большее количество энергии.
IPS-дисплеи:
В некоторых высококлассных смартфонах и планшетах используются IPS-экраны, которые являются одним из видов TFT-дисплеев. IPS-дисплей исправляет все недочеты, которые имеются у LCD-экранов – он способен воспроизводить более четкие и выразительные цвета, при этом обеспечивая широкий угол обзора. Это отлично подходит для тех пользователей, которые любят смотреть фильмы большими компаниями - где бы человек ни сидел, картинка останется яркой и четкой.
Super LCD дисплеи:
Несмотря на то, что создателем первых технологий Super LCD экранов является компания Samsung, эти дисплеи чаще всего использует HTC. Данная технология способна устранить блики, при этом такой экран потребляет небольшое количество заряда аккумулятора, а находясь на открытом воздухе, пользователю не придется напрягать свои глаза, чтобы увидеть изображение на экране. Super LCD-дисплей обеспечивает отличную видимость на улице, нежели это могут сделать обычные жидкокристаллические экраны.
Последняя версия экрана Super LCD под названием LCD3 потребляет еще меньшее количество энергии, чем все предыдущие версии. Такой тип дисплея уже получили смартфоны HTC Butterfly, HTC Droid DNA, HTC One.
Что такое OLED-дисплей?
Аббревиатура OLED расшифровывается, как Organic Light-Emitting Diode, а сам OLED-дисплей состоит из органического полимера. Как только появляется доступ к энергии, полимер загорается, и, соответственно, включается экран. У OLED-дисплея есть множество преимуществ, по сравнению с LCD-экранами, потому что он тоньше, ярче, потребляет меньше энергии и обеспечивает широкие углы обзора. При этом увеличивается контрастность и время реакции.
Самый популярный тип OLED-дисплеев – это AMOLED экраны. AMOLED можно расшифровать, как Active Matrix Organic Light-Emitting Diode. Эти дисплеи потребляют намного меньше энергии, чем стандартные экраны OLED.
Крупнейшим производителем AMOLED-дисплеев является, конечно же, южнокорейская компания Samsung, которая продает еще и Super AMOLED дисплеи. Большинство смартфонов и планшетов используют именно экраны Super AMOLED, но и не малое количество современных устройств работают на LCD-экранах.
Samsung иногда устанавливает матрицы PenTile на различные типы экранов AMOLED. При этом используется два субпикселя, в каждом из которых применяется технология RGBG (красный – зеленый – синий - зеленый) для красивого воспроизведения цветов, вместо стандартной модели RGB (красный – зеленый - синий). Некоторые критикуют матрицу PenTile, говоря, что она не придает экрану нужной четкости, но большинство пользователей соглашаются с тем, что при более высокой плотности пикселей, отсутствует какая-либо размытость. PenTile-матрица используется для увеличения срока службы дисплея.
AMOLED против LCD-дисплеев: что лучше выбрать?
Обе эти технологии имеют свои преимущества и недостатки. AMOLED-дисплеи известны высокой контрастностью, более глубоким и натуральным черным цветом, но LCD-экраны, как правило, создают более реалистичные цвета. В то время как AMOLED-дисплеи ярче, на LCD-дисплеи можно смотреть под прямыми солнечными лучами и картинка будет видна лучше.
AMOLED-дисплеи считаются более экономичными, а LCD-экраны потребляют меньшее количество заряда батареи во время просмотра веб-страниц. Кроме этого, одной из положительных сторон AMOLED-дисплеев являются широкие углы обзора, а вот LCD-экраны позволяют даже при низком разрешении создавать довольно качественную картинку, поскольку в их основе лежит технология RGB вместо PenTile RGBG.
Конечно, если вы хотите приобрести бюджетный смартфон, то вряд ли вы найдете множество устройств с AMOLED-дисплеем. Пользователи, которые ищут себе телефон из среднего ценового диапазона, столкнутся с такой же ситуацией. Ну, а выбирать смартфон/планшет среди устройств высокого класса проще всего, потому что именно у них наиболее качественные дисплеи, да и используются самые передовые технологии.
В целом, выбор устройства с тем или иным дисплеем зависит от ваших пожеланий – хотите, чтобы экран воспроизводил натуральные черные цвета и создавал высокую контрастность, тогда выбирайте AMOLED-дисплеи. Если же вы желаете получать более натуральные цвета и для вас важно, чтобы была хорошо видна картинка даже, когда на экран попадают прямые солнечные лучи, то выбирайте жидкокристаллические дисплеи.
Нашли ошибку? Выделите ее и нажмите Ctrl+EnterЯ не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на [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 для веб-дизайна / интерфейса, я рекомендую прочитать
В индустрии высоких технологий вовсю набирает обороты новая забава – разместить как можно больше пикселей на единицу площади экрана. А то мы уж было соскучились по технологическим соревнованиям, после того как ушли в прошлое гонки за мегагерцами и мегапикселями.
Развязала новую гонку, как это принято в последнее десятилетие, компания Apple. Первый смартфон iPhone 4 с экраном повышенной чёткости представил в июне 2010 года ещё сам Стив Джобс. Это был довольно небольшой по нынешним меркам 3,5-дюймовый дисплей, получивший при этом аппаратное разрешение 960х640 точек. Ширина одного пикселя на таком экране составила всего 78 мкм, а плотность точек – 326 пикселей на дюйм (128 пикселей на см). Для сравнения: плотность пикселей в экране обычного смартфона – около 160 ppi, а в компьютерных мониторах и вовсе меньше сотни.
Новый экран был торжественно назван Retina display – от английского слова, означающего «сетчатка глаза», чему было дано красивое объяснение: некие исследования показали, что человек не способен различить невооружённым глазом отдельные точки при плотности выше 300 ppi на расстоянии 10-12 дюймов, то есть примерно 25-30 см. На таком расстоянии от глаз обычно держат мобильные телефоны, поэтому было выбрано именно это значение, чуть больше 300 ppi.
Разумеется, сразу же нашлись желающие оспорить результаты этих анонимных исследований. Так, известный американский популяризатор науки и астроном Филипп Плейт заявил, что если у вас острое зрение, то вы легко различите отдельные пиксели на таком экране и с 30 см, но при этом для обычного человека эти точки заметны не будут.
Между тем эксперт по качеству изображения и президент компании DisplayMate Technolоgies Реймонд Сонейра заметил, что реальное разрешение Retina display значительно ниже разрешающей способности сетчатки глаза. Дело в том, что разрешение в значительной степени зависит от того, под каким углом мы смотрим на объект. Для человека с идеальным зрением разрешающая способность глаза составляет около 0,6 угловой минуты, то есть 0,01 градуса. Это означает, что два отдельных объекта, находящиеся на расстоянии более 5730 футов, или 1,75 км, будут восприниматься как одна точка. Исходя из этого, Сонейра заключил, что если мы смотрим на смартфон на расстоянии 30 см, то разрешающая способность нашего глаза достигает 477 ppi, а если приближаем до 20 см, то и все 716 ppi. Чтобы получить 318 ppi, нужно отнести телефон на расстояние 45 см.
Сонейра не учёл одного: в реальности людей с идеальным зрением не так уж и много, и разрешающая способность сетчатки среднестатистического человека с нормальным зрением – порядка 1 угловой минуты. Сделав соответствующую поправку, мы и получим заветные 300 ppi – значение, которое можно вывести несложными подсчётами, а вовсе не какими-то мифическими исследованиями, о которых говорил Джобс.
Поскольку разрешающая способность глаз зависит от расстояния, на котором мы наблюдаем объект, чтобы добиться эффекта «безпиксельной» картинки в экранах разных устройств, требуется разная плотность точек. Поэтому 9,7-дюймовый Retina Display планшета iPad имеет меньшую плотность 264 ppi (105 пикселей на см), а 15- и 13-дюймовые экраны ноутбуков MacBook Pro – 220 ppi (87 пикселей на см) и 227 ppi (89 пикселей на см).
Джобс был прав в главном: для того чтобы перестать различать пиксели на экране самого близко подносимого к глазам гаджета – смартфона, достаточно плотности чуть большей, чем 300 ppi. Но курок уже был спущен, и масса компаний ввязалась в не имеющую даже теоретического смысла гонку за повышение плотности пикселей экрана. Главное – обогнать Apple, а есть в этом толк или нет, дело десятое.
В результате мы уже получили массу курьёзных изделий, при взгляде на которые не знаешь, плакать или смеяться. Японская Sharp одной из первых выпустила для внешних рынков смартфон с пятидюймовым экраном Full HD: при разрешении 1920х1080 плотность пикселей дисплея SH930W составляет 440 ppi. Аналогичный по характеристикам (а может, и попросту точно такой же) экран – у HTC J Butterfly. Цифры впечатляют, но, во-первых, малопонятно, зачем карманному устройству вообще разрешение Full HD на пятидюймовом экране, а во-вторых, портить глаза, вглядываясь в мельчайшие детали, можно и на менее высокотехнологичных устройствах.
Разрешение десятидюймового экрана нового планшета Google Nexus 10 ещё больше: 2560х1600 точек. То есть такое же, как у настольного монитора с диагональю 27-30 дюймов. Плотность точек при этом составляет 300 пикселей на дюйм. Означает ли это, что в Google предлагают смотреть в дисплей этого планшета с расстояния 25-30 дюймов? Вы когда-нибудь пробовали смотреть 50-дюймовый телевизор с полутора метров? Ощущения примерно те же.
Апогей безумия – прототип 9,6-дюймового экрана, разработанный японской компанией Ortus Technology. Его разрешение – 3840х2160 точек, что в точности соответствует перспективному телевизионному стандарту Ultra HD, или 4K, который предусматривает отображение в четыре раза больше точек, чем привычный Full HD. Плотность пикселей у этого экрана – 485 точек.
Избыточность уже стала самоцелью: никому не нужны экраны, пиксели на которых можно разглядеть только под микроскопом: они уже и так не видны – при традиционном использовании здоровыми вменяемыми людьми. Между тем экраны с повышенной плотностью пикселей сами по себе вызывают массу проблем, связанных как с аппаратной, так и с программной начинкой гаджетов, в которых они устанавливаются.
Прежде всего, экраны с повышенным разрешением и повышенной плотностью пикселей потребляют намного больше электроэнергии, чем такие же по размеру дисплеи меньшего разрешения. И это только при выводе статичной картинки! Поддержка сверхвысоких разрешений многократно ужесточает требования к графической подсистеме, да и в целом к вычислительным ресурсам устройства. А это означает не только гораздо более дорогую платформу, но и резкий рост энергопотребления. Современные смартфоны и с обычными-то экранами с трудом выдерживают без подзарядки рабочий день, а что будет, если их энергопотребление вырастет даже не в полтора раза, а хотя бы на десятки процентов?
Программная проблема напрямую связана с главным требованием к электронному устройству – удобством его использования. И если, как показывает практика, гаджеты под управлением Android без особого труда справляются с масштабированием пользовательского интерфейса и приложений под повышенное разрешение, то у техники на Windows, как ни странно, с этим возникают большие проблемы.
К примеру, у планшета Samsung Slate 7, оснащённого 11,6-дюймовым экраном с разрешением 1366х768 точек и довольно скромной плотностью пикселей 135 ppi, невозможно оптимальным образом настроить пользовательский интерфейс под управлением Windows 7: либо его элементы выглядят слишком мелкими, либо края окон скрываются за границами дисплея. И это штатный интерфейс операционной системы! Чего уж говорить о приложениях третьих фирм, разработчики которых не особенно задумываются над масштабированием под разные разрешения: многие из них рассчитаны на 96 ppi, и ни пикселем больше! И даже в Windows 8, где, как хвастались в Microsoft, проблема с интерфейсом практически решена, она всё так же актуальна, как и проблема с приложениями сторонних разработчиков, окна которых приходится разглядывать под увеличительным стеклом.
Так или иначе, старт дан, и мы становимся свидетелями очередной гонки за красивыми числами, смысла в которых не больше, чем в полётах со стерхами. Остаётся надеяться, что у ввязавшихся в это сомнительное мероприятие компаний появятся какие-то действительно полезные разработки и технологические прорывы. Иначе мы снова рискуем получить никому не нужные 20-мегапиксельные «мыльницы» с мутной пластмассовой оптикой.
Знание в чем заключается разница этих величин и где они используются, будет полезным многим имеющим отношение к полиграфии. Будь то дизайнер, писатель или иной творец печатной продукции.
Что такое ppi
Говоря простым языком - любое растровое изображение состоит из пикселов - цветных прямоугольных точек. Уточним, что растровое изображение - это изображение, по структуре своей представляющее сетку пикселей на мониторе компьютера. Популярные растровые форматы - psd , tiff , png , bmp или jpg - редактирование которых возможно в среде специализированного ПО, наподобие Adobe PhotoShop . Растровых форматов, разумеется, намного больше перечисленных, но для понимания того, о чем идет речь, приведенных форматов будет вполне достаточно.
Возвращаясь к пикселам, из которых состоит растровое изображение, можно сказать, что это своеобразное мозаичное полотно из цветных точек. Точнее квадратиков. Каждый квадратик может иметь только один цвет. Но на изображении могут находится пикселы разных цветов и оттенков. За счет этого и достигается перетекание одного цвета в другой.
Для примера возьмем полоску из 1000 таких квадратиков (пикселей). На одном конце будет черный квадратик на другом белый. Между ними будут находится квадратики разных оттенков. Каждый квадратик с удалением от серного и приближения к белому будет чуть светлее предыдущего. При большом увеличении мы конечно будем видеть, что все квадратики разного оттенка. Но при отдалении возникнет иллюзия плавного перетекания цвета или градиент.
Поскольку изображение имеет не только длину, но ширину, заполняя плоскость, то величина ppi показывает сколько квадратиков (пикселей) приходится на сторону условной единицы измерения. За единицу измерения пикселей в растровых изображениях за стандарт принят один дюйм. Следовательно, маркировка в 100 ppi говорит нам о том, что на один дюйм приходится 100 пикселов. В квадратном же дюйме пикселов при таком разрешении графического изображения будет 10000 (100х100). Повторимся, что цвет квадратного дюйма может быть каким угодно. Цвет же одного пиксела только один.
Что такое lpi
Теперь, поговорим о переносе изображения с монитора компьютера на бумагу. Монитор позволяет отображать не только цвета пикселов, но и регулировать их яркость. Этого не скажешь об офсетных печатных станках и принтерах. Связано это с чисто технической невозможностью на таких устройствах регулировать уровень краски для каждого отдельного пиксела. Печатные устройства позволяют лишь нанести краску на определенные места бумаги либо не наносить ее.
Проблему нанесения объема краски на конкретных участках печатники решили с присущей им изящностью. Они попросту осуществляют регулировку площади закрашиваемой поверхности в конкретном месте на бумаге. При таком подходе даже с одинаковой толщиной нанесенного слоя краски можно регулировать яркость путем увеличения или уменьшения напечатанных точек. Этот процесс называется растрированием.
Все офсетные машины для печати работают по принципу растрирования. Если вы возьмете увеличительное стекло и рассмотрите офсетную печать, то без труда различите точки из которых состоит печатное изображение. Поскольку метод растрирования появился намного раньше изобретения компьютеров, то и величина измерения растра не имеют к ним никакого отношения. Первоначально при растрировании применяли контактные растры. Это прозрачная пластина с нанесенной на нее мелкой штриховкой.
Величина lpi показывает количество штрихов на растровой пластине в дюйме. Эта величина соответствует количеству точек на дюйм в отпечатанных растрированных изображениях. Этот показатель применяется только к растрированным изображениям и более нигде не используется. Указанный параметр относится к растрирующим печатным устройствам. Его невозможно применить к изображению на компьютере, поскольку, хоть оно и называется растровым, но на самом деле является полутоновым.
Видя у принтера в настройках величину lpi вы должны понимать, что ни на что, кроме как на количество растровых точек в дюйме, она не влияет. Для более полного понимания различий между ppi и lpi стоит сказать, что самая маленькая часть изображения на компьютере – пиксель. Самая маленькая часть изображения на бумаге - точка.
В принципе, эти показатели должны совпадать при печати изображения. Однако, зачастую дизайнеры совершают не то что бы ошибку… Просто они сдают макет в печать, который в разы превышает технические возможности печатного оборудования. Наиболее распространенным разрешением изображения у дизайнеров является 300 ppi. Они приносят проект с таким разрешением в газету. Но при печати газет применяется растрирование максимум в 100 lpi. В итоге мы получаем что исходный файл мог бы быть в 9 раз меньше.
Что такое dpi
Теперь разберемся с величиной dpi. Эта величина применяется только к растрирующему печатному устройству. На самом деле, точки, из которых складывается показатель lpi, в свою очередь состоят из более мелких точек. Ряд этих мельчайших точек, равен одному проходу лазера на фото-барабане или пленке. Получается, что для изображения одного lpi используется множество dpi.
Понятно, что чем выше отношение lpi к dpi тем более высокого качества печать мы получим на выходе. Здесь опять срабатывает эффект мозаики. Чем меньше ее кусочки, тем более точной и детальной она становится. Так же и dpi влияет на lpi, чем больше маленьких точек будет использовано для создания большой точки растра, тем более точной будет эта точки. Изображения высокого разрешения при печати могут использовать соотношения от 150 lpi 2540 dpi и выше. Что касается печати газет, то там достаточно соотношения 100 lpi 1200 dpi.
Все современные дисплеи которые производятся сегодня, состоят из цветных пикселей, и чем они мельче тем четче получаемая картинка при одинаковых размерах дисплея. Плотность пикселей как правило измеряется в PPI - что расшифровывается как pixel per inch. Чем больше данное значение в характеристиках дисплея, тем детальнее выводимая картинка.
Так же, часто PPI имеется виду и DPI что означает dots per inch (точек на дюйм), но данный термин применяется в бумажной печати. Как правило, в бумажной печати используется стандартное разрешение в 300 DPI, которого достаточно для качественной картинки, еще иногда используется и разрешение 266 DPI, которое сохраняет оптимальную четкость изображения. Чаще всего в разрешении 300 DPI печатаются в глянцевых журналах, книгах, или в постерах. При такой , большинство людей никогда не увидят отдельных точек, разве что если рассматривать лупой. Газеты как правило используют разрешение значительно ниже, примерно 170 DPI.
Не смотря на то что эта цифра почти в два раза ниже чем у глянцевых журналах, текст остается идеально читабельным. Некоторые газеты используют даже 10-20 точек на дюйм, и текст все равно остается хорошо читаемым.Смартфоны, планшеты и дисплеи компьютеров как правило находятся на схожем расстоянии что и газета или журнал, и плотность в радиусе 150 - 300 является самым оптимальным. Нужно знать еще тот факт, что в устройствах размер экрана влияет на плотность пикселей, таким образом при одинаковом разрешении в 768 на 1280 пикселей 4.5 дюймовый дисплей будет иметь 332 точек на дюйм, а 10 дюймовый дисплей всего 150 точек, но по аналогии с газетой, он остается отлично читаемым для человеческого глаза.
Сначала стоит задать себе вопрос, поможет ли высокая плотность пикселей быстрее печатать письма? Помогает ли она вам удобнее управлять календарем? или добавлять новые контакты? Если речь идет о 300 ppi, тогда можно сказать что да, хорошая читаемость помогает быстрее находить контент на экране, с меньшим напряжением глаз. Да это важно, но это не имеет такое массовое значение.
Хорошая плотность пикселей делает просмотр фотографий приятнее, можно смотреть видео с более высоким разрешением, но это не на столько критично будь плотность всего на 150 точек. Фотографию при желании можно увеличить, а видео на небольшом экране смартфона можно закачать и в разрешении по ниже.
Может хорошая плотность сделает просмотр сайта приятнее? но с приходом мобильной эры, все сайты имеют и мобильную версию, где все элементы достаточно крупны, и не требуется высокая четкость дисплея
По опросам пользователей смартфонов, для большинства из них в смартфоне важнее совсем иные вещи, например качество картинки, есть ли функция беспроводной зарядки, какая емкость аккумулятора, или что за прошивка установлена в случае Anroid.
Очень высокая плотность пикселей экрана смартфона это как спидометр с высокой максимальной скоростью, до которой редко кто разгоняется.
Высокая плотность (350 и выше) имеет смысл для планшета - если вы имеете профессию связанную с графикой или фотографией, для смартфона же большой разницы нет. Разница конечно будет отличаться от дисплея с 500ppi по сравнению с 320, но она не будет настолько критична, из за чего будет невозможно нормально делать привычные операции.
