Дизайн мобільних додатків: чому ми працюємо @1x

image

В одній з попередніх статей наші колеги описали вимоги щодо передачі проекту від дизайнерів розробникам мобільних додатків. Ці вимоги ми, як відділ дизайну в Rambler Digital Solutions, повинні дотримуватися.

В цей раз хотілося б розповісти про деякий нюанс розробки дизайну додатків, який полегшує нам життя — про дозвіл дизайн-макетів і про плюси і мінуси вибору того чи іншого вихідного права.


Чим ми користуємося

Sketch і плагіни:
Adobe Photoshop і скрипт Size Marks від Романа Шаміна.
Зауважимо, що Photoshop для дизайну мобільних додатків використовуємо все рідше і рідше — у роботі ми активно впроваджуємо Sketch і просуваємо його серед розробників, щоб вони могли в разі труднощів самі подивитися потрібний розмір або ресурс в исходнике, не відволікаючи від дизайнера важливих дизайнерських справ.

Незважаючи на те, що описане нижче сильно «зав'язано» на Sketch, прийоми можливо застосовувати і в Photoshop, хоча це дещо складніше.

Про дозволи макетів

Отже, як ми знаємо, iOS має на даний момент такі дозволи ресурсних зображень: @1x, @2x і @3x; а Android: mdpi(1x), hdpi(1,5 x), xhdpi(2x), xxhdpi(3x), xxxhdpi(4x) — це основні, ldpi і tvdpi в розрахунок брати не будемо.

Як відомо з гайдлайнов, 1x і mdpi є базовими дозволами на пристрої з співвідношенням пікселя до поінта 1 до 1. Детальніше про це можна почитати тут.

Якщо розглядати форм-фактор телефонів, то для простоти обчислень розмірів, а так само подальшої підготовки специфікації, простіше взяти з дозволу макетів:
iOS
  • 320x480 (iPhone 4/4s)
  • 320x568 (iPhone 5/5c/5s)
  • 375x667 (iPhone 6)
  • 414x736 (iPhone 6 Plus).


У Android це 360x640 (звичайно ж є і менші дозволу, і трохи більші, але дотримуючись гайдлайнам це буде еталонним для Android L). Планшети зараз розглядати не будемо, але будемо пам'ятати про них.

image

За основні дозволу ми вибираємо 320x568 для iOS ( @1x) і 360x640 для Android (mdpi), так як девайсів з цими форм-факторами зараз найбільша кількість.

Так чому ж саме @1x і mdpi?

Проектування і побудова

На етапах проектування і дизайну вибрані нами @1x і mdpi дають можливість швидко «накидати» прототип із стандартних елементів Sketch і не думати про парності розмірів елементів і відступів, так як всі вони будуть тільки збільшуватися в разі нашого бажання подивитися великі дозволу.

Крім того, це ніяк не заважає нам дивитися макети на пристроях з допомогою плагіна Sketсh Preview (працює у зв'язці з додатком Skala і Skala Preview), у плагіна є установки, які дають можливість збільшувати макет до потрібного для перегляду дозволу, причому як на iOS пристроях, так і на Android.

image
Налаштування плагіна Sketch Preview

Головною вимогою є кратність дозволу у пристрої до вирішення исходника, наприклад, наш ісходник iOS 320x568, нормально дивитися його можна тільки на iPhone 5/5s/5c, а оригінал Android 360x640 ми дивимося на Nexus 5 c дозволом в 3 рази більше 1080x1920 (xxhdpi).

Єдиним, для кого-то суттєвим мінусом є бажання бачити однопіксельні роздільники на високих дозволах. Це означає, що якщо ми хочемо побачити на екрані iPhone 5 лінію товщиною в 1px, то в макеті вона повинна бути 0,5 px. Так як створювати в макеті 0,5 px лінії не круто, рішення цієї проблеми може бути іншим: створюємо 2px прозору лінію на місці роздільника з внутрішньої тінню із значенням 0,5. Якщо ж це Android макет, то 0,33-0,35 (для перегляду на Nexus 5).

image
Приклад роздільника 0,35 встановленого за допомогою внутрішньої тіні в Android додатку

Але в більшості випадків ми просто зупиняємося на роздільниках в 1px в макеті, а в специфікації для розробників прописуємо цей момент словами.

Експорт
Вибрані нами найменші дозволу дозволяють легко експортувати ресурси з Sketch з допомогою вбудованого експорту для iOS і з допомогою плагіна Sketch Android Assets для Android, який ще й по потрібних папках все розкладає.

Так як ми обрали саме мале дозвіл, то можемо не турбуватися за «мило» (викривлення і затуманення) в ресурсах для iOS, спочатку ми малюємо всі елементи з прив'язкою до піксельною сіткою (дуже рідко без) і отримуємо чіткі іконки @2x і в @3х. Очевидно перевагу в разі появи в проекті iPad-версії програми, так як в цьому випадку опрацьовані @1x ресурси нам знадобляться.

image
Приклад нарізки для iOS з @1x(верхній рядок — нормальний розмір іконок, нижня — збільшений, для детального перегляду)

У випадку ж з Android, наш вибір mdpi дає відмінний результат в xhdpi/xxhdpi/xxxhdpi і, можливо, «мило» в hdpi.

image
Приклад автоматичної нарізки для Android з mdpi

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

Зауваження: Завжди і скрізь краще перевіряти автоматичний експорт ресурсів.

Специфікація

Розробники просять віддавати їм специфікацію pt і dp, для iOS і Android відповідно. Вибрані нами дозволу також нам допомагають, не треба думати і ділити розміри на якісь числа і так далі…

Достатньо з допомогою lite measure або просто measure розставити потрібні розміри. Тут можна заперечити, що плагін вміє перераховувати розміри з тих що є в потрібні, але не багато хто про це знають, та й взагалі не багато знають, що розміри треба віддавати в pt і dp.

Зауваження: У автора була стара версія плагіна Sketch Measure, нову неабияк поміняли.

Такий спосіб може допомогти при бажанні розробника подивитися якийсь розмір в исходнике, йому не треба буде смикати дизайнера або що-то вважати знову ж таки.

Тут же можна згадати про Photoshop і скрипт Size Marks, який при наших дозволах дасть потрібні розробці розміри (але тільки в px, на жаль).

image
Приклад роботи скрипта Size Marks

Думаємо про інших

Важливим моментом, на наш погляд, є передача проекту від одного дизайнера до іншого. Якщо новий дизайнер отримає xxhdpi-проект (а він не звик до цього або взагалі новачок), то йому знадобиться багато часу на вивчення і розуміння джерела, а також постійний перерахунок з поділом на 3 (що не так просто, як здається). Якщо ж він отримає mdpi проект, то легко зможе співвіднести його з гайдлайнамі і швидше приступить до вирішення завдання.

У випадку з iOS і передачею макетів в @2x справа йде трохи простіше, так як ділити на 2 вміє навіть гуманітарій. Але іноді зустрічаються в исходники @2x для iPhone 6 і знову замість роботи починаються перерахунки і роздуми.

Лірика

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

Але так як не кожен екран треба перевіряти, то цілком можна працювати і в mdpi — просто збільшувати исходник і дивитися на пристрої.

Керуючись вищевикладеними роздумами, наша дизайн-команда мобільних додатків вибрала шлях роботи з @1x і mdpi макетами.

Невелике опитування
В якому дозволі ваші вихідні файли для iOS?

/>
/>


<input type=«radio» id=«vv67745»
class=«radio js-field-data»
name=«variant[]»
value=«67745» />
@1x
<input type=«radio» id=«vv67747»
class=«radio js-field-data»
name=«variant[]»
value=«67747» />
@2x
<input type=«radio» id=«vv67749»
class=«radio js-field-data»
name=«variant[]»
value=«67749» />
@3x?

Проголосувало 37 осіб. Утрималося 32 людини.


В якому дозволі ваші вихідні файли для Android?

/>
/>

<input type=«radio» id=«vv67751»
class=«radio js-field-data»
name=«variant[]»
value=«67751» />
mdpi
<input type=«radio» id=«vv67753»
class=«radio js-field-data»
name=«variant[]»
value=«67753» />
hdpi
<input type=«radio» id=«vv67755»
class=«radio js-field-data»
name=«variant[]»
value=«67755» />
xhdpi
<input type=«radio» id=«vv67757»
class=«radio js-field-data»
name=«variant[]»
value=«67757» />
xxhdpi
<input type=«radio» id=«vv67759»
class=«radio js-field-data»
name=«variant[]»
value=«67759» />
xxxhdpi

Проголосувало 32 людини. Утрималося 37 осіб.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


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

0 коментарів

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