Практичний посібник із піктограм програм для Android: пояснення адаптивних піктограм (і як правильно створити свої)
Це звичайний сюрприз для початківців розробників Android: ви відшліфовуєте єдиний квадратний PNG для піктограми програми, експортуєте його в акуратному розмірі 512x512, і він виглядає ідеально у вашому редакторі зображень. Потім ви встановлюєте налагоджувальну збірку на телефоні Samsung, і значок раптом виглядає обрізаним і трохи не по центру, ніби частину логотипу було обрізано. З самим файлом нічого не сталося. Проблема полягає в тому, що єдине квадратне зображення ніколи не витримає контакту з реальним світом програм запуску Android, кожна з яких обрізає, маскує та змінює форму значків по-різному. Якщо ви ще не стикалися з цим, це лише питання часу, тому давайте розберемося, що відбувається під капотом і як це зробити правильно з першого разу.
Чому одного квадратного PNG більше недостатньо
У перші роки існування Android піктограми програм були саме такими, як вони виглядали: один квадратний (або іноді довільної форми) PNG, який кожна програма запуску відображала як є. Це працювало добре, поки виробники не почали візуально відрізняти свої телефони, і одним із найпростіших місць для цього був головний екран. Samsung хотів заокруглених квадратів, деякі китайські OEM-обкладинки вимагали іншої обробки кутів, а стандартний Android зрештою зупинився на колах. Раптом той самий файл значка виглядав помітно по-іншому, а іноді й помітно гірше, залежно від того, на чий телефон він потрапляв.
Відповіддю Google, представленої в Android 8.0 Oreo, стала адаптивна система значків. Замість того, щоб надавати одну фіксовану форму, розробники пропонують багатошарову ілюстрацію, яку сама операційна система маскує в будь-яку форму, яку віддає перевага дана програма запуску. Візуальна ідентичність залишається незмінною; змінюється лише зовнішній силует.
Що таке адаптивна піктограма?
Адаптивна піктограма складається з двох окремих шарів, кожен з яких займає полотно 108 на 108 точок: фонового шару та переднього плану. Android поєднує ці два разом, а потім застосовує будь-яку форму маски, яку використовує поточна панель запуску, будь то коло, округлений квадрат, крапля чи щось зовсім інше. Двошарова структура дозволяє Android також додавати тонкий паралакс і ефекти руху, оскільки шари можуть зміщуватися незалежно, коли ви натискаєте або перетягуєте значок.
У ресурсах програми це зазвичай визначається через XML-файл, наприклад mipmap-anydpi-v26/ic_launcher.xml, який просто вказує на фонові та передні малюнки, а не містить самі піксельні дані. Традиційний плоский ic_launcher.png досі зберігається як запасний варіант для пристроїв під управлінням Android 7.1 або раніших версій, які повністю передували адаптивній системі значків.
Чому безпечна зона важлива
Ось та частина, яка найбільше спантеличує людей. Незважаючи на те, що полотно для кожного шару має розмір 108 на 108 точок, гарантовано буде видимим лише внутрішнє коло 66 на 66 точок із центром у цьому полотні, незалежно від того, яку форму маски буде застосовано. Цю внутрішню область зазвичай називають безпечною зоною. Все, що знаходиться поза нею, може бути показано на круглій масці, а потім раптово обрізано на більш агресивній масці з кольором або краплею, або навпаки.
Це саме та проблема, яка виникає, коли логотип наближається до країв полотна, щоб максимізувати його візуальний розмір: він може виглядати ідеально на круглій масці, але бути нерівномірно обрізаним на масці squirtle від Samsung. Виправлення не є оновленим дизайном, а лише дещо зменшує ілюстрацію, щоб значущий вміст залишався в безпечній зоні незалежно від того, яку форму врешті-решт буде застосовано.
Форми панелі запуску, які ви зустрінете
| Форма | Де ти це побачиш |
|---|---|
| Коло | Стандартний Android, панель запуску Pixel (давнє значення за умовчанням) |
| Squircle (округлений квадрат) | Samsung One UI та кілька інших оболонок Android |
| Округлений квадрат (супереліпс) | iOS, застосована системою автоматично без контролю розробника |
| Сльоза | Пропонується як варіант для вибору в деяких версіях програмного забезпечення Samsung |
| Квадрат з м'якими кутами | Різні скіни запуску інших виробників |
Практичний висновок полягає в тому, що ви не можете вибирати, яку з цих форм одягне ваш значок. Користувачі стандартних програм запуску Android часто навіть можуть вибрати бажану форму з меню налаштувань. Ваш єдиний справжній важіль полягає в тому, щоб переконатися, що сам витвір мистецтва витончено переживе всі, що є саме тим, що гарантує безпечна зона.
Створення активів: потрібні вам розміри та щільність
| Відро щільності | Розмір значка програми запуску |
|---|---|
| mdpi | 48 x 48 пікселів |
| hdpi | 72 x 72 px |
| xhdpi | 96 x 96 пікселів |
| xxhdpi | 144 x 144 пікселів |
| xxxhdpi | 192 x 192 пікселів |
| Піктограма списку Play Store | 512 x 512 пікселів |
Якщо ви також надсилаєте програму для iOS, додайте повністю ще один набір, оскільки вимоги до піктограм Apple App Store мають максимальну роздільну здатність 1024x1024 і використовувати зовсім інший безшаровий формат без жодної прозорості.
Ручний спосіб проти використання генератора
Ви можете створити будь-який із цих розмірів вручну в редакторі зображень або за допомогою вбудованої в Android Studio Image Asset Studio, яка достатньо добре обробляє масштабування щільності та попередній перегляд масок для одного проекту. Це стає втомливим, коли ви підтримуєте систему дизайну в кількох програмах, вам потрібні відповідні експорти в iOS з однієї і тієї ж основної ілюстрації або просто хочете швидко перевірити, як дизайн поводиться в кожній формі, перш ніж приступати до нього.
Створюйте всі розміри з одного головного зображення
Наш Генератор значків програм бере єдине вихідне зображення високої роздільної здатності та виробляє повний набір сегментів щільності Android, адаптивну структуру переднього/фонового плану значків і розмір списку Play Store, усе з одного завантаження, тож вам не потрібно вручну експортувати та перейменовувати десятки файлів вручну.
Витяг піктограм із наявного APK
Іноді потреба біжить у зворотному напрямку. Можливо, ви успадкували проект без оригінальних файлів дизайну, або ви хочете побачити, як саме конкурент структурував свою піктограму, перш ніж створювати власну, або вам просто потрібно витягнути піктограму зі вбудованого APK, щоб повторно використовувати її у пов’язаному інструменті чи маркетинговому ресурсі. Оскільки файл .apk фактично є структурованим архівом, що містить усі ресурси програми, його файли піктограми запуску фізично присутні в ньому, і їх можна витягнути безпосередньо, а не реконструювати з нуля.
Наш Витягувач значків витягує саме ці файли з будь-якого APK, який ви завантажуєте, надаючи вам необроблені ресурси значків у будь-якій роздільній здатності, яку надіслав оригінальний розробник, що часто є найшвидшим способом відновити втрачений вихідний файл або вивчити, як інша програма вирішила ту саму проблему дизайну.
Поширені помилки значків, які позначаються під час перегляду
- Випічка з додатковою підкладкою або хромованим інтерфейсом. Ефект тіні, рамки або закруглених кутів, доданий вручну всередину зображення, конфліктує з власним маскуванням системи та часто виглядає подвоєним або невирівняним.
- Використання чистого білого фону без чітких країв. На світлих лаунчерах піктограма може стати майже непомітною на тлі головного екрана.
- Надто тонка деталь. Текст і складні лінії, які виглядають різкими при 512 пікселях, часто перетворюються на нечитабельну пляму після зменшення масштабу до 48 пікселів, як більшість користувачів бачать це щодня.
- Невідповідність значка списку Play Store і значку, який встановлюється. Рецензенти та користувачі помічають, коли ці два не збігаються, і це сприймається як неохайне або, що ще гірше, підозріле.
- Повністю забувши про застарілий резервний варіант. Якщо ваша програма все ще підтримує версії Android до 8.0, пропуск плоского резервного PNG може призвести до того, що користувачі отримають несправну або загальну піктограму.
Перевірте вашу піктограму на фігурах перед відправкою
Перш ніж завершувати створення піктограми, варто попередньо переглянути її принаймні під круглою маскою та маскою з білочками поруч, а не припускати, що вона перекладеться чітко. Image Asset Studio від Android Studio містить попередній перегляд кількох форм панелі запуску в реальному часі, і потрібна лише хвилина, щоб виявити проблему, яка інакше виникла б лише після публікації, коли користувач із «неправильною» формою панелі запуску повідомляє, що щось виглядає не так.
Ключові висновки
- Адаптивні піктограми використовують два шари, фон і передній план, на полотні 108 dp, які система маскує в різні форми для кожної панелі запуску.
- Лише внутрішня безпечна зона 66 dp гарантовано видима на кожній формі маски; зберігайте значущі твори мистецтва всередині нього.
- Для пристроїв на Android 7.1 або старіших версій вам все ще потрібен плоский значок старої версії.
- Генератор може створювати будь-яку необхідну щільність і розмір списку Play Store з одного головного зображення, заощаджуючи значну ручну роботу експорту.
- Значки можна отримати безпосередньо з наявного APK, якщо вихідні файли втрачено або вам потрібно вивчити ресурси іншої програми.
Часті запитання (FAQ)
Який фактичний розмір пікселів потрібен для значка списку Play Store?
512x512 пікселів, 32-бітний PNG з альфа-каналом. Це окремо від розмірів значків програми запуску, які входять до складу самого APK.
Чи має фоновий шар мого адаптивного значка бути однотонним?
Не обов’язково рівний колір, але зазвичай він має бути непрозорим і простим, оскільки його можна зміщувати, масштабувати або маскувати способами, які ви не повністю контролюєте. Зайнятий або прозорий фон, як правило, виглядає неоднаково на панелях запуску.
Чи можу я повторно використовувати свій адаптивний дизайн піктограм Android безпосередньо для iOS?
Не прямо. iOS використовує єдине плоске квадратне зображення із закругленням кутів, застосованим системою, а не окремі шари, тому ви зазвичай експортуєте спрощену зведену версію тієї самої ілюстрації для iOS.
Чому мій значок добре виглядає на моєму телефоні, але розмитий у списку Play Store?
Зазвичай це трапляється, коли піктограму списку було збільшено з маленького вихідного зображення. Завжди починайте з головного файлу розміром принаймні 1024x1024 пікселів і експортуйте кожен необхідний розмір із нього.
Що станеться, якщо я пропущу альтернативний значок застарілої версії для старих версій Android?
Пристрої на Android 7.1 або раніших версій, які не підтримують адаптивні піктограми, можуть повернутися до загальної системної піктограми або некоректно відтворювати вашу піктограму. Можна безпечно пропустити, лише якщо мінімальна підтримувана версія Android вашого додатка 8.0 або новіша.
Для цього вам не потрібен досвід теорії дизайну, а лише усвідомлення того, що ваш значок буде змінено у спосіб, який ви не контролюєте, коли він покине ваші руки. Створюйте безпечну зону, зберігайте застарілі резервні варіанти, генеруйте будь-який необхідний розмір з одного чистого головного файлу, і ваша піктограма буде зберігатися незалежно від того, на якій програмі запуску вона потрапить.