Produktu ikonu izveide nav tik sarežģīta, kā varētu šķist no pirmā acu uzmetiena. Uzziniet vairāk par savas pirmās Android lietotnes ikonas izveidi no jauna!
Neatkarīgi no tā, kurā tirgū vai pakalpojumā lietotne tiek izplatīta, tās lietotnes ikona ir pirmā lieta, ko potenciālais lietotājs pamanīs. Pirmie iespaidi ir ārkārtīgi svarīgi, mēģinot piesaistīt jaunus lietotājus, kas nozīmē, ka ikonas ir jebkuras lietojumprogrammas galvenās sastāvdaļas. Un neatkarīgi no lietotnes nolūka skaistas lietojumprogrammas ikonas izveidei jābūt svarīgai katras lietotnes izstrādes fāzes sastāvdaļai. Lai gan daudzi tehnisko lietojumprogrammu izstrādātāji grafiku atstāj uzticīgiem dizaineriem, saprotot Dizaina pamatprincipi un to pielietošana ir kaut kas tāds, ko var darīt ikviens, ja viņam ir prasme eksperimentēt un analīze. Lietotņu ikonas nav izņēmums!
Šajā rokasgrāmatā ir aprakstīta adaptīvās ikonas izveide Android lietotnes paraugam, izmantojot atvērtā pirmkoda programmatūru. Lai gan gala rezultāts var nebūt vajadzīgajā formātā, daudzi šeit apspriestie dizaina padomi būs piemēroti vairākām platformām.
Pēc “adaptīvo ikonu” izlaišanas operētājsistēmā Android Oreo lietotnes ikona var sastāvēt no trim pamata slāņiem: necaurspīdīgs fona slānis, priekšplāna slānis ar pārredzamības atbalstsun a maska kas nosaka ikonas formu. Visi šie slāņi ir 108 x 108 dp lieli, lai gan lietotājam var būt redzami tikai iekšējie 72 x 72 dp; otrs apgabals, kas ir nogriezts ar masku augšpusē, tiek izmantots īpašiem efektiem lietotāja saskarnē, lai ikona izskatītos dinamiska. Nezinātājiem, dp vai no displeja neatkarīgs pikselis ir visas Android saskarnes mērvienība, un tā ir definēta kā vienāda ar izmēru viens pikselis 160 punkti collā displejā.)
Niks Butčers no Google stāsta par 66 dp loku ikonas centrā, kuru neviena maska nevar noņemt, ko sauc par “drošo zonu”. Šeit mūsu ikonu dizaina galvenie elementi atradīsies vēlāk, kad nonāksim pie faktiskās projektēšanas. Jebkas, kas pārsniedz šo 33 dp rādiusu, var nebūt redzams ikonā, kamēr tai ir ieslēgta formas maska.
Tā kā UI mērogošanas dēļ ikonas ir labākas par vektoru attēliem, mums būs nepieciešams vektorgrafikas redaktors, lai izveidotu mūsu ikonu. Inkscape ir atvērtā pirmkoda un lieliska alternatīva dārgākai programmatūrai, tāpēc šīs apmācības vajadzībām tā būs mūsu izvēle. Esmu arī izstrādājis projekta failu pieejams šeit kurā ir iezīmēta drošā zona un paša Google dizaina atslēgas līnija, kā arī moderna slāņu maska, kas ļauj priekšskatīt ikonas formu.
Kad projekta fails ir atvērts programmā Inkscape un Aizpildiet un izsitiet (Shift+Ctrl+F), Eksportēt PNG attēlu (Shift+Ctrl+E) un Slāņi (Shift+Ctrl+L) paneļi ir atvērti, mēs esam gatavi sākt. Slāņu panelis ir vieta, kur atrodas projekta gaļa ar Priekšplāns un Fons slāņi, kas paredzēti to nominālo komponentu ievietošanai, un Vadlīnijas un Maska paredzēts ieslēgt un izslēgt (noklikšķinot uz mazās acs ikonas blakus tiem), lai iegūtu atsauci.
Ikona ir lietotnes identitātes izpausme. Tādējādi tajā ir jāiekļauj gan lietotnes personības raksturs, gan platformai specifiskas dizaina vadlīnijas, piemēram, Android. Materiālu dizaina valoda var piedāvāt. Demonstrācijas nolūkos pieņemsim, ka strādājam pie laikapstākļu lietotnes, kurā tiek izmantoti materiāla elementi. Mēs varētu izmantot klasisko saules un mākoņu motīvu, lai informētu lietotāju par lietotnes mērķi, un pagrieziet šo pamata dizainu, izmantojot ēnas un ģeometriju, lai tas labi saplūstu savā Android vidē.
Fons
Sāksim ar fona iestatīšanu, kas sastāvēs no zilām debesīm un dzeltenas saules centrā. Griešanās Maska neredzams, es atlasu un padaru redzamu Fona slānis, aizpildiet visu audeklu ar Izveidojiet taisnstūrus un kvadrātus rīku (F4) un iestatiet taisnstūra aizpildījuma krāsu Aizpildiet un izsitiet līdz 64B5F6FF (gaiši zilā krāsā) saskaņā ar Materiāla krāsu palete. Pēc tam es izvēlos Izveidojiet apļus, elipses un lokus (F5) rīku un turot nospiestu taustiņu Shift un Ctrl, uzzīmējiet apli no atslēgas līnijas centra līdz otrajam lielākajam aplim un iestatiet tā krāsu uz FFEE58FF, kas dod mums siltu sauli. Jebkāda veida projektēšanā vienmēr ir lietderīgi pieturēties pie pamata ģeometrijas, un Android dizaina valoda jo īpaši veicina vienkāršību. Lai ievērotu materiālu vadlīnijas, es arī piešķiru saulei smalku ēnu Filtri → Ēnas un mirdzumi → Nolaižamā ēna.
Priekšplāns
Nāk uz priekšplānā, Es zīmēju mākoņu grupu ap sauli, zīmējot apļus no citu apļu apkārtmēriem, un piešķiru tiem visiem EEEEEEFF aizpildījuma krāsu. Pēc tam es sagrupēju apļus atbilstoši, ar peles labo pogu noklikšķinot uz vairākiem objektiem un atlasot Grupa, un palaidiet ēnu ģeneratoru uz divām galīgajām formām, kuras es beigās iegūstu. Griešanās Vadlīnijas neredzams un mainīgs Priekšplāns un Fons alternatīvi var redzēt mūsu laikapstākļu lietotnes ikonas veidojošos slāņus. Ja lietotnes ikona kādreiz tiek vilkta pāri sākuma ekrānam, mākoņi metīsies pretī nekustīgai saulei!
Rezultāts
Maska tagad var padarīt redzamu un pielāgot ar Rediģējiet ceļus pēc mezgliem (F2), lai mēģinātu simulēt dažādas formas maskas. Turklāt abus slāņus var eksportēt atsevišķi, izmantojot Eksportēt PNG attēlu panelis lietošanai Android Studio, un kopā uz a Google Play ikona.
Veidojot produkta ikonu, vienmēr ir ieteicams mēģināt noteikt lietojumprogrammas mērķi, iegūt to abstraktākajā vizuālajā formā un attēlot to, izmantojot vienkāršu ģeometriju. Jo vienkāršāka ir jebkura dizaina sastāvdaļa, jo labāk un uzticamāk tas parasti darbojas, un tas attiecas arī uz grafisko dizainu. Lielākajai daļai mērķu priekšplānā ir objekta forma un fonā vienkrāsaina krāsa vai raksts (vai otrādi) darbojas lieliski, taču tāpat kā mūsu piemērā var izmantot citu objektu slāni, ja tie ir jūtami nepieciešams; pārāk liela ēnu klāšana vai izmantošana tikai sarežģīs ikonas dizainu.
Vairāk par ikonu dizainu varat lasīt oficiālajā sadaļā Materiālu saskarnes Materiāla vietneun satveriet bezmaksas sistēmas ikonas izmantošanai ikonu dizainā no tā pati vietne.