Скільки дизайнів інтерфейсів насправді потрібно малювати для iPhone 4, 5, 6 і 6+?

Вихід смартфонів iPhone 6 і 6+ внесло деяку дезорієнтованість у ряди дизайнерів і програмістів, адже раніше можна було просто намалювати один макет під iPhone 5 і пропорційно зменшити в 2 рази при розмітці під попередні пристрої. Але тепер ситуація дещо змінилася: першопрохідці-програмісти нарікають, що макет, красиво намальований і зверстаний під iPhone 6, виглядає абсолютно непривабливо, нечитаемо і нетапабельно на iPhone 5, адже його як раніше просто пропорційно зменшили. IOS HIG з цього приводу конкретних порад не містить, тому для дизайнерів зараз особливо гостро стоїть питання про те, скільки ж насправді дизайнів інтерфейсів потрібно малювати, щоб охопити всю поточну лінійку iPhone-пристроїв? Давайте розбиратися.


Не багато беруть до уваги, але крім пікселів iOS використовує так само універсальні одиниці — поінти (pt, point) і макет слід прив'язувати саме до них. Раніше за дизайнерів цю задачу вирішували програмісти: брали присланий дизайнером макет .psd під iPhone 5, ділили все піксельні значення на 2 і описували в коді їх тими самими поинтами (в кращому разі якщо не прив'язували все жорстко до пікселях). Але тепер цей кустарний спосіб не дуже підходить для дизайнерів, адже малювати доведеться графіком в максимальному дозволі, а це означає, що кожен екран буде розміром по 1500-2000 px, що зажадає величезна кількість комп'ютерних ресурсів, особливо якщо дизайнер тримає всі екрани в одному исходнике. Тому тепер як ніколи актуально йти по шляху Android в плані єдиної одиниці вимірювання, а саме користуватися тими самими pt.

По суті роботу дизайнера можна звести до наступного: ми малюємо екрани у співвідношенні 1 px = 1 pt (point), тобто 1 піксель = 1 поінт. Беремо полотно розміром 320х568 px (що відповідає пропорції iPhone 5 640х1136 px) і малюємо дизайн, ретельно стежачи за сумісністю з iPhone 4 (у нашому варіанті його висота дорівнює 480 px). Але як же бути з графікою? Вона повинна бути більшим розміром, набагато більше базового 320x 568 px! Саме! І ось тут нам на допомогу приходить Adobe Illustrator. Ілюстратор — це редактор векторної графіки, а це означає, що будь-яка графіка, намальована в ньому, може бути адаптована під будь-який розмір без втрати якості. Можна робити так: малюємо макет у вище зазначеному дозволі в Adobe Illustrator і при необхідності експортуємо його .psd від Photoshop щільності, вище базової 72, а саме — 216. Всі векторні шари будуть перетворені в растрові (нікуди не дінешся), але цього буде цілком достатньо, щоб експортувати графіку в усі необхідні щільності екрану. А як же замовнику показувати етапи дизайну? Адже 320х568 px — це занадто малий дозвіл, щоб оцінити якість макета! І ось тут на допомогу знову приходить Adobe Illustrator: ми експортуємо макет для замовника… pdf. Найчастіше такий файл важить в десятки разів менше звичайних растрових макетів і при цьому повністю сумісний з пристроями Apple. Всі екрани або лише які ви захочете потраплять в один файл і при першому ж вимогу клієнта ви зможете легко і швидко продемонструвати йому поточний етап роботи.

Загальна: раціональніше малювати один-єдиний макет дизайну додатки відразу в Adobe Illustrator під найнижчу щільність екрану iPhone і розмічати для програмістів розміри в pt. Можна малювати дизайн Photoshop, але цей варіант менш адаптивний навіть з урахуванням смарт-об'єктів. У будь-якому випадку, який би графічний редактор ви не зволіли, цілком достатньо подбати про можливості триразового масштабування графіки для iPhone 6 Plus (@3x) та розмітки макетів в pt.

А тим, хто ще не пробував, але зацікавився работкой дизайнів Adobe Illustrator, дуже раджу зайти на ці сторінки на Хабре: «UI-Ai: Малюємо інтерфейс Adobe Illustrator» і «Інтеграція дизайну мобільних додатків. Частина 2: iOS, Windows Phone».

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.