Praktický sprievodca ikonami aplikácií pre Android: Vysvetlenie adaptívnych ikon (a ako správne generovať svoje)
Pre začínajúcich vývojárov Androidu je to bežné prekvapenie: vyleštíte jeden štvorcový súbor PNG pre ikonu aplikácie, exportujete ho v úhľadnom rozlíšení 512 x 512 a vo vašom editore obrázkov to vyzerá perfektne. Potom na telefóne Samsung nainštalujete zostavu ladenia a ikona zrazu vyzerá orezaná a mierne mimo stredu, ako keby bola časť loga odrezaná. V samotnom súbore nie je nič zlé. Problém je v tom, že jediný štvorcový obrázok nikdy neprežije kontakt so skutočným svetom spúšťačov Androidu, z ktorých každý inak orezáva, maskuje a pretvára ikony. Ak ste sa s tým ešte nestretli, je len otázkou času, kedy na to prídete, poďme si teda prejsť, čo sa deje pod kapotou a ako na to hneď na prvýkrát.
Prečo jeden štvorcový PNG už nestačí
V prvých rokoch Androidu boli ikony aplikácií presne také, ako vyzerali: jeden štvorcový (alebo občas voľný tvar) PNG, ktorý každý spúšťač zobrazoval tak, ako je. Fungovalo to dobre, kým výrobcovia nezačali vizuálne rozlišovať svoje telefóny a jedným z najjednoduchších miest na to bola domovská obrazovka. Samsung chcel zaoblené štvorce, niektoré čínske OEM vzhľady chceli iné úpravy rohov a akciový Android sa nakoniec usadil na kruhoch. Zrazu ten istý súbor ikon vyzeral výrazne odlišne a niekedy viditeľne horšie, podľa toho, na koho telefóne pristál.
Odpoveďou spoločnosti Google, predstavenej s Androidom 8.0 Oreo, bol systém adaptívnych ikon. Namiesto dodania jedného pevného tvaru vývojári poskytujú vrstvené umelecké diela, ktoré samotný operačný systém maskuje do akéhokoľvek tvaru, ktorý daný spúšťač preferuje. Vizuálna identita zostáva konzistentná; mení sa len vonkajšia silueta.
Čo je to vlastne adaptívna ikona?
Adaptívna ikona sa skladá z dvoch samostatných vrstiev, z ktorých každá zaberá plátno s rozlíšením 108 dp x 108 dp: vrstva pozadia a vrstva popredia. Android ich spája a potom aplikuje akýkoľvek tvar masky, ktorý používa aktuálny spúšťač, či už je to kruh, zaoblený štvorec, slza alebo niečo úplne iné. Dvojvrstvová štruktúra umožňuje systému Android pridať aj jemnú paralaxu a pohybové efekty, pretože vrstvy sa môžu posúvať nezávisle, keď klepnete alebo potiahnete ikonu.
V zdrojoch aplikácie je to zvyčajne definované prostredníctvom súboru XML, ako je mipmap-anydpi-v26/ic_launcher.xml, ktorý jednoducho ukazuje na výkresy na pozadí a popredí, a nie na samotné pixelové údaje. Tradičný plochý ic_launcher.png je stále k dispozícii ako náhrada pre zariadenia so systémom Android 7.1 alebo starším, ktoré úplne predchádzali adaptívnemu systému ikon.
Prečo na bezpečnej zóne záleží
Tu je časť, ktorá ľudí nakopne najviac. Aj keď je plátno pre každú vrstvu 108 dp x 108 dp, je zaručené, že viditeľný bude iba vnútorný kruh 66 dp x 66 dp v strede tohto plátna bez ohľadu na to, ktorý tvar masky sa použije. Táto vnútorná oblasť sa bežne nazýva bezpečná zóna. Čokoľvek mimo nej sa môže zobraziť na kruhovej maske a potom sa náhle prilepiť na agresívnejšiu masku veveričky alebo slzy alebo naopak.
Toto je presne ten druh problému, ktorý sa objaví, keď je logo nakreslené blízko okrajov plátna, aby sa maximalizovala jeho vizuálna veľkosť: na kruhovej maske môže vyzerať perfektne, ale na veveričke od Samsungu sa nerovnomerne orezáva. Oprava nie je redizajn, len mierne zmenšenie umeleckého diela, takže zmysluplný obsah zostane v bezpečnej zóne bez ohľadu na to, ktorý tvar sa nakoniec použije.
Tvary spúšťača, s ktorými sa stretnete
| Tvar | Kde to uvidíte |
|---|---|
| Kruh | Základný Android, spúšťač pixelov (dlhodobé predvolené nastavenie) |
| Veverička (zaoblený štvorec) | Samsung One UI a niekoľko ďalších vzhľadov pre Android |
| Zaoblený štvorec (superelipsa) | iOS, aplikovaný automaticky systémom bez kontroly vývojára |
| Slza | Ponúka sa ako voliteľná možnosť v niektorých verziách softvéru Samsung |
| Štvorec s mäkkými rohmi | Rôzne vzhľady spúšťačov iných výrobcov |
Praktické je, že si nemôžete vybrať, ktorý z týchto tvarov bude vaša ikona nosiť. Používatelia bežných spúšťačov Androidu si často môžu vybrať svoj preferovaný tvar z ponuky nastavení. Vašou jedinou skutočnou pákou je zabezpečiť, aby ich samotné umelecké dielo elegantne prežilo, čo je presne to, čo má zaručiť bezpečná zóna.
Budovanie aktív: veľkosti a hustoty, ktoré potrebujete
| Vedro s hustotou | Veľkosť ikony spúšťača |
|---|---|
| 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 |
| Ikona záznamu v Obchode Play | 512 x 512 px |
Ak dodávate aplikáciu aj pre iOS, pridajte úplne ďalšiu súpravu, pretože požiadavky na ikonu App Store spoločnosti Apple dosahujú maximálne rozlíšenie 1024 x 1024 a používajú úplne iný, nevrstvený formát bez akejkoľvek transparentnosti.
Manuálny spôsob vs použitie generátora
Každú z týchto veľkostí môžete vyrobiť úplne ručne v editore obrázkov alebo prostredníctvom vstavaného Image Asset Studio v Android Studio, ktoré zvláda škálovanie hustoty a náhľady masiek primerane pre jeden projekt. To, čo je únavné, je, keď udržiavate systém dizajnu v niekoľkých aplikáciách, potrebujete zhodovať exporty iOS z rovnakého hlavného umeleckého diela alebo jednoducho chcete rýchly spôsob, ako skontrolovať, ako sa dizajn správa v každom tvare, skôr než sa do toho pustíte.
Generujte každú veľkosť z jedného hlavného obrázka
Naša Generátor ikon aplikácií vytvára jediný zdrojový obrázok s vysokým rozlíšením a vytvára celú sadu segmentov hustoty Androidu, adaptívnu štruktúru popredia/pozadia ikon a veľkosť záznamu v Obchode Play, to všetko z jedného nahrania, takže nemusíte ručne exportovať a premenovávať tucet súborov.
Extrahovanie ikon z existujúceho súboru APK
Niekedy potreba beží opačným smerom. Možno ste zdedili projekt bez jeho pôvodných dizajnových súborov alebo chcete presne vidieť, ako konkurent štruktúroval svoju ikonu predtým, ako navrhnete svoju vlastnú, alebo jednoducho potrebujete ikonu vytiahnuť späť z vytvoreného súboru APK a znova ju použiť v súvisiacom nástroji alebo marketingovom aktíve. Keďže súbor APK je v skutočnosti štruktúrovaný archív obsahujúci všetky zdroje aplikácie, súbory jeho ikon spúšťača sú fyzicky prítomné v ňom a možno ich extrahovať priamo, a nie rekonštruovať od začiatku.
Náš Extraktor ikon vytiahne presne tieto súbory z akéhokoľvek súboru APK, ktorý nahráte, a poskytne vám nespracované ikony v akomkoľvek rozlíšení, ktoré pôvodný vývojár dodal, čo je často najrýchlejší spôsob, ako obnoviť stratený zdrojový súbor alebo zistiť, ako iná aplikácia pristúpila k rovnakému problému s dizajnom.
Bežné chyby ikon, ktoré sú pri kontrole označené
- Pečenie v extra výplni alebo UI chróm. Efekt vrhnutého tieňa, okraja alebo zaobleného rohu pridaný ručne do obrazu je v rozpore s vlastným maskovaním systému a často vyzerá zdvojene alebo nesprávne zarovnaný.
- Použitie čisto bieleho pozadia bez výrazného okraja. Na spúšťačoch so svetelnou tematikou môže byť ikona na pozadí domovskej obrazovky takmer neviditeľná.
- Príliš jemný detail. Text a zložité čiary, ktoré vyzerajú ostro pri rozlíšení 512 pixelov, sa po zmenšení na 48 pixelov často zmenia na nečitateľnú šmuhu, a tak to väčšina používateľov vidí každý deň.
- Nezhoda medzi ikonou záznamu v Obchode Play a ikonou, ktorá sa inštaluje. Recenzenti aj používatelia si všimnú, keď sa tieto dva nezhodujú, a znie to ako nedbalé alebo, čo je horšie, podozrivé.
- Úplné zabudnutie na starú rezervu. Ak vaša aplikácia stále podporuje verzie systému Android staršie ako 8.0, preskočenie plochého záložného súboru PNG môže spôsobiť, že títo používatelia budú mať poškodenú alebo všeobecne vyzerajúcu ikonu.
Pred odoslaním otestujte svoju ikonu v rôznych tvaroch
Pred dokončením ikony sa oplatí zobraziť jej ukážku aspoň pod kruhovou maskou a maskou veveričky vedľa seba, namiesto toho, aby ste predpokladali, že sa preloží čisto. Štúdio Image Asset Studio od Android Studio presne z tohto dôvodu obsahuje živý náhľad niekoľkých tvarov spúšťača a zachytenie problému, ktorý by sa inak objavil až po zverejnení, keď používateľ na „nesprávnom“ tvare spúšťača, ohlási, že niečo nevyzerá, zaberie len minútu.
Kľúčové poznatky
- Adaptívne ikony využívajú dve vrstvy, pozadie a popredie, na plátne s rozlíšením 108 dp, ktoré systém maskuje do rôznych tvarov pre každý spúšťač.
- Iba vnútorná 66dp bezpečná zóna je zaručene viditeľná v každom tvare masky; uchovávať v ňom zmysluplné umelecké diela.
- Stále potrebujete plochú staršiu ikonu pre zariadenia so systémom Android 7.1 alebo starším.
- Generátor dokáže vytvoriť každú požadovanú hustotu a veľkosť záznamu v Obchode Play z jedného hlavného obrázka, čím ušetrí značnú prácu pri manuálnom exporte.
- Ikony je možné extrahovať priamo z existujúceho súboru APK, keď sa stratia zdrojové súbory alebo ak potrebujete preštudovať prostriedky inej aplikácie.
Často Kladené Otázky (FAQ)
Aká je skutočná veľkosť pixelov potrebná pre ikonu záznamu v Obchode Play?
512 x 512 pixelov, 32-bitový PNG s alfa kanálom. Toto je oddelené od veľkostí ikon spúšťača, ktoré sú súčasťou samotného súboru APK.
Musí byť vrstva pozadia mojej adaptívnej ikony jednofarebná?
Nie je to nevyhnutne plochá farba, ale vo všeobecnosti by mala byť nepriehľadná a jednoduchá, pretože môže byť posunutá, škálovaná alebo maskovaná spôsobmi, ktoré úplne neovládate. Zaneprázdnené alebo priehľadné pozadie má tendenciu vyzerať nekonzistentne medzi spúšťačmi.
Môžem znova použiť svoj adaptívny dizajn ikon pre Android priamo pre iOS?
Nie priamo. iOS používa jeden plochý štvorcový obrázok so zaoblením rohov aplikovaným systémom namiesto samostatných vrstiev, takže pre iOS zvyčajne exportujete zjednodušenú sploštenú verziu toho istého umeleckého diela.
Prečo moja ikona vyzerá na mojom telefóne dobre, ale v zázname v Obchode Play je rozmazaná?
Zvyčajne sa to stane, keď bola ikona záznamu zväčšená z malého zdrojového obrázka. Vždy začnite od hlavného súboru s veľkosťou aspoň 1024 x 1024 pixelov a exportujte z neho každú požadovanú veľkosť.
Čo sa stane, ak preskočím starú záložnú ikonu pre staršie verzie Androidu?
Zariadenia so systémom Android 7.1 alebo starším, ktoré nepodporujú adaptívne ikony, sa môžu vrátiť k všeobecnej systémovej ikone alebo vykresliť vašu ikonu nesprávne. Preskočenie je bezpečné, iba ak je minimálna podporovaná verzia Androidu vašej aplikácie 8.0 alebo vyššia.
Na nič z toho nepotrebujete vzdelanie v teórii dizajnu, len vedomie, že vaša ikona bude pretvorená spôsobmi, ktoré neovládate, vo chvíli, keď opustí vaše ruky. Navrhnite bezpečnú zónu, ponechajte starú rezervu, vygenerujte každú požadovanú veľkosť z jedného čistého hlavného súboru a vaša ikona vydrží bez ohľadu na to, na ktorom spúšťači sa dostane.