Наскількі пікселі критичні для дизайну? Розповідь про відстань і масштаби

Продовжуємо розбиратися із щільністю пікселів і як вона впливає на ваші проекти.

➡ ➡ ➡ Читайте попередню частину.

retinapixel

Масштаби можуть обманювати!

Це трохи більш “просунутий” рівень, але варто відзначити: іноді пристрої обманюють. Вони прикидаються, їх співвідношення пікселя до точки “де-юре” 3x, але це насправді 2.61x і зображення масштабується до 3x для зручності. Це те, що в даний момент робить iPhone Plus. Це зменшує інтерфейс, зроблений на 1242 × 2208, щоб поміститися на екрані 1080 × 1920 (графічний чіп телефону виконує це масштабування в режимі реального часу).

1-pbtijdqjyos7uoux4kc2xq-2x
Дизайн для iPhone Plus, якби це було дійсно 3x. Гаджет масштабує його на 87%.

Оскільки зображення тільки знижуються трохи (87%), результат все одно виглядає пристойно – це 1px лінія на екрані майже-3x виглядає досить чіткою. Apple, ймовірно, випустить справжній 3x iPhone Plus у майбутньому, але у даний час він скоріше прикидається повноцінним 3х.

Чи є це масштабування до нецілих значень прийнятним? Багато Android пристроїв також використовують масштабування для досягнення більш стандартного співвідношення пікселів до точки, і, на жаль, деякі з них роблять це насправді погано. Таке збільшення небажане, тому що все, що ви дизайнуєте, щоб було чітким і пиксель-перфектним в певному масштабі стане розпливчастим в результаті інтерполяції (тобто 1px лінія стає 1,15 пікселів).

Навіть якщо ви не фанатичний піксель-перфектний ботанік, немає ніяких сумнівів, що елементи дизайну необхідно вирівняти з повними пікселями, щоб це здавалося чітким для наших очей. На жаль, коли щільність пікселів доходить до 4x і вище, розмитість, викликана нецілим масштабуванням стає набагато важчою для сприйняття. Нам лишається тільки сподіватися, що продуктивність, якою доводиться розплачуватися при масштабуванні буде стримувати їх!

1-ovtogzxx_goehom404d3qa-2x

Сприйняття масштабування на око

Давайте відкладемо всі деталі про пікселі та їхню щільність у бік на хвилину, і розглянемо питання: чи повинна кнопка бути одного розміру на різних пристроях? Звичайно, кнопку ми використовуємо в якості прикладу, це ж стосується: іконок, тексту або панелі інструментів. Чи повинно все це бути однакового розмір на всіх пристроях? Загальний підхід полягає в тому, що це залежить:

  • від точності методу введення (тобто дотик проти курсора)
  • від фізичного розміру екрану
  • і від відстані до екрану

Два останніх фактори йдуть рука об руку, тому що планшет має більший екран, ніж телефон, ми тримаємо його подалі. Після цього йдемо до ноутбуку, ПК, а потім ТБ – відстань збільшується з розміром екрану.

1-fri5cae7hyq6apitvdxapw

Кнопка на екрані телевізора може бути насправді розміром вашого телефону – тому що вона повинна такою бути з такої відстані.

1-aklknfvqyh2utxwrzhuwba-2x

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

Менша щільність пікселів

Великі екрани, які ми використовуємо на відстані, як правило, мають більш низьку щільність пікселів. Телевізор може мати менше ніж 40 пікселів на дюйм! Для типового ТБ-перегляду це цілком прийнятно. У ретіна дисплею IPad щільність становить близько 264ppi в той час як ретіна дисплей iPhone має 326ppi. Оскільки пікселі на IPad є більшими (екран менш щільний), весь інтерфейс стає трохи більшим. Це пояснює додатковою відстанню від екрану IPad.

Різні розміри

Різні розміри означають – більше роботи для дизайнерів. Наприклад, іконка додатку: на iPhone має 60 × 60, але більший екран IPad має набагато більше місця, тому вимагає використання 76 × 76 іконки додатку.

1-kwwhml9jodkn7t4vkrt8ww-2x

Зміна розмірів елементів для різних пристроїв створює більше роботи для дизайнерів. Це один з небагатьох сценаріїв, у яких пристрої Apple, вимагають більше розмірів, ніж Android пристрої! На щастя, це не дуже поширено за межами сфери іконок додатків.

На сам кінець, корисні ресурси:

Google Device Metrics: вражаючий список специфікацій для пристроїв всіх типів (Android, IOS, Mac, Windows і т.д.). Надає розміри екрану, щільність пікселів, і навіть приблизну відстань пристрій утримується від очей користувача. ScreenSiz.es – аналогічний ресурс.

Bjango App Icon Templates: ці шаблони дизайну (доступні для всіх основних дизайнерських програм) є надзвичайно всеосяжними. Корисні практично і в якості довідкового матеріалу про специфікації для Android, IOS, MacOS, tvOS.

Тепер ви маєте значно краще розуміти все пов’язане з пікселями та екранами і не будете припускатися помилок у своїх майбутніх макетах.

kazhut-dyzajnery-ne-vmiyut-pysaty-5

One Comment

  1. Руслан

    Я думаю все же зависит не от пикселей как вы говорите,а от того,какое зрение у человека,если без каких либо дефектов зрения,ему намного лучше видна картинка на экране будь то телефон,планшет или телевизор.А что касается будущих технологий,которые будут фокусироваться под зрение человека,для нас будет большим достижением.

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

Ваша e-mail адреса не оприлюднюватиметься.