Specificația Material Design de la Google a fost inițial destinată platformei Android ca o modalitate de a sugera coerența designului pe platformă.
01 din 06
Cum se creează o carte de design material în Adobe Experience Design CC
Odată ce designerii au început să o facă prin înțelegere și să înțeleagă gândul din spatele lui, Material Design a devenit liniște una dintre cele mai influente filosofii vizuale în designul web și mobil . Tot ce trebuie să faceți pentru a vedea ce ajungem este să faceți o căutare pe Material Design pe Pinterest și veți vedea sute de exemple și experimente pe dispozitive, tablete și chiar pe site-uri web.
Aspectul fascinant al materialului de design este gândirea Google în ceea ce privește modul în care ar trebui să apară și să funcționeze aplicații pe dispozitive mobile, însă conceptele sunt aplicate pe orice ecran de orice dimensiune, pe orice platformă. După cum afirmă Google în paragraful de deschidere al caietului de sarcini, "Ne-am provocat să creăm o limbă vizuală pentru utilizatorii noștri, care sintetizează principiile clasice de design bun, cu inovația și posibilitatea tehnologiei și a științei. Acesta este un design material. Acest spec. Este un document viu care va fi actualizat pe măsură ce vom continua să dezvoltăm principiile și specificul designului material. "
Materialul a vorbit, în termeni foarte generali, despre hârtie și un semn distinctiv al Material Design este cartea. Gândiți-vă la o carte de index pe o suprafață și sunteți pe calea cea bună. Un card este un element care conține fotografii, videoclipuri, legături de text și așa mai departe, dar în cazul în care acestea diferă de cele mai multe modele interactive, acestea sunt menite să se concentreze pe un singur subiect. Cardurile au colțuri rotunjite, conțin umbre slabe, indicând faptul că acestea sunt deasupra unei suprafețe și dacă sunt toate pe același plan, acestea sunt denumite "colecții".
În acest "Cum să" vom crea un card bazat pe spec. Mai degrabă decât să creați cartela cu o varietate de instrumente de imagistică și de desen, vom ajunge la ea dintr-o direcție diferită. Vom folosi instrumentele din Design-ul de experiență Adobe, care este în prezent în previzualizare publică numai pentru Macintosh și este gratuit. Puteți descărca aici.
Să începem.
02 din 06
Crearea prototipului Artboard în Adobe Experience Design CC
Nu există nicio modalitate evidentă de a crea un ecran Android din ecranul de pornire în Design Design CC (XD). Ceea ce am făcut când am deschis XD este selectarea opțiunii iPhone 6 și când se deschide interfața, selectăm instrumentul Artboard din partea inferioară a barei de instrumente Google și selectăm Android Mobile din selecțiile din panoul Proprietăți din partea dreaptă. Apoi treceți la instrumentul de selecție, faceți clic o dată pe numele tabloului de bord al iPhone-ului și ștergeți tabloul de bord. Nu mai.
În versiunea curentă a XD, există o săgeată mică lângă iPhone 6, care, când se face clic, deschide un meniu derulant. De acolo selectați versiunea Android Mobile și placa de lucru Android Mobile selectată se deschide în interfață.
Pentru a ne asigura că spațiul de pe ecran este deschis pentru card, mergeți de obicei la Sketch 3 și copiați și inserați în tabloul de bord o bară de stare, un bar Nav și o bară de aplicații din șablonul de design material. Schița 3.2 conține un șablon de design material ( fișier> nou de la șablon> design de material ) și un alt bun cu adevărat gratuit este de la Kyle Ledbetter pe care îl puteți obține aici. Dacă nu aveți schiță, le puteți copia și lipi de pe autocolantele XD găsite în File> Open UI Kit> Material Google . De asemenea, le puteți descărca de la Google pentru a le utiliza în Photoshop, Illustrator, After Effects și Sketch.
03 din 06
Adăugarea unei plăci de design material într-o placă Adobe XD CC
Una dintre caracteristicile cele mai utile ale XD este includerea Kiturilor UI pentru Apple iOS, Google Material și Microsoft Windows. În multe privințe, ei adaugă cuvântul "Rapid" la termenul "Rapid Prototyping". De asemenea, ele fac munca mai ușoară a designerului prin faptul că elementele UI comune nu trebuie recreate în mod constant într-o aplicație de design precum Photoshop, Illustrator sau Schiță.
Elementul UI de care aveam nevoie era un card. Pentru a ajunge la acesta am selectat File> Open UI Kit> Material Google și kit-ul a fost deschis ca un document nou. Elementul de care aveam nevoie a fost găsit în categoria Carduri.
Ceea ce ne place în legătură cu acestea este faptul că ei respectă specificația Material Design așa cum este prevăzută în specificațiile Blocks-urilor de conținut, precum și specificațiile de formatare și spațiere a textului prezentate în spec.
Stilul de carte pe care l-am dorit a fost cel din stânga jos. Pur și simplu marchează-l cu mouse-ul și îl copiați în clipboard. Din păcate, XD nu conține o interfață cu tab-uri pentru documente deschise. Ceea ce facem este să mutați fereastra deschisă a unui document în jos pentru a descoperi lucrul la care lucrăm, selectați-l și lipiți-l. Un alt mod de comutare rapidă între documentele XD deschise este să apăsați Command- ' .
04 din 06
Cum să editați un element de design material în Adobe Experience Design CC
Când cardul din XD sosește din clipboard, nu începeți lucrul cu el. Primul lucru pe care trebuie să-l faceți este să Ungroupați cardul deoarece aveți nevoie de acces la bucăți și piese care compun cartea. Pentru aceasta, selectați cardul și selectați Obiect> Ungroup sau apăsați Shift-Command-G.
Cardul dvs. este acum compus din trei bucăți:
- Culoare gri deschis pentru imagine.
- Cutie gri medie pentru text
- Caseta din spate a fost utilizată ca fundal.
Primul pas este să ștergeți caseta de culoare gri deschis. Singurul său scop este să acționeze ca un substituent pentru imaginea care o face, dacă alegeți, opțională.
Cutia cu textul este de fapt un gri închis cu opacitate de 50%. Această casetă poate fi utilizată ca fundal text și puteți modifica culoarea și opacitatea casetei.
Deși nu este evident imediat, caseta de culoare gri este conformă cu speculația Material Design prin faptul că colțurile sale superioare sunt rotunjite cu 2 pixeli. Țineți cont de acest lucru dacă adăugați o imagine. De asemenea, va fi nevoie de colțurile rotunjite care pot fi adăugate la o aplicație de imagini sau în XD.
Văzând cum este starea de repaus a cardului, este nevoie și de o umbră. Speculația arată clar că există o înălțime de odihnă a cardului de 2 pixeli. Pentru a adăuga aceasta, selectați forma de fundal negru și setați valorile Y și B (Blur) la 2 în panoul proprietăților.
05 din 06
Cum se adaugă o imagine pe cardul de design material în Adobe XD CC
Cunoașterea cardului are o lățime de 344 de pixeli și suprafața imaginii este de 150 pixeli înălțime ( jumătate din înălțimea casetei gri deschis ) Am deschis imaginea în Photoshop, am tăiat-o la dimensiune și am salvat-o folosind opțiunea @ 2x din dialogul Export As Photoshop cutie. Imaginea a fost importată în Adobe XD.
Apoi am tras caseta gri deschis peste imagine pe carton și selectați Object> Mask With Shape . Rezultatul a fost imaginea ridicând colțurile rotunjite ale formei. Apoi am mutat imaginea în poziția sa finală.
Cu imaginea în loc, am schimbat culoarea de fundal a casetei Medium gri, am schimbat textul și culoarea textului linkului.
06 din 06
Utilizând caracteristica Grid Adobe XD CC
Odată cu completarea cardului, acum trebuie să fie plasat corespunzător în funcție de specificația Material Design. Aceasta înseamnă că există 8 pixeli pe ambele părți ale cardului, iar cardul trebuie să aibă 8 pixeli sub bara de aplicații. Pentru a face acest lucru, faceți clic o dată pe numele tabloului de bord și, în panoul Proprietăți, selectați Grid. Grila apare deasupra tabloului de bord.
Dimensiunea prestabilită a rețelei este de 8 pixeli, care se întâmplă să aibă aceeași dimensiune a grilajului pentru designul materialului. Dacă aveți nevoie de o altă dimensiune, schimbați valoarea din zona Grid. Dacă doriți să schimbați culoarea grilajului, faceți clic pe cipul color și alegeți o culoare din culoarea selectabilă rezultată.
Cu grila vizibilă, faceți clic pe card și mutați-o în poziția finală.
Pentru a termina, am selectat cardul, am făcut clic pe butonul Repeat Grid și am schimbat distanța dintre cărți la 8 pixeli.