Наскількі пікселі критичні? Розбиваємо міфи

Давайте розберемося із щільністю пікселів і як вона впливає на ваші проекти.

1-ugw8hxkcjust8hu2ghwfmq-2x

Щільність пікселів означає скільки пікселів були втиснуті в фізичний обсяг простору (часто дюйми). На першому Mac, було 72 пікселів на дюйм, що може звучати як багато, але насправді треба, щоб графіка відповідала цим величезним пікселям.

Іконки для оригінальних Mac, розроблені Susan Kare.

Технологія екрану розвивалася дуже стрімко відтоді, і тепер навіть найзвичайніші екрани комп’ютера мають десь від 115 до 160 точок на дюйм (PPI). Але нова глава в цій історії почалася в 2010 році, коли компанія Apple представила iPhone з дисплеєм Retina – супер чіткий екран, який мав у два рази більше пікселів на дюйм. Результатом була набагато чіткіша графіка, ніж ми коли-небудь бачили.

Зверніть увагу на різницю іконки пошти і чіткість текстів

Для того, щоб підтримувати той же фізичний розмір для інтерфейсу, розмір в пікселях збільшився у два рази. Кнопка висотою 44px стала висотою 88 пікселів. Для розміщення різних пристроїв, дизайнерам необхідно почати надавати графіку (наприклад, іконок) для оригінального “1x” масштабу, а також для нового “2х” масштабу. Але була нова проблема: ви більше не могли сказати: “Ей, ця кнопка повинна бути 44 пікселів у висоту”, тому що вона також повинна бути розміром 88 у висоту на іншому пристрої. Не було жодної одиниці вимірювання не залежної від щільності пікселів. Рішення було “point” (“точка”) або “pt” для стислості. 1 pt прирівнюється до 1 пікселя на дисплеї до-ретіна, або 2 пікселі на 2x ретіна дисплеї. Вони дозволяють дизайнерам, сказати: “Ей, ця кнопка повинна бути 44 пойнти у висоту”, а потім будь-який пристрій може просто помножити це на свій коефіцієнт щільності пікселів… як 1x або 2x. Або 3x в разі Apple розміру iPhone +.

PT & DP

Звичайно зараз це справедливо не тільки для пристроїв Apple і мобільні, і десктопні системи підтримують високі розподільні здатності. Google створив свою власну систему вимірювання незалежну від щільності для Android. Вони не називаються пойнтами, вони називаються “DIP“, що означає density-independent pixel (незалежний від щільності піксель). Скорочено “dp”. Вони не точно еквівалентні точкам у IOS, але ідея за ними одна і та ж. Це універсальна одиниця виміру, яка може бути перетворена в пікселі, використовуючи коефіцієнт масштабування пристрою (2x, 3x і т.д.).

1-9cafa2iztljh5d-yx638hq-2x

Ви можете шукати відповіді на запитання про фізичні розміри точки. Але насправді ця тема має дуже мало практичної необхідності для дизайнерів UI. Турбуватися про це не варто, тому що ми маємо мінімальний контроль над варіаціями конкретних пристроїв. Дизайнери просто повинні вірити, що виробники влаштували щільність пікселів, що підходять для даного пристрою, і зосередити свою увагу на підготовці дизайнерських асетів на 1x, 2x, 3x, або будь-якого іншого співвідношень. Але якщо вам дійсно цікаво, то на пристроях Apple, немає постійної перетворення між дюймів і точками. Іншими словами, немає жодної щільності пікселів, що представляє 1 бал – це залежить від конкретного пристрою. IOS пойнт варіюється від 132 точок на дюйм до 163 точок на дюйм. На Android, pid завжди базуються від 160 PPI.

Контрольований хаос

Будьте готові до перевірки реальності. У перші дні мобільних пристроїв з ретіна дисплеями, щільність пікселів була настільки ж простою, як 1x або 2x. Але тепер це абсолютні горішки – є багато співвідношень щільності для підтримки. Android є прекрасним прикладом: зараз він має загалом шість варіантів щільностей у всіх виробників пристроїв. Це означає, що значок, який, як видається, має той же розмір, на всіх цих екранах насправді вимагає 6-ти різних графічних відтворень. Для пристроїв Apple треба два або три різних зображення.

1-kothhkoftrdtyy3jnduagw-2x

Створюйте дизайн у векторі. Для 1x.

Є кілька практичних уроків, які треба винести з усього цього. Почнемо з того, що ми всі повинні працювати з векторами. Це дозволяє нашим інтерфейсам, іконкам і графіці масштабуватися до будь-яких розмірів.

1-re6hb7mdgemh_1xvq-9jeq-2x

Другий урок полягає в тому, що ми всі повинні створювати дизайн на 1x масштабі. Іншими словами, дизайн з використанням точок для всіх вимірювань, а потім масштабувати до інших із більш високої щільності елементів зображення при експорті … на відміну від дизайну в кінцевих розмірах пікселів пристроїв (2x, 3x і т.д.) і, потрапляючи в найрізноманітніші проблеми під час експорту. Бо масштабування 2x графіки на 150% для генерації 3x зображення дає розмиті результати, а масштабування 1x графіки на 200% і 300% зберігає чіткість зображення.

Макети для стандартного розміру iPhone мають бути 375 × 667, а не 750 × 1334, як вони насправді відображаються. Більшість інструментів дизайну не розрізняють точки від пікселів (Flinto – єдиний виняток, на скільки нам відомо). 

➡ ➡ Читайте продовження!

kazhut-dyzajnery-ne-vmiyut-pysaty-5

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки

Залишити відповідь