Дизайнер Питер Ноуэлл в своем блоге написал о плотности пикселей в дизайне мобильных приложений - объяснил, что это такое и рассказал о проблемах, с которыми сталкиваются дизайнеры, проектируя интерфейсы для разных устройств.
Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.
В видео затронуто большинство тем статьи, но если вы заинтересованы в подробностях, - продолжайте читать
Плотность пикселей - это количество пикселей, вмещающееся в определенном физическом размере (обычно, в дюйме). На первом компьютере Mac было 72 пикселя на дюйм, - число кажется большим, но на самом деле это были огромные пиксели, под которые подходила не каждая графика.
Иконки на компьютере Macintosh 1984 года. Дизайнер Сьюзан Каре
С тех времен технологии экранов заметно продвинулись вперед, - сейчас даже самые простые дисплеи имеют разрешение между 115 и 160 пикселей на дюйм (PPI- pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с Retina-дисплеем - суперчетким экраном, удвоившим количество пикселей на дюйм. В результате графика стала четче, чем когда-либо.
Разница особенно хорошо заметна в иконке приложения почты и в тексте
Чтобы поддерживать те же физические размеры элементов пользовательского интерфейса, пришлось увеличить количество пикселей на дюйм. Кнопка, которая раньше занимала 44px, стала занимать 88px.
Для совместимости между разными устройствами дизайнеры должны выпускать графику для обычных дисплеев и для Retina-дисплеев. Но тут возникла еще одна проблема: теперь дизайнер не может сказать, что какой-то элемент должен быть, например, 44 пикселя в высоту, потому что на другом устройстве этот же элемент должен быть в два раза выше.
Решением стали пункты (points), или pt. Один пункт соответствует одному пикселю на экранах до поколения Retina и двум пикселям на экранах с Retina. Теперь, если дизайнеру говорят, что высота какого-либо элемента - 44 пикселя, он может адаптировать этот размер под любой коэффициент плотности пикселей - 1х, 2х или 3х в случае с iPhone 6 Plus.
PT и DP
Конечно, это все актуально не только для устройств Apple. Каждая операционная система - десктопная или мобильная - поддерживает экраны с высоким ppi/dpi. В Google придумали свою независимую от пикселей единицу измерения для Android, которая называется DIP - пиксель, не зависящий от плотности, сокращенно «dp». Это не эквивалент пунктам в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x и так далее).
Возможно, вас интересует физический размер пункта. На самом деле, дизайнеры интерфейсов не должны об этом думать, так как у них нет контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов в 1x, 2x, 3x и так далее.
В устройствах Apple нет единой плотности пикселей, которая представляет один пункт - это зависит от конкретного устройства (см. «Восприятие масштаба» ниже). В iOS пункт варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.
Контролируемый хаос
На ранних порах развития мобильных устройств с высоким разрешением плотность пикселей была просто 1х или 2х. Но сейчас все иначе - есть масса пиксельных плотностей, которые должен поддерживать интерфейс. В Android есть отличный пример: на момент написания этого поста разные производители поддерживают шесть разных плотностей пикселей. Это означает, что иконка, которая имеет одинаковый размер на всех экранах, на самом деле должна быть выполнена в шести разных вариациях. Для Apple актуально два или три разных исходника.
Дизайн в векторе
Есть пара практических уроков, которые вам стоит извлечь из всего этого. Для начала, вы должны создавать дизайны в векторе. Это позволяет нашим интерфейсам, иконкам и прочей графике масштабироваться в любой нужный размер.
Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.
Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 - это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.
Притворяйся, пока это не станет правдой
Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.
Создавайте дизайн под iPhone Plus так, как если бы он был 3x. Телефон сам отмасштабирует его в 87%
Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно - линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.
Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не слишком качественно.
Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.
Восприятие масштаба
Должна ли кнопка быть одинакового размера на разных устройствах? Ответ зависит от- точности метода ввода (сенсор или курсор);
- физических размеров экрана;
- расстояния до экрана.
Кнопка на экране телевизора должна быть размером с телефон - потому что иначе ее нельзя будет увидеть, сидя на диване.
Вот менее драматичный и очень правдивый пример: иконки приложений на планшете должны быть больше таких же иконок на телефоне. Это реализуется двумя способами: с помощью меньшей плотности пикселей или разных размеров иконок.
Низкая плотность пикселей
Крупные экраны, на которые мы смотрим на расстоянии, обычно располагают меньшей пиксельной плотностью. У телевизора может быть 40 пикселей на дюйм - и, как правило, этого хватает. Плотность пикселей Retina-дисплеев на iPad составляет около 264 ppi; на iPhone - 326 ppi. Так как пиксели на iPad больше (а плотность меньше), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.
Существует широкое разнообразие дисплеев, но мы хотим вам дать несколько рекомендаций, которые могут помочь вам выбрать правильный экран. Качество передаваемого изображения зависит от разрешения экрана, плотности пикселей, типа экрана, и даже от размера. Есть много факторов, которые определяют, хороший это дисплей или нет. Так что, наверняка, многим будет полезно почитать, какой именно экран стоит выбрать для смартфона или планшета.
Разрешение экрана и плотность пикселей:
Когда вы читаете информацию о том или ином устройстве, то первое, что вы видите о дисплее – это размер и разрешение экрана, а также количество пикселей на дюйм, т.е. плотность пикселей. Из-за огромного количества 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+EnterPPI это сокращение от английского «pixels per inch», буквально означает количество пикселей на дюйм. Естественно, чем больше это значение, тем выше плотность пикселей, сами пиксели при этом меньше по размеру, что в результате дает более четкую картинку на экране смартфона (и экране любого другого устройства – планшета, монитора, телевизора и так далее). При маленьких значениях PPI вы можете увидеть отдельные пиксели на экране, изображение будет зернистым, что не очень комфортно для глаз. Обычно телефоны с маленьким значением PPI - это бюджетные модели.
Полная формула расчета PPI выглядит так: необходимо извлечь квадратный корень от суммы квадратов количества пикселей по высоте и ширине, и после разделить полученный результат на диагональ экрана в дюймах. То есть формула будет такая:
Посчитаем на примере iPhone 7, его разрешение составляется 1334 на 750 пикселей, а диагональ экрана 4.7 дюйма, то есть:
- 1334 в квадрате = 1779556;
- 750 в квадрате = 562500;
- Сумма квадратов, 1779556 562500 = 2342056;
- Извлекаем квадратный корень из 2342056 = 1530.378;
- Делим полученное значение на 4.7 = 325.6123;
- Округляем значение и получаем цифру 326. Это и есть PPI для iPhone 7.
Какое значение PPI должно быть в телефоне
Не стоит гнаться за самым большим значением PPI. На рынке есть модели смартфонов со значением PPI более 400, и даже с более чем 500. Но проблема в том, что человеческий глаз не видит разницы при повышении значения PPI более 300. Конечно, при желании, вы сможете рассмотреть пиксели вблизи, но при обычном использовании, на расстоянии 20-25 см от глаз, экран будет очень комфортным. К тому же, обработка очень высоких разрешений, накладывает свой отпечаток на время работы телефона.
Все современные дисплеи которые производятся сегодня, состоят из цветных пикселей, и чем они мельче тем четче получаемая картинка при одинаковых размерах дисплея. Плотность пикселей как правило измеряется в 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, но она не будет настолько критична, из за чего будет невозможно нормально делать привычные операции.
Сейчас разрешение и плотность пикселей дисплея в мобильном устройстве являются одним из главных маркетинговых пунктов. Узнайте, на что влияет значение 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.
На что влияет плотность пикселей?
Чем выше плотность пикселей, тем более четкое изображение вы будете видеть на экране. Если раньше это не имело особого значения, то с наступлением эры виртуальной и дополненной реальности ситуация постепенно меняется. Едва ли вам захочется в режиме виртуальной реальности видеть вокруг себя пиксельную картинку. Чем выше разрешение и плотность пикселей, тем реальнее изображение. Причем это может быть заметно не только при использовании гарнитуры виртуальной реальности, но и при просмотре фильмов.
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows