Начнем с того, что изображение состоит из мельчайших элементов- точек или пикселей, и, в зависимости от диагонали дисплея (и его физического размера), пиксель может иметь разную величину. Встречаются и различные формы пикселя - прямоугольная, квадратная и даже восьмиугольная (последняя, правда, бывает только у плазменных телевизоров). Ну а разрешение экрана представляет собой, по сути, длину в пикселях каждой из сторон.
В современных смартфонах можно встретить разрешение от 320х240 пикс. (самые бюджетные модели для детей и старшего поколения) до 3840х2160 пикс. (как правило, флагманы). Чем больше экран и меньше его разрешение, тем крупнее пиксели и тем больше размывается изображение. Например, если взять 6-дюймовый экран с разрешениями 1280х720 пикс. (HD) и 1920х1080 пикс. (Full HD), то в первом случае картинка будет иметь меньшую четкость.
Но стоит ли гнаться за более высокими разрешениями экранов смартфонов вплоть до 4К? Да, бывают случаи, когда они действительно требуются - например, для погружения в виртуальную реальность, где дисплей находится практически вплотную к глазам и мы различаем мельчайшие пиксели ( о смартфонах для VR). А вот с остальным контентом всё уже не так однозначно.
Пиксельная плотность
Здесь нельзя обойтись без понятия пиксельной плотности (PPI) - разрешающей способности матрицы, которая и является основным показателем того, насколько четкий экран у устройства. PPI рассчитывается, исходя из диагонального разрешения, его ширины и высоты, а также из диагонали матрицы в дюймах.
Чем больше пикселей помещается на дюйме пространства, тем они, соответственно, будут мельче, а изображение - более гладким и четким; тем богаче цветопередача, лучше яркость и контрастность. Более того, при высокой PPI шрифты на экране выглядят более гладкими, что улучшает читаемость текста. Например, PPI при разрешении 2560х1440 пикселей и диагонали 5,5” будет равняться 534, а если взять экран немного больше (5,7”), то при том же разрешении PPI упадет до 515, и картинка потеряет в четкости.
Обычный пользователь услышал об этом понятии в 2010 году с выпуском iPhone 4 с дисплеем Retina. Тогда в Apple заявили, что максимум пикселей на дюйм, которые может различить человеческий глаз, составляет около 300. В Колумбийском университете тоже рассчитали предел пиксельной плотности для человеческого глаза, и он оказался чуть выше - 350 PPI. А в 2014 году LG продемонстрировала три экрана - с HD-разрешением и плотностью 269 PPI, с Full HD и 403 PPI и с QuadHD (ее тогдашний флагман LG G3) и 538 PPI. И разница между ними была заметна, картинка на каждом последующем экране выглядела более четкой и качественной, и это было видно невооруженным глазом.
Раймонд Сонейра из компании DisplayMate утверждает, что человек с идеальным зрением может «увидеть» плотность до 600 PPI, что делает не такими безумными идеи о выпуске смартфонов с разрешением 4К и 800 PPI. Сейчас пиксельная плотность современных флагманов уже перевалила за 500 PPI, но в какой-то момент невооруженным взглядом пользователи перестанут различать плюсы небольшого, по сути, экрана смартфона с высокой плотностью.
Смартфоны с самыми четкими экранами
Доверять производителям на слово мы не стали и самостоятельно рассчитали пиксельную плотность для каждого из смартфонов. Как оказалось, здесь вендоры не стали преувеличивать свои заслуги и указали верные значения (с поправками на округление до целого), хотя, например, с «безрамочностью» многие погорячились ( в нашем материале).
Samsung Galaxy S9
Samsung Galaxy S9 стал лидером по четкости экрана - его пиксельная плотность составляет 568 PPI. Из-за меньшей диагонали (5,8") он обошел своего «собрата» S9+, имеющего такое же разрешение (2960х1440 пикс.), но более крупную диагональ (6,2"), и поэтому получившего 531 PPI. Смартфон выполнен в «безрамочном» дизайне и, к счастью, без популярной сейчас «челки» - это плюс производителю.
Пользователи отмечают, что у дисплея цвета действительно очень сочные (это все-таки фирменная матрица SuperAMOLED), яркость и контрастность на высоком уровне. Он отлично ведет себя на солнце, не бликует и остается читаемым. Кстати, разрешение экрана при желании можно уменьшить, увеличив срок работы от батареи.
LG G6 () лишь немного отстал от лидера с результатом 565 PPI (диагональ - 5,7”, разрешение - 2880х1440 пикс.). LG назвала свой экран FullVision, указывая на то, что у пользователя будет больше пространства для просмотра видео, страниц в интернете и текста. Все данные можно разделить на два окна - в смартфонах LG эту функцию поддерживает большое количество приложений. Хотя IPS-матрица считается менее яркой, чем AMOLED, ее качество все же было положительно оценено пользователями. Есть поддержка Dolby Vision и HDR 10.
Кстати, недавно был представлен LG G7 ThinQ, который может похвастаться более высоким разрешением - 3120х1440 пикселей. Но из-за увеличения диагонали до 6,1” плотность пикселей у его экрана немного ниже - 563 PPI.
Хотя к стратегии компании HMD Global у многих есть вопросы, получился достаточно удачным и расположился на третьем месте списка с результатом 554 PPI. Пусть у его экрана более низкое разрешение (2560х1440 пикс.), чем у смартфонов, оказавшиеся в топе ниже, он выигрывает за счет небольшой диагонали дисплея - 5,3 дюйма.
Дизайн, правда, совсем не безрамочный - сверху и снизу дисплея есть очень заметные полоски. Зато качество экрана нам понравилось - он яркий, контрастный, с естественной цветопередачей и хорошими углами обзора. А в вечернее время суток можно активировать ночной режим, чтобы глаза не уставали.
Vivo Xplay 6
Vivo Xplay 6 достаточно сильно отстал по показателям от тройки лидеров - у него 538 PPI. Но за то, что он сюда попал, следует благодарить среднюю диагональ экрана (5,46”) и высокое разрешение (2560х1440 пикс.). По внешнему виду сразу становится понятно, у кого черпали вдохновение дизайнеры - изогнутый по краям дисплей повторяет Samsung Galaxy Note 7. Да и сама матрица AMOLED тоже от южнокорейского производителя, так что неудивительно, что экран выдает качественную картинку.
Изогнутыми края экрана сделаны не просто так - здесь есть панель, полностью аналогичная Edge от Samsung. Разрешение дисплея тоже можно понизить до Full HD для повышения автономности, а вот калибровать цвета настройки не позволяют.
Google Pixel 2 XL
Еще один «четкий смартфон» -интересный, но не слишком популярный прошлогодний флагман Google Pixel 2 XL. У него большая диагональ (6") и высокое разрешение экрана (2880х1440 пикс.), а плотность пикселей составляет 537 PPI. Установлена матрица POLED производства LG, которая местами уступает SuperAMOLED от Samsung, но зато тут нет присущей последним «кислотности» оттенков. Однако, если отклоняться от прямого угла, то цвета начинают инвертироваться и уходить в синий.
Также в самом начале продаж были жалобы на зернистость и появление артефактов, но производитель уверяет, что это должны были исправить программные обновления. Еще многим пользователям не повезло, и у их аппаратов экран местами уходит в розовый оттенок.
Точно такую же плотность пикселей (537 PPI) имеет и второй смартфон производства LG в нашем списке - LG V30+. У него, как и у Google Pixel 2XL, диагональ 6" и разрешение 2880х1440 пикс. Тип матрицы - снова POLED (On-Cell touch). Но, по всей видимости, для своих флагманов LG всё же делает более качественные дисплеи.
Экран тут яркий, с качественным антибликовым покрытием и сбалансированными цветами. Есть отдельные профили отображения цвета - для серфинга в интернете, просмотра фильмов, чтения книг. Также поддерживается HDR, а у функции Always-on-display, что присутствует у всех современных OLED-экранов, имеются разные варианты настройки: времени отключения, яркости, отображения содержимого и т.д.
HTC U11 Plus
И третий подряд смартфон с 6-дюймовым экраном, разрешением 2880х1440 точек и плотностью пикселей 537 PPI - это HTC U11 Plus. Фирменная матрица Super LCD 6, по словам производителя, обеспечивает естественную цветопередачу. Такой экран очень нравится тем, для кого дисплеи от Samsung слишком яркие. А для любителей сочных оттенков экран будет казаться слишком блеклым, но глаза от него не устают.
У смартфона имеется аналог функции Always-on-display, но т.к. это LCD-матрица, отображаться будут только часы и информационные значки, а батарея сядет гораздо быстрее. Интересен режим «В перчатках» с повышенной чувствительностью экрана, а также возможность выбрать цветовой профиль и отдельно менять в нем настройки.
Есть поддержка динамического диапазона HDR10, но только на аппаратном уровне. С новыми обновлениями системы она должна появиться и программно.
Tonino Lamborghini Alpha one
Вместе со следующим смартфоном списка, Tonino Lamborghini Alpha one, нас приглашают в премиум-сегмент, предлагая наряду с впечатляющим внешним видом (корпус из «жидкого металла» и отделка натуральной кожей) еще и достойные характеристики. Диагональ в 5,5 дюймов и разрешение 2560х1440 точек создают пиксельную плотность 534 PPI.
AMOLED-матрица демонстрирует хорошую контрастность и экономит заряд батареи, запас яркости тоже достойный. Как и у всех AMOLED-экранов, цвета не инвертируются при разных углах обзора. Можно при желании поиграть с настройками цветовой температуры и насыщенности.
Huawei P10 Plus
Huawei P10 Plus по характеристикам экрана совпадает с Tonino Lamborghini (за исключением того, что матрица - IPS), и поэтому точно так же демонстрирует 534 PPI.
Смартфон был , и мы отметили, что у дисплея хорошая яркость и достойное антибликовое покрытие - им можно с комфортом пользоваться на солнце. Углы обзора широкие, а цветовую температуру можно настраивать самостоятельно либо выбрать предустановленный профиль.
ASUS ZenFone AR ZS571KL
Ну а смартфон ASUS ZenFone AR ZS571KL специально «заточен» под виртуальную и дополненную реальность, и поэтому он обладает большим и четким экраном с диагональю 5,7 дюймов и разрешением 2560х1440 пикс., а его пиксельная плотность составляет 515 PPI.
Сверху экран прикрыт 2,5-D стеклом Gorilla Glass 4. Превратить устройство в шлем VR можно с помощью его же упаковки - она раскрывается, туда вставляется смартфон - и вперед, навстречу виртуальным приключениям. Правда, режим VR очень быстро разряжает батарею - как, впрочем, и игры.
| Расчетная PPI | Заявленная PPI | Дисплей | Цена | |
| Samsung Galaxy S9 | 567,53 | 568 |
Super AMOLED 5,8" 2960х1440 пикс. |
i 59 990 |
| LG G6 | 564,90 | 565 |
2880х1440 пикс. |
от i 37 990 |
| Nokia 8 | 554,19 | 554 |
2560х1440 пикс. |
i 29 990 |
| Vivo Xplay 6 | 537,95 | 538 |
2560х1440 пикс. |
от i 35 990 |
| Google Pixel 2 XL | 536,66 | 537 |
2880х1440 пикс. |
от i 48 990 |
| LG V30+ | 536,66 | 537 |
2880х1440 пикс. |
i 59 990 |
| HTC U11 Plus | 536,66 | 537 |
2880х1440 пикс. |
i 49 990 |
|
Tonino Lamborghini Alpha one |
534,04 | 534 |
2560х1440 пикс. |
i 149 000 |
| Huawei P10 Plus | 534,04 | 534 |
2560х1440 пикс. |
от i 32 190 |
|
ASUS ZenFone AR |
515,3 | 515 |
2560х1440 пикс. |
i 59 990 |
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 Постарайтесь найти возможность лично посмотреть на все образцы, которые вы выбрали. Можно сначала просмотреть их опции в интернете, а потом пойти в магазин электроники и увидеть, как реально они отображают картинки. Личный взгляд в данном случае просто незаменим.
3 Обращайте внимание на батарею. Если говорить о смартфонах, то чтобы обеспечить долгую работу аппарата с четким изображением (большим показателем ppi и/или хорошей технологией), то емкость аккумулятора должна составлять порядка 3000 мАч.
У планшетов она должна быть еще выше, так как их диагональ больше,
4 Помните: чем меньше диагональ и чем выше плотность пикселей (количество таковых на дюйм), тем четче изображение. Не стоит обманывать самих себя – добиться очень четкой картинки с огромным дисплеем и небольшим значением пи-пи-ай не получится. Здесь важно соблюдать золотую середину.
5 Важно учитывать и покрытие. Так матовые экраны будут выдавать менее четкое и насыщенное изображение, зато будут более щадяще относиться к вашим глазам.
А вот глянцевые дисплеи будут негативно влиять за зрение, зато изображение на них будет намного более красивым. При этом значение ppi у них может быть одинаковым.
Это, в основном, актуально . Если вы работаете за компьютером полный рабочий день или даже больше, лучше остановиться на матовом варианте.
Все это позволит вам выбрать наиболее подходящий дисплей для себя.
Итоги
ppi или пи-пи-ай – это плотность пикселей или показатель пикселей в дюйме изображения. Чтобы перевести показатель в сантиметры, нужно поделить его на 2,54.
Нецелого количества быть не может, только целое.
Чем этот показать выше, тем четче и приятнее на изображение будет смотреть.
При выборе и другой техники, в которой есть , очень важно обращать внимание на этот показатель.
Но она не является основополагающей. Также важно смотреть на технологию и покрытие экрана.
Кроме того, обязательно смотрите на емкость аккумулятора и соблюдайте золотую середину между количеством пикс. и размером экрана.
Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс-DPI и кросс-платформенном дизайне с самых азов.
Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.
Что такое DPI и PPI
DPI или Dots Per Inch (точек на дюйм) - это величина измерения плотности точек, изначально используемая в печати. Это количество чернильных точек, которое ваш принтер может поместить в одном дюйме. Чем меньше DPI, тем менее детализированная печать.
Это понятие применяется также и для компьютерных экранов под названием PPI или Pixels Per Inch (пикселей на дюйм). Тут такой же принцип: величина подсчитывает количество пикселей, которое ваш экран способен отобразить на 1 дюйме. Термин DPI также используется и для описания характеристик экрана.
Компьютеры Windows по умолчанию имеют PPI=96. В Mac используется PPI=72. Эти значения были обусловлены тем, что производимые тогда экраны отображали 72 «точки» или пикселя на дюйм. Так было в 80-х, а сейчас устройства на Windows, Mac и прочих платформах имеют множество вариаций PPI-разрешения экранов.
Разрешение, пиксель и физический размер
Спросить кого-то, каков размер пикселя, - это отличный способ смутить человека каверзностью вопроса. У пикселя нет размера, нет физического значения или смысла вне его математического представления. Это часть связи между физическим размером экрана , выраженным в дюймах, и разрешением экрана , выраженным в пикселях на дюйм, а также пиксельным размером экрана , выраженным в пикселях. В общих чертах это выглядит вот так:
Обычные декстопные экраны не-retina (включая Mac) будут иметь PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере везде.
Вот вам пример:
Экран Mac Cinema Display 27» располагает PPI = 109, что означает, что он отображает 109 пикселей на дюйме экранной площади. Ширина с фасками составляет 25.7 дюймов (65 см). Ширина самого экрана примерно 23.5 дюймов, так что 23.5*109~2560, что и формирует родное разрешение экрана в 2560x1440px.
*Я знаю, что 23.5*109 на самом деле не равно 2560. На самом деле это будет 23.486238532 дюймов. Более точный результат получится при подсчете пикселей на каждый сантиметр, но, надеюсь, вы уловили суть.
Влияние на ваш дизайн
Скажем, вы нарисовали синий квадрат размером 109*109px на экране, о котором мы только что говорили.
Этот квадрат будет иметь физический размер 1*1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма экранного пространства, чтобы отобразить квадрат со стороной в 109 пикселей. Посмотрите симуляцию этого эффекта ниже:
Не обращая внимания на разницу в цвете и разрешении, помните, что каждый будет видеть ваш дизайн по-разному. Вашей целью должен быть поиск лучшего компромисса, покрывающего наибольший процент пользователей. Не надейтесь, что у каждого пользователя будет такой же экран, как у вас.
Разрешение экрана (и родное разрешение)
Разрешение экрана может существенно влиять на то, как пользователь воспринимает ваш дизайн. Так как на смену CRT-мониторам пришли LCD, пользователи теперь имеют родное разрешение, которое гарантирует хорошее соотношение размера и PPI.
Разрешение определяет количество пикселей, отображаемых на экране (например, 2560*1440px для дисплея cinema в 27 дюймов) - 2560 по ширине и 1440 по высоте. Конечно, теперь, когда вы знаете, что означает PPI, вы понимаете, что это не может быть единицей измерения физического размера. Изображение с таким разрешением можно растянуть как на всю стену, так и на очень небольшой экран.
Сегодня LCD-мониторы идут с предустановленным или родным разрешением, отражающим количество пикселей, которое может отобразить экран. Оно немного отличалось от старых CRT-мониторов, но так как они остались в прошлом, не будем вдаваться в детали (так я смогу скрыть и свой частичный недостаток знаний в области старых-добрых телеков).
Возьмем наш 27-дюймовый Cinema Display, который может отобразить 190 PPI на родном разрешении в 2560*1440px. Если вы сократите разрешение, элементы будут больше. Но фактически у вас будет 23.5 дюймов по горизонтали, чтобы заполнить их пикселями, правда меньшим их количеством.
Я сказал «фактически», потому что в этом случае так и будет. Экран располагает родным разрешением в 2560*1440px. Если разрешение снизится, пиксели останутся на месте, отображая 109PPI. Чтобы заполнить разрыв между этими параметрами, ваша ОС попросту начнет все растягивать. Ваш графический процессор возьмет каждый пиксель и высчитает новую пропорцию для его отображения.
Если вы зададите разрешение в 1280*720 (половину прошлой ширины, половину высоты), ваш GPU будет симулировать пиксель, вдвое больший по сравнению с прежним, чтобы заполнить экран. Какой будет результат? Ну, графика может стать размытой. Если половинчатая пропорция будет выглядеть более-менее хорошо, потому что это простой делитель, то если задать пропорцию ⅓ или ¾, вы придете к дробным значениям, а пиксель делить НЕЛЬЗЯ. Вот пример:
Посмотрите на пример ниже. Возьмите линию толщиной в 1 пиксель на экране с родным разрешением. А теперь примените разрешение на 150% меньше. Чтобы заполнить экран графикой, процессору придется генерировать графику на 150%, умножая все на 1.5. 1*1.5=1.5, но у нас нет половинчатых пикселей. В итоге крайние пиксели зальются дробным оттенком цвета, что и создаст эффект размытости.
Поэтому, если у вас есть Retina Macbook Pro, и вам нужно измерить разрешение, вам отобразится окно, показанное ниже, уведомляя вас, что выбранное разрешение будет «выглядеть, как» 1280*800px. Так система выражает пропорции размера через разрешение пользователя.
Это очень субъективное представление, потому что используется пиксельное разрешение в качестве меры физического размера, но это и не ложь, как минимум, с их точки зрения.
Вывод: Если вы хотите всегда видеть дизайн в качестве pixel-perfect, никогда не используйте разрешение, отличное от вашего родного. Да, вам может быть комфортнее с меньшей пропорцией, но когда речь заходит о пикселях, желательно быть максимально точным. К сожалению, некоторые люди используют разрешение как способ лучше видеть то, что на экране (особенно на компьютерном экране). Тут ваш дизайн тоже может выглядеть плохо, но тут пользователям важнее удобочитаемость, чем аутентичность дизайна.
Что такое 4K разрешение?
Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде. Чтобы понять, что это такое, давайте сначала разберем, что же означает «HD». Помните, что это супер-упрощенный вариант объяснения. Я просто поясню на примере самых распространенных разрешений. Есть разные категории HD.
Термин HD применим к любому разрешению, начиная с 1280x720px или 720p на 720 горизонтальных линий. Некоторые могут назвать такое разрешение SD, по стандартному определению.
Термин full HD применяется к экранам 1920x1080px. Большая часть телевизоров использует это разрешение, как и все большее количество продвинутых high-end телефонов (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).
Разрешение 4K начинается от 3840×2160 пикселей. Его также называют Quad HD, UHD от Ultra HD. Грубо говоря, вы можете вместить 4 по 1080p в 4K-дисплей по количеству пикселей.
Вторым разрешением 4K является 4096×2160. Оно немного больше, используется для проекторов и профессиональных камер.
Что случится, если я подключу 4K-дисплей к моему компьютеру
Современные операционные системы не масштабируют 4K, что означает, если вы подключите 4K-дисплей к Chromebook или macbook, будет использоваться исходник с самым большим DPI, в этом случае 200% или @2x, и отобразится в нормальной пропорции. Все будет выглядеть хорошо, но довольно мелко.
Гипотетический пример: если вы подключите дисплей размером 12″ и разрешением 4K к компьютеру 12″ с высоким разрешением (2х), все отобразится в размере вдвое меньше.
Вывод:
- 4K в 4 раза больше Full HD.
- Если ОС поддерживает 4K, но не масштабирует, значит нет специального 4K-исходника.
- На данный момент нет телефонов или планшетов с разрешением 4k.
Частота мерцания монитора
твлечемся ненадолго от PPI и разрешений экрана. Вы наверняка видели, что в настройках экрана также значится значение в Герцах (Hz). Это не имеет никакого отношения к PPI, но если вам интересно, частота мерцания монитора или частота обновления изображения- это единица измерения скорости, с которой ваш монитор будет отображать фиксированное изображение или фрейм, в секунду. Монитор с частотой 60Hz сможет отображать 60 кадров в секунду (60 fps). Монитор с частотой 120Hz - 120fps и т.д.
В контексте пользовательского интерфейса, частота мерцания монитора определит, насколько плавно и детализировано будет выглядеть ваша анимация. Большинство экранов имеют частоту 60Гц. Помните, что количество кадров, отображаемое за секунду, также зависит от процессорной и графической мощности устройства. Нет смысла адаптировать экран 120Гц под Atari 2600.
Для лучшего понимания посмотрите на пример ниже. Ти-рекс идет из точки А в точку Б в быстром и точно постоянном ритме на обоих экранах - 60 Гц и 120 Гц. Экран с частотой 60fps способен отображать 9 кадров во время аримации, а экран 120 Гц по логике вещей отобразить в два раза больше кадров за ту же единицу времени. Анимация будет гораздо плавнее на экране с частотой 120 Гц.
Вывод: Некоторые утверждают, что человеческий глаз не может улавливать частоту свыше 60fps. Это не так. Не слушайте таких умников, смейтесь им в лицо как можно более очевидно.
Что такое экран retina
Само название «Retina display» было представлено Apple в релизе iPhone 4. Экран называется Retina, потому что PPI устройства было таким высоким, что сетчатка человеческого глаза (по-англ. retina) не должна была различать пиксели на экранах.
Это утверждение справедливо для некоторых размеров экрана, но так как экраны постоянно улучшаются, наши глаза теперь натренированы достаточно, чтобы различать пиксели, особенно на закругленных элементах интерфейса.
Технически, такие экраны отображают вдвое больше пикселей в высоту и в ширину на таком же физическом размере.
iPhone 3G/S имел диагональ в 3.5 дюйма и разрешение 480*320px, что соответствует 163PPI.
Phone 4/S также имел диагональ в 3.5 дюйма и разрешение 960*640px, что соответствует 326PPI.
УХТЫ! Точно в два раза. Простой множитель. Так что, вместо того, чтобы быть меньше, элементы на экране в два раза резче, так как в них вдвое больше пикселей, и такой же физический размер. 1 нормальный пиксель = 4 пикселя retina, в четыре раза больше пикселей.
Используйте пример ниже по прямому назначению при разработке сложных дизайнов.
Примечание: довольно сложно симулировать разное качество изображения с двух устройств на третьем, т.е. на которое вы сейчас смотрите. Музыкальный плеер на retina, даже занимая такое же физическое пространство, будет смотреться вдвое четче и качественнее на iPhone 4. Если вы хотите проверить, воспользуйтесь одним из моих бесплатных примеров для демо.
Название «Retina» принадлежит Apple, так что другие компании используют вместо него «HI-DPI» или совсем никакого названия.
Вывод: Продукты Apple - это отличный способ познакомиться с конвертацией DPI, чтобы понять различия между разрешением, PPI и соотношением с физическим размером, потому что вам придется использовать всего 1 множитель.
Что такое множитель?
Множитель - это ваш математический спаситель, когда дело доходит до конвертации дизайна в разных PPI-разрешениях. Когда вы знаете множитель, вам не нужно париться о детальных спецификациях устройства.
Давайте возьмем для примера iPhone 3G и 4. У вас есть в 4 раза больше пикселей (ширина 2х и высота 2х) при том же физическом размере. Следовательно, ваш множитель равен 2. Это означает, чтобы ваши исходники были совместимы с разрешением 4G, вам нужно просто умножить размер исходников на 2, и все.
Скажем, вы создаете кнопку размером 44*44px, что является рекомендованным размером для сенсорных кнопок в iOS (мы к этому еще вернемся позже в этом посте). Назовем ее типичной кнопкой с именем «Jim.»
Чтобы наш Джим выглядел красиво на iPhone 4, вам нужно создать вдвое большую версию. Это мы и делаем здесь:
Все довольно просто. Теперь есть версия Jim.png для нормального PPI (iPhone 3) и версия [email protected] для 200% PPI (iPhone 4.)
Теперь вы скажете: «Я почти уверен, что есть и другие множители, кроме двойки». Так и есть, и тут начинается самый кошмар. Может, и не кошмар, но я уверен, что вы предпочтете провести весь день, гладя носки, вместо работы с этим бесчисленным множеством множителей. Слава Богу, это не так страшно, как кажется на первый взгляд. Мы к этому еще вернемся.
Поговорим о единицах измерения сначала, потому что вам понадобится именно условная единица, а не пиксель, для спецификаций мульти-DPI дизайнов. И тут на сцену выходят DP и PT.
Вывод: Множитель нужно знать для любого дизайна, над которым вы работаете. На множителях и держится весь этот мир хаоса, делая все эти размеры экрана, PPI и прочие размерности понятными для человека.
Что такое DP, PT и SP?
DP или PT - это единица измерения, которую можно использовать для описания макетов дизайна для множества устройств, во множестве DPI.
DP или DiP - это аббревиатура от Device independent Pixel, а PT означает Point (точка). PT относится к Apple, DP - к Android, но означают примерно то же самое.
Если вкратце, эти единицы определяют размер независимо от множителя устройства. Это очень выручает, когда нужно обсуждать спецификации с разными участниками рабочего процесса вроде дизайнера и инженера. Вернемся к примеру с кнопкой-Джимом.
Ширина Джима 44px на нормальных экранах не-retina и 88px на экранах retina. Добавим вокруг кнопки отступ в 20px, потому что Джиму нравится свободное пространство. Тогда для retina отступы будут 40px. Но считать пиксели retina совсем не имеет смысла, когда вы создаете дизайн для экранов не-retina.
Так что мы просто возьмем нормальную 100% пропорцию не-retina в качестве основы для всего.
В этом случае размер Джима будет 44*44DP или PT и отступ в 20DP или PT. Вы можете давать спецификации в любом PPI, Джим всегда будет 44*44dp или pt.
Android и iOS адаптирует этот размер к экрану и конвертирует с правильным множителем. Вот почему мне кажется проще всегда создавать дизайн в родном PPI для вашего экрана.
SP - это отдельный от DP и PT термин, но работает по такому же принципу. SP - это аббревиатура Scale-independent pixel (пиксель, независимый от масштаба). На SP будут влиять настройки шрифтов пользователя на устройстве Android. Как дизайнеру, мне задание SP кажется заданием DP для чего-то другого. базируйте его на том, что читабельно в масштабе 1х (16sp - отличный размер шрифта, например).
Вывод: Для отступов всегда используйте значения, независимые от разрешения и масштаба. Всегда. Чем разнообразнее размеры и разрешения экрана, тем важнее это становится.
Конфигурация PPI
Теперь, когда вы знаете, что такое PPI, retina и множитель, важно поговорить о том,«А что будет, если я изменю настройки PPI в моем дизайн-редакторе?»
Если вы задавали этот вопрос себе, это означает, что вы немного разбираетесь в программном обеспечении для дизайнеров. Вот то, на понимание чего у меня ушло немного времени, и это важный момент:
Любой непечатный контент использует пиксельные размерности независимо от того, какая PPI-конфигурация задана изначально.
PPI-конфигурация в ПО - это прерогатива печати. Если вы создаете дизайн под веб, PPI не будет никак влиять на размер вашего растра.
Вот почему мы используем множители, а не прямые значения PPI. Ваш канвас и графика будут всегда конвертироваться в пиксели программой, используя соответствующий множитель.
Вот пример. Вы можете попробовать самостоятельно проделать то же самое в программе с поддержкой настроек PPI, как Photoshop. Я нарисовал прямоугольник 80*80px и текст размером 16pt в photoshop с настройками 72PPI. Второй - то же самое, но с настройками на 144PPI.
Как видите, текст стал немного больше, вдвое больше, если быть точным, в то время, как квадрат не изменился. Причина в том, что программа (в данном случае Photoshop) масштабирует значения pt (как и должна) на основе значения PPI, что в результате дает удвоение размера при рендеринге текста при удвоенной конфигурации PPI. С другой стороны, то, что было определено в пикселях, т.е. синий квадрат, остается в том же размере. Пиксель - это пиксель, и останется пикселем, какой бы PPI ни задать. Изменит его только PPI экрана, который его отображает.
Важно помнить, что при дизайне для цифровых устройств PPI будет влиять только на то, как вы воспринимаете дизайн, а также на процесс его создания и на графику в размерности pt, такую как шрифты. Если вы включите в свой процесс дизайна исходники с разными значениями PPI, программа отресайзит все файлы по пропорции PPI получаемого файла. Это может стать для вас проблемой.
Решение? Используйте PPI (предпочтительно в диапазоне 72-120 для дизайна в 1x). Лично я использую 72PPI, потому что это настройка по умолчанию в Photoshop, и большинство моих коллег используют то же самое.
Вывод:
- Настройки PPI не имеют никакого влияния на экспорт под веб.
- Настройки PPI будут влиять только на графику, генерируемую на основе PPI-независимых измерений вроде PT.
- Пиксель - это единица измерения любой цифровой графики.
- Помните о множителях, а также для чего вы создаете дизайн, вместо фокуса на PPI.
- Используйте реалистичные настройки PPI при цифровом дизайне. Используйте то, что дает вам четкое представление о конечном отображении на устройстве (72-120ppi для 1x web/desktop, например).
- Используйте одно и то же PPI значение на всех файлах.
Более детально этот вопрос освещен в посте на StackExchange .
Как быть с PPI на iOS
Настало время погрузиться в дизайн под конкретные платформы.
Вспомним, какие устройства iOS вышли с начала 2014.
Когда речь заходит о размере экрана и DPI, в iOS есть 2 типа мобильных устройств и 2 типа экранов под планшет и десктопы.
В мобильной ветке у них есть iPhone и, конечно же, iPad.
В категории телефонов есть старый 3GS (до сих пор поддерживается iOS6) и выше. Только iPhone 3GS является не-retina. iPhone 5 и выше используют более длинный экран с тем же DPI, как iPhone 4 и 4s. Вот вам шпаргалка:
В сентябре 2014 был анонсирован 2014 Apple Keynote, теперь у вас есть 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus.
iPhone 6 немного больше, чем 5 (на 0.7″), но PPI тот же. iPhone 6 Plus, с другой стороны, представляет совсем новый множитель для iOS - @3x, из-за своего размера в 5.5″.
Есть что-то особенное в том, как iPhone 6 Plus работает со своим экраном по сравнению с другими моделями iPhone: Он уменьшает графику.
Когда вы, к примеру, создаете дизайн для iPhone 6, вы будете рисовать на канвасе размером 1334*750px, и телефон будет рендерить 1334*750 физических пикселей. В случае с Iphone 6 Plus, телефон имеет меньшее разрешение, чем изображение, так что нужно будет делать дизайн в разрешении 2208*1242px, а телефон уже уменьшит его до идеального размера. Посмотрите иллюстрацию ниже:
Физическое разрешение на 15% меньше, чем разрешение рендеринга, будет немного глюков вроде полупикселей, из-за чего самые мелкие детали могут быть немного размытыми. Разрешение настолько высоко, что эти недостатки будут практически незаметны, разве что если слишком придирчиво вглядываться. Так что рисуйте на канвасе 2208*1242px и помните возможные глюки для супер-крошечных деталей вроде разделителей. Посмотрите на симуляцию:
Вывод, правила Android:
- В Android есть 7 разных DPIs, вам нужно побеспокоиться о 4 из них: mdpi,hdpi,xhdpi,xxhdpi плюс один, если вы хотите создать версию на будущее, в XXXHDPI
- MDPI - это базовый DPI на множителе 1x
- Android использует dp вместо pt для спецификаций, но по сути это одно и то же
- Округляйте пиксели, полученные от десятичных множителей.
- Поставляйте исходники в.png формате.
- Выработайте единую систему названий для файлов-исходников вместе с человеком, ответственным за их внедрение.
PPI в Mac и Chrome OS
Mac (OSX) и Chrome OS ведут себя довольно одинаково в плане PPI. Обе операционные системы поддерживают стандартный PPI (100%) и более высокие разрешения, включая retina (200%). Как и в случае с моделями iPhone и iPad, здесь используется только множитель 2x.
Даже если большинство ваших пользователей, как Mac, так и Chrome OS, будут сидеть на устройствах с низким разрешением, я очень рекомендую подготавливать и версии экранов в высоком разрешении. Исходники для будущих версий Chrome OS включают файлы в высоком разрешении. Поверьте, это не будет пустой тратой времени.
Сейчас всего три ноутбука используют это PPI - Macbook pro 13″, 15″ и Chromebook Pixel. Вдобавок, Chromebook Pixe еще и сенсорный.
Требуемые исходники, пример Chrome
Идеальный пример этого сходства - исходники кнопки тулбара Chrome. Мы используем одни и те же кнопки в обеих платформах. Если код и отличается, то графика идентична. Посмотрите на меню Chrome и кнопки закладок:
Вывод:
- Chrome OS и OSX используют один множитель, 2.
- Только экран Chrome OS в высоком разрешении поддерживает еще и сенсорное управление.
Растягиваемые исходники
Неважно, десктопное или мобильное приложение вы разрабатываете, почти всегда требуются растягиваемые исходники (stretchable assets). Этот исходник позволяет коду изменять размер до нужного без потери качества при рендеринге.
Это не одно и то же с повторяющимися исходниками (repeatable assets), которые работают по-разному, хоть иногда и показывают идентичный результат.
Посмотрите на пример внизу. Панель инструментов на iOS генерируется из одного супертонкого исходника, который повторяется по оси Х по всему экрану.
Теперь посмотрим, как разные платформы используют растягиваемые исходники.
Растягиваемые исходники на iOS
В iOS работа дизайнера упрощается, потому что растягивание задается в коде. Все, что нужно от вас, - предоставить базовое изображение и, если вы сами не реализуете дизайн в коде, задать для него спецификации растягивания по-горизонтали, по-вертикали или в обоих направлениях. Вот пример стандартной кнопки Chrome в iOS.
Растягиваемые исходники на Android
Android использует такие исходники не так, как iOS. Сам исходник окружен 4 линиями. Их надо задать в слайсе/изображении как часть графики, в буквальном смысле визуально отобразить спецификации исходника в самом исходнике.
Эти 4 линии определяют две вещи: область масштабирования и область заливки. Если эти два параметра заданы, код просто сможет растянуть исходник и поместить контент в заданное место. Посмотрите на пример ниже - Android-версия стандартной кнопки Chrome, которую вы уже видели ранее.
Как вы видите, изображение 9-patch - это набор 4 чистых полос #000000. У них должна быть ширина в 1px для любого DPI; это индикация кода. Область растягивания не включает в себя закругленные углы, потому что это не то, что может повторяться (иначе выглядеть будет ужасно). В этом случае мы добавили отступы по 10dp вокруг кнопки. Это то, что не придется задавать в спецификациях.
Использование 9-patch требует добавления.9 к названию файла, так же, как вы добавляете @2x для исходников iOS. Еще один пример с нашей кнопкой:
Помните, что нужно быть осторожными с размером исходника. Если я сделал его довольно большим для демонстрации, важно оптимизировать вес исходника, уменьшив его размер до минимума, как показано ниже. Я оставил углы, как они были, но уменьшил область растяжения и контента к минимуму.
Следите, чтобы метки 9-patch не накладывались на ваш дизайн, чтобы обрезка исходника была корректной. .9 должна быть максимально возможно близка к исходнику без перекрывания его, попытайтесь не делать встроенный отступ. Предыдущий пример имел встроенные поля из-за тени.
9-patch не заменяет экспорт исходника для каждого DPI. Это нужно проделывать для каждой версии исходника.
И последнее, .9 может содержать множество растягиваемых областей (верхняя и левая). Я сам нечасто пользовался таким, если вообще когда-либо использовал это в своей работе, но это стоит упомянуть.
Вывод: Всегда спрашивайте человека, который будет заниматься реализацией вашего дизайна, какое решение лучше всего использовать, особенно для десктопа. Чем больше изображений у вас будет, тем тяжеловеснее будет приложение, и будет тяжелее для вас обновлять исходники в случае необходимости изменений. 9-patch нужно использовать только с правильными названиями и правильной организацией исходников.
Векторные исходники
Так как разнообразие экранов, использующих больший диапазон DPI, постоянно растет, переключение на векторные исходники вместо растровых более чем заслуживает внимания.
Самая часто используемая и распростраенная форма векторного исходника - формат.svg. Это файл на основе.xml, читаемый и редактируемый большинством программ, включая веб-браузеры, так как он изначально был создан для веба. Другой формат поддерживает векторы, такие как.ai (Adobe illustrator), .eps или даже.pdf.
Главное преимущества векторных изображений - их масштабируемость. Нет необходимости создавать растровые изображения для всех PPI-вариаций, вектор будет автоматически масштабироваться на основе экранного множителя.
Svg содержит XML-информацию о том, как рисовать графику. ПО/ОС/браузер затем интерпретирует эти команды для рендеринга исходника в выбранном размере.
Использование такого формата дает потрясающие преимущества:
- Сокращение размера приложения
- Тотальное сокращение использования растра
- Проще менять цвета программно
- Автоматическое и недеструктивное масштабирование
Хотя есть и недостатки:
- Меньше визуальной свободы, не очень удобно для сложной графики, особенно сложных теней, градиентов и прочих эффектов
- Может плохо влиять на работу приложения или сайта из-за требуемых ресурсов для обработки.
- Нет контроля над пикселями из-за автоматического масштабирования.
В связи с эволюцией дизайна интерфейсов в сторону более «плоских» стилей, меньшего использования теней, градиентов, .vector становится все более и более полезным и используемым. Несмотря на это, нужно с осторожностью использовать векторные исходники.
Как уже было упомянуто в недостатках, .svg может сильно повлиять на работу продукта. Формат работает отлично на вебе, для iOS и Android предпочтительнее отдельные векторные решения. iOS использует.pdf, Android - VectorDrawable .
Спецификации Chrome OS по этому вопросу еще не вышли. Хотя, учитывая, что все приложения Chrome OS являются веб-приложениями, я бы предложил все равно создавать сенсорный дизайн. Мой совет: применяйте стандарты сенсорных элементов для Android .
Веб, гибридные устройства и будущее
Если вы создаете дизайны под мобильные устройства, будет понятно, каким путем идти - однозначно, сенсорное управление. Если вы разрабатываете дизайне под десктоп, делайте из не-сенсорными. Звучит просто, но при этом игнорируется последний тренд с растущей популярностью - гибридные устройства.
Гибридное устройство может управляться и сенсорно и не-серсорно. Chromebook Pixel, Surface Pro и Lenovo Yoga - хорошие тому примеры.
Как поступать в данном случае? Простого ответа на этот вопрос нет, но я попробую посоветовать выбрать сенсорное управления. Именно в этом направлении развивается технология.
Если вы создаете дизайн под веб, думайте о сенсорном управлении заранее.
Вывод:
- Что бы вы ни делали для будущего, обдумывайте свои проекты в разрезе мобильных устройств и сенсорного управления.
- Используйте стандарты областей прикосновения для каждой ОС. Это поможет улучшить дизайн и помочь в достижении постоянства. Стандартные размеры областей касания больше даны для справок, не обязательно строго им следовать. Вы сами контролируете процесс и принимаете решения.
Программы для дизайна интерфейсов
Программное обеспечение не определяет мастерство дизайнера, но выбор правильного инструмента под конкретную задачу может значительно улучшить продуктивность и упростить сам процесс разработки. «Ноу-хау» в программах не должны стать единственным вашим навыком, но изучение и освоение подходящих инструментов дадут отличную основу для воплощения ваших идей в реальность.
К работе с вариациями DPI в дизайне интерфейсов разное ПО подходит по-разному. Некоторые из программ особенно хороши под какие-то определенные цели. Вот наиболее популярные решения:
Photoshop
Мать всех дизайн-инструментов. Возможно, самый популярный выбор для дизайна интерфейсов сегодня. Есть бесконечное множество ресурсов, уроков и статей, посвященных Photoshop. Этот «старичок» стоял еще у истоков развития отрасли дизайна интерфейсов.
Первоначально программа создавалась для обработки растровой графики и фотографий, что видно даже из названия. С годами она развивалась, и дизайнеры стали использовать ее и для дизайна интерфейсов. Частично это было продиктовано привычкой, а также тем, что это был чуть ли не единственный инструмент, способный обеспечить нужное качество.
Photoshop на сегодняшний день является лидером в редактировании растра, а также занимает первое место по популярности для дизайна интерфейсов. За счет существования десятки лет, программа слишком обросла функционалом, из-за чего ее не так легко освоить. Это как раз тот случай, когда в ней можно сделать практически все, но далеко не всегда наиболее оптимальным способом.
Так как изначально он был создан для растровой графики, Photoshop не зависим от DPI-разрешения, в отличие от Illustrator и Sketch, описанных ниже.
Illustrator
Это векторный брат Photoshop. Как говорит само название, он создан для иллюстраторов, но также активно применяется и в дизайне интерфейсов.
Illustrator хорошо адаптирован под печатные дизайны, как и его интерфейс, работу с цветами, масштаб, линейки и единицы измерения сначала могут сбить вас с толку, потребуется немного времени и небольших переделок для адаптации под дизайн интерфейсов. Как и Photoshop, это невероятно мощный инструмент с очень крутой кривой обучения.
В отличие от Photoshop, Illustrator является DPI-независимым из-за своей векторности. В отличие от растровых изображений, векторная графика основана на математических формулах, и ее можно масштабировать программно без потери качества.
Понимание разницы между растровым и векторным изображением - это ключ в постороении масштабируемых дизайнов и исходников.
Sketch 3.0
Sketch - относительно новый инструмент в сравнении с Photoshop и Illustrator. Появившись всего 4 года назад, эта программа наделала много шума (в хорошем смысле) в индустрии дизайна интерфейсов. Причина в том, что Sketch изначально был задуман с одной целью - дизайн интерфейсов. Sketch позиционирует себя как инструмент, идеально адаптированный под свою нишевую аудиторию - дизайнеров интерфейсов.
Sketch подходит для грубого прототипирования, а также для более комплексного визуального дизайна. Он полностью векторный, как Illustrator, с минималистичным и очень продуманным интерфейсом. Комбинация артбордов с простотой работы и гибкостью системы генерации исходников делает Sketch самым быстрым решением для мульти-DPI и мульти-платформенного дизайна. Последние релизы делают его очень достойной альтернативой Photoshop.
Из недостатков можно отметить, что Sketch разрабатывается меньшей командой, и он все еще не так популярен, как Photoshop. К тому же, в нем довольно скудный набор возможностей для обработки растра. В этом отношении Photoshop подойдет гораздо лучше. И, наконец, будучи еще достаточно молодым, он не располагает таким огромным количеством ресурсов, уроков и таким большим сообществом, как Photoshop. Но нужно отметить, что сообщество очень активно и мотивированно на развитие.
Из личного опыта, я был пользователем Photoshop с 8-летнего возраста, но недавно перешел на Sketch 3.0 для большинства задач по дизайну. Это не свидетельство качества, я считаю Photoshop до сих пор шикарным инструментом. Просто Sketch лучше соответствует моим потребностям.
Figma
Новичок конца 2015 года, Figma является браузерным инструментом для векторного дизайна (работает преимущественно через Chrome). Он похож на облачную версию Sketch с возможностями командной работы и интеграцией Slack. Впечатляющее достижение инженерного искусства в попытке реализовать дизайн-инструмент будущего.
Самое большое преимущество Figma в его кросс-платформенности (работает везде, где работает Chrome) и в возможностях командной работы и одновременного редактирования несколькими людьми. Тем не менее, если вы или ваша компания не особо привыкли работать в веб-сервисах, выбор может быть неудачным, так как нет локальной версии программы.
Вывод: Идеальных инструментов не существует, но есть те, с которыми именно вам комфортно работать. Если вы располагаете достаточным количеством времени и средств, протестируйте все перечисленные программы для формирования собственного мнения.
Качественное изображение на дисплее – это одна из самых важных составляющих любого хорошего смартфона. Дорогие читатели, мы расскажем вам, что такое плотность пикселей (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.
PPI это сокращение от английского «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 см от глаз, экран будет очень комфортным. К тому же, обработка очень высоких разрешений, накладывает свой отпечаток на время работы телефона.
