Oblikovanje prilagodljivih ikon

Android O uvaja novo obliko ikone aplikacije: prilagodljive ikone. Prilagodljive ikone lahko naredijo naprave bolj skladne, če poenotijo ​​obliko vseh ikon aplikacij in odprejo vrata zanimivim vizualnim učinkom. Ta objava razlaga, kako delujejo, in raziskuje nekatere tehnike njihovega oblikovanja.

Če si želite ogledati, od kod prihaja ta funkcija, glejte:

Osnove

Velikost in oblika

Prilagodljive ikone so v velikosti 108dp * 108dp, vendar so maskirane do največ 72dp * 72dp. Različne naprave lahko dobavljajo različne maske, ki morajo biti konveksne oblike in od mesta lahko dosežejo najmanj 33dp.

Primeri različnih oblikovanih mask

Zaradi najmanjšega dosega maske lahko osrednji krog premera 66 dp štejete za varno cono, za katero ni zagotovljeno, da bo obrezana.

Varna cona znotraj zaobljene kvadratne maske

Keilini

Ikona keiline

Oblike ključavnic so temelj mreže ikon, s čimer so vidni deleži ikone skladni z ikonami drugih aplikacij. Ključne oblike so:

  • Krogi: premer 52dp in 36dp
  • Kvadrat: 44dp * 44dp, 4dp kotni polmer
  • Pravokotniki: 52dp * 36dp & 36dp * 52dp, 4dp kotni polmer

Oglejte si predloge, ki so na koncu tega članka.

Sloji

Prilagodljive ikone so dejansko sestavljene iz dveh slojev; ospredje in ozadje. Obe plasti sta 108dp * 108dp; ozadje mora biti popolnoma neprozorno, v ospredju pa je lahko preglednost. Te plasti so zložene ena na drugo.

Zagotavljanje elementov v dveh ločenih slojih, ki so večji od prikazane (tj. Maskirane) velikosti, ustvarjajo priložnost za zanimive vizualne obdelave in animacije. Kaj natančno lahko učinkujete in kdaj je še odprto vprašanje; odvisno je od proizvajalcev naprav in izstrelnikov. Tu je nekaj preprostih primerov, ki si jih lahko zamislite: paralaksa ali pulziranje s samostojnim prevajanjem ali skaliranjem vsake plasti pred nanašanjem maske.

Ker so ikone 108dp * 108dp zamaskirane do 72dp * 72dp, se lahko zunanja 18dp na vsaki strani šteje za "dodatno" vsebino, ki se razkrije le med gibanjem.

Oblikovalske premisleki

Smernice oblikovanja materiala za ustvarjanje ikon izdelkov še vedno zelo veljajo. Zlasti anatomija ikon, sence in zaključek ikone ostanejo, vendar lahko elemente zdaj postavite v podlage ali plasti ozadja, ki prinašajo različne učinke.

Zdaj sem prepričan, da bodo številne ikone dobro postregle, če bodo postavile svojo blagovno znamko v ospredje na trdnem barvnem ozadju in jo poklicale na dan. Tako boste zagotovili, da se vaša ikona dobro prilega napravi. Navdušuje me to, kako bomo kot skupnost raziskovali te nove omejitve in našli zanimive, igrive in inovativne načine, kako narediti čudovite ikone. Tu je nekaj stvari, ki jih morate upoštevati, in nekaj idej, ki bi jih potencialno lahko raziskali.

Rezanje

Zaradi dinamične narave prilagodljivih ikon ne morete vedeti natančne oblike maske, ki jo boste uporabili. Zaradi tega je najbolje, da vse kritične elemente, kot je blagovna znamka, postavite znotraj varne cone in da se ne držite stran robov maske.

Sidranje ozadja

Če v ospredje postavite nekatere elemente, ki se zdijo v ospredju, dejansko v ozadju pomeni, da se bodo premikali neodvisno. Na primer, aplikacija kalkulatorja postavi večino elementov v ospredje, vendar je gumb enak na barvnem bloku naglas v ozadju:

Elementi v različnih plasteh poudarjajo plastenje

To ustvarja zanimive priložnosti za gibanje, kjer se vizualno zasidrate na svetlem barvnem bloku, vendar se premakne manj kot prednji elementi in ustvari občutek globine.

Zamaskirane maske

Mislim, da so lahko zanimive možnosti za postavitev maskirnih elementov v ospredje - to so trdni elementi z izrezanimi območji. Razmislite o možni ikoni za trgovino Google Play, ki je lahko sestavljena na "očiten" način, tako da obarva trikotnik v ospredje na belo ozadje.

Standardno prednje podlago je postavljeno na belo ozadje

Namesto da bi to naredili, lahko uporabimo barvno ozadje in belo sprednje podlago s trikotnikom, ki odštejemo, da dobimo enak statični izhod:

Nadomestno barvno ozadje z maskirnim ospredjem

Ta nastavitev bi omogočila, da se barve "pokukajo skozi" premikajo neodvisno od maske, ki razkriva različne dele ozadja, ko so prevedene ali pomanjšane.

Levo je redna sestava; Ravno z maskirnim ospredjem

Svetloba in sence

Interakcija svetlobnih efektov in senc v ločenih slojih ima lahko zanimive rezultate. Na primer uporaba tehnike dolge sence na sprednjem elementu ima lahko igrivo interakcijo, ko se giblje znotraj maskiranega območja. Podobno svetlobni efekti se lahko namestijo v prednji sloj, namesto da se zapečejo v ozadje. Na primer, v ospredje lahko postavite sloj zaključka, da posnemate svetlobni vir. Če to postavite v ospredje, to pomeni, da se bo med gibanjem igrala čez plast ozadja, pri čemer se bo premikala z drugačno hitrostjo.

Primer osrednje sence in (pretiranega) vira svetlobe v ozadju

Pazite, da ne ustvarite učinka, ki nima smisla, npr. senca, ki se loči od prednjega elementa ali se giblje za ozadjem. Ne pozabite tudi, da je veliko ikon verjetno videti skupaj, zato bodite konzervativni z ustreznimi svetlobnimi učinki in se držite smernic materiala.

Pustite zadaj

V plast ozadja lahko postavite elemente, ki jih plast sprednjega spredaj popolnoma zasenči in se razkrijejo le v gibanju.

Elementi se razkrivajo le v gibanju

Viri in orodja

Tu je moja skica, ki jo lahko uporabite kot predlogo, medtem ko ustvarjate prilagodljive ikone. Vključuje mrežo ikon, oblike ključnice in varno območje. Izveden je kot simbol, zato bo sprememba glavnega elementa posodobila kopije in vam omogočila predogled z različnimi uporabljenimi maskami.

Naložil sem tudi predlogo Adobe Illustrator, če je to več vaša stvar.

Poleg tega si oglejte še druge vire, ki jih naletim:

  • Prilagodljivo orodje za predogled ikon
  • Predloga oblikovalca afinitete
  • Predloge Bjango vključujejo prilagodljive ikone
  • Predloga Figma (zahteva prijavo)
  • Predloga Adobe XD

Igralno igrišče Adaptive Icon

Pri razvijanju prilagodljivih ikon sem spoznal, da mnoge tankosti izvirajo iz interakcije prednjih in okončnih elementov, ko se uporabljajo učinki gibanja. To je še vedno odprto vprašanje, saj še ne bomo videli, kako bodo proizvajalci naprav in izstrelnikov to izvedli. Za lažje raziskovanje tega prostora sem ustvaril majhno testno aplikacijo, ki vam bo pomagala oceniti, ko ustvarite ikono:

Eksperimentirajte z maskami in gibalnimi učinki, ki se nanašajo na vaše ikone

Aplikacija prikazuje vse aplikacije, nameščene v vaši napravi, s prilagodljivimi ikonami. Če se pomaknete po mreži, se na ikone uporabijo učinki paralakse, z dotikom ikone pa se uporablja učinek lestvice. Konfigurirate lahko moč učinkov in spremenite masko, uporabljeno za vse ikone. Upajmo, da vam bo to orodje pomagalo predvideti, kako se bo vaša ikona prikazala in kako se lahko premika v različnih napravah.

Lahko prenesete APK ali si ogledate vir na githubu:

Pojdite naprej in se prilagodite

Upajmo, da vam je ta objava dala informacije in nekaj navdiha za oblikovanje odlične prilagodljive ikone za vašo aplikacijo. Kot uporabnik komaj čakam, da bodo moje aplikacije postale bolj skladne. Kar me še bolj navdušuje, je videti, kakšne ustvarjalne rešitve se lotimo kot skupnost.

Če ste razvijalec, ki želi sestaviti prilagodljivo ikono, se mi pridružite v 3. delu: Implementacija prilagodljivih ikon.