Tooteikoonide loomine pole nii keeruline, kui esmapilgul võib tunduda. Vaadake lisateavet oma esimese Androidi rakenduse ikooni nullist kujundamise kohta!
Olenemata sellest, millise turu või teenuse kaudu rakendust levitatakse, on selle rakenduse ikoon esimene asi, mida tulevane kasutaja märkab. Esmamulje on uute kasutajate meelitamisel ülimalt oluline, mis tähendab, et ikoonid on iga rakenduse põhikomponendid. Ja olenemata rakenduse eesmärgist, peaks kauni rakenduse ikooni loomine olema iga rakenduse arendusfaasi oluline osa. Kuigi paljud tehniliste rakenduste arendajad jätavad graafika pühendunud disaineritele, mõistavad Disaini põhialused ja nende rakendamine on midagi, mida saab teha igaüks, kellel on oskus eksperimenteerida ja analüüs. Rakenduste ikoonid pole erand!
Selles juhendis tehakse avatud lähtekoodiga tarkvara abil Androidi näidisrakenduse jaoks kohandatava ikooni loomine. Kuigi lõpptulemus ei pruugi olla soovitud vormingus, kehtivad paljud siin käsitletud disaininõuanded mitmel platvormil.
Pärast Android Oreo "kohanduvate ikoonide" väljaandmist võib rakenduse ikoon koosneda kolmest põhikihist: läbipaistmatu taustakiht, esiplaani kiht koos läbipaistvuse tugija a mask mis määrab ikooni kuju. Kõik need kihid on 108 x 108 dp suurused, kuigi kasutajale saab näha ainult sisemine 72 x 72 dp; teist piirkonda, mis on ülal oleva maskiga ära lõigatud, kasutatakse kasutajaliidese eriefektide jaoks, et muuta ikoon dünaamiliseks. Asjatundmatute jaoks dp või ekraanist sõltumatu piksel tähistab kogu Androidi liidese mõõtühikut ja on defineeritud võrdne suurusega üks piksel 160 punkti tolli kohta ekraanil.)
Nick Butcher Google'ist räägib 66 dp ringist ikooni keskel, mida ükski mask ei saa eemaldada, mida nimetatakse "turvatsooniks". See on koht, kus meie ikoonikujunduse peamised elemendid asuvad hiljem, kui jõuame tegeliku kujundamiseni. Midagi, mis jääb sellest 33 dp raadiusest kaugemale, ei pruugi ikoonil nähtav olla, kui sellel on kujumask sisse lülitatud.
Kuna kasutajaliidese skaleerimise tõttu on ikoonid parem kui vektorkujutised, vajame oma ikooni tegemiseks vektorgraafika redaktorit. Inkscape on avatud lähtekoodiga ja suurepärane alternatiiv kallimale tarkvarale, nii et see on meie valik selles õpetuses. Olen koostanud ka projektifaili saadaval siin millel on välja märgitud turvatsoon ja Google'i enda disaini võtmejoon ning vahva kihimask, mis võimaldab meil ikooni kuju eelvaadata.
Kui projektifail on avatud Inkscape'is ja Täida ja tõmba (Tõstuklahv+Ctrl+F), Ekspordi PNG-pilt (Tõstuklahv+Ctrl+E) ja Kihid (Shift+Ctrl+L) paneelid avanevad, oleme alustamiseks valmis. Kihtide paneel on koht, kus asub projekti liha koos Esiplaan ja Taust kihid, mis on mõeldud nende nimikomponentide paigutamiseks, ja Juhised ja Mask mõeldud sisse- ja väljalülitamiseks (klõpsates nende kõrval olevat väikese silma ikooni).
Ikoon on rakenduse identiteedi väljendus. Sellisena peab see hõlmama nii rakenduse isikupära kui ka platvormipõhiseid disainijuhiseid, nagu Androidi omad. Materjalide disainikeel on pakkuda. Demonstreerimise eesmärgil oletame, et töötame ilmarakenduse kallal, mis kasutab materjali elemente. Võiksime kasutada klassikalist päikese ja pilvede motiivi, et teavitada kasutajat rakenduse eesmärgist ja panna veidi keerutage seda põhikujundust varjude ja geomeetria abil, et see Androidi keskkonda hästi sulanduks.
Taust
Alustame tausta seadistamisega, mis koosneb sinisest taevast ja kollasest päikesest keskel. Pööramine Mask nähtamatuks, valin ja muudan nähtavaks Taustakiht, täitke kogu lõuend Looge ristkülikuid ja ruute tööriista (F4) ja määrake ristküliku täitevärv Täida ja tõmba kuni 64B5F6FF (helesinine) vastavalt Materjali värvipalett. Seejärel valin Looge ringe, ellipse ja kaare (F5) ja hoidke all klahve Shift ja Ctrl, tõmmake klahvijoone keskpunktist ringjoon suuruselt teise ringini ja määrake selle värviks FFEE58FF, mis annab meile väikese sooja päikese. Igasuguse disaini puhul on alati hea järgida põhigeomeetriat ja eriti Androidi disainikeel soodustab lihtsust. Materjalijuhiste järgimiseks annan päikesele läbi ka õrna varju Filtrid → Varjud ja särad → Varjude langetamine.
Esiplaan
Tulemas esiplaanil, Joonistan pilvede rühma ümber päikese, joonistades teiste ringide ümbermõõtudest ringe, ja annan neile kõigile EEEEEEFF täitevärvi. Seejärel rühmitan ringid sobivalt, paremklõpsates mitmel objektil ja valides Gruppja käivitage varjude generaator kahel lõplikul kujul, mille ma lõpuks saan. Pööramine Juhised nähtamatu ja vahelduv Esiplaan ja Taust teise võimalusena on näha meie ilmarakenduse ikooni koostisosad. Kui rakenduse ikooni kunagi üle avaekraani lohistatakse, tõmbuvad pilved vastu paigalseisvat päikest!
Tulemus
Mask saab nüüd nähtavaks muuta ja sellega kohandada Redigeeri teid sõlmede kaupa (F2), et proovida ja simuleerida erinevaid kujuga maske. Samuti saab kahte kihti eraldi eksportida, kasutades Ekspordi PNG-pilt paneel kasutamiseks Android Studios, ja koos a Google Play ikoon.
Tooteikooni loomisel on alati hea tava proovida võtta rakenduse eesmärk, destilleerida see kõige abstraktsemale visuaalsele kujule ja esitada seda lihtsa geomeetriaga. Mida lihtsam on mõni disainikomponent, seda paremini ja usaldusväärsemalt see tavaliselt töötab ning see kehtib ka graafilise disaini puhul. Enamikul juhtudel on esiplaanil objekti kuju ja taustal ühtlane värv või muster (või vastupidi) töötab hästi, kuid nagu meie näite puhul, saab vildimise korral kasutada ka teist kihti objekte vajalik; liiga palju varjude virnastamine või kasutamine muudab ikooni kujunduse ainult keerulisemaks.
Lisateavet ikoonikujunduse kohta saate lugeda ametniku jaotisest Materjali liidesed Materjali veebisaitja hankige tasuta süsteemiikoone ikoonikujunduses kasutamiseks sama veebisait.