Google'i materjalide disaini spetsifikatsioon oli algselt suunatud Android-platvormile, et pakkuda platvormi disaini järjepidevust.
01 06
Kuidas luua materiaalse disainkaart Adobe Experience Design CC-is
Kui disainerid hakkasid selle läbi mõtlema ja mõistavad selle mõtlemist, on materjalide disain muutunud vaikselt veebi ja mobiili disaini üheks mõjukamaks visuaalseks filosoofiaks. Kõik, mida peate tegema, et näha, mis me saame, on teha Pentermedis materiaalse disaini otsing, kus näete sadu näiteid ja katseid seadmete, tahvelarvutite ja isegi veebisaitide kohta.
Materjalide disaini huvitav aspekt on see, et Google mõtleb, kuidas rakendused peaksid ilmuma ja töötavad mobiilseadmetes, kuid mõisted on rakendatavad mistahes platvormi mis tahes suurusega ekraanile. Nagu Google spetsifikatsiooni avasõnas märgib, "me vaidlustasime end oma kasutajate visuaalse keele loomiseks, mis sünteesib klassikalisi hea disaini põhimõtteid tehnoloogia ja teaduse võimaluste ja innovatsiooniga. See on oluline disain. See spetsifikatsioon on elus dokument, mida ajakohastatakse, kui jätkame materiaalse disaini põhimõtete ja spetsiifikate väljatöötamist. "
Materjal räägiti väga üldises mõttes paberist ja tähtedega Material Design on kaart. Mõelge pindalaga indekskaardile ja olete õigel teel. Kaart on element, mis sisaldab fotosid, videoid, tekstilinke ja nii edasi, kuid kus need erinevad enamikust interaktiivsetest disainidest, on nende eesmärk keskenduda ühele teemale. Kaartidel on ümarad nurgad, neil on nõrk varje, mis näitavad, et nad on pinnast kõrgemad, ja kui kõik need on samal tasapinnal, nimetatakse neid kogumiks.
Selles "Kuidas" loome kaardi, mis põhineb spetsifikatsioonil. Selle asemel, et luua kaarti mitmesuguste pildistamis- ja joonistamisvahenditega, tuleme selle juurde teisest suunas. Me kasutame Adobe'i kogemuse disaini vahendeid, mis on praegu Macintoshi ainult avalikus eelvaates ja on tasuta. Võite selle alla laadida siit.
Alustame.
02 06
Prototüübi Artboardi loomine Adobe Experience Design CC-s
Kogemuste disainikeskuse (XD) Start-ekraanist Android-ekraani loomine pole selge. Mis me tegime XD avamisel, on see, et valida iPhone 6 valik ja kui liides avaneb, valime Tööriistariba allservas asuva tööriistariba ja valime valikut Android Mobile valikutest Properties paneeli paremale. Seejärel lülitume üle valiku tööriista juurde, klõpsake ükshaaval iPhone'i töölaua nime ja eemaldage tööplaat. Mitte rohkem.
XD praegusel versioonil on iPhone 6 kõrval väike nool, mis klõpsates avab rippmenüü. Sealt valite Android Mobile'i versiooni ja kasutajaliidesega avaneb valitud Android Mobile- ekraan.
Et tagada, et kaardile oleks avatud ekraanipind, asume tavaliselt üle skeemi 3 ja kopeerime ja paigutavad olekuriiba, navigeerimisriba ja rakenduse riba materjalide kujundamise mallist töölauale. Sketch 3.2 sisaldab materiaalse disaini malli ( fail> New from template> Material Design ) ja veel üks tõesti hea tasuta on Kyle Ledbetterilt, mida saate siia hankida. Kui teil pole sketti, saate neid kopeerida ja kleepida XD-kleebistest, mis on leitud failist> Avatud UI-komplekt> Google Material . Võite ka need Google'ilt alla laadida, et neid saaks kasutada Photoshopis, Illustratoris, After Effects ja Sketch.
03 alates 06
Materjalide disainkaardi lisamine Adobe XD CC artbotile
Üheks kõige kasulikumaks XD-i funktsiooniks on Apple iOS-i, Google Materiali ja Microsoft Windowsi UI-komplektide kaasamine. Paljudes punktides lisavad nad sõna "Rapid" terminile "Rapid Prototyping". Samuti muudavad nad disaineri töö lihtsamaks, sest tavapärastel kasutajaliidese elementidel ei pea olema disainilahenduste rakenduses nagu Photoshop, Illustrator või Visand
Kasutaja UI element oli kaart. Selle saavutamiseks valisime File> Open UI Kit> Google Material ja komplekt avanes uue dokumendina. Element, mida me vajame, leiti kaartide kategoorias.
Mida me sellest teame, on see, et nad järgivad materiaalse disaini spetsifikatsiooni, nagu on sätestatud sisuklokkide spetsifikatsioonides, samuti tekstiformaadis ja vahepealsetes spetsifikatsioonides, mis on sätestatud trükiprogrammi spetsifikatsioonis.
Kutsutud kaardi stiil oli vasakus allosas. Me lihtsalt paigutame selle hiirega ja kopeerime selle lõikepuhvrisse. Kahjuks ei sisalda XD avatud dokumentide vahelehtede liidest. See, mida me teeme, on avatud dokumendi akna ümberstruktureerimine, et paljastada, kellega me töötame, selle valimine ja kleepimine. Teine võimalus avatud XD-dokumentide kiireks vahetamiseks on vajutada Command- ' .
04 06
Kuidas muuta materjali disainielementi Adobe Experience Design CC-s
Kui XD-kaart jõuab lõikepuhvrisse, siis ei alusta kohe sellega töötamist. Esimene asi, mida peate tegema, on kaardi lahtilaskmine, kuna teil on vaja pääseda kaardi kompaktsete osade ja detailide juurde. Selleks valige kaart ja valige Object> Ungroup või vajutage Shift-Command-G.
Teie kaart koosneb nüüd kolmest osast:
- Kujutise helehall kasti.
- Teksti jaoks on keskmine hall kasti
- Taustaks kasutatakse taustkasti.
Esimene samm on helehalli kasti kustutamine. Selle ainus eesmärk on tegutseda pildi asetäitjatena, mis muudab selle, kui soovite, valikuliseks.
Tekstiga kasti on tegelikult tumehall, 50% läbipaistmatusega. Seda kasti saab kasutada teksti taustana ja saate muuta värvi ja kasti läbipaistmatust.
Kuigi see ei ole kohe selge, valguskast järgib materiaalse disaini spetsifikatsiooni, kuna selle ülemised nurgad on ümardatud 2 pikslit. Pange see meeles, kui lisate pilti. Samuti on vaja ümardatud nurki, mida saab lisada pilditöötlusrakendusse või XD-sse.
Nähes, kuidas see on kaardi puhkeolek, vajab ka varju. Spetsifikatsioon näitab selgesti, et 2-pikslilises kaardis on püsti tõusnud. Selle lisamiseks valige must taust kuju ja määrake väärtuste Y ja B (Blur) väärtused väärtusele 2 omaduste paneelil.
05 06
Kuidas lisada pildi kujunduskaardile Adobe XD CC
Teades, et kaart on 344 pikslit lai ja pildi ala on 150 pikslit kõrgemal ( pool heledast hallist kastist kõrguse ), avasime pildi Photoshopis, kärpime selle suurusele ja salvestame selle kasutades @ 2x valikut Photoshop'i ekspordiga seotud dialoogis kasti. Pilt imporditi Adobe XD-sse.
Seejärel tõmbasime kilega pilti helehalli kasti ja valisime Objekt> Mask kujutisega. Tulemuseks oli kuju ümardatud nurgad. Seejärel kolisime pilti oma lõplikku positsiooni.
Kui pilt oli paigas, siis muutsime seejärel keskmise suurusega kasti taustavärvi, muutes linkteksti teksti ja värvi.
06 06
Adobe XD CC võrgufunktsiooni kasutamine
Kui kaart on täidetud, tuleb see nüüd vastavalt Materjali disaini spetsifikatsioonile korralikult asetada. See tähendab, et kaardi mõlemal küljel on 8 pikslit ja kaart peab rakenduse ribal olema alla 8 pikslit. Selle tegemiseks klõpsake ükskõik millisel kaardil oleval nime juures ja Properties paneelil valige Rež. Võrgustik kuvatakse üle ekraani.
Vaikevõrgu suurus on 8 pikslit, mis on Materjalide disaini jaoks sama suurusega. Kui teil on vaja teistsugust suurust, muutke Grid-ala väärtust. Kui soovite muuta võrgu värvi, klõpsake värvilappi ja valige värvivalikust värv.
Kui võrk on nähtav, klõpsake kaardil ja liigutage see oma lõppasendisse.
Lõppkokkuvõttes valisime kaardi, vaatasime nuppu Repeat Grid ja korrigeeris kaartide vahekaugust kuni 8 pikslit.