D'Material Design Spezifikatioun vu Google war ursprénglech fir d'Android Plattform ugeholl fir eng Konsequenz vum Design op der Plattform z'erméiglechen.
01 vum 06
Wéi Dir e Material Design Card erstellen an Adobe Experience Design CC
Aan d'Designer hunn ugefaangen duerch hir ze pocken an d'Denken hannendrun ze verstoen, Material Material gouf loosst ee vun de beaflossefe visuelle Philosophie vum Web a mobilem Design . Alles wat Dir braucht fir ze kucken, wat mer sinn, ass eng Material Designsearch op Pinterest ze maachen an Dir fannt Honnerte vu Beispiller an Experimenter op Apparater, Pëllen, an och Websäiten.
De faszinante Aspekt vum Material Design ass et Google an denkt, wéi Apps apps erscheinen an op mobilen Apparater ariéiren, awer d'Konzepter ginn op jiddere Schrecken vun enger Gréisst op all Platform angewandt. Wéi Google erkläert am Ufangs Paragraf vun der Spezifikatioun: "Mir hu sech eis erausgefuerdert fir eng visuell Sprooch fir eis Benotzer ze kreéieren déi d'klassesch Prinzipien vu gudden Design mat der Innovatioun an der Méiglechkeet vu Technologie a Wëssenschaft sinn. Dëst ass Materialdesign. Dës Spezifitéit ass e lieweg Dokument, dat aktualiséiert gëtt, wéi mer weider d'Tepsen a Spezifikatioune vum Materialentwécklung entwéckelen. "
D'Material iwwer gespaart a ganz allgemeng Konditioune ass Pabeier a e Hallmark vu Material Design ass d'Kaart. Denkt op eng Indexkaart op enger Uewerfläch an Dir sidd op de richtege Wee. Eng Kaart ass en Element mat Fotos, Videoen, Textveräiner a sou weider, awer wou se ënnerschiddlech vun de meeschten interaktiven Designs sinn, gi se fir op engem eenzegen Thema fokusséiert. Kaarte hunn eegene Corner, enthale schwach Schatten, déi se virun enger Uewerfläch sinn an si sinn alle op der selwechter Ebene déi se als "Kollektioun" bezeechent ginn.
An dësem "How To" gi mer eng Kaart op der Spezifizéierung. Vill méi wéi d'Kaart mat verschiddene Betraffenen a Zeechnen ze bilden, ginn et op eng aner Richtung. Mir benotzen d'Tools an Adobe's Experience Design, déi momentan an engem Macintosh-nëmme Public preview ass gratis. Dir kënnt se da rauszéien.
Looss eis un.
02 vum 06
Den Prototyp Artboard am Adobe Experience Design CC ze kreéieren
Et gëtt keng virsiichteg Manéier fir e Android-Écran aus dem Start Screen an Experience Design CC (XD) ze kreéieren. Wat mir agesat hunn, wann mir XD opmaachen, wäerte d'iPhone 6 Optioun wielt a wann d'Interface opmaacht, wäerte mir d' Artboard-Tool am ënneschten der Toolbar auswielen an Android Mobile aus der Selektioun op de Panel Properties op der riet. Dann wechseln op d'Selektiounstool, klickt emol op den iPhone Artbonn vum Numm a lästert de Artboer. Net méi.
An der aktueller Versioun vum XD ass e klenge Pfeier niewent dem iPhone 6, deen, wann klickt, e Dropdown-Menü op. Vun do u kënnt Dir d'Android Mobile Versioun auswielen an de Android Mobile Artbureau ausgewielt fänkt op der Säit.
Fir sécher ze stellen, datt mir de richtesche Bildschiermiwwel fir d'Kaart opmaachen, gi mer normalerweis op Sketch 3 a kopéieren an e neie Status Bar, Nav Bar an App App aus der Material Design Schabloun an d'Atelier kopéieren. Sketch 3.2 enthält Material Material Schabloun ( Datei> Neit From Template> Material Design ) an e weidere gutt ass gratis aus Kyle Ledbetter, déi Dir hei kritt. Wann Dir keng Skiz eraus hutt kënnt Dir se aus den XD Stickeren kopéieren an se hei an Datei> Open UI Kit> Google Material fannen . Dir kënnt och se vu Google downloaden fir se an Photoshop, Illustrator, After Effects a Sketch benotzen.
03 vum 06
Mat enger Materialentwurfskarte un en Adobe XD CC Artboard benotze kënnt
Eng vun den nëtzlechsten Features vu XD ass d'Inklusioun vu UI Kits fir Apple iOS, Google Material a Microsoft Windows. A ville Beräicher addéieren se d'Wuert "Rapid" mam Begrëff "Rapid Prototyping" an och fir d'Gestioun vum Designer ze maachen, datt déi gemeinsame UI Elementer net permanent an enger Designapplikatioun wéi Photoshop, Illustrator oder Skizzen.
UI Element war mir eng Kaart. Fir dat ze kréien, hu mir gewielt Datei> Open UI Kit> Google Material an de Kit als e neien Dokument eräuscht. Eist Element war mer fonnt ginn an der Kategorie Kategorie.
Wat mir léiwer iwwer dës sinn se an d'Material Design Spezifizéierung wéi an den Content Blocks Spezifikatioune wéi och an der Textformatéierung an de Spacere vun der Typographie Spezifizitéit festgeluecht.
De Kredibestick deen mir gewënscht war, war deen am lénksen lénks. Mir markéiere mer et mat eiser Maus a kopéiert se an de Clipboard. Leider ass XD keng Tabbedëm Interface fir oppene Dokumente. Wat mir maachen, verschlësselen d'Dokumentatiounfenster e bësse fir ze weisen, wat mer schaffen, wielt a pake. Eng aner Manéier fir séier tëschent XD Dokumenten opmaachen ze sinn ass d' Command- "dréckt" .
04 vun 06
Wéi Dir e Material Design Element am Adobe Experience Design CC bewäerten
Wann d'Kaart an XD aus der Zwëscherschlag komm sidd glécklech net mat der Aarbecht ze schaffen. Dat éischt wat Dir braucht, fir d'Kaart ze gruppéieren, well Dir Accès op d'Bits an d'Stécke braucht, déi d'Kaart komponéieren. Dir wëllt dës Kaart maachen an wielt Objekter> Ungroup oder dréckt Shift-Command-G.
Är Kaart ass elo aus dräi Stécker:
- Liichte Gréisst Këscht fir de Bild.
- Mëttelwaasseg Box fir den Text
- De Réckfälsch als Fonktioun benotzt.
Den éischte Schrëtt ass d'hellgréisseg Box. Säin eenzegen Zweck ass als Plazhalter fir de Bild ze handelen deen et mécht, wann Dir wielt, optional.
D'Box mat dem Text ass eigentlech e schwaarze Grau mat 50% Opazitéit. Dëst Feld kann als Texthinter benotzt ginn an Dir kënnt d'Faarf an d'Opazitéit änneren.
Obwuel et net direkt zougitt ass, ass de hellgräifte Këscht déi Material Design Spezifikatioun an datt seng Top Ecken duerch 2 Pixel gerullt sinn. Bleift dëst am Kapp, wann Dir en Bild bitt. Et brauch och d'abruecht Ecken, déi zu enger Bebauungs-Applikatioun oder am XD hinzugefügt ginn.
Wéi fannt Dir dat de Reschtungszoustand vun der Kaart ass et och e Schued. D'Spéit mécht et kloer datt et eng Rettungshéich vun der Kaart vun 2 Pixelen gëtt. Doduerch hinzuweisen , wäiss de schwaarze Background Form a gespaart de Y- a B (Blur) Wäerter op 2 an der Eegeschafte Panel.
05 vum 06
Wéi Dir e Bild an d'Material Design Card an Adobe XD CC addieren
D'Wësse vun der Kaart ass 344 Pixel breed an d'Bildfläche steet 150 Pixelen héich ( hallef Héichte vun der hellgräifender Këscht ) Mir hunn d'Bild op Photoshop geopfert, hunn d'Gréisst erofgeschnidden an hunn se mat der Opsiicht @ 2x beim Photoshop Export exportéiert. Këscht. Den Image gouf an Adobe XD importéiert.
Mir hunn den hellgräifleche Këscht iwwer de Bild op de Pastelltéier gedréckt an ausgewielt Object> Mask With Shape . D'Resultat war d'Biller, déi d'Ronnen an der Form haten. Mir hunn d'Bild dann op d'Endpositioun geschéckt.
Mir hunn d'Bildfär vun der mëttlere groen Këscht geännert mat dem Bild an der Plaz, de Text an d'Faarf vum Linktext geännert.
06 vum 06
Mat der Adobe XD CC Grid Feature benotzt
Mat der Kaart komplett ass et elo richteg gutt wéi de Material Design Spezifikatioun plazéiert. Dëst bedeit datt et 8 Pixelen op der Säit vun der Kaart sinn an d'Kaart muss 8 Pixelen ënner der Appbar sinn. Fir dat ze maachen, klickt emol op den Artbureau name an am Gréisst vum Properties klickt Dir Grid. De Raster kennt iwwer d'Art Board.
Déi Standard Gratgréisst ass 8 Pixel déi geschitt déi selwecht Grisgréisst fir Material Design. Wann Dir eng aner Gréisst brauch, änneren den Wäert am Grid. Wann Dir d'Faarf vum Gitter ännere wëllt, klickt op de Faarfscheff a wählt e Faarwen aus dem gewielten Color Picker.
Mat deem Gitter sichtbar, klickt op d'Kaart an setzt se an d'Endpositioun.
Fir ze färten, hu mir d'Kaart gewielt, klickt op de Repeat Grid Knop a gouf den Abstand tëscht de Kaarten op 8 Pixel geännert.