Crearea pictogramelor pentru produse nu este atât de dificilă pe cât ar părea la prima vedere. Aflați mai multe despre proiectarea primei pictograme pentru aplicația Android de la zero!
Indiferent de piața sau serviciul prin care este distribuită o aplicație, pictograma aplicației este primul lucru pe care un potențial utilizator l-ar observa. Primele impresii sunt de o importanță capitală atunci când încearcă să atragă noi utilizatori, ceea ce înseamnă că pictogramele sunt componente cheie ale oricărei aplicații. Și, indiferent de intenția aplicației, crearea unei pictograme frumoase pentru aplicație ar trebui să fie o parte importantă a fazei de dezvoltare a fiecărei aplicații. Deși mulți dezvoltatori de aplicații tehnice lasă grafica designerilor dedicați, înțelegând fundamentele designului și aplicarea acestora este ceva ce poate face oricine, având talent pentru experimentare și analiză. Pictogramele aplicațiilor nu fac excepție!
Acest ghid trece prin crearea unei pictograme adaptive pentru un exemplu de aplicație Android folosind software open-source. Deși rezultatul final poate să nu fie în formatul pe care l-ați putea solicita, multe dintre sfaturile de design discutate aici vor fi valabile pe mai multe platforme.
După lansarea „pictogramelor adaptive” cu Android Oreo, o pictogramă de aplicație poate consta din trei straturi fundamentale: o strat de fundal opac, un strat din prim-plan cu suport pentru transparență, și a masca care definește forma icoanei. Toate aceste straturi au dimensiunea de 108 x 108 dp, deși doar 72 x 72 dp interior pot fi vizibile pentru utilizator; cealaltă regiune, tăiată de mască deasupra, este folosită pentru efecte speciale în interfața de utilizare pentru a face pictograma să pară dinamică. Pentru cei neinițiați, dp sau pixel independent de afișare reprezintă o unitate de măsură pentru toată interfața Android și este definită a fi egală cu dimensiunea un pixel pe un afișaj de 160 de puncte pe inch.)
Nick Butcher de la Google vorbește despre un cerc de 66 dp în centrul pictogramei pe care nicio mască nu o poate tăia, numită „zonă sigură”. Aici vor sta mai târziu elementele principale ale designului pictogramei noastre, când vom ajunge la designul propriu-zis. Este posibil ca orice lucru dincolo de această rază de 33 dp să nu fie vizibil în pictogramă în timp ce are o mască de formă activată.
Deoarece pictogramele sunt mai bine să fie imagini vectoriale datorită scalării interfeței de utilizare, vom avea nevoie de un editor de grafică vectorială pentru a ne crea pictograma. Inkscape este open-source și o alternativă excelentă la software-ul mai scump, așa că va fi alegerea noastră în scopul acestui tutorial. De asemenea, am conceput un fișier de proiect disponibil aici care are zona de siguranță și propria linie cheie de design Google și o mască de strat ingenioasă care ne permite să previzualizam forma pictogramei.
Cu fișierul de proiect deschis în Inkscape și Umpleți și trageți (Shift+Ctrl+F), Exportați imaginea PNG (Shift+Ctrl+E) și Straturi Panourile (Shift+Ctrl+L) se deschid, suntem gata să începem. Panoul Straturi este locul în care rezidă carnea proiectului, cu Prim plan și fundal straturi menite să adăpostească componentele lor titulare și Instrucțiuni și Masca menit să fie activat și dezactivat (făcând clic pe pictograma ochiului mic de lângă ele) pentru referință.
O pictogramă este o expresie a identității unei aplicații. Ca atare, trebuie să încorporeze atât caracterul personalității aplicației, cât și liniile directoare de proiectare specifice platformei, precum cele pentru Android. Limbajul de design material are de oferit. În scopul demonstrației, să presupunem că lucrăm la o aplicație meteo care utilizează elemente Material. Am putea folosi motivul clasic de soare și nori pentru a informa un utilizator despre scopul aplicației și să punem puțin rotiți acest design de bază folosind umbre și geometrie pentru a-l face să se integreze bine în mediul său Android.
fundal
Să începem cu configurarea fundalului, care va consta dintr-un cer albastru și un soare galben în centru. Cotitură Masca invizibil, selectez și fac vizibil Strat de fundal, umpleți întreaga pânză cu Creați dreptunghiuri și pătrate instrument (F4) și setați culoarea de umplere a dreptunghiului în Umpleți și trageți la 64B5F6FF (un albastru deschis) în conformitate cu Paleta de culori materiale. Apoi selectez Creați cercuri, elipse și arce (F5) și ținând apăsat Shift și Ctrl, trageți un cerc din centrul liniei cheie până la al doilea cerc ca mărime și setați-i culoarea la FFEE58FF, ceea ce ne oferă un mic soare cald. Este întotdeauna bine să rămâneți la geometria de bază în orice fel de proiectare, iar limbajul de design al Android în special încurajează simplitatea. Pentru a respecta orientările materialelor, dau și soarelui o umbră subtilă Filtre → Umbre și străluciri → Umbră.
Prim plan
Vin la Prim plan, Desenez un grup de nori în jurul soarelui desenând cercuri din circumferințele altor cercuri și le dau tuturor o culoare de umplere de EEEEEEFF. Apoi grupez cercurile în mod corespunzător făcând clic dreapta pe mai multe obiecte și selectând grup, și rulați generatorul de umbre pe cele două forme finale pe care le obțin în final. Cotitură Instrucțiuni invizibil și basculant Prim plan și fundal alternativ, straturile constitutive ale pictogramei aplicației noastre meteo pot fi văzute. Dacă pictograma aplicației este trăsă vreodată pe un ecran de start, norii vor cădea în cascadă împotriva unui soare staționar!
Rezultat
Masca acum poate fi transformat vizibil și modificat cu Editați căile după noduri (F2) pentru a încerca să simuleze diferite măști de formă. De asemenea, cele două straturi pot fi exportate separat folosind Exportați imaginea PNG panou pentru utilizare în Android Studio, și împreună pentru a Pictograma Google Play.
În timp ce construiți o pictogramă de produs, este întotdeauna o practică bună să încercați să luați scopul unei aplicații, să o distilați la forma sa vizuală cea mai abstractă și să o reprezentați folosind geometrie simplă. Cu cât orice componentă a designului este mai simplă, cu atât funcționează de obicei mai bine și mai fiabil, iar acest lucru este valabil și în designul grafic. Pentru majoritatea scopurilor, o formă de obiect în prim plan și o culoare solidă sau un model în fundal (sau invers) funcționează foarte bine, dar ca în cazul nostru exemplu, un alt strat de obiecte poate fi folosit dacă este simțit necesar; prea multă stivuire sau utilizarea umbrelor interioare nu va face decât să complice designul pictogramei.
Puteți citi mai multe despre designul pictogramelor în Interfețele materiale pe site-ul oficial Site-ul materialuluiși luați pictograme de sistem gratuite pentru a le utiliza în designul pictogramelor de la acelasi site web.