Практическо ръководство за икони на приложения за Android: обяснение на адаптивните икони (и как да генерирате вашите правилно)
Това е често срещана изненада за начинаещите разработчици на Android: изглаждате един квадратен PNG за иконата на вашето приложение, експортирате го на подредени 512x512 и той изглежда перфектно във вашия редактор на изображения. След това инсталирате компилация за отстраняване на грешки на телефон Samsung и иконата внезапно изглежда изрязана и леко извън центъра, сякаш част от логото е отрязана. Нищо не е наред със самия файл. Проблемът е, че едно квадратно изображение никога нямаше да оцелее при контакт с реалния свят на стартовите програми на Android, всеки от които изрязва, маскира и преоформя иконите по различен начин. Ако все още не сте се сблъсквали с това, е само въпрос на време да го направите, така че нека да разгледаме какво се случва под капака и как да го оправим от първия път.
Защо един квадрат PNG вече не е достатъчен
В най-ранните години на Android иконите на приложения бяха точно както изглеждаха: единичен квадрат (или понякога със свободна форма) PNG, който всеки стартер показваше такъв, какъвто е. Това работеше добре, докато производителите не започнаха да разграничават телефоните си визуално и едно от най-лесните места за това беше началният екран. Samsung искаше закръглени квадрати, някои китайски OEM кожи искаха различни ъгли, а стоковият Android в крайна сметка се спря на кръгове. Изведнъж абсолютно същият файл с икони изглеждаше забележимо различен, а понякога и видимо по-лош, в зависимост от това на чий телефон се приземи.
Отговорът на Google, въведен с Android 8.0 Oreo, беше системата с адаптивни икони. Вместо да предоставят една фиксирана форма, разработчиците предоставят наслоени произведения на изкуството, които самата операционна система маскира в каквато форма предпочита дадена програма за стартиране. Визуалната идентичност остава последователна; променя се само външният силует.
Какво точно е адаптивна икона?
Адаптивната икона е изградена от два отделни слоя, всеки от които заема платно с размери 108 dp на 108 dp: фонов слой и слой на преден план. Android комбинира двете заедно и след това прилага каквато и да е форма на маска, използвана от текущия стартер, независимо дали това е кръг, заоблен квадрат, сълза или нещо съвсем друго. Двуслойната структура е това, което позволява на Android да добавя и фин паралакс и ефекти на движение, тъй като слоевете могат да се изместват независимо, когато докоснете или плъзнете икона.
В ресурсите на приложението това обикновено се дефинира чрез XML файл като mipmap-anydpi-v26/ic_launcher.xml, който просто сочи към чертежи на фон и преден план, вместо да съдържа самите пикселни данни. Традиционният плосък ic_launcher.png все още се съхранява като резервен вариант за устройства, работещи с Android 7.1 или по-стари, които предшестват изцяло адаптивната система с икони.
Защо безопасната зона е важна
Ето частта, която спъва хората най-много. Въпреки че платното за всеки слой е 108dp на 108dp, само вътрешният кръг от 66dp на 66dp, центриран в това платно, е гарантирано видим, независимо коя форма на маска се прилага. Тази вътрешна област обикновено се нарича безопасна зона. Всичко извън него може да се покаже на кръгла маска и след това внезапно да се отреже върху по-агресивна маска с кръгла или капковидна форма, или обратното.
Това е точно този вид проблем, който се появява, когато лого е нарисувано близо до краищата на платното, за да се увеличи максимално неговият визуален размер: то може да изглежда перфектно върху кръгла маска, но да бъде изрязано неравномерно върху маската на Samsung. Корекцията не е редизайн, а просто леко свиване на произведението, така че значимото съдържание да остане в безопасната зона, без значение коя форма в крайна сметка се прилага.
Форми за стартиране, които ще срещнете
| Форма | Къде ще го видиш |
|---|---|
| кръг | Stock Android, Pixel launcher (дългогодишната настройка по подразбиране) |
| Squircle (заоблен квадрат) | Samsung One UI и няколко други кожи за Android |
| Заоблен квадрат (суперелипса) | iOS, приложен автоматично от системата без контрол от програмисти |
| Сълза | Предлага се като опция за избор в някои версии на софтуера на Samsung |
| Квадрат с меки ъгли | Различни кожи за стартиране на други производители |
Практическият извод е, че не можете да избирате коя от тези форми ще носи вашата икона. Потребителите на стандартни стартери за Android често дори могат да изберат предпочитаната от тях форма от меню с настройки. Единственият ви истински лост е да се уверите, че самото произведение на изкуството ще оцелее грациозно, което е точно това, което гарантира безопасната зона.
Изграждане на активите: размери и плътност, от които се нуждаете
| Кофа за плътност | Размер на иконата на стартера |
|---|---|
| mdpi | 48 x 48 px |
| hdpi | 72 x 72 px |
| xhdpi | 96 x 96 px |
| xxhdpi | 144 x 144 px |
| xxxhdpi | 192 x 192 px |
| Икона на списък в Play Store | 512 x 512 px |
Ако доставяте приложението и на iOS, добавете изцяло друг комплект, тъй като изискванията за иконите на App Store на Apple достигат до 1024x1024 и използват напълно различен, неслоест формат без никаква прозрачност.
Ръчният начин срещу използване на генератор
Можете абсолютно да създадете всеки един от тези размери на ръка в редактор на изображения или чрез вграденото Image Asset Studio на Android Studio, което се справя с мащабирането на плътността и визуализациите на маската сравнително добре за един проект. Когато това става досадно, е когато поддържате система за дизайн в няколко приложения, имате нужда от съответстващи експорти на iOS от едно и също основно произведение на изкуството или просто искате бърз начин да проверите отново как се държи дизайнът във всяка форма, преди да се ангажирате с него.
Генерирайте всеки размер от едно основно изображение
Нашият Генератор на икони на приложения взема едно изходно изображение с висока разделителна способност и произвежда пълния набор от контейнери за плътност на Android, адаптивната структура на предния/заден план на иконата и размера на списъка в Play Store, всичко това от едно качване, така че да не експортирате ръчно и преименувате дузина файлове на ръка.
Извличане на икони от съществуващ APK
Понякога нуждата върви в обратната посока. Може би сте наследили проект без неговите оригинални дизайнерски файлове или искате да видите точно как конкурент е структурирал своята икона, преди да проектирате своя собствена, или просто трябва да изтеглите икона обратно от вграден APK, за да я използвате повторно в свързан инструмент или маркетингов актив. Тъй като APK всъщност е структуриран архив, съдържащ всички ресурси на приложението, неговите файлове с икони за стартиране присъстват физически в него и могат да бъдат извлечени директно, вместо да се реконструират от нулата.
Нашият Екстракт на икони извлича точно тези файлове от всеки APK, който качите, като ви дава активите на необработените икони с каквато и да е резолюция, изпратена от първоначалния разработчик, което често е най-бързият начин за възстановяване на изгубен изходен файл или проучване как друго приложение е подходило към същия проблем с дизайна.
Често срещани грешки в иконите, които се маркират при преглед
- Печене в допълнителна подложка или UI chrome. Ефект на падаща сянка, рамка или заоблен ъгъл, добавени ръчно в изображението, са в конфликт със собственото маскиране на системата и често изглеждат удвоени или неподравнени.
- Използване на чисто бял фон без отчетлив ръб. При стартери със светла тема иконата може да стане почти невидима на фоначалния екран.
- Прекалено фин детайл. Текст и сложни линии, които изглеждат остри при 512px, често се превръщат в нечетливо петно, след като бъдат намалени до 48px, което е начинът, по който повечето потребители го виждат всеки ден.
- Несъответствие между иконата на списъка в Play Store и иконата, която се инсталира. Рецензентите и потребителите забелязват, когато тези две не съвпадат, и това се чете като небрежно или, по-лошо, подозрително.
- Напълно забравяне на резервното наследство. Ако приложението ви все още поддържа версии на Android преди 8.0, пропускането на плоския резервен PNG може да остави тези потребители със счупена или генерично изглеждаща икона.
Тестване на вашата икона във форми, преди да изпратите
Преди да финализирате икона, струва си да я визуализирате поне под кръгла маска и маска с кръгла форма една до друга, вместо да приемате, че ще се преведе чисто. Image Asset Studio на Android Studio включва предварителен преглед на живо в няколко форми на стартера точно поради тази причина и отнема само минута, за да се открие проблем, който иначе би изплувал едва след публикуване, когато потребител с „грешната“ форма на стартера докладва, че нещо не изглежда.
Ключови изводи
- Адаптивните икони използват два слоя, фон и преден план, върху 108dp платно, което системата маскира в различни форми за всеки стартер.
- Само вътрешната безопасна зона от 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 или по-нова.
Не се нуждаете от опит в теорията на дизайна за нищо от това, а само от съзнанието, че вашата икона ще бъде преоформена по начини, които не контролирате в момента, в който напусне ръцете ви. Проектирайте за безопасната зона, поддържайте наследен резервен вариант, генерирайте всеки необходим размер от един чист главен файл и иконата ви ще издържи, независимо в кой стартер се появи.