At skabe produktikoner er ikke så svært, som det kan se ud ved første øjekast. Få mere at vide om at designe dit første Android-appikon fra bunden!
Uanset hvilken markedsplads eller tjeneste en app distribueres gennem, er dens app-ikon det første, en potentiel bruger vil bemærke. Førstehåndsindtryk er af altafgørende betydning, når man forsøger at få nye brugere ind, hvilket betyder, at ikoner er nøglekomponenter i enhver applikation. Og uanset hensigten med appen, bør skabelsen af et smukt applikationsikon være en vigtig del af enhver apps udviklingsfase. Selvom mange udviklere af tekniske applikationer overlader grafikken til dedikerede designere, forstår de grundlæggende design og anvendelse af dem er noget alle kan gøre, givet en evne til at eksperimentere og analyse. App-ikoner er ingen undtagelse!
Denne vejledning gennemgår oprettelsen af et adaptivt ikon til en eksempel Android-app ved hjælp af open source-software. Selvom slutresultatet muligvis ikke er i det format, du måske har brug for, vil mange af de designtips, der er diskuteret her, være gældende på tværs af flere platforme.
Efter udgivelsen af "adaptive ikoner" med Android Oreo kan et app-ikon bestå af tre grundlæggende lag: en uigennemsigtigt baggrundslag, et forgrundslag med støtte til gennemsigtighed, og en maske der definerer ikonets form. Alle disse lag er 108 x 108 dp i størrelse, selvom kun de indre 72 x 72 dp kan være synlige for brugeren; den anden region, skåret væk af masken på toppen, bruges til specialeffekter i brugergrænsefladen for at få ikonet til at se dynamisk ud. For de uindviede, dp eller display-uafhængig pixel står som en måleenhed for hele Androids grænseflade og er defineret til at være lig med størrelsen af en pixel på en 160 punkter pr. tomme skærm.)
Nick Butcher fra Google taler om en 66 dp cirkel i midten af ikonet, som ingen maske kan klippe væk, kaldet "sikker zone". Det er her de primære elementer i vores ikondesign vil sidde senere, når vi kommer til selve designen. Alt ud over denne radius på 33 dp er muligvis ikke synligt i ikonet, mens det har en formmaske på.
Da ikoner er bedre stillet til at være vektorbilleder på grund af UI-skalering, skal vi bruge en vektorgrafikeditor til at lave vores ikon. Inkscape er open source og et godt alternativ til dyrere software, så det vil være vores valg i forbindelse med denne tutorial. Jeg har også designet en projektfil tilgængelig her der har den sikre zone og Googles egen designnøglelinje markeret og en smart lagmaske, der lader os se ikonets form.
Med projektfilen åbnet i Inkscape og Fyld og slag (Shift+Ctrl+F), Eksporter PNG-billede (Shift+Ctrl+E), og Lag (Shift+Ctrl+L)-paneler åbner, vi er klar til at komme i gang. Lagpanelet er, hvor projektets kød ligger, med Forgrund og Baggrund lag beregnet til at huse deres titulære komponenter, og Retningslinier og Maske beregnet til at blive slået til og fra (ved at klikke på det lille øje-ikon ved siden af dem) som reference.
Et ikon er et udtryk for en apps identitet. Som sådan skal den inkorporere både karakteren af appens personlighed og platformsspecifikke designretningslinjer, som dem Androids Materiale designsprog har at byde på. Med henblik på demonstration, lad os antage, at vi arbejder på en vejr-app, der bruger materialeelementer. Vi kunne bruge det klassiske sol-og-sky-motiv til at informere en bruger om formålet med appen, og sætte lidt spin på dette grundlæggende design ved hjælp af skygger og geometri for at få det til at passe godt ind i dets Android-miljø.
Baggrund
Lad os begynde med at sætte baggrunden op, som vil bestå af en blå himmel og en gul sol i midten. Drejning Maske usynlig, vælger og synliggør jeg Baggrundslag, fyld hele lærredet med Lav rektangler og firkanter værktøj (F4), og indstil rektanglets fyldfarve Fyld og slag til 64B5F6FF (en lyseblå) i overensstemmelse med Materiale farvepalet. Jeg vælger så Opret cirkler, ellipse og buer (F5) værktøj, og hold Shift og Ctrl nede, tegn en cirkel fra midten af nøglelinjen til den næststørste cirkel, og indstil dens farve til FFEE58FF, hvilket giver os en varm lille sol. Det er altid godt at holde sig til grundlæggende geometri i enhver form for design, og især Androids designsprog tilskynder til enkelhed. For at overholde Materiale-retningslinjerne giver jeg også solen en subtil skygge igennem Filtre → Skygger og gløder → Slagskygge.
Forgrund
Kommer til forgrunden, Jeg tegner en gruppe skyer rundt om solen ved at tegne cirkler fra andre cirklers omkreds, og giver dem alle en fyldfarve af EEEEEEFF. Jeg grupperer derefter cirklerne passende ved at højreklikke på flere objekter og vælge Gruppe, og kør skyggegeneratoren på de to endelige former, jeg opnår til sidst. Drejning Retningslinier usynlig og skiftende Forgrund og Baggrund alternativt kan de konstituerende lag af vores vejrapps ikon ses. Hvis appens ikon nogensinde trækkes hen over en startskærm, vil skyerne vælte mod en stationær sol!
Resultat
Maske kan nu gøres synlige og justeres med Rediger stier efter noder (F2) for at prøve at simulere forskellige formmasker. De to lag kan også eksporteres separat ved hjælp af Eksporter PNG-billede panel til brug i Android Studio, og sammen i en Google Play-ikon.
Mens du bygger et produktikon, er det altid en god praksis at prøve at tage et programs formål, destillere det til dets mest abstrakte visuelle form og repræsentere det ved hjælp af simpel geometri. Jo enklere en komponent i design er, jo bedre og mere pålidelig fungerer den normalt, og det gælder også i grafisk design. Til de fleste formål er en genstandsform i forgrunden og en ensfarvet eller et mønster i baggrunden (eller omvendt) fungerer fint, men ligesom i vores eksempel kan et andet lag af genstande bruges, hvis det føles nødvendig; for meget stabling eller brug af skygger vil kun komplicere ikonets design.
Du kan læse mere om ikondesign i Materialegrænseflader på den officielle Materiale hjemmeside, og få fat i gratis systemikoner til brug i ikondesign fra samme hjemmeside.