Praktický průvodce ikonami aplikací pro Android: Vysvětlení adaptivních ikon (a jak správně generovat ty vaše)

Je to běžné překvapení pro začínající vývojáře Androidu: vyleštíte jeden čtvercový PNG pro ikonu aplikace, exportujete jej v úhledném rozlišení 512 x 512 a ve vašem editoru obrázků to vypadá perfektně. Poté nainstalujete ladicí sestavení na telefon Samsung a ikona najednou vypadá oříznutá a mírně mimo střed, jako by byla část loga odříznuta. V samotném souboru není nic špatného. Problém je v tom, že jediný čtvercový obrázek nikdy nepřežije kontakt se skutečným světem spouštěčů Android, z nichž každý jinak ořezává, maskuje a přetváří ikony. Pokud jste se s tím ještě nesetkali, je jen otázkou času, kdy na to přijdete, pojďme si tedy projít, co se děje pod kapotou a jak to hned napoprvé uvést do pořádku.

Proč jeden čtvercový PNG už nestačí

V prvních letech Androidu byly ikony aplikací přesně tak, jak vypadaly: jeden čtvercový (nebo občas volně tvarovaný) PNG, který každý spouštěč zobrazoval tak, jak je. To fungovalo dobře, dokud výrobci nezačali odlišovat své telefony vizuálně, a jedním z nejjednodušších míst, jak to udělat, byla domovská obrazovka. Samsung chtěl zaoblené čtverce, některé čínské OEM vzhledy chtěly jiné úpravy rohů a akciový Android se nakonec usadil na kruzích. Najednou ten úplně stejný soubor ikon vypadal znatelně jinak a někdy i viditelně hůř, podle toho, na čím telefonu přistál.

Odpovědí společnosti Google, představené s Androidem 8.0 Oreo, byl systém adaptivních ikon. Namísto dodání jednoho pevného tvaru poskytují vývojáři vrstvenou kresbu, kterou samotný operační systém maskuje do jakéhokoli tvaru, který daný launcher preferuje. Vizuální identita zůstává konzistentní; mění se pouze vnější silueta.

Co přesně je adaptivní ikona?

Adaptivní ikona se skládá ze dvou samostatných vrstev, z nichž každá zabírá plátno 108dp x 108dp: vrstva pozadí a vrstva popředí. Android je složí dohromady a poté použije jakýkoli tvar masky, který aktuální launcher používá, ať už je to kruh, zaoblený čtverec, slza nebo něco úplně jiného. Dvouvrstvá struktura umožňuje Androidu přidat jemnou paralaxu a pohybové efekty, protože vrstvy se mohou posouvat nezávisle, když klepnete nebo přetáhnete ikonu.

Ve zdrojích aplikace je to obvykle definováno prostřednictvím souboru XML, jako je mipmap-anydpi-v26/ic_launcher.xml, který jednoduše ukazuje na výkresy na pozadí a popředí, místo aby obsahoval samotná data pixelů. Tradiční plochý ic_launcher.png je stále udržován jako záložní pro zařízení se systémem Android 7.1 nebo starším, která zcela předcházejí systému adaptivních ikon.

Proč na bezpečné zóně záleží

Zde je část, která lidi nejvíce nakopne. I když je plátno pro každou vrstvu 108dp x 108dp, je zaručeno, že bude viditelný pouze vnitřní kruh 66dp x 66dp uprostřed tohoto plátna, bez ohledu na to, který tvar masky se použije. Tato vnitřní oblast se běžně nazývá bezpečná zóna. Cokoli mimo ni se může zobrazit na kruhové masce a pak náhle připnuto na agresivnější masku veverky nebo slzy nebo naopak.

To je přesně ten druh problému, který se objeví, když je logo nakresleno blízko okrajů plátna, aby se maximalizovala jeho vizuální velikost: na kruhové masce může vypadat perfektně, ale na veverčí masce Samsungu může být oříznuto nerovnoměrně. Oprava není redesign, jen mírně zmenšuje kresbu, aby smysluplný obsah zůstal v bezpečné zóně bez ohledu na to, který tvar se nakonec použije.

Spouštěcí tvary, se kterými se setkáte

Praktické je, že si nemůžete vybrat, který z těchto tvarů bude vaše ikona nosit. Uživatelé standardních spouštěčů Android si často mohou vybrat svůj preferovaný tvar z nabídky nastavení. Vaší jedinou skutečnou pákou je zajistit, aby je samotné umělecké dílo ladně přežilo, což je přesně to, co je zde bezpečná zóna, která je zárukou.

Stavba aktiv: Velikosti a hustoty, které potřebujete

Pokud dodáváte aplikaci také pro iOS, přidejte úplně další sadu, protože požadavky na ikonu App Store společnosti Apple dosahují maximálního rozlišení 1024 x 1024 a používají zcela jiný, nevrstvený formát bez jakékoli průhlednosti.

Ruční cesta vs použití generátoru

Každou z těchto velikostí můžete vyrobit ručně v editoru obrázků nebo prostřednictvím vestavěného Image Asset Studio v Android Studio, které zvládá škálování hustoty a náhledy masek přiměřeně dobře pro jeden projekt. Tam, kde to začíná být únavné, je, když udržujete návrhový systém v několika aplikacích, potřebujete porovnat exporty iOS ze stejné hlavní kresby nebo prostě chcete rychlý způsob, jak znovu zkontrolovat, jak se návrh chová v každém tvaru, než se do toho pustíte.

Extrahování ikon ze stávajícího souboru APK

Někdy potřeba běží opačným směrem. Možná jste zdědili projekt bez jeho původních návrhových souborů nebo chcete přesně vidět, jak konkurent strukturoval svou ikonu, než navrhnete vaši vlastní, nebo jednoduše potřebujete ikonu vytáhnout zpět z vytvořeného souboru APK a znovu ji použít v souvisejícím nástroji nebo marketingovém aktivu. Vzhledem k tomu, že soubor APK je ve skutečnosti strukturovaný archiv obsahující všechny prostředky aplikace, soubory jeho ikon spouštěče jsou fyzicky přítomny uvnitř a lze je přímo extrahovat, nikoli rekonstruovat od začátku.

Náš Extraktor ikon vytáhne přesně tyto soubory z libovolného souboru APK, který nahrajete, a poskytne vám nezpracované ikony v jakémkoli rozlišení, které původní vývojář dodal, což je často nejrychlejší způsob, jak obnovit ztracený zdrojový soubor nebo prostudovat, jak se ke stejnému problému s návrhem postavila jiná aplikace.

Běžné chyby ikon, které jsou při kontrole označeny

• Pečení v extra vycpávce nebo UI chromu. Efekt vrženého stínu, ohraničení nebo zaobleného rohu přidaný ručně do obrazu je v rozporu s vlastním maskováním systému a často vypadá zdvojeně nebo špatně zarovnaný.
• Použití čistě bílého pozadí bez výrazného okraje. Na spouštěcích zařízeních se světelnou tématikou může být ikona na pozadí domovské obrazovky téměř neviditelná.
• Příliš jemné detaily. Text a složité čáry, které vypadají ostře při rozlišení 512 pixelů, se po zmenšení na 48 pixelů často změní v nečitelnou šmouhu, což je způsob, jakým to většina uživatelů vidí každý den.
• Neshoda mezi ikonou záznamu v Obchodě Play a ikonou, která se instaluje. Recenzenti i uživatelé si všimnou, že se tyto dva neshodují, a čte se to jako nedbalé, nebo v horším případě podezřelé.
• Úplně zapomenout na starší verzi. Pokud vaše aplikace stále podporuje verze Android starší než 8.0, přeskočení plochého záložního souboru PNG může těmto uživatelům zanechat rozbitou nebo obecně vypadající ikonu.

Testování vaší ikony napříč tvary před odesláním

Před dokončením ikony se vyplatí zobrazit její náhled alespoň pod kruhovou maskou a maskou veverky vedle sebe, spíše než předpokládat, že se bude překládat čistě. Image Asset Studio Android Studio přesně z tohoto důvodu obsahuje živý náhled na několik tvarů spouštěče a zachycení problému, který by se jinak objevil až po publikování, když uživatel na „nesprávném“ tvaru spouštěče ohlásí, že něco vypadá, trvá jen minutu.

Často Kladené Otázky (FAQ)

K ničemu z toho nepotřebujete vzdělání v teorii designu, jen vědomí, že vaše ikona bude přetvořena způsobem, který neovlivníte ve chvíli, kdy opustí vaše ruce. Navrhněte pro bezpečnou zónu, udržujte starší záložní řešení, vygenerujte všechny požadované velikosti z jednoho čistého hlavního souboru a vaše ikona vydrží bez ohledu na to, na kterém spouštěči přistane.