Adaptyviųjų piktogramų kūrimas

„Android O“ pristato naują programos piktogramų formatą: adaptyvias piktogramas. Prisitaikančios piktogramos gali padaryti įrenginius darnesnius, suvienodindamos visų programų piktogramas ir atverdamos duris įdomiems vaizdiniams efektams. Šis įrašas paaiškina, kaip jie dirba, ir nagrinėja kai kuriuos jų projektavimo būdus.

Norėdami pamatyti, kur atsirado ši funkcija, žr.

Pagrindai

Dydis ir forma

Prisitaikančių piktogramų dydis yra 108dp * 108dp, tačiau jos yra maskuojamos ne daugiau kaip 72dp * 72dp. Skirtingi įtaisai gali tiekti skirtingas kaukes, kurios turi būti išgaubtos formos ir vietomis pasiekti ne mažesnį kaip 33 taškų tašką nuo centro.

Skirtingų formų kaukių taikymo pavyzdžiai

Dėl to, kad kaukė yra minimaliai pasiekiama, galite laikyti 66dp skersmens apskritimą kaip saugią zoną, garantuojamą, kad ji nebus nukirpta.

Saugi zona suapvalinta kvadratine kauke

Pagrindinės linijos

Piktogramų klavišai

Pagrindinės linijos formos yra piktogramų tinklelio pagrindas, padedantis jūsų piktogramos vaizdinėms proporcijoms atitikti kitų programų piktogramas. Pagrindinės linijos formos yra:

  • Apskritimai: 52dp ir 36dp skersmuo
  • Kvadratas: 44dp * 44dp, 4dp kampo spindulys
  • Stačiakampiai: 52dp * 36dp ir 36dp * 52dp, 4dp kampo spindulys

Žr. Šablonus, pateiktus šio straipsnio pabaigoje.

Sluoksniai

Prisitaikančios piktogramos iš tikrųjų yra sudarytos iš dviejų sluoksnių; įžanga ir fonas. Abu sluoksniai yra 108dp * 108dp; fonas turi būti visiškai nepermatomas, o įgytos žinios gali būti skaidrios. Šie sluoksniai sudedami vienas ant kito.

Dviejų atskirų sluoksnių, didesnių nei rodomas (t. Y. Užmaskuotas), pateikimas elementais sukuria galimybę įdomiems vaizdiniams režimams ir animacijai. Tikslus, koks poveikis gali būti taikomas, ir kada vis dar yra neišspręstas klausimas; prietaisų ir paleidimo priemonių gamintojai gali nuspręsti. Čia yra keletas paprastų pavyzdžių, kuriuos galite įsivaizduoti: paralaksas arba pulsas, prieš pradedant kaukę, savarankiškai išverčiant arba plečiant kiekvieną sluoksnį.

Kadangi 108dp * 108dp piktogramos yra užmaskuotos iki 72dp * 72dp, išorinis 18dp kiekvienoje pusėje gali būti laikomas „papildomu“ turiniu, atskleistu tik judesio metu.

Projektavimo sumetimai

Medžiagos projektavimo gairės kuriant gaminių piktogramas vis dar galioja. Konkrečiai kalbant, išlieka piktogramos anatomija, šešėliai ir apdaila, tačiau dabar galite dėti elementus į priekinį planą arba foną ir suteikti skirtingus efektus.

Dabar esu įsitikinęs, kad daugeliui piktogramų bus gerai pasitarnavus, jei jų prekės ženklo ženklas bus įdėtas į priekinį planą ant vientiso spalvoto fono ir vadinamas diena. Tai užtikrins, kad jūsų piktograma gerai įsitvirtins įrenginyje. Mane jaudina tai, kaip mes, kaip bendruomenė, tyrinėsime šiuos naujus apribojimus ir rasime įdomių, žaismingų ir novatoriškų būdų, kaip padaryti žavias ikonas. Čia yra keletas dalykų, kuriuos reikia atsiminti, ir keletas idėjų, kurias galėtumėte ištirti.

Karpymas

Dėl dinamiškos adaptyvių piktogramų pobūdžio negalite žinoti tikslios kaukės formos. Dėl šios priežasties kritinius elementus, tokius kaip jūsų prekės ženklas, geriausia dėti į saugią zoną ir nenutolti nuo kaukės kraštų.

Fono tvirtinimas

Kai kurių elementų, kurie gali pasirodyti esminiai, įdėjimas į foną reiškia, kad jie judės savarankiškai. Pvz., Skaičiuoklės programa įdeda daugumą elementų į priekinį planą, bet lygiavertis mygtukas akcento spalvų bloke yra fone:

Skirtingų sluoksnių elementai pabrėžia sluoksniavimą

Tai sukuria įdomias judėjimo galimybes ten, kur vizualiai pritvirtinate prie ryškių spalvų bloko, tačiau jis juda mažiau nei priekinio plano elementai, sukurdamas gylio pojūtį.

Užmaskuotos kaukės

Manau, kad gali būti įdomių galimybių užmaskuoti elementus į priekinį planą - tai yra tvirti elementai su išpjaustytomis sritimis. Apsvarstykite galimą „Google Play“ parduotuvės piktogramą, kuri gali būti sukonstruota „akivaizdžiai“, ty spalvotas trikampis įdedamas į priekinį planą ant balto fono.

„Standartinis“ priekinis planas išdėstytas ant balto fono

Vietoj to, mes galime naudoti spalvingą foną ir baltą priekinį planą, atimdami trikampį, kad gautume tą pačią statinę išvestį:

Alternatyvus spalvingas fonas su maskuojančiomis žiniomis

Ši sąranka leistų spalvoms „žiūrėti“ judėti nepriklausomai nuo kaukės, o vertimo ar mastelio vertės atskleidžia skirtingas fono dalis.

Kairė yra taisyklinga kompozicija; Teisė su maskuojančia žinia

Šviesa ir šešėliai

Apšvietimo efektų ir šešėlių, sudėtų į atskirus sluoksnius, sąveika gali duoti įdomių rezultatų. Pvz., Jei naudojate ilgo šešėlio techniką priekiniame plane, jis gali žaismingai bendrauti, kai juda užmaskuotoje srityje. Panašiai apšvietimo efektai gali būti dedami į priekinio plano sluoksnį, o ne dedami į foną. Pvz., „Apdailos“ sluoksnis gali būti dedamas į priekinį planą, kad būtų mėgdžiojamas šviesos šaltinis. Jei tai įvesite į priekinį planą, jis judės fono sluoksniu, judėdamas kitu greičiu.

Fone esančių priešakinių šešėlių ir (perdėto) šviesos šaltinio pavyzdys

Būkite atsargūs ir nesukurkite prasmės neturinčio efekto, pvz. šešėlis, atsiskiriantis nuo priešakinio elemento arba judantis už foninio elemento. Taip pat atminkite, kad daugelis piktogramų greičiausiai bus matomos kartu, todėl būkite konservatyvūs ir naudokite specialius apšvietimo efektus bei laikykitės medžiagų gairių.

Palikite užpakalius

Į fono sluoksnį galėjote įdėti elementų, kuriuos visiškai uždengia priekinis plano sluoksnis ir kurie tik matomi judant.

Elementai išryškėjo tik judant

Ištekliai ir įrankiai

Čia yra mano eskizo failas, kurį galite naudoti kaip šabloną kurdami adaptyvias piktogramas. Tai apima piktogramų tinklelį, pagrindinės linijos formas ir saugią sritį. Jis įdiegtas kaip simbolis, todėl pakeitus pagrindinį elementą bus atnaujintos kopijos, pateikiamos peržiūra su skirtingomis kaukėmis.

Aš taip pat įkėliau „Adobe Illustrator“ šabloną, jei tai daugiau jūsų dalykas.

Be to, patikrinkite šiuos kitus šaltinius, su kuriais susidūriau:

  • Adaptyvus piktogramų peržiūros įrankis
  • „Affinity Designer“ šablonas
  • „Bjango“ šablonuose yra prisitaikančių piktogramų
  • „Figma“ šablonas (reikalingas prisijungimas)
  • „Adobe XD“ šablonas

Adaptive Icon Playground

Kurdamas adaptyvias piktogramas, aš supratau, kad daugelis subtilumų kyla iš priekinių ir foninių elementų sąveikos, kai naudojami judesio efektai. Tai vis dar yra neišspręstas klausimas, nes dar turime sužinoti, kaip įrenginių ir paleidimo priemonių gamintojai tai įgyvendins. Norėdami padėti ištirti šią erdvę, sukūriau nedidelę bandomąją programą, kuri padės jums ją įvertinti kuriant jūsų piktogramą:

Eksperimentuokite su kaukėmis ir judesių efektais, taikomais jūsų piktogramoms

Programa rodo visas jūsų įrenginyje įdiegtas programas su prisitaikančiomis piktogramomis. Slinkdami tinklelį piktogramos taiko paralakso efektus, o palietę piktogramą - mastelio efektas. Galite konfigūruoti efektų stiprumą ir pakeisti kaukę, pritaikytą visoms piktogramoms. Tikimės, kad šis įrankis padės jums nuspėti, kaip jūsų piktograma pasirodys ir gali judėti skirtinguose įrenginiuose.

Galite atsisiųsti APK arba patikrinti šaltinį „github“:

Eik toliau ir prisitaikyk

Tikiuosi, kad šis įrašas suteikė jums ir informacijos, ir šiek tiek įkvėpimo, kad galėtumėte sukurti nuostabią pritaikomą programos piktogramą. Aš, kaip vartotojas, negaliu laukti, kol mano programos taps darnesnės. Vis dėlto mane dar labiau jaudina tai, kad matome, kokius kūrybinius sprendimus mes sugalvojame kaip bendruomenę.

Jei esate kūrėjas, norintis sukurti adaptyvią piktogramą, prisijunkite prie manęs 3 dalyje: Adaptyvių piktogramų įgyvendinimas.