Specifikimi i Dizajnit të Materialit nga Google fillimisht kishte për qëllim platformën Android si një mënyrë për të sugjeruar qëndrueshmërinë e dizajnit në platformë.
01 nga 06
Si të krijoni një kartë të dizajnit material në dizajnimin e Adobe Experience Design
Sapo dizajnerët filluan të depërtojnë në të dhe të kuptojnë të menduarit pas saj, Material Design ka heshtur të bëhet një nga filozofitë pamore më me influencë në dizajnin e web dhe celular . Të gjithë ju duhet të bëni për të parë se çfarë po bëjmë është të bëjmë një kërkim në Dizajnin e Materialeve në Pinterest dhe do të shihni qindra shembuj dhe eksperimente në pajisje, tableta dhe madje edhe uebfaqe.
Aspekti interesant i Dizajnit të Materialeve është se mendimi i Google rreth asaj se si duhet të shfaqen aplikacionet dhe të punojnë në pajisjet mobile, por konceptet po aplikohen në çdo ekran të çdo madhësie në çdo platformë. Siç thotë Google në paragrafin e parë të specifikimit, "Ne sfiduam veten për të krijuar një gjuhë vizuale për përdoruesit tanë që sintetizon parimet klasike të dizajnit të mirë me inovacionin dhe mundësinë e teknologjisë dhe shkencës. Ky është dizajni material. Ky spekulim është një dokument i gjallë që do të përditësohet ndërsa ne vazhdojmë të zhvillojmë parimet dhe specifikat e dizajnit material ".
Materiali për të cilin flitet, në terma shumë të përgjithshëm, është letër dhe një shenjë dalluese e Dizajnit të Materialeve është karta. Mendoni për kartën e indeksit në një sipërfaqe dhe jeni në rrugën e duhur. Një kartë është një element që përmban fotot, videot, lidhjet e tekstit dhe kështu me radhë, por ku ato ndryshojnë nga hartimet më interaktive, është që ato duhet të fokusohen në një temë të vetme. Kartat kanë qoshe të rrumbullakosura, përmbajnë hije të zbehta që tregojnë se janë mbi një sipërfaqe dhe nëse janë të gjithë në të njëjtin avion, ato referohen si një "koleksion".
Në këtë "Si të" ne do të krijojmë një kartë të bazuar në spekulim. Në vend që të krijojë kartën me një shumëllojshmëri të mjeteve të imazhit dhe të vizatimit, ne do të arrijmë në atë nga një drejtim tjetër. Ne do të përdorim mjetet në Dizajnimin e Përvojave të Adobe që aktualisht është në një vrojtim publik vetëm për Macintosh dhe është i lirë. Ju mund ta shkarkoni këtu.
Le të fillojmë.
02 nga 06
Krijimi i Artboard-it të Prototipit në Adobe Experience Design CC
Nuk ka asnjë mënyrë të dukshme për të krijuar një ekran Android nga ekrani Start në Experience Design CC (XD). Ajo që kemi bërë kur hapim XD është që të zgjedhim opsionin e iPhone 6 dhe, kur hapet ndërfaqja, zgjedhim mjetin e Artboard në pjesën e poshtme të Toolbar dhe zgjedhim Android Mobile nga zgjedhjet në panelin Properties në të djathtë. Pastaj kalojmë te vegla e përzgjedhjes, klikoni njëherë në emrin e artboard së iPhone dhe fshini artboard. Jo më.
Në versionin aktual të XD-së, ekziston një shigjetë e vogël pranë iPhone 6, e cila, kur klikohet, hap një menu drop-down. Prej aty zgjidhni versionin Android Mobile dhe albumin e përzgjedhur të Android Mobile që hapet në ndërfaqen.
Për të siguruar që hapësira e duhur e ekranit të jetë e hapur për kartelën, ne zakonisht drejtohemi tek Sketch 3 dhe kopjojmë dhe ngjisim një Bar të Statusit, Nav Bar dhe Barin e Aplikimit nga Modelja e Dizajnit të Materialit në tabelën e tabelave. Skica 3.2 përmban një template Material Design ( File> New From Template> Material Design ) dhe një tjetër me të vërtetë i mirë falas është nga Kyle Ledbetter që mund të merrni këtu. Nëse nuk e keni Sketch, ju mund të kopjoni dhe ngjisni ato nga XD stickers që gjenden në Skedar> Open UI Kit> Materiale Google . Ju gjithashtu mund t'i shkarkoni nga Google për përdorim në Photoshop, Illustrator, After Effects dhe Sketch.
03 nga 06
Shtimi i një Materiali Dizajn Card në një Artboard XD CC CC
Një nga tiparet më të dobishme të XD është përfshirja e Kits UI për Apple iOS, Google Material dhe Microsoft Windows. Në shumë aspekte, ata shtojnë fjalën "Shpejtë" në termin "Prototyping të shpejtë" dhe gjithashtu e bëjnë punën më të lehtë të projektuesit në atë elementë të përbashkët UI që nuk duhet të rikrijohen vazhdimisht në një aplikacion të dizajnit si Photoshop, Illustrator ose Sketch.
Elementi UI që na nevojitej ishte një kartë. Për të arritur tek ajo, ne zgjodhëm File> Open UI Kit> Google Material dhe kit u hap si një dokument i ri. Elementi i nevojshëm u gjet në kategorinë Kartat.
Ajo që ne duam në lidhje me këto është se ata i përmbahen specifikimit të Dizajnit të Materialeve të paraqitura në syzat e Përmbajtjes së Përmbajtjes, si dhe formatet e tekstit dhe hapsirat e hapësirës të paraqitura në spekulimin e tipografisë.
Stili i kartës që donim ishte ai në pjesën e poshtme të majtë. Ne thjesht e vendosim me mausin tonë dhe e kopjojmë në clipboard. Për fat të keq, XD nuk përmban një ndërfaqe me skeda për dokumente të hapura. Ajo që ne bëjmë është të lëvizim dritaren e dokumentit të hapur paksa për të zbuluar atë në të cilën po punojmë, ta zgjedhim dhe ngjisim. Një mënyrë tjetër për të kaluar shpejt mes dokumenteve të hapura XD është të shtypni Command- ' .
04 nga 06
Si të ndryshoni elementin e dizajnit material në Adobe Experience Design CC
Kur kartela në XD të mbërrijë nga clipboard mos filloni të punoni lehtë me të. Gjëja e parë që duhet të bëni është që Ungroup kartën, sepse keni nevojë për qasje në copa dhe copa përbërjen e kartës. Për ta bërë këtë, zgjidhni kartën dhe zgjidhni Objekti> Grumbullimi ose shtypni Shift-Komanda-G.
Karta juaj tani përbëhet nga tre pjesë:
- Kutia e lehtë gri për imazhin.
- Kutia e mesme gri për tekstin
- Kutia e pasme e përdorur si sfond.
Hapi i parë është të fshini kutinë e dritës gri. Qëllimi i tij i vetëm është të veprojë si një placeholder për imazhin që e bën atë, në qoftë se ju zgjidhni, opsionale.
Kutia me tekst është në të vërtetë një gri e errët me perde 50%. Kjo kuti mund të përdoret si sfond i tekstit dhe mund të ndryshoni ngjyrën dhe perde të kutisë.
Megjithëse nuk është menjëherë e dukshme, kuti gri të errët ndjekin spekulimin e Dizajnit të Materialit, në atë që qoshet e saj të sipërm janë të rrumbullakuara me 2 piksela. Mbajeni në mend nëse jeni duke shtuar një imazh. Gjithashtu do të ketë nevojë për qoshe të rrumbullakosura të cilat mund të shtohen në një aplikacion të imazhit ose në XD.
Duke parë se si ky është gjendja pushuese e kartës ajo gjithashtu ka nevojë për një hije. Spekulati e bën të qartë se ka një ngritje pushimi të kartës prej 2 piksele. Për të shtuar këtë, zgjidhni formën e sfondit të zi dhe vendosni vlerat Y dhe B (Blur) në 2 në panelin e pronave.
05 i 06
Si të shtoni një imazh në kartën e dizajnit të materialit në Adobe XD CC
Njohja e kartës është e gjerë 344 pikselë dhe sipërfaqja e imazhit është 150 piksele e lartë ( gjysma e lartësisë së kutisë së dritës gri ) Ne hapëm imazhin në Photoshop, prerë atë në madhësi dhe e ruajtur duke përdorur opsionin @ 2x në dialogun e Eksportit të Photoshop-it kuti. Imazhi u importua në Adobe XD.
Pastaj zvarritëm kutinë gri të errët mbi imazhin në kartelën dhe Objekti i zgjedhur > Maska me formë . Rezultati ishte imazhi që merrte qoshet e rrumbullakta të formës. Ne pastaj e zhvendosnim imazhin në pozitën e tij përfundimtare.
Me imazhin në vend, ne pastaj ndryshuar ngjyrën e sfondit të kutisë Medium gri, ndryshuar tekstin dhe ngjyra e tekstit lidhje.
06 i 06
Duke përdorur funksionin Grid të Adobe XD CC
Me kartën e kompletuar tani duhet të vendoset siç duhet sipas spekulimit të materialeve. Kjo do të thotë se ka 8 piksela në të dyja anët e kartës dhe karta duhet të jetë 8 piksele poshtë shiritit të aplikacionit. Për ta bërë këtë, klikoni njëherë në emër të tabelës dhe në panelin Properties klikoni Grid. Rrjeti shfaqet mbi tabelën e tabelave.
Madhësia e rrjetit të parazgjedhur është 8 piksele që mund të jenë madhësia e njëjtë e rrjetit për materialin. Nëse keni nevojë për një madhësi të ndryshme, ndryshoni vlerën në zonën e Rrjetit. Nëse dëshironi të ndryshoni ngjyrën e rrjetit, klikoni chipin e ngjyrave dhe zgjidhni një ngjyrë nga përzgjedhësi i ngjyrave që rezultojnë.
Me rrjetin e dukshëm, klikoni në kartë dhe vendoseni në pozicionin e saj përfundimtar.
Për të përfunduar, ne zgjodhëm kartelën, klikuam butonin Repeat Grid dhe ndryshuam ndarjen midis kartelave në 8 piksele.