iPhone vs. Android - розміри - android.mobile-review.com

1. Андрій підкинемо У коментарях до статті про розміри і масштабування в Android мене просили розповісти,...
2. Рай для дизайнерів
3. Хай живуть нестандартні розміри!
4. iPhone, iPhone 3G, iPhone 3Gs
5. iPhone 4, iPhone 4s
6. iPhone 5, iPhone 5s, iPhone 5c, iPhone SE
7. iPhone 6, iPhone 6s, iPhone 7
8. iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus
9. Так чому ж на iPhone все виглядає дрібніше?

Андрій підкинемо

У коментарях до статті про розміри і масштабування в Android мене просили розповісти, як йде справа в протиборчі табори - на стороні Apple. Що ж, давайте візьмемо в руки iPhone і подивимося, як ці смартфони виглядають на тлі своїх побратимів з ОС від Google.

фіксований розмір

На поточний момент існує всього п'ять різних конфігурацій екранів iPhone. Причому актуальні для розробників не більше чотирьох (а якщо подивитися реальний відсоток користувачів з кожним екраном, то виявиться, що реально актуальних екранів залишилося всього три). Це дозволяє говорити про те, що дизайн додатків можна «заточити» під конкретні екрани, довести його на кожному екрані до ідеального образу і бути впевненим, що користувачі побачать саме те, що придумав дизайнер і реалізував розробник. Істотний внесок вносить ту обставину, що немає ніякої стандартної налаштування шрифтів в сторонніх додатках на рівні ОС: якщо розробник не передбачив можливість зміни розміру шрифту, то нічого з цим не поробиш.

Рай для дизайнерів

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

Також Xcode (середовище розробки від Apple) має набагато більш потужні засоби налагодження дизайну (елементів інтерфейсу), ніж Android Studio.

Хай живуть нестандартні розміри!

Apple, напевно, єдиний виробник смартфонів, який не просто усвідомив, а став реально використовувати той факт, що користувач не бачить дозволу смартфона. Користувач бачить фізичний розмір пристрою і його dpi. Ви скажете: «Але ж дозвіл розраховується автоматично з фізичного розміру і dpi». Так, розраховується. Але при розрахунку нам не важливо який саме дозвіл ми отримаємо. Якщо і розмір, і щільність пікселів нас повністю задовольняють, то нам немає ніякого діла, що дозвіл нашого гаджета не дотягує до FHD або навіть HD - недостачу пікселів неможливо помітити неозброєним оком. Зрозуміло, що при вимірюванні «папуг» завжди можна буде заявити: «Нам не доповіли!», Але на практиці недостача пікселів ніде себе не проявить.

Втім, вистачить теорії, давайте перейдемо до конкретних пристроїв.

iPhone, iPhone 3G, iPhone 3Gs

Перші три покоління iPhone мали екран з діагоналлю 3,5 "і роздільною здатністю 320 × 480 пікселів, що давало щільність пікселів в 163 dpi. Це дуже близько до стандартної щільності пікселів в Android - 160 dpi. Зрозуміло, ні про які розбіжності між фізичними і програмними пікселями і мови немає. Ця щільність пікселів у програмістів і дизайнерів також називається 1x.

iPhone 4, iPhone 4s

У 2009 році щільність пікселів iPhone 3Gs виглядала вже досить блідо (на тлі 253 dpi від Nokia і 300 dpi від Samsung) і в 2010 році Apple представила екран Retina: фізичний розмір залишився незмінним, а кількість пікселів по ширині і по висоті було збільшено в два рази. Вийшло 640 × 960 з щільністю 326 dpi. Що знову близько до стандартної щільності пікселів в Android - 320 dpi. З цього моменту вся графіка для iPhone стала створюватися в двох варіантах: 1х і 2х.

iPhone 5, iPhone 5s, iPhone 5c, iPhone SE

Екрани iPhone від оригінальної моделі до 4s мали співвідношення сторін 3: 2. У 2012 році Apple перейшла на співвідношення сторін 16: 9 (тільки для смартфонів, планшети це нововведення не торкнулося). Зберігши незмінну ширину, екрани підросли по висоті. Діагональ досягла 4 ", а дозвіл 640х1136. Дизайнерам і програмістам довелося враховувати в розробці новий розмір екрану, але щільність пікселів залишилася незмінною. Логічний розмір екрану (той, що в Android вимірюється в dp) став дорівнює 320 × 568 точок при щільності 2x.

iPhone 6, iPhone 6s, iPhone 7

У 2014 році Apple представила відразу дві моделі iPhone 6 і iPhone 6 Plus. Перша з них вийшла фізичним нарощуванням розміру екрана до 750 × 1334 крапок при незмінній щільності пікселів. Логічний розмір екрану: 375х667 точок при щільності 2x. Це трохи більше більшості сучасних пристроїв з Android (360 × 640 dp, для порівняння наведено скріншот з Xiaomi Mi2s).

iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus

Друга модель 2014 року - iPhone 6 Plus - отримала принципово новий екран. Його діагональ склала 5,5 "- як у типових фаблет на Android. Але його дозвіл було абсолютно нетиповим. Фізично екран має дозвіл FullHD - 1080 × 1920 році, але з точки зору прикладного ПО його розмір становить 1242 × 2208 пікселів, а кінцева картинка виходить масштабуванням готового зображення (downsampling). Тому фізична щільність пікселів становить 401 dpi, але вона важлива тільки для того, щоб розуміти наскільки гладке зображення користувач бачить на екрані. Програмна щільність пікселів становить 461 dpi. Вона отримала позначення 3x. Насправді, якщо ми помножимо 163 (щільність пікселів оригінального iPhone) на 3, то отримаємо не 461, а 489 (знову ж дуже близько до стандартної щільності Android - 480 dpi). Але відхилення становить всього кілька відсотків, а фаблет зазвичай тримають трохи далі від очей, ніж компактний смартфон, тому візуально все елементи інтерфейсу виглядають так, як і повинні. Логічний розмір екрану складає 411 × 736 точок (щільність 3x), що практично еквівалентно розміру сучасних фаблет на Android (411 × 731 dp, для порівняння наведено скріншот з Nexus 5x).

Так чому ж на iPhone все виглядає дрібніше?

Основна причина, звичайно ж в тому, що у більшості смартфонів на Android фізичний і логічний розмір не збігаються і інтерфейс розтягується на кілька більшу діагональ. Але є й інший момент: при переході до Material Design відбулося зменшення розміру шрифтів (в порівнянні з інтерфейсом Holo). Однак далеко не всі дизайнери використовують рекомендовані Google шрифти. Найчастіше вони виявляються трохи більшими. Але навіть якщо шрифти невеликі, як і повинні бути, Material Design має на увазі дещо більше вільного простору (поля, відстані між елементами інтерфейсу). Це дає додатковий внесок до «розтягуванню» інтерфейсу. А значить, на екран поміщається менше корисної інформації.