Sukurti produktų piktogramas nėra taip sunku, kaip gali pasirodyti iš pirmo žvilgsnio. Sužinokite daugiau apie pirmosios „Android“ programos piktogramos kūrimą nuo nulio!
Nesvarbu, kurioje prekyvietėje ar paslaugoje programa platinama, jos programos piktograma yra pirmas dalykas, kurį gali pastebėti būsimasis vartotojas. Pirmieji įspūdžiai yra itin svarbūs bandant pritraukti naujų vartotojų, o tai reiškia, kad piktogramos yra pagrindinės bet kurios programos sudedamosios dalys. Ir, nepaisant programos tikslo, gražios programos piktogramos kūrimas turėtų būti svarbi kiekvienos programos kūrimo etapo dalis. Nors daugelis techninių programų kūrėjų palieka grafiką atsidavusiems dizaineriams, suprasdami dizaino pagrindus ir jų pritaikymą gali padaryti kiekvienas, turintis įgūdžių eksperimentuoti ir analizė. Programų piktogramos nėra išimtis!
Šiame vadove, naudojant atvirojo kodo programinę įrangą, sukuriama adaptyvioji piktograma, skirta pavyzdinei „Android“ programai. Nors galutinis rezultatas gali būti ne tokio formato, kokio jums gali prireikti, daugelis čia aptartų dizaino patarimų galios įvairiose platformose.
Išleidus „prisitaikončias piktogramas“ naudojant „Android Oreo“, programos piktogramą gali sudaryti trys pagrindiniai sluoksniai: nepermatomas fono sluoksnis, priekinio plano sluoksnis su skaidrumo palaikymas, ir a kaukė kuri apibrėžia piktogramos formą. Visi šie sluoksniai yra 108 x 108 dp dydžio, nors vartotojui gali būti matomas tik vidinis 72 x 72 dp; kita sritis, nupjauta viršuje esančia kauke, naudojama specialiesiems efektams NS, kad piktograma atrodytų dinamiška. Nežinantiems, dp arba nuo ekrano nepriklausomas pikselis yra visos „Android“ sąsajos matavimo vienetas ir yra lygus dydžiui vienas pikselis 160 taškų colyje ekrane.)
Nickas Butcheris iš Google kalba apie 66 dp ratą piktogramos centre, kurios jokia kaukė negali nuplėšti, vadinama „saugia zona“. Čia pagrindiniai mūsų piktogramos dizaino elementai bus vėliau, kai pereisime prie tikrojo projektavimo. Viskas, kas viršija šį 33 dp spindulį, gali būti nematoma piktogramoje, kol ji turi formos kaukę.
Kadangi piktogramos geriau būti vektoriniais vaizdais dėl vartotojo sąsajos mastelio, mums reikės vektorinės grafikos rengyklės, kad sukurtume savo piktogramą. „Inkscape“. yra atvirojo kodo ir puiki alternatyva brangesnei programinei įrangai, todėl tai bus mūsų pasirinkimas šios mokymo programos tikslais. Taip pat sukūriau projekto failą galima čia kurioje yra pažymėta saugi zona ir „Google“ dizaino pagrindinė linija, ir daili sluoksnio kaukė, leidžianti peržiūrėti piktogramos formą.
Kai projekto failas atidarytas „Inkscape“ ir Užpildykite ir pabraukite (Shift + Ctrl + F), Eksportuoti PNG vaizdą (Shift + Ctrl + E) ir Sluoksniai (Shift + Ctrl + L) skydeliai atidaromi, mes pasiruošę pradėti. Sluoksnių skydelyje yra projekto mėsa su Priekinio plano ir Fonas sluoksnių, skirtų jų nominalioms sudedamosioms dalims laikyti, ir Gairės ir Kaukė skirtas įjungti ir išjungti (spustelėjus šalia jų esančią mažos akies piktogramą), kad gautumėte nuorodą.
Piktograma yra programos tapatybės išraiška. Taigi, jis turi apimti ir programos asmenybės pobūdį, ir konkrečios platformos dizaino gaires, pvz., „Android“ Medžiagų dizaino kalba turi pasiūlyti. Demonstravimo tikslais tarkime, kad dirbame su orų programa, kurioje naudojami medžiagos elementai. Galėtume naudoti klasikinį saulės ir debesų motyvą, kad informuotume vartotoją apie programos paskirtį ir šiek tiek kurkite šį pagrindinį dizainą naudodami šešėlius ir geometriją, kad jis gerai įsilietų į „Android“ aplinką.
Fonas
Pradėkime nuo fono nustatymo, kurį sudarys mėlynas dangus ir geltona saulė centre. Pasukimas Kaukė nematomas, aš parenku ir padarysiu matomą Fono sluoksnis, užpildykite visą drobę Sukurkite stačiakampius ir kvadratus įrankį (F4) ir nustatykite stačiakampio užpildymo spalvą Užpildykite ir pabraukite iki 64B5F6FF (šviesiai mėlyna) pagal Medžiagos spalvų paletė. Tada pasirenku Kurkite apskritimus, elipsę ir lankus (F5) įrankį ir laikydami klavišus „Shift“ ir „Ctrl“ nubrėžkite apskritimą nuo pagrindinės linijos centro iki antrojo pagal dydį apskritimo ir nustatykite jo spalvą į FFEE58FF, o tai suteikia mums šiltą saulę. Kuriant bet kokį dizainą visada naudinga laikytis pagrindinės geometrijos, o „Android“ dizaino kalba ypač skatina paprastumą. Kad būtų laikomasi medžiagų gairių, saulei taip pat suteikiau subtilų šešėlį Filtrai → Šešėliai ir švytėjimas → Metamas šešėlis.
Priekinio plano
Artėja prie Priekinio plano, Nupiešiu debesų grupę aplink saulę, piešdamas apskritimus iš kitų apskritimų perimetrų ir visiems suteikiu EEEEEEFF užpildymo spalvą. Tada aš tinkamai sugrupuoju apskritimus, dešiniuoju pelės mygtuku spustelėdamas kelis objektus ir pasirinkdamas Grupė, ir paleiskite šešėlių generatorių dviem galutinėms formoms, kurias galiausiai gaunu. Pasukimas Gairės nematomas ir besikeičiantis Priekinio plano ir Fonas Arba galite matyti mūsų orų programos piktogramos sluoksnius. Jei programos piktograma kada nors bus velkama per pagrindinį ekraną, debesys trauksis prieš nejudančią saulę!
Rezultatas
Kaukė dabar gali būti matomas ir koreguojamas Redaguoti kelius pagal mazgus (F2), norėdami pabandyti imituoti skirtingų formų kaukes. Be to, du sluoksnius galima eksportuoti atskirai naudojant Eksportuoti PNG vaizdą skydelis naudojimui „Android Studio“., ir kartu a „Google Play“ piktograma.
Kuriant produkto piktogramą visada yra gera praktika pabandyti nustatyti programos paskirtį, distiliuoti ją iki abstraktiausios vaizdinės formos ir pavaizduoti tai naudojant paprastą geometriją. Kuo paprastesnis bet kuris dizaino komponentas, tuo geriau ir patikimiau jis paprastai veikia, ir tai galioja ir grafiniam dizainui. Daugeliu atvejų objekto forma priekiniame plane ir vientisa spalva arba raštas fone (arba atvirkščiai) veikia puikiai, tačiau, kaip ir mūsų pavyzdyje, galima naudoti kitą objektų sluoksnį, jei jis jaučiamas būtinas; per didelis šešėlių išdėstymas arba šešėlių naudojimas tik apsunkins piktogramos dizainą.
Daugiau apie piktogramų dizainą galite perskaityti oficialioje svetainėje „Medžiagos sąsajos“. Medžiagos svetainėir paimkite nemokamas sistemos piktogramas, kurias galite naudoti kuriant piktogramas ta pati svetainė.