Dizajn adaptivnih ikona

Android O uvodi novi format ikona aplikacije: prilagodljive ikone. Prilagodljive ikone mogu učiniti uređaj koherentnijim objedinjavanjem oblika svih ikona aplikacija i otvaranjem vrata zanimljivim vizualnim efektima. U ovom postu objavljeno je kako djeluju i istražuju se neke tehnike dizajniranja.

Pogled unatrag odakle dolazi ova značajka, pogledajte:

Osnove

Veličina i oblik

Prilagodljive ikone su veličine 108dp * 108dp, ali su maskirane na maksimalno 72dp * 72dp. Različiti uređaji mogu opskrbiti različite maske koje moraju biti konveksnog oblika i na mjestima mogu dosegnuti minimum 33dp.

Primjeri različitih maski koje se primjenjuju

Zbog minimalnog dosega maske, centrirani krug promjera 66 dp možete smatrati sigurnom zonom, zajamčeno da neće biti obrezana.

Sigurna zona unutar zaobljene kvadratne maske

Keylines

Ikone keiline

Oblici privjeska temelj su rešetke ikona pomažući da vizualne proporcije vaše ikone budu u skladu s ikonama drugih aplikacija. Oblici ključnih linija su:

  • Krugovi: promjera 52dp i 36dp
  • Kvadrat: 44dp * 44dp, 4dp polumjer kuta
  • Pravokutnici: 52dp * 36dp & 36dp * 52dp, kutni polumjer polumjera 4dp

Pogledajte predloške na kraju ovog članka.

slojevi

Prilagodljive ikone zapravo se sastoje od dva sloja; prednji plan i pozadina. Oba sloja su 108dp * 108dp; pozadina mora biti u potpunosti neprozirna, dok prvi plan može sadržavati transparentnost. Ti su slojevi složeni jedan na drugi.

Davanje elemenata u dva odvojena sloja koja su veća od prikazane (tj. Maskirane) veličine stvara priliku za zanimljive vizualne tretmane i animacije. Koji se efekti mogu primijeniti i kada je to još uvijek otvoreno pitanje; na proizvođačima uređaja i pokretača je da odluče. Evo nekoliko jednostavnih primjera koje možete zamisliti: paralaksa ili pulsiranje neovisnim prijevodom ili skaliranjem svakog sloja prije nanošenja maske.

Kako se ikone 108dp * 108dp maskiraju do 72dp * 72dp, vanjski se 18dp na svakoj strani može smatrati dodatnim sadržajem, otkrivenim samo tijekom pokreta.

Razmatranja dizajna

Smjernice za dizajn materijala za izradu ikona proizvoda i dalje se primjenjuju u velikoj mjeri. Naime, ostaju anatomija, sjene i završna obrada ikona, ali elemente sada možete smjestiti u prednji ili drugi sloj koji daju različite efekte.

Sada sam siguran da će se mnoge ikone dobro poslužiti stavljanjem svog znaka marke u prvi plan na pozadini u boji i nazvavši ga danom. To će osigurati da se vaša ikona dobro uklapa na uređaj. Ono što me uzbuđuje je kako ćemo kao zajednica istraživati ​​ta nova ograničenja i pronaći zanimljive, razigrane i inovativne načine izrade dopadljivih ikona. Evo nekoliko stvari koje morate imati na umu i nekoliko ideja koje možete potencijalno istražiti.

isječak

Zbog dinamične prirode prilagodljivih ikona, ne možete znati točan oblik maske koji ćete primijeniti. Iz tog je razloga najbolje kritične elemente poput marke staviti na sigurnu zonu i držati se podalje od rubova maske.

Pozadinsko sidrenje

Postavljanje nekih elemenata koji se mogu činiti u prvom planu, zapravo u pozadini znači da će se oni kretati neovisno. Na primjer, aplikacija kalkulatora postavlja većinu elemenata u prvi plan, ali gumb je jednak na bloku akcentne boje u pozadini:

Elementi na različitim slojevima naglašavaju slojevitost

To stvara zanimljive prilike za kretanje gdje se vizualno usidrite na bloku svijetle boje, ali se kreće manje od elemenata u prvom planu, stvarajući osjećaj dubine.

Maskirane maske

Mislim da možda postoje zanimljive mogućnosti za postavljanje elemenata maskiranja u prvi plan - to su čvrsti elementi s izrezanim područjima. Razmislite o mogućoj ikoni Google Play Store-a, ovo bi moglo biti izvedeno na "očit" način, a to je da obojeni trokut u prvi plan postavi na bijelu pozadinu.

Standardni prednji plan postavljen na bijelu pozadinu

Umjesto da to učinimo, možemo upotrijebiti šarenu pozadinu i bijeli prednji plan s oduzetim trokutom da bismo proizveli isti statički izlaz:

Alternativna šarena pozadina s maskirajućim prednjim dijelom

Ovo bi postavljanje omogućilo da se boje "proviruju" boje neovisno o maski koja otkriva različite dijelove pozadine kada su prevedeni ili povećani.

Lijeva je redovita kompozicija; Pravo s maskirajućim prednjim dijelom

Svjetlost i sjene

Interakcija svjetlosnih efekata i sjena smještenih u zasebne slojeve može imati zanimljive rezultate. Na primjer, upotreba tehnika duge sjene na prednjem elementu može imati razigranu interakciju dok se kreće unutar maskiranog područja. Slično svjetlosni efekti mogu se postaviti u prednji sloj, a ne da se peku u pozadini. Na primjer, sloj završne obrade može se staviti u prvi plan da oponaša izvor svjetlosti. Ako to postavite u prvi plan, znači da će se igrati pod pozadinskim slojem kada je u pokretu, krećući se različitom brzinom.

Primjer sjene prednjeg plana i (pretjeranog) izvora svjetlosti na pozadini

Pazite da ne stvorite učinak koji nema smisla, npr. sjena koja se odvaja od prednjeg elementa ili se kreće iza pozadinskog elementa. Također zapamtite da je vjerojatno da će se mnoge ikone vidjeti zajedno, stoga budite konzervativni s dobrim svjetlosnim efektima i držite se bliskih smjernicama za materijale.

Ostavite iza

U pozadinski sloj možete postaviti elemente koji su prednji sloj potpuno zatamnjeni i otkriveni samo u pokretu.

Elementi se otkrivaju samo u pokretu

Resursi i alati

Evo moje datoteke skice koju možete koristiti kao predložak tijekom stvaranja prilagodljivih ikona. Sadrži rešetku ikona, obrasce za ključeve i sigurno područje. To je implementirano kao simbol, tako da će promjena glavnog elementa ažurirati kopije dajući vam pregled s primijenjenim različitim maskama.

Prenio sam i predložak Adobe Illustrator ako je to više vaša stvar.

Uz to pogledajte ove druge resurse na koje nailazim:

  • Alatni alat za pregled ikona
  • Predložak dizajnera afiniteta
  • Predlošci Bjango uključuju prilagodljive ikone
  • Predložak Figma (zahtijeva prijavu)
  • Predložak Adobe XD

Igralište Adaptive Icon

Razvijajući prilagodljive ikone, shvatio sam da mnoge suptilnosti potječu iz interakcije prednjih i pozadinskih elemenata kada se primjenjuju efekti pokreta. Ovo je još uvijek otvoreno pitanje jer tek treba vidjeti kako proizvođači uređaja i pokretača to provode. Da bih pomogao istražiti ovaj prostor, stvorio sam malu testnu aplikaciju koja će vam pomoći da procijenite dok stvarate ikonu:

Eksperimentirajte s maskama i efektima pokreta primijenjenim na vaše ikone

Aplikacija prikazuje sve aplikacije instalirane na vašem uređaju s prilagodljivim ikonama. Pomicanje po mreži primjenjuje efekte paralakse na ikone, a dodirom na ikonu primjenjuje se efekt razmjera. Možete konfigurirati jačinu efekata i promijeniti masku primijenjenu na sve ikone. Nadamo se da će vam ovaj alat pomoći da zamislite kako će se vaša ikona prikazati i kretati na različitim uređajima.

Možete preuzeti APK ili preuzeti izvor na githubu:

Izađite i prilagodite se

Nadamo se da vam je ovaj post dao i informacije i neke inspiracije za dizajn fantastične ikone za prilagodbu vaše aplikacije. Kao korisnik, ne mogu čekati da postanu koherentnije moje aplikacije. Ono što me još više uzbuđuje je vidjeti koja kreativna rješenja dolazimo kao zajednica.

Ako ste programer koji želi sastaviti prilagodljivu ikonu, pridružite mi se u trećem dijelu: Implementacija adaptivnih ikona.