Gyakorlati útmutató az Android-alkalmazások ikonjaihoz: Az adaptív ikonok magyarázata (és a saját megfelelő létrehozása)
Ez egy gyakori meglepetés az első Android-fejlesztők számára: egyetlen négyzet alakú PNG-t csiszol az alkalmazásikonhoz, exportálja rendezett 512x512-es méretben, és tökéletesen néz ki a képszerkesztőben. Ezután telepít egy hibakereső buildet egy Samsung telefonra, és az ikon hirtelen levágottnak és kissé a középponttól eltérőnek tűnik, mintha a logó egy részét levágták volna. Magával a fájllal semmi gond. A probléma az, hogy egyetlen négyzet alakú kép sem élte túl az Android-indítók valós világával való érintkezést, amelyek mindegyike másképp vágja, takarja és formálja át az ikonokat. Ha még nem futott bele ebbe, csak idő kérdése, hogy mikor, úgyhogy nézzük végig, mi történik a motorháztető alatt, és hogyan lehet elsőre rendbe tenni.
Miért nem elég többé egy négyszögletes PNG?
Az Android korai éveiben az alkalmazásikonok egyszerűen működtek: egyetlen négyzet alakú (vagy esetenként szabad formájú) PNG-fájl volt, amelyet minden indítóprogram változtatás nélkül jelenített meg. Ez egészen addig bevált, amíg a gyártók el nem kezdték vizuálisan megkülönböztetni telefonjaikat, aminek egyik legkézenfekvőbb terepe a kezdőképernyő volt. A Samsung lekerekített négyzeteket akart, egyes kínai gyártói felületek eltérő sarokkialakítást választottak, az alap Android pedig végül a kör alaknál állapodott meg. Hirtelen ugyanaz az ikonfájl észrevehetően másképp – és néha láthatóan rosszabbul – nézett ki attól függően, hogy milyen telefonra került.
Az Android 8.0 Oreo-val bevezetett Google válasza az adaptív ikonrendszer volt. Ahelyett, hogy egyetlen rögzített alakzatot adnának meg, a fejlesztők réteges grafikát biztosítanak, amelyet maga az operációs rendszer maszkíroz az adott indító által kedvelt alakra. A vizuális identitás konzisztens marad; csak a külső sziluett változik.
Mi is pontosan az adaptív ikon?
Az adaptív ikon két különálló, egyenként 108dp × 108dp méretű vásznat elfoglaló rétegből épül fel: egy háttérrétegből és egy előtérrétegből. Az Android egymásra helyezi a kettőt, majd alkalmazza az aktuális indítóprogram által használt maszkformát, legyen az kör, lekerekített négyzet, könnycsepp vagy bármi más. A kétrétegű felépítés lehetővé teszi az Android számára finom parallaxis- és mozgáseffektusok megjelenítését is, mivel a rétegek egymástól függetlenül mozdulhatnak el az ikon megérintésekor vagy húzásakor.
Az alkalmazások erőforrásaiban ezt általában egy XML-fájlon (például mipmap-anydpi-v26/ic_launcher.xml keresztül határozzák meg, amely egyszerűen a háttér és az előtér rajzaira mutat, nem pedig magát a pixeladatokat). A hagyományos lapos ic_launcher.png továbbra is tartalékként szerepel az Android 7.1 vagy korábbi verzióját futtató eszközökön, amelyek teljes mértékben megelőzték az adaptív ikonrendszert.
Miért számít a biztonságos zóna?
Ez az a rész, ami a legjobban megbotránkoztatja az embereket. Annak ellenére, hogy az egyes rétegek vászna 108 dp × 108 dp felbontású, csak a belső, 66 dp × 66 dp méretű kör, amely a vászon közepén látható, garantáltan látható, függetlenül attól, hogy melyik maszk alakzatot alkalmazzák. Ezt a belső régiót általában biztonságos zónának nevezik. Bármi, ami rajta kívül van, megjelenhet egy kör alakú maszkon, majd hirtelen rápattan egy agresszívabb squirrel vagy könnycsepp maszkra, vagy fordítva.
Pontosan ez a fajta probléma akkor jelentkezik, ha egy logót a vászon széleihez közel húznak a vizuális méretének maximalizálása érdekében: tökéletesnek tűnhet egy kör alakú maszkon, de egyenetlenül vágódik le a Samsung gömbölyű maszkján. A javítás nem újratervezés, csupán az alkotás enyhén összehúzása, így az értelmes tartalom a biztonságos zónán belül marad, függetlenül attól, hogy melyik formát alkalmazzák végül.
Launcher alakzatok, amelyekkel találkozni fog
| Alak | Ahol látni fogod |
|---|---|
| Kör | Stock Android, Pixel indító (régi alapértelmezett) |
| Squircle (lekerekített négyzet) | Samsung One UI és számos más Android skin |
| Lekerekített négyzet (szuperellipszis) | iOS, a rendszer automatikusan alkalmazza, fejlesztői felügyelet nélkül |
| Könnycsepp | Egyes Samsung szoftververzióknál választható opcióként kínálják |
| Négyzet, puha sarkokkal | Különféle más gyártói launcher skinek |
A gyakorlati tanulság az, hogy nem Ön dönti el, melyik formát ölti majd magára az ikonja. Az alap Android-indítóprogramok felhasználói gyakran még a beállítások menüből is kiválaszthatják a kívánt alakzatot. Az egyetlen valódi megoldás az, ha úgy tervezi meg a grafikát, hogy az minden maszkformában esztétikus maradjon – ezt garantálja a biztonságos zóna.
Eszközök építése: méretek és sűrűség, amire szüksége van
| Sűrűség vödör | Indító ikon mérete |
|---|---|
| mdpi | 48 x 48 px |
| hdpi | 72 x 72 képpont |
| xhdpi | 96 x 96 px |
| xxhdpi | 144 x 144 px |
| xxxhdpi | 192 x 192 px |
| Play Áruház adatlap ikonja | 512 x 512 px |
Ha iOS-en is szállítja az alkalmazást, adjon hozzá egy másik készletet, mivel az Apple App Store ikonra vonatkozó követelményei 1024x1024-esek, és teljesen más, nem réteges formátumot használnak, átlátszóság nélkül.
A kézi módszer vs a generátor használata
A méretek mindegyikét előállíthatja saját kezűleg egy képszerkesztőben, vagy az Android Studio beépített Image Asset Studio-ján keresztül, amely egyetlen projekthez ésszerűen jól kezeli a sűrűségskálázást és a maszk előnézetét. Ez akkor válik fárasztóvá, ha több alkalmazáson keresztül karbantart egy tervezőrendszert, egyező iOS-exportra van szüksége ugyanabból a mesteri alkotásból, vagy egyszerűen csak gyorsan szeretné ellenőrizni, hogyan viselkedik az egyes alakzatokban, mielőtt elkötelezi magát.
Generáljon minden méretet egyetlen mesterképből
A Alkalmazásikon-generátor egyetlen nagy felbontású forrásképet készít, és létrehozza az Android sűrűségű gyűjtőkészleteinek teljes készletét, az adaptív ikonok elő-/háttérszerkezetét és a Play Áruház adatlapjának méretét, mindezt egyetlen feltöltéssel, így nem kell manuálisan exportálni és átnevezni egy tucat fájlt.
Ikonok kinyerése egy meglévő APK-ból
Néha éppen az ellenkező irányú feladatra van szükség. Lehet, hogy örökölt egy projektet az eredeti tervfájlok nélkül, vagy pontosan szeretné látni, hogyan építette fel egy versenytárs az ikonját a sajátja megtervezése előtt, esetleg egyszerűen ki kell nyernie egy ikont egy lefordított APK-ból, hogy újra felhasználhassa egy kapcsolódó eszközben vagy marketinganyagban. Mivel az APK valójában egy strukturált archívum, amely az alkalmazás összes erőforrását tartalmazza, az indítóikonok fájljai fizikailag megtalálhatók benne, és közvetlenül kibonthatók ahelyett, hogy a nulláról kellene újraalkotni őket.
A Ikon Extractor pontosan ezeket a fájlokat húzza ki minden feltöltött APK-ból, így az eredeti fejlesztő által szállított felbontástól függetlenül biztosítja a nyers ikonelemeket, ami gyakran a leggyorsabb módja az elveszett forrásfájl helyreállításának, vagy annak tanulmányozásának, hogy egy másik alkalmazás hogyan közelítette meg ugyanazt a tervezési problémát.
Gyakori ikonhibák, amelyeket megjelölnek a felülvizsgálat során
- Sütés extra párnázatban vagy UI krómban. A képen belül kézzel hozzáadott vetett árnyék, szegély vagy lekerekített sarok effektus ütközik a rendszer saját maszkjával, és gyakran duplázottnak vagy rosszul igazítottnak tűnik.
- Tiszta fehér háttér használata, különálló él nélkül. A könnyű témájú indítóeszközökön az ikon szinte láthatatlanná válhat a kezdőképernyő hátterében.
- Túl finom részletek. Az 512 képponton élesnek tűnő szöveg és bonyolult vonalvezetés gyakran olvashatatlan szennyeződéssé válik, miután 48 képpontra kicsinyítik, és így látja a legtöbb felhasználó nap mint nap.
- Nem egyezik a Play Áruház adatlapikonja és a telepítő ikon között. A véleményezők és a felhasználók egyaránt észreveszik, ha ez a kettő nem egyezik, és ez hanyagnak vagy ami még rosszabb, gyanúsnak tűnik.
- Teljesen elfelejtve az örökölt tartalékot. Ha alkalmazásod továbbra is támogatja a 8.0 előtti Android-verziókat, a sima PNG tartalék kihagyása törött vagy általános kinézetű ikont hagyhat ezeknél a felhasználóknál.
Ikon tesztelése formákban a szállítás előtt
Mielőtt véglegesítene egy ikont, érdemes megnézni az előnézetet legalább egy kör alakú maszk és egy gömbmaszk mellett egymás mellett, ahelyett, hogy azt feltételeznénk, hogy tisztán fordítja le. Az Android Studio Image Asset Studioja pontosan ezért tartalmaz egy élő előnézetet több indítóalakzatról, és mindössze egy percbe telik, hogy elkapjunk egy olyan problémát, amely egyébként csak a közzététel után merülne fel, amikor a „rossz” indítóformát használó felhasználó visszajelzi, hogy valami nem látszik.
Kulcs elvitelek
- Az adaptív ikonok két réteget használnak, a hátteret és az előteret egy 108 dp-s vásznon, amelyeket a rendszer indítónként különböző alakzatokra maszkol.
- Only the inner 66dp safe zone is guaranteed visible across every mask shape; tartalmas műalkotásokat tartson benne.
- Az Android 7.1 vagy régebbi rendszert futtató eszközökön továbbra is szükség van egy lapos régi ikonra.
- A generátor minden szükséges sűrűséget és a Play Áruház listaméretét képes előállítani egyetlen mesterképből, jelentős kézi exportálási munkát megtakarítva ezzel.
- Az ikonok közvetlenül kinyerhetők egy meglévő APK-ból, ha a forrásfájlok elvesznek, vagy egy másik alkalmazás eszközeit kell tanulmányoznia.
Gyakran Ismételt Kérdések (GYIK)
Mekkora a tényleges pixelméret a Play Áruház adatlapikonjához?
512x512 pixel, 32 bites PNG alfa csatornával. Ez elkülönül az indítóikon méretétől, amely magában az APK-ban van csomagolva.
Az adaptív ikonom háttérrétegének egyszínűnek kell lennie?
Nem feltétlenül lapos szín, de általában átlátszatlannak és egyszerűnek kell lennie, mivel eltolni, méretezhető vagy maszkolni lehet olyan módon, amelyet nem teljesen irányít. Busy or transparent backgrounds tend to look inconsistent across launchers.
Használhatom újra az Android adaptív ikontervemet közvetlenül iOS rendszeren?
Nem közvetlenül. Az iOS egyetlen lapos, négyzet alakú képet használ a rendszer által alkalmazott saroklekerekítéssel, nem pedig külön rétegeket, így általában ugyanazon grafikák egyszerűsített, lapított változatát exportálja az iOS rendszerhez.
Miért néz ki jól az ikonom a telefonomon, de homályos a Play Áruház adatlapján?
Ez általában akkor fordul elő, ha a lista ikonját egy kis forrásképből méretezték fel. Mindig egy legalább 1024x1024 pixeles főfájlból induljon ki, és ettől kezdve exportálja le az összes szükséges méretet.
Mi történik, ha kihagyom a régi ikon visszaállítását a régebbi Android-verzióknál?
Az Android 7.1 vagy régebbi rendszert futtató eszközök, amelyek nem támogatják az adaptív ikonokat, visszaválthatnak egy általános rendszerikonra, vagy helytelenül jeleníthetik meg az ikont. Csak akkor biztonságos az átugrás, ha az alkalmazás minimálisan támogatott Android-verziója 8.0 vagy újabb.
Ehhez nincs szükség tervezéselméleti háttérre, csak annak tudatára, hogy az ikonját olyan módon alakítják át, ahogy Ön nem tudja irányítani, amint elhagyja a kezét. Tervezze meg a biztonságos zónát, tartsa meg az örökölt tartalékot, állítson elő minden szükséges méretet egyetlen tiszta főfájlból, és az ikonja kibírja, hogy melyik indítón érkezik.