Design af adaptive ikoner

Android O introducerer et nyt appikonformat: adaptive ikoner. Adaptive ikoner kan gøre enheder mere sammenhængende ved at forene formen på alle appikoner og åbne døren til interessante visuelle effekter. Dette indlæg forklarer, hvordan de arbejder, og udforsker nogle teknikker til at designe dem.

For at se tilbage på, hvor denne funktion er kommet fra, se:

Fundamentals

Størrelse og form

Adaptive ikoner er 108dp * 108dp i størrelse, men maskeres til maksimalt 72dp * 72dp. Forskellige enheder kan levere forskellige masker, der skal være konvekse i form og kan nå mindst 33dp fra midten på steder.

Eksempler på forskellige formede masker, der anvendes

På grund af den minimale rækkevidde af masken kan du betragte en centreret cirkel med en diameter på 66 dp som en sikker zone, hvilket garanteres ikke at blive klippet.

Sikker zone inden i en afrundet firkantet maske

Keylines

Ikon keylines

Nøgleformer er fundamentet for ikonet, hvilket hjælper dit ikons visuelle proportioner med at være i overensstemmelse med andre apps ikoner. Nøglelinjeformerne er:

  • Cirkler: 52 dp & 36 dp diameter
  • Firkant: 44dp * 44dp, 4dp hjørneradius
  • Rektangler: 52 dp * 36dp & 36dp * 52dp, 4dp hjørneradius

Se skabeloner inkluderet i slutningen af ​​denne artikel.

Lag

Adaptive ikoner består faktisk af to lag; en forgrund og en baggrund. Begge lag er 108 dp * 108dp; baggrunden skal være fuldstændig uigennemsigtig, mens forgrunden kan omfatte gennemsigtighed. Disse lag er stablet oven på hinanden.

Tilvejebringelse af elementer i to separate lag, der er større end den viste (dvs. maskerede) størrelse skaber mulighed for interessante visuelle behandlinger og animationer. Præcis hvilke effekter der kan anvendes, og hvornår er stadig noget af et åbent spørgsmål; det er op til enheds- og launcherproducenter at bestemme. Her er nogle enkle eksempler, du kunne forestille dig: parallax eller pulserende ved uafhængigt at oversætte eller skalere hvert lag, før du påfører masken.

Idet ikonerne på 108 dp * 108 dp maskeres op til 72 dp * 72 dp, kan den ydre 18 dp på hver side betragtes som det "ekstra" indhold, der kun afsløres under bevægelse.

Designovervejelser

Retningslinjerne for materialedesign til oprettelse af produktikoner gælder stadig meget. Specifikt forbliver ikonet anatomi, skygger og finish, men du kan nu placere elementer i enten forgrunds- eller baggrundslag med forskellige effekter.

Nu er jeg sikker på, at mange ikoner vil tjene godt ved at placere deres varemærke i forgrunden på en solid farvet baggrund og kalde det en dag. Dette vil sikre, at dit ikon passer godt ind på enheden. Det, der begejstrer mig, er, hvordan vi som samfund vil udforske disse nye begrænsninger og finde interessante, legende og innovative måder at skabe dejlige ikoner på. Her er et par ting, du skal huske på, og et par ideer til potentielt at udforske.

klipning

På grund af den dynamiske karakter af adaptive ikoner kan du ikke kende den nøjagtige maskeform, der vil blive anvendt. Af den grund er det bedst at placere kritiske elementer som dit varemærke inde i sikkerhedszonen og holde sig væk fra maskkanterne.

Forankring i baggrunden

At placere nogle elementer, der måske ser ud til at være i forgrunden, faktisk i baggrunden betyder, at de bevæger sig uafhængigt. For eksempel placerer lommeregnerappen de fleste elementer i forgrunden, men knappen er lig på accentfarveblokken i baggrunden:

Elementer på forskellige lag understreger lagdelingen

Dette skaber interessante bevægelsesmuligheder, hvor du visuelt forankrer den lyse farveblok, men det bevæger sig mindre end forgrundselementerne og skaber en fornemmelse af dybde.

Maskerede masker

Jeg tror, ​​at der kan være interessante muligheder for at placere maskerende elementer i forgrunden - det er solide elementer med områder, der er udskåret. Overvej et muligt ikon for Google Play Store, dette kan være konstrueret på en 'indlysende' måde, der placerer den farvede trekant i forgrunden ovenpå en hvid baggrund.

En 'standard' forgrund placeret oven på en hvid baggrund

I stedet for at gøre dette, kan vi bruge en farverig baggrund og en hvid forgrund med trekanten subtraheret til at producere den samme statiske output:

En alternativ farverig baggrund med maskerende forgrund

Denne opsætning tillader farverne 'kigger igennem' at bevæge sig uafhængigt af masken, der afslører forskellige dele af baggrunden, når de oversættes eller skaleres.

Venstre er en regelmæssig komposition; Højre med en maskerende forgrund

Lys & skygger

Samspillet mellem lyseffekter og skygger placeret i separate lag kan have interessante resultater. For eksempel kan brug af langskyggeteknikken på forgrundselementet have en legende interaktion, når den bevæger sig inden i det maskerede område. Tilsvarende kan lyseffekter placeres i forgrundslaget i stedet for at blive bagt i baggrunden. For eksempel kan et "finish" -lag placeres i forgrunden for at efterligne en lyskilde. At placere dette i forgrunden betyder, at det vil afspille over baggrundslaget, når det er i bevægelse, og bevæger sig i en anden hastighed end det.

Eksempel på forgrundsskygge og (overdrevet) lyskilde støbt på baggrunden

Vær forsigtig med ikke at oprette en effekt, der ikke giver mening, f.eks. en skygge, der løsnes fra et forgrundselement eller bevæger sig bag et baggrundselement. Husk også, at mange ikoner sandsynligvis ses sammen, så vær konservativ med skræddersyede lyseffekter og hold dig tæt på materialets retningslinjer.

Efterlad

Du kan placere elementer i baggrundslaget, som er helt skjult af forgrundslaget og kun afsløret under bevægelse.

Elementer afsløres kun under bevægelse

Ressourcer og værktøjer

Her er min skissefil, som du kan bruge som en skabelon, mens du opretter adaptive ikoner. Det inkluderer ikongitteret, nøglelinjeformer og sikkert område. Det er implementeret som et symbol, så ændring af masterelementet vil opdatere kopierne, så du får en forhåndsvisning med forskellige anvendte masker.

Jeg har også uploadet en Adobe Illustrator-skabelon, hvis det er mere din ting.

Tjek desuden disse andre ressourcer, jeg har stødt på:

  • Adaptivt ikon preview værktøj
  • Affinitetsdesignerskabelon
  • Bjango-skabeloner inkluderer adaptive ikoner
  • Figma skabelon (kræver login)
  • Adobe XD-skabelon

Adaptivt ikon Legeplads

Når jeg udvikler adaptive ikoner, har jeg forstået, at mange af subtiliteterne kommer fra interaktionen mellem forgrunds- og baggrundselementer, når der bruges bevægelseseffekter. Dette er stadig noget af et åbent spørgsmål, da vi endnu ikke kan se, hvordan enheds- og launcherproducenter vil implementere dette. For at hjælpe med at undersøge dette rum har jeg oprettet en lille testapp, der hjælper dig med at evaluere den, mens jeg opretter dit ikon:

Eksperimenter med masker og bevægelseseffekter anvendt på dine ikoner

Appen viser alle applikationer, der er installeret på din enhed med adaptive ikoner. Rulning af gitteret anvender parallakseffekter på ikonerne, og ved at berøre et ikon anvendes en skaleringseffekt. Du kan konfigurere styrken af ​​effekterne og ændre den maske, der er anvendt på alle ikoner. Forhåbentlig hjælper dette værktøj dig med at forestille dig, hvordan dit ikon vil vises og kan bevæge sig på forskellige enheder.

Du kan downloade en APK eller check kilden på github:

Gå frem og tilpas dig

Forhåbentlig har dette indlæg givet dig både information og inspiration til at designe et fantastisk adaptivt ikon til din app. Som bruger kan jeg ikke vente på, at mine apps bliver mere sammenhængende. Hvad der dog begejstrer mig endnu mere, er at se, hvilke kreative løsninger vi kommer frem til som samfund.

Hvis du er en udvikler, der ønsker at opbygge et adaptivt ikon, skal du slutte mig til del 3: Implementere adaptive ikoner.