Att skapa produktikoner är inte så svårt som det kan verka vid första anblicken. Ta reda på mer om att designa din första Android-appikon från början!
Oavsett vilken marknadsplats eller tjänst en app distribueras genom, är dess appikon det första en potentiell användare skulle lägga märke till. Första intrycket är av största vikt när man försöker få nya användare, vilket betyder att ikoner är nyckelkomponenter i alla program. Och, oavsett avsikten med appen, bör skapa en vacker applikationsikon vara en viktig del av varje apps utvecklingsfas. Även om många utvecklare av tekniska applikationer lämnar grafiken till hängivna designers, förstå grunderna för design och tillämpning av dem är något vem som helst kan göra, med tanke på en förmåga att experimentera och analys. Appikoner är inget undantag!
Den här guiden går igenom skapandet av en adaptiv ikon för ett exempel på Android-app med öppen källkod. Även om slutresultatet kanske inte är i det format du kan behöva, kommer många av designtipsen som diskuteras här att gälla på flera plattformar.
Efter lanseringen av "adaptiva ikoner" med Android Oreo kan en appikon bestå av tre grundläggande lager: en ogenomskinligt bakgrundslager, ett förgrundslager med insynsstöd, och en mask som definierar ikonens form. Alla dessa lager är 108 x 108 dp i storlek, även om endast de inre 72 x 72 dp kan vara synliga för användaren; den andra regionen, bortskuren av masken ovanpå, används för specialeffekter inom användargränssnittet för att få ikonen att se dynamisk ut. För den oinvigde, dp eller skärmoberoende pixel står som en mätenhet för alla Androids gränssnitt och definieras till att vara lika med storleken på en pixel på en skärm med 160 punkter per tum.)
Nick Butcher från Google pratar om en cirkel på 66 dp i mitten av ikonen som ingen mask kan klippa bort, kallad "säkra zonen". Det är här de primära delarna av vår ikondesign kommer att sitta senare, när vi kommer till själva designen. Allt utöver denna radie på 33 dp kanske inte syns i ikonen när den har en formmask på.
Eftersom ikoner är bättre att vara vektorbilder på grund av UI-skalning, kommer vi att behöva en vektorgrafikredigerare för att göra vår ikon. Inkscape är öppen källkod och ett bra alternativ till dyrare programvara, så det kommer att vara vårt val för den här handledningen. Jag har också designat en projektfil tillgänglig här som har den säkra zonen och Googles egen designnyckellinje markerad, och en snygg lagermask som låter oss förhandsgranska ikonens form.
Med projektfilen öppnad i Inkscape och Fyll och stryk (Skift+Ctrl+F), Exportera PNG-bild (Skift+Ctrl+E), och Skikten (Skift+Ctrl+L) öppnas, vi är redo att börja. Panelen Lager är där projektets kött finns, med Förgrund och Bakgrund lager avsedda att inrymma deras titulära komponenter, och Riktlinjer och Mask avsedda att slås på och av (genom att klicka på den lilla ögatikonen bredvid dem) för referens.
En ikon är ett uttryck för en apps identitet. Som sådan måste den innehålla både karaktären hos appens personlighet och plattformsspecifika designriktlinjer, som de som Androids Material designspråk har att erbjuda. För demonstrationsändamål, låt oss anta att vi arbetar med en väderapp som använder materialelement. Vi skulle kunna använda det klassiska sol-och-moln-motivet för att informera en användare om syftet med appen, och lägga lite snurra på denna grundläggande design med hjälp av skuggor och geometri för att få den att smälta in väl i sin Android-miljö.
Bakgrund
Låt oss börja med att sätta upp bakgrunden, som kommer att bestå av en blå himmel och en gul sol i mitten. Vändning Mask osynlig, jag väljer och gör synlig Bakgrundslager, fyll hela duken med Skapa rektanglar och fyrkanter verktyg (F4) och ställ in fyllningsfärgen för rektangeln Fyll och stryk till 64B5F6FF (en ljusblå) i enlighet med Material färgpalett. Jag väljer sedan Skapa cirklar, ellipser och bågar (F5) och håll nere Skift och Ctrl, rita en cirkel från mitten av tangentlinjen till den näst största cirkeln och ställ in dess färg på FFEE58FF, vilket ger oss en varm liten sol. Det är alltid bra att hålla sig till grundläggande geometri i någon form av design, och Androids designspråk i synnerhet uppmuntrar enkelhet. För att följa materialriktlinjerna ger jag också solen en subtil skugga igenom Filter → Skuggor och glöd → Skugga.
Förgrund
Kommer till Förgrund, Jag ritar en grupp moln runt solen genom att rita cirklar från omkretsen av andra cirklar, och ger dem alla fyllningsfärgen EEEEEEFF. Jag grupperar sedan cirklarna på lämpligt sätt genom att högerklicka på flera objekt och välja Grupp, och kör skugggeneratorn på de två slutliga formerna jag får till slut. Vändning Riktlinjer osynlig och växlande Förgrund och Bakgrund alternativt kan de ingående lagren av vår väderapps ikon ses. Om appens ikon någonsin dras över en startskärm kommer molnen att falla mot en stillastående sol!
Resultat
Mask kan nu göras synlig och justeras med Redigera sökvägar efter noder (F2) för att försöka simulera olika formmasker. De två lagren kan också exporteras separat med hjälp av Exportera PNG-bild panel för användning i Android Studio, och tillsammans för en Google Play-ikon.
När du bygger en produktikon är det alltid bra att försöka ta ett programs syfte, destillera det till dess mest abstrakta visuella form och representera det med enkel geometri. Ju enklare en komponent i designen är, desto bättre och mer tillförlitlig fungerar den vanligtvis, och detta gäller även i grafisk design. För de flesta ändamål, en objektform i förgrunden och en enfärgad eller ett mönster i bakgrunden (eller vice versa) fungerar alldeles utmärkt, men som i vårt exempel kan ett annat lager av föremål användas om det känns nödvändig; för mycket stapling eller användning av skuggor kommer bara att komplicera ikonens design.
Du kan läsa mer om ikondesign i Materialgränssnitt på den officiella Materialwebbplats, och ta gratis systemikoner för användning i ikondesign från samma webbplats.