Een praktische gids voor Android-app-pictogrammen: adaptieve pictogrammen uitgelegd (en hoe u de uwe correct kunt genereren)
Het is een veel voorkomende verrassing voor beginnende Android-ontwikkelaars: je polijst een enkele vierkante PNG voor je app-pictogram, exporteert deze naar een nette 512x512, en het ziet er perfect uit in je afbeeldingseditor. Vervolgens installeer je een debug-build op een Samsung-telefoon en ziet het pictogram er plotseling uitgesnedenigszins uit het midden uit, alsof een deel van het logo is weggehakt. Met het bestand zelf is niets mis. Het probleem is dat één enkel vierkant beeld nooit het contact met de echte wereld van Android-draagraketten zou overleven, die elk pictogrammen anders bijsnijden, maskeren en opnieuw vormgeven. Als u dit nog niet bent tegengekomen, is het slechts een kwestie van tijd voordat u dit wel tegenkomt, dus laten we eens kijken wat er onder de motorkap gebeurt en hoe u dit de eerste keer goed kunt doen.
Waarom een enkele vierkante PNG niet meer genoeg is
In de beginjaren van Android waren app-pictogrammen precies zoals ze eruit zagen: een enkel vierkant (of soms vrij gevormd) PNG-bestand dat in elk opstartprogramma werd weergegeven zoals het is. Dat werkte prima totdat fabrikanten hun telefoons visueel gingen differentiëren, en een van de gemakkelijkste plekken om dat te doen was het startscherm. Samsung wilde afgeronde vierkanten, sommige Chinese OEM-skins wilden verschillende hoekbehandelingen en stock-Android koos uiteindelijk voor cirkels. Plots zag exact hetzelfde pictogrambestand er merkbaar anders uit, en soms zichtbaar slechter, afhankelijk van op wiens telefoon het terechtkwam.
Het antwoord van Google, geïntroduceerd met Android 8.0 Oreo, was het adaptieve pictogramsysteem. In plaats van één vaste vorm aan te bieden, bieden ontwikkelaars gelaagde illustraties die het besturingssysteem zelf maskeert in de vorm die een bepaald opstartprogramma verkiest. De visuele identiteit blijft consistent; alleen het buitenste silhouet verandert.
Wat is precies een adaptief pictogram?
Een adaptief pictogram is opgebouwd uit twee afzonderlijke lagen, die elk een canvas van 108 dp bij 108 dp beslaan: een achtergrondlaag en een voorgrondlaag. Android voegt de twee samen en past vervolgens de maskervorm toe die het huidige opstartprogramma gebruikt, of dat nu een cirkel, een afgerond vierkant, een traan of iets heel anders is. Dankzij de tweelaagse structuur kan Android ook subtiele parallax- en bewegingseffecten toevoegen, omdat de lagen onafhankelijk kunnen verschuiven wanneer je op een pictogram tikt of sleept.
In de bronnen van een app wordt dit meestal gedefinieerd via een XML-bestand zoals mipmap-anydpi-v26/ic_launcher.xml, dat eenvoudigweg naar de achtergrond- en voorgrondtekens verwijst in plaats van dat het zelf pixelgegevens bevat. Een traditionele platte ic_launcher.png wordt nog steeds gebruikt als reserve voor apparaten met Android 7.1 of eerder, die volledig dateren van vóór het adaptieve pictogramsysteem.
Waarom de veilige zone belangrijk is
Dit is het deel waar mensen het meest over struikelen. Hoewel het canvas voor elke laag 108 dp bij 108 dp is, is alleen de binnenste cirkel van 66 dp bij 66 dp, gecentreerd in dat canvas, gegarandeerd zichtbaar, ongeacht welke maskervorm wordt toegepast. Dit binnengebied wordt gewoonlijk de veilige zone genoemd. Alles daarbuiten kan op een rond masker worden weergegeven en vervolgens abrupt op een agressiever cirkel- of traanmasker worden geknipt, of omgekeerd.
Dit is precies het soort probleem dat zich voordoet wanneer een logo dicht bij de randen van het canvas wordt getekend om de visuele grootte te maximaliseren: het kan er perfect uitzien op een rond masker, maar ongelijkmatig worden geknipt op het cirkelvormige masker van Samsung. De oplossing is geen herontwerp, maar een iets kleiner ontwerp van de illustraties, zodat de betekenisvolle inhoud binnen de veilige zone blijft, ongeacht welke vorm uiteindelijk wordt toegepast.
Launcher-vormen die u tegenkomt
| Vorm | Waar je het zult zien |
|---|---|
| Cirkel | Stock Android, Pixel Launcher (de al lang bestaande standaard) |
| Squircle (afgerond vierkant) | Samsung One UI en verschillende andere Android-skins |
| Afgerond vierkant (superellips) | iOS, automatisch toegepast door het systeem zonder controle van de ontwikkelaar |
| Traan | Aangeboden als selecteerbare optie op sommige Samsung-softwareversies |
| Vierkant met zachte hoeken | Diverse launcher-skins van andere fabrikanten |
De praktische afhaalmogelijkheid is dat u niet kunt kiezen welke van deze vormen uw pictogram uiteindelijk draagt. Gebruikers van standaard Android-draagraketten kunnen vaak zelfs hun favoriete vorm kiezen in een instellingenmenu. Je enige echte hefboom is ervoor te zorgen dat het kunstwerk zelf ze allemaal gracieus overleeft, en dat is precies wat de veilige zone moet garanderen.
Het bouwen van de activa: maten en dichtheden die u nodig heeft
| Dichtheid emmer | Grootte van het opstartprogrammapictogram |
|---|---|
| mdpi | 48 x 48 pixels |
| hdpi | 72 x 72 pixels |
| xhdpi | 96 x 96 pixels |
| xxhdpi | 144 x 144 pixels |
| xxxhdpi | 192 x 192 pixels |
| Pictogram voor Play Store-vermelding | 512 x 512 pixels |
Als je de app ook op iOS levert, voeg dan nog een set volledig toe, aangezien Apple's App Store-pictogramvereisten uitkomen op 1024x1024 en een compleet ander, niet-gelaagd formaat gebruiken zonder enige transparantie.
De handmatige manier versus het gebruik van een generator
Je kunt al deze formaten absoluut met de hand produceren in een afbeeldingseditor, of via de ingebouwde Image Asset Studio van Android Studio, die de dichtheidsschaal en maskervoorbeelden redelijk goed voor een enkel project afhandelt. Waar dit vervelend wordt, is wanneer je een ontwerpsysteem voor meerdere apps onderhoudt, bijpassende iOS-exports van hetzelfde meesterwerk nodig hebt, of gewoon een snelle manier wilt om te controleren hoe een ontwerp zich in elke vorm gedraagt voordat je je eraan vastlegt.
Genereer elk formaat vanuit één masterafbeelding
Onze App-pictogramgenerator neemt een enkele bronafbeelding met hoge resolutie en produceert de volledige set Android-dichtheidsbuckets, de adaptieve pictogramvoorgrond-/achtergrondstructuur en de Play Store-vermeldingsgrootte, allemaal vanuit één upload, zodat u niet handmatig een tiental bestanden hoeft te exporteren en hernoemen.
Pictogrammen uit een bestaande APK extraheren
Soms loopt de behoefte in de tegenovergestelde richting. Misschien heb je een project geërfd zonder de originele ontwerpbestanden, of wil je precies zien hoe een concurrent zijn pictogram heeft gestructureerd voordat hij je eigen pictogram ontwerpt, of moet je eenvoudigweg een pictogram terughalen uit een ingebouwde APK om het opnieuw te gebruiken in een gerelateerde tool of marketingmiddel. Omdat een APK in feite een gestructureerd archief is dat alle bronnen van een app bevat, zijn de pictogrambestanden van het opstartprogramma fysiek aanwezig in de app en kunnen ze direct worden geëxtraheerd, in plaats van helemaal opnieuw te worden opgebouwd.
Onze Pictogramextractor haalt precies deze bestanden uit elke APK die u uploadt, waardoor u de onbewerkte pictogramitems krijgt in welke resolutie de oorspronkelijke ontwikkelaar ook heeft geleverd, wat vaak de snelste manier is om een verloren bronbestand te herstellen of te bestuderen hoe een andere app hetzelfde ontwerpprobleem benaderde.
Veel voorkomende pictogramfouten die tijdens de beoordeling worden gemarkeerd
- Bakken in extra vulling of UI-chroom. Een slagschaduw-, rand- of afgerond-hoekeffect dat handmatig in de afbeelding wordt toegevoegd, is in strijd met de eigen maskering van het systeem en ziet er vaak dubbel uit of is niet goed uitgelijnd.
- Gebruik een puur witte achtergrond zonder duidelijke rand. Op draagraketten met een licht thema kan het pictogram vrijwel onzichtbaar worden tegen de achtergrond van het startscherm.
- Overdreven fijne details. Tekst en ingewikkeld lijnwerk dat er bij 512px scherp uitziet, verandert vaak in een onleesbare vlek zodra het wordt verkleind naar 48px, zoals de meeste gebruikers het dagelijks zien.
- Een mismatch tussen het Play Store-vermeldingspictogram en het pictogram dat wordt geïnstalleerd. Recensenten en gebruikers merken het allebei als deze twee niet overeenkomen, en het leest als slordig of, erger nog, verdacht.
- We vergeten de erfenis uit het verleden volledig. Als uw app nog steeds Android-versies vóór 8.0 ondersteunt, kan het overslaan van de platte PNG-fallback ervoor zorgen dat deze gebruikers een kapot of algemeen uitziend pictogram krijgen.
Uw pictogram op verschillende vormen testen voordat u het verzendt
Voordat u een pictogram definitief maakt, is het de moeite waard om er een voorbeeld van te bekijken onder ten minste een rond masker en een cirkelvormig masker naast elkaar, in plaats van aan te nemen dat het netjes zal worden vertaald. Image Asset Studio van Android Studio bevat om precies deze reden een live preview van verschillende launcher-vormen, en het duurt slechts een minuut om een probleem op te sporen dat anders pas na publicatie aan de oppervlakte zou komen, wanneer een gebruiker met de "verkeerde" launcher-vorm terugmeldt dat er iets niet klopt.
Belangrijkste afhaalrestaurants
- Adaptieve pictogrammen gebruiken twee lagen, achtergrond en voorgrond, op een canvas van 108 dp, dat het systeem per opstartprogramma in verschillende vormen maskeert.
- Alleen de binnenste veilige zone van 66 dp is gegarandeerd zichtbaar in elke maskervorm; bewaar betekenisvolle kunstwerken erin.
- Voor apparaten met Android 7.1 of eerder heeft u nog steeds een plat verouderd pictogram nodig.
- Een generator kan elke vereiste dichtheid en de Play Store-vermeldingsgrootte uit één masterafbeelding produceren, waardoor aanzienlijk handmatig exportwerk wordt bespaard.
- Pictogrammen kunnen rechtstreeks uit een bestaande APK worden geëxtraheerd wanneer bronbestanden verloren gaan of u de activa van een andere app moet bestuderen.
Veelgestelde Vragen (FAQ)
Wat is de werkelijke pixelgrootte die vereist is voor een Play Store-vermeldingspictogram?
512x512 pixels, een 32-bits PNG met een alfakanaal. Dit staat los van de afmetingen van het opstartpictogram die in de APK zelf zijn gebundeld.
Moet de achtergrondlaag van mijn adaptieve pictogram een effen kleur hebben?
Het is niet noodzakelijkerwijs een effen kleur, maar het moet over het algemeen ondoorzichtig en eenvoudig zijn, omdat het kan worden verschoven, geschaald of gemaskeerd op manieren die u niet volledig onder controle heeft. Drukke of transparante achtergronden zien er bij alle draagraketten vaak inconsistent uit.
Kan ik mijn adaptieve Android-pictogramontwerp rechtstreeks voor iOS hergebruiken?
Niet direct. iOS gebruikt een enkele platte vierkante afbeelding met hoekafronding die door het systeem wordt toegepast in plaats van afzonderlijke lagen. Daarom exporteert u doorgaans een vereenvoudigde, afgeplatte versie van hetzelfde artwork voor iOS.
Waarom ziet mijn pictogram er goed uit op mijn telefoon, maar is het wazig in de Play Store-vermelding?
Dit gebeurt meestal wanneer het vermeldingspictogram is opgeschaald vanuit een kleine bronafbeelding. Begin altijd met een hoofdbestand van minimaal 1024x1024 pixels en exporteer elk gewenst formaat van daaruit naar beneden.
Wat gebeurt er als ik de verouderde pictogramterugval voor oudere Android-versies oversla?
Apparaten op Android 7.1 of eerder, die geen adaptieve pictogrammen ondersteunen, kunnen terugvallen op een algemeen systeempictogram of uw pictogram onjuist weergeven. U kunt dit alleen veilig overslaan als de minimaal ondersteunde Android-versie van uw app 8.0 of hoger is.
Je hebt hiervoor geen achtergrond in ontwerptheorie nodig, alleen het besef dat je icoon een nieuwe vorm zal krijgen op manieren waar je geen controle over hebt op het moment dat het je handen verlaat. Ontwerp voor de veilige zone, behoud een ouderwetse fallback, genereer elke vereiste grootte uit één schoon hoofdbestand en uw pictogram blijft standhouden, ongeacht op welk opstartprogramma het terechtkomt.