Share
Ce veți creaDatorită Material Design, un limbaj vizual dezvoltat de Google, proiectarea interfețelor utilizatorilor pentru platforma Android este mai ușor ca niciodată. Odată ce ați petrecut câteva minute prin intermediul spec. Dvs., care este actualizat de fiecare dată, puteți începe proiectarea aplicațiilor Android care se potrivesc cu aspectul nativ al recentelor lansări Android, inclusiv Marshmallow și Nougat. Mai mult, pentru a vă ajuta să economisiți timp și efort, Google a publicat o foaie de autocolant pentru Material Design.
Foaie de autocolantÎn acest tutorial, vă vom arăta cum să utilizați foaia de autocolant pentru Adobe Photoshop pentru a proiecta rapid interfața de utilizare a aplicației Android.
Interfețele utilizator care respectă specificațiile Material Design sunt, în cea mai mare parte, compuse din forme simple, culori solide și câteva umbre. În consecință, spre deosebire de interfețele utilizatorilor skeuomorfe, ele nu variază mult. De fapt, cu excepția culorilor, dimensiunilor și altitudinilor, widgeturile UI arată la fel în aproape toate aplicațiile de design material. Foaia de autocolant Material Design conține imagini ale acelor widget-uri și, utilizând-o, puteți să urmăriți în mod eficient o abordare de drag-and-drop pentru proiectarea interfeței utilizator.
Drag-and-drop design UIDeși vom folosi Adobe Photoshop în acest tutorial, merită menționat că foaia de autocolant este disponibilă și pentru Sketch, Adobe Illustrator și After Effects.
Pentru a putea urmări, veți avea nevoie de:
Activați Adobe Photoshop și mergeți la Fișier> Deschideți ... pentru a deschide foaia de autocolant pe care ați descărcat-o. Doar dacă nu ai Roboto fontul deja instalat pe computerul dvs., veți vedea o fereastră de dialog care vă va solicita să o sincronizați din Adobe Typekit sau să o descărcați dintr-o altă sursă (cum ar fi Google Fonts).
Dacă utilizați Tipul de caractere, apăsați pe Rezolvați fonturile pentru a continua. Desigur, trebuie să fiți conectat (ă) la contul Cloud Creative pentru ca sincronizarea să se finalizeze.
Odată ce foaia de autocolant se deschide, veți vedea că este un document foarte mare - dimensiunile sale 5688 × 6790 px-cu mai multe straturi și grupuri de straturi. Vă sugerez să vă petreceți câteva minute uitându-vă la tot ce are de oferit.
Bara de stare, bara de navigare și bara de aplicații sunt adesea denumite în continuare "elemente globale" ale unei aplicații. Prin crearea acestora, vom defini zona în care vor fi plasate restul widget-urilor UI.
În foaia de autocolant, toate elementele globale sunt prezente în interiorul grupului de straturi numit Elemente globale. Acesta conține elemente globale pentru interfețele de utilizator mobile, tablete și desktop. Pentru moment, totuși, hai să ne concentrăm doar pe MOBIL grup de straturi prin selectarea acesteia și Alt-clic pictograma ochiului.
După cum puteți vedea, grupul de straturi conține toate elementele de care avem nevoie, împreună cu câteva ghiduri care ne vor ajuta să poziționăm cu precizie alte widget-uri ale UI. Mergi la Layer> Grup duplicat ... pentru a crea o copie a acestuia într-un document nou numit MyMaterialApp.
În acest tutorial, creăm interfața de utilizator a unei aplicații Android care va servi ca numărător de calorii. Prin urmare, în documentul nou creat, extindeți Bara de aplicații grupul de straturi și utilizați Instrument tip orizontal (T) pentru a schimba titlul aplicației la "Calorii".
În plus, designul nostru va avea o diagramă în regiunea barelor de aplicații. Pentru a face loc, selectați ambele cheie de umbră și umbra ambientală straturi, apăsați T Ctrl +, și să le facem ambele cu înălțimea de 250 pixeli. Nu uita să faci transformarea prin lovire introduce.
Comutați înapoi la fila foaie de autocolant și căutați LISTE grup de straturi. Există opt tipuri diferite de liste disponibile în interiorul acesteia. Noi, totuși, vom folosi numai cel de-al șaptelea tip. Prin urmare, selectați grupul de niveluri numit List7 și du-te la Layer> Grup duplicat ... să creeze duplicatul în MyMaterialApp document.
Înapoi în MyMaterialApp filă, asigurați-vă că plasați List7 strat chiar sub Bara de aplicații strat. Odată ce ați făcut acest lucru, veți vedea că ghidurile și conținutul listei se aliniază perfect.
Este întotdeauna o idee bună să dați nume semnificative grupurilor dvs. de straturi. Prin urmare, redenumiți grupul de nivel al listei în "Listă de produse alimentare".
Să schimbăm acum lista astfel încât să afișeze produsele alimentare împreună cu dimensiunile porțiunilor. A face acest lucru este ușor. Selectați straturile de tip adecvate și utilizați Instrument tip orizontal (T) să le schimbe conținutul. Vă sugerez, de asemenea, să schimbați greutatea fontului produselor alimentare la "Bold".
O aplicație cu contor de calorii nu ar fi foarte utilă dacă nu ar afișa calorii. Lista noastră, totuși, în prezent nu are loc pentru mai mult text. Prin urmare, ștergeți straturile numite "pătrate" din grupurile de nivel numite list_01, list_02, și list_03.
Acum puteți folosi Instrument tip orizontal (T) pentru a adăuga noi straturi de tip care afișează caloriile. Modificați dimensiunea fontului straturilor în 24px, numele fontului lor Roboto Regular, și culoarea lor la # 333333.
Putem face ca interfața noastră de utilizator să fie mult mai atrăgătoare prin adăugarea de pictograme de design material. Pentru moment, să descărcăm trei pictograme diferite pentru cele trei elemente din listă ale interfeței noastre.
Accesați pagina Iconițe materiale și alegeți mai întâi pictograma numită pizza locală. În foaia inferioară care apare, schimbați dimensiunea acesteia 36dp și faceți clic pe pngs pentru a descărca un fișier ZIP care conține pictograma.
Extrageți fișierul ZIP și mergeți la dosar android / drawable-mdpi pentru a găsi fișierul imagine real. Trageți-l și lăsați-l în interiorul lui MyMaterialApp din fereastra Adobe Photoshop.
Repetați aceiași pași pentru pictogramele etichetate cantină locală și masa locală.
Acum putem înlocui cercurile din elementele listate cu pictogramele. Să începem cu pizza locală icon. Selectați stratul său și stratul numit cerc, cea care este în interiorul list_01 grup de straturi. Mergi la Layer> Aliniere> Centre verticale pentru a alinia centrele lor pe verticală. În mod similar, du-te la Layer> Aliniere> Centre orizontale pentru a-și alinia centrele pe orizontală.
În acest moment, puteți șterge layerul "cerc" în list_01.
Repetați aceiași pași pentru celelalte două pictograme.
Să adăugăm acum câteva culori, deoarece interfețele de design ale materialului tind să fie luminoase și colorate.
Selectați stratul numit "ic_local_pizza_black_36dp", faceți clic dreapta pe el și selectați Opțiuni amestecate… . În dialogul care apare, accesați Suprapunere de culori secțiune și alegeți culoarea # ffc107, care este denumit Amber 500 în paleta de culori Material Design.
Repetați aceiași pași pentru straturile numite "ic_local_cafe_black_36dp" și "ic_local_dining_black_36dp". Asigurați-vă că alegeți o culoare diferită de fiecare dată.
Să colorăm elementele globale acum. Pentru a modifica culoarea fundalului, selectați stratul denumit "Fundal", apăsați A pentru a selecta dreptunghiul din interiorul acestuia și a schimba Completati culoarea albă.
Pentru a modifica culoarea barei de stare, deschideți grupul de straturi "Bara de stare", selectați stratul denumit "bar", apăsați A, și schimbați Completati culoarea la Roșu 900, a cărui valoare hexagonală este # b71c1c.
În mod similar, pentru a schimba culoarea barei de aplicații, deschideți grupul de straturi din "Bara de aplicații", selectați stratul denumit "umbra cheii", apăsați A, și setați Completati culoarea la Red 500, sau # f44336.
Un buton de acțiune plutitoare este unul dintre cele mai proeminente widget-uri dintr-o interfață de utilizare Material Design. Puteți obține acest lucru prin duplicarea grupului de straturi "Buton de acțiune în flăcări" al foii de autocolant. Dacă întâmpinați dificultăți în găsirea acesteia, căutați-o în interiorul grupului de straturi "METRICĂ ȘI KEYLINE".
În documentul dvs., plasați grupul de straturi "Buton de acțiune în flăcări" deasupra grupului de straturi "Listă de produse alimentare".
Apoi, utilizați Mutați instrumentul (V) și poziționați butonul de acțiune plutitoare în colțul din dreapta jos al interfeței cu utilizatorul.
Butonul de acționare plutitoare trebuie să aibă o culoare accentuată. Prin urmare, selectați stratul "cheie de umbră" din interiorul grupului său de grupuri de straturi, apăsați A pentru a selecta cercul din interiorul acestuia și a schimba Completati culoarea la Red Accent 700, sau # d50000.
În mod similar, modificați culoarea stratului "ic_add", care conține simbolul plus, la alb. Mai mult, deschideți-o Opțiuni amestecate… și să modifice valoarea lui Opacitate la 100%.
S-ar putea să fi observat că documentul nostru este foarte mare, iar designul ocupă doar o mică regiune în interiorul acestuia. Pentru a schimba dimensiunea documentului astfel încât să corespundă dimensiunii designului, mergeți la Image> Trim. În dialogul care apare, continuați cu valorile implicite și apăsați O.K.
După cum am menționat mai devreme, regiunea de bare de aplicații din interfața noastră de utilizator va avea o diagramă. Deoarece foaia de autocolant nu are autocolante pentru hărți, va trebui să o creăm manual.
Începeți prin a activa grila. Pentru a face acest lucru, du-te la Afișați> Afișați> Grilă.
presa Shift + Ctrl + N pentru a crea un nou strat în interiorul Bara de aplicații grupul de straturi și utilizați Instrumentul pentru creion (B) pentru a desena patru linii orizontale, care sunt alb și 1 px gros, sub titlul aplicației.
Folosește Instrument tip orizontal (T) pentru a adăuga trei date sub ultima linie orizontală. Dimensiunea fontului datelor poate fi 13px.
Acum puteți opri grila prin accesarea Afișați> Afișați> Grilă din nou.
Selectați toate straturile create în acest pas și apăsați Ctrl + G pentru a crea un nou grup de straturi pentru ele. Denumiți grupul de straturi "Diagrama".
Apoi, în interiorul grupului de straturi "Chart", creați un strat nou și numiți-l "Date". În interiorul stratului, trageți o cale închisă folosind Instrument Pen (P). Forma căii nu este foarte importantă, atâta timp cât arată o curbă netedă.
Pentru a umple calea cu culoarea prim-planului, mergeți la Căi panou, faceți clic dreapta pe Cale de lucru și alegeți Umpleți calea ... . În dialogul care apare, alegeți valorile implicite și apăsați O.K.
Pentru a face ca graficul să arate mai puțin amețitor, reduceți Opacitate din grupul de strat "Chart" la 75%.
În cele din urmă, utilizați Instrument tip orizontal (T) pentru a afișa numărul total de calorii consumate sub grafic. Fie dimensiunea fontului numărului 24px, și cea a etichetei 14px.
Designul nostru este acum complet. Continuați și ascundeți grupul de straturi "Ghiduri", pentru că nu mai avem nevoie de ele.
Împachetarea designului dvs. într-un cadru real al dispozitivului și adăugarea unei străluciri a ecranului îl tind să facă să pară mai lustruit și mai realist. Deși puteți utiliza Adobe Photoshop pentru a face acest lucru, este mult mai ușor să utilizați în schimb Generatorul de dispozitive Google Device Art.
Mai întâi, exportați design-ul ca fișier PNG accesând Fișier> Salvare ca ... .
Acum puteți trage fișierul PNG pe oricare dintre dispozitivele pe care le vedeți în generatorul de dispozitive al dispozitivului. Rețineți că va trebui să vă scalați imaginea până la cel puțin 1080 × 1920px pentru a utiliza cadrele celor mai recente dispozitive.
Odată ce arta dispozitivului a fost generată, o puteți glisa în orice folder de pe computer pentru al salva.
În acest tutorial, ați învățat cum să utilizați foaia de autocolant Material Design și Adobe Photoshop pentru a proiecta o interfață de utilizator a aplicației Android. Simțiți-vă liber să adăugați mai multe widget-uri, să schimbați culorile și să experimentați cu aspectul său.
Aș dori, de asemenea, să vă reamintesc că specificația Material Design este doar o colecție de linii directoare recomandate. Nu ați aderat la ea tot timpul, atâta timp cât vă asigurați că rezultatul final este consecvent și intuitiv.
Pentru a afla mai multe despre proiectarea aplicațiilor Android și pentru a găsi mai multe resurse de design, puteți vizita Google Design.
Accentsconagua