Google-ren Diseinuaren Diseinuaren zehaztapena jatorriz Android plataformara zuzendu zen plataforma diseinuan koherentzia iradokitzeko.
06/01
Adobe Experience Design CC-ren Diseinu Diseinuko txartela nola sortu
Diseinatzaileek pentsamendua ulertzen hasi eta pentsamendua ulertu ondoren, Material Diseinuak lausoki sare eta diseinu mugikorreko ikusizko filosofia eraginik handienetako bat bihurtu du. Gustatzen zaigun guztia ikusteko Pinterest-en Diseinu Materialen diseinua egin behar duzu eta ehunka adibide eta esperimentuak ikusiko dituzu gailuetan, piluletan eta webguneetan ere.
Material Design-en alderdi zoragarria Google-k gailu mugikorretan nola agertu behar duen eta nola funtzionatzen duen pentsatzen duen arren, kontzeptuak plataforma guztietan edozein tamainatan aplikatzen ari dira. Googlek zehaztapenaren aurreneko paragrafoan dioen moduan, "Gure diseinu onaren printzipio klasikoak sintetizatzen ditugu gure teknologiaren eta zientzien berrikuntzaren eta aukera berrien ikuspegi bisuala sortzeko. Hau diseinu materiala da. Fitxa hau dokumentu biziduna da, diseinu materialaren printzipioak eta ezaugarriak garatzen jarraituko dugunean ".
Materialak, oro har, paperari buruz hitz egiten du, eta Material Design txartela da. Pentsatu fitxa baten gainean azalera eta eskuineko pista duzu. Karta bat da, argazkiak, bideoak, testu-estekak, etab., Baina diseinu interaktiboetatik datozenak dituen elementu bat da gai bakar batean zentratuta. Txartelek biribildutako txokoak dituzte, gainazalaren gaineko gainazala adierazten duten itzal txikiak dituzte eta "bilketa" gisa aipatzen diren plano berekoak badira.
"Nola" izenean zehaztutako txartel bat sortuko dugu. Irudia eta marrazki tresnak dituzten txartelak sortu beharrean, norabide ezberdinetara iritsiko gara. Adobe-ren Esperientzia Diseinuko tresnak erabiliko ditugu, gaur egun Macintosh-en aurrebista publikora aurkezten dena eta doan. Hemen deskargatu dezakezu.
Has gaitezen.
02 de 06
Prototipo Artboarda sortzea Adobe Experience Design CC-n
Android Diseinua Design CC (XD) hasierako pantailan Android pantaila bat sortzeko modu argia ez dago. XD irekitzen dugunean, iPhone 6 aukera hautatu behar dugu eta, interfazea irekitzen denean, Artboard tresna tresna barrako behealdean hautatuko dugu eta hautatu Android Mugikorra Propietateen paneleko aukeren zerrendatik eskuinera. Ondoren, hautapen tresna batera aldatuko dugu, egin klik iPhone artelanaren izenean behin eta artboarda ezabatu. Gehiagorik ez.
XD uneko bertsioan, iPhone 6aren ondoan dagoen gezi txiki bat dago, klikatzean, goitibeherako menua irekitzen du. Hortik Android mugikorraren bertsioa aukeratu eta Android mugikorra hautatutako artelanak interfazean irekitzen dira.
Pribatutasun egokia izateko txartela irekita dagoela ziurtatzeko, Sketch 3ra joango gara eta kopiatu eta itsatsi egingo da Egoera-barra, Nabigazio-barra eta Aplikazio-barra Artisau Diseinuko Txantiloitik. Sketch 3.2k Material Diseinuaren txantiloi bat du ( File> New From Template> Material Design ) eta beste bat benetan dohainik Kyle Ledbetterrekin lortzen da hemen. Sketch ez baduzu, kopiatu eta itsats ditzakezu Fitxategia> Irekitako UI Kit> Google Materialen aurkitutako XD eranskailuetatik. Google-tik ere deskargatu ditzakezu Photoshop, Illustrator, After Effects eta Sketch-en erabiltzeko.
03 de 06
Material diseinuaren txartela Adobe XD CC Artboard batera gehitzea
XDren ezaugarririk baliagarrienetako bat Apple IOS, Google Material eta Microsoft Windows sistemen UI Kitsak sartzea da. Alderdi askotan, "Rapid" hitza gehitzen zaie "Prototipatze azkarrari" epeari. Era berean, diseinatzaile lana errazten dute UI elementu komunetan, ez dira etengabe behar bezala diseinatu, Diseinu Aplikazioan, Photoshop, Illustrator edo sketch.
Beharrezko UI elementua txartel bat zen. Horretarako, Fitxategia> Ireki UI Kit> Google Material aukeratu dugu eta dokumentu berri gisa irekitako kutxa aukeratu dugu. Beharrezko elementua Txartelen kategorian aurkitu zen.
Horregatik maite dugu material diseinuaren zehaztapena Eduki blokeen zehaztapenetan ezarritakoaren arabera baita Tipografia zehaztapenean testua formateatzeko eta tartekatzeko espezifikazioak ere.
Nahi dugun karta estiloa beheko ezkerrekoan zegoen. Markatu besterik ez dugu gure sagua eta kopiatu arbelean. Zoritxarrez, XDek ez du dokumentu irekien interfaze tabulatua. Egin dugun guztia dokumentu irekiaren leiho bat mugitzen da pixka bat lanean ari garenean agerian uzteko, hautatzeko eta itsasteko. XD dokumentu irekien artean azkar aldatzeko beste modu bat komando- sakatu behar da.
04 de 06
Materialen diseinuaren elementua nola editatu Adobe Experience Design CC-n
XD txartela arbelean iristen denean, ez da harritzekoa hasiko. Egin behar duzun lehenengo gauza da txartela banatzea, txartela osatuz eta bitan sartzeko beharra duzulako. Horretarako, hautatu txartela eta hautatu Objektu> Banatu edo sakatu Maius-Komando-G.
Zure txartela orain hiru pieza dauzka:
- Argazki gris argia irudiarentzat.
- Testu gris ertaineko kutxa
- Atzeko plano gisa erabilitako atzeko kutxa.
Lehenengo urratsa gris argiko kutxa ezabatzea da. Helburu bakarra da irudiaren leku-marka gisa jardutea, horrek aukeratzen baldin badu, aukerakoa.
Testua duen kutxa gris iluna da,% 50 opakotasuna duena. Kutxa hau testu atzeko plano gisa erabil daiteke eta kolorea eta koadroa opakutasuna alda ditzakezu.
Nahiz eta ez da berehala agerikoa den, gris argizko kutxak Material Designaren espezifikazioa jarraitzen du bere goiko ertzetan bi pixeleko biribilduak direlako. Gogoan izan irudi bat gehitzen ari bazara. Eredu eredu biribilduak ere erabil daitezke irudi aplikazio edo XD batean.
Txartelaren gainerako egoerari dagokionez ikustea itzala ere behar du. Spec-k argi uzten du 2 pixeleko txartela duen kota bat dago. Hau gehitzeko, hautatu atzeko plano beltza eta ezarri Y eta B (Blur) balioak 2 propietate panelean.
05 de 06
Nola gehitu irudia Material diseinu txartela Adobe XD CC-n
Txartela jakitea 344 pixeleko zabalera da eta irudiaren eremua 150 pixeleko altuera da ( gris argiaren altuera erdiaren erdian ) Argazkia Photoshop-en ireki dugu, tamaina moztu eta gorde du @ 2x aukera Photoshop-en Export As elkarrizketa-koadroan koadroa. Irudia Adobe XD-era inportatu da.
Arbel grisa kentzen dugu arbelean irudiaren gainean eta hautatu Objektua> Maskatua Forma . Irudia irudiaren forma ertz biribilak biltzea zen. Irudia azken posiziora eraman dugu.
Leku irudiarekin, gris ertaineko koadroaren atzeko planoaren kolorea aldatu dugu, testuaren testuaren eta kolorearen testua aldatu egin dira.
06ko 06
Adobe XD CC Grid Feature erabiliz
Txartelarekin osatuta, material diseinuaren arabera behar bezala kokatu behar da. Honek esan nahi du 8 txarteleko bi aldeetatik 8 txarteleko pixelak daude eta txartelak 8 bitekoak izan behar ditu aplikazioen barraren azpian. Horretarako, egin klik behin artelanaren izenean eta, Propietateak panelean, hautatu Grid. Sarea artboard gainean agertzen da.
Sareta tamaina lehenetsia 8 pixel da, materialen diseinuaren tamaina berdina izan dadin. Tamaina beste bat behar baduzu, aldatu eskala eremuan. Sareta kolorea aldatu nahi baduzu, egin klik kolore-txipa eta hautatu kolorea hautatzailearen koloreari.
Sareta ikusgaiarekin, egin klik txartela eta mugitu bere azken posiziora.
Bukatzeko, karta aukeratu dugu, Errepikatu Grid botoian klik egin eta txartelen arteko tartea 8 pixel artean aldatu da.