Roedd y fanyleb Deunyddiau Dylunio o Google wedi'i anelu yn wreiddiol at y llwyfan Android fel ffordd o awgrymu cysondeb dylunio ar y llwyfan.
01 o 06
Sut i Greu Cerdyn Dylunio Deunydd yn Adobe Experience Design CC
Unwaith y dechreuodd dylunwyr fynd drwyddo a deall y meddyliau y tu ôl iddi, mae Deunydd Dylunio wedi dod yn dawel yn un o'r athroniaethau gweledol mwyaf dylanwadol mewn dylunio gwe a symudol . Y cyfan sydd angen i chi ei wneud i weld beth rydym yn ei wneud yw gwneud chwiliad Dylunio Deunydd ar Pinterest a byddwch yn gweld cannoedd o enghreifftiau ac arbrofion ar ddyfeisiau, tabledi a gwefannau hyd yn oed.
Agwedd ddiddorol Dylunio Deunydd yw mai Google yw meddwl sut y dylai apps ymddangos a gweithio ar ddyfeisiau symudol ond mae'r cysyniadau'n cael eu cymhwyso i unrhyw sgrin o unrhyw faint ar unrhyw lwyfan. Fel y dywed Google ym mharagraff agoriadol y fanyleb, "Fe wnaethom herio ein hunain i greu iaith weledol i'n defnyddwyr sy'n cyfuno egwyddorion clasurol dylunio da gydag arloesedd a phosibilrwydd technoleg a gwyddoniaeth. Mae hwn yn ddyluniad materol. Mae'r fanyleb hon yn ddogfen fyw a fydd yn cael ei diweddaru wrth i ni barhau i ddatblygu'r egwyddorion o ran dylunio deunyddiau. "
Mae'r deunydd y soniwyd amdano, mewn termau cyffredinol iawn, yn bapur ac yn nodyn o Dylunio Deunydd yw'r cerdyn. Meddyliwch am gerdyn mynegai ar wyneb ac rydych ar y trywydd iawn. Mae cerdyn yn elfen sy'n cynnwys lluniau, fideos, cysylltiadau testun ac yn y blaen ond lle maent yn wahanol i'r rhan fwyaf o ddyluniadau rhyngweithiol, maen nhw'n bwriadu canolbwyntio ar un pwnc. Mae gan y cardiau gorneli crwn, yn cynnwys cysgodion gwan sy'n nodi eu bod uwchben wyneb ac os ydynt i gyd ar yr un awyren fe'u cyfeirir atynt fel "casgliad".
Yn y "Sut i" hon byddwn yn creu cerdyn yn seiliedig ar y fanyleb. Yn hytrach na chreu'r cerdyn gydag amrywiaeth o ddelweddu ac offer arlunio, byddwn yn dod ato o gyfeiriad gwahanol. Byddwn yn defnyddio'r offer yn Adobe's Experience Design sydd ar hyn o bryd mewn rhagolwg cyhoeddus Macintosh yn unig ac yn rhad ac am ddim. Gallwch ei lawrlwytho yma.
Gadewch i ni ddechrau.
02 o 06
Creu 'r Prototeip Artboard yn Adobe Experience Design CC
Nid oes ffordd amlwg o greu sgrin Android o'r Sgrin Cychwyn yn Experience Design CC (XD). Yr hyn a ddefnyddiwyd gennym pan fyddwn yn agor XD, yw dewis yr opsiwn iPhone 6 a, pan fydd y rhyngwyneb yn agor, dewiswn yr offer Artboard ar waelod y Bar Offer a dewiswch Android Mobile o'r dewisiadau ar y panel Eiddo ar y dde. Yna, rydym yn trosglwyddo i'r offeryn dewis, cliciwch unwaith ar enw artboard iPhone a dileu'r artboard. Dim mwy.
Yn y fersiwn gyfredol o XD, mae saeth fechan wrth ymyl yr iPhone 6 sydd, pan glicio, yn agor dewislen i lawr. Oddi yno dewiswch fersiwn Symudol Android a dewisir celfwrdd Android Mobile yn y rhyngwyneb.
Er mwyn sicrhau bod gennym y gofod sgrin priodol ar agor ar gyfer y cerdyn, byddwn fel arfer yn gorffen i Fraslun 3 ac yn copi a gludo Bar Statws, Nav Bar, a Bar App o'r Templed Dylunio Deunyddiau i'r artboard. Mae Braslun 3.2 yn cynnwys templed Deunydd Deunydd ( Ffeil> New From Template> Deunyddiau Dylunio ) ac mae un arall am ddim iawn o Kyle Ledbetter y gallwch ei gael yma. Os nad oes Braslun gennych, gallwch gopïo a gludo nhw o'r sticeri XD a geir yn File> Open UI Kit> Google Material . Gallwch hefyd eu lawrlwytho o Google i'w defnyddio yn Photoshop, Illustrator, After Effects a Braslun.
03 o 06
Ychwanegu Cerdyn Dylunio Deunydd i Adobe XD CC Artboard
Un o nodweddion mwyaf defnyddiol XD yw cynnwys Kits UI ar gyfer Apple iOS, Google Material, a Microsoft Windows. Mewn sawl ffordd, maent yn ychwanegu'r gair "Cyflym" i'r term "Prototeipio Cyflym". Yn ogystal, nid ydynt yn gwneud gwaith y dylunydd yn haws yn yr elfennau UI cyffredin hyn yn cael eu hail-greu yn gyson mewn Cais Dylunio fel Photoshop, Illustrator neu Braslun.
Yr elfen UI oedd ei angen arnom oedd cerdyn. I gyrraedd, dewiswyd File> Open UI Kit> Google Material a agorwyd y pecyn fel dogfen newydd. Canfuwyd yr elfen yr oedd ei hangen arnom yn y categori Cardiau.
Yr hyn yr ydym wrth ein boddau am y rhain yw eu bod yn glynu wrth y fanyleb Deunyddiau Dylunio fel y'u nodir yn y manylebau Cynnwys Blociau yn ogystal â'r manylebau fformatio testun a gofod a osodir yn y fanyleb Typography.
Yr arddull cerdyn yr oeddem ei eisiau oedd yr un ar y chwith isaf. Rydyn ni'n ei blygu gyda'n llygoden ac yn ei gopïo i'r clipfwrdd. Yn anffodus, nid yw XD yn cynnwys rhyngwyneb tabbed ar gyfer dogfennau agored. Yr hyn a wnawn yw symud y ffenestr ddogfen agored i lawr i ddatgelu yr un yr ydym yn gweithio arno, ei ddewis a'i gludo. Ffordd arall o newid yn gyflym rhwng dogfennau XD agored yw i bwyso ar Command- ' .
04 o 06
Sut i Golygu Elfen Dylunio Deunydd yn Adobe Experience Design CC
Pan fydd y cerdyn yn XD yn cyrraedd o'r clipfwrdd, peidiwch â dechrau gweithio gydag ef. Y peth cyntaf y mae angen i chi ei wneud yw Ungroup y cerdyn oherwydd mae angen mynediad at y darn a'r darnau sy'n cyfansoddi'r cerdyn. I wneud hyn, dewiswch y cerdyn a dewiswch Object> Ungroup neu gwasgwch Shift-Command-G.
Mae eich cerdyn nawr yn cynnwys tair darn:
- Blwch llwyd golau ar gyfer y ddelwedd.
- Blwch llwyd canolig ar gyfer y testun
- Y blwch cefn a ddefnyddir fel cefndir.
Y cam cyntaf yw dileu'r blwch llwyd golau. Ei unig bwrpas yw gweithredu fel llechenydd lle ar gyfer y ddelwedd sy'n ei gwneud yn ddewisol, os byddwch yn dewis.
Mewn gwirionedd, mae'r blwch gyda'r testun mewn llwyd tywyll gyda 50% o ddibyniaeth. Gellir defnyddio'r blwch hwn fel cefndir y testun a gallwch newid y lliw a diffygion y blwch.
Er nad yw'n amlwg ar unwaith, mae'r blwch llwyd golau yn dilyn y fanyleb Dylunio Deunydd gan fod ei gorneli uchaf yn cael eu crwnio gan 2 picsel. Cadwch hyn mewn golwg os ydych chi'n ychwanegu delwedd. Bydd hefyd angen corneli crwn y gellir eu hychwanegu at gais delweddu neu yn XD.
Gan edrych fel sut mae cyflwr y cerdyn yn y gorffennol mae angen cysgod hefyd. Mae'r fanyleb yn ei gwneud hi'n glir bod drychiad gorffwys o'r cerdyn o 2 picsel. I ychwanegu hyn, dewiswch siâp cefndir du a gosodwch werthoedd Y a B (Blur) i 2 yn y panel eiddo.
05 o 06
Sut i Ychwanegu Delwedd i'r Cerdyn Dylunio Deunyddiau yn Adobe XD CC
Mae adnabod y cerdyn yn 344 picsel ar led ac mae'r ardal ddelwedd yn 150 picsel o uchder ( hanner uchder y blwch llwyd golau ) Fe wnaethom agor y ddelwedd yn Photoshop, ei gipio i faint a'i arbed trwy ddefnyddio'r opsiwn @ 2x yn y dialog blwch. Cafodd y ddelwedd ei fewnforio i mewn i Adobe XD.
Yna, fe wnaethom llusgo'r blwch llwyd golau dros y ddelwedd ar y pasteboard a'r Mwgwd Gwrthod> Mask gyda Shape . Y canlyniad oedd y ddelwedd yn codi corneli crwn y siâp. Yna symudom y ddelwedd i'w safle olaf.
Gyda'r ddelwedd yn ei le, fe wnaethom newid lliw cefndir y blwch llwyd Canolig, newid testun a lliw y testun cyswllt.
06 o 06
Defnyddio Nodwedd Grid CC XD Adobe
Gyda'r cerdyn wedi'i gwblhau mae'n rhaid ei osod yn awr yn ôl y fanyleb Dylunio Deunydd. Mae hyn yn golygu bod 8 picsel ar y naill ochr i'r cerdyn ac mae angen i'r cerdyn fod yn 8 picsel o dan y bar app. I wneud hyn, cliciwch unwaith ar yr enw artboard ac, yn y Panel Eiddo, dewiswch Grid. Mae'r grid yn ymddangos dros y artboard.
Mae maint y grid rhagosodedig yn 8 picsel sy'n digwydd fel yr un maint grid ar gyfer Dylunio Deunydd. Os bydd angen maint gwahanol arnoch, newid y gwerth yn ardal y Grid. Os ydych chi eisiau newid lliw y grid, cliciwch ar y sglodion lliw a dewiswch liw o'r Picker Lliw sy'n deillio o hynny.
Gyda'r grid yn weladwy, cliciwch ar y cerdyn a'i symud yn ei sefyllfa derfynol.
I orffen, dewiswyd y cerdyn, cliciwch ar y botwm Ail-wneud Grid a newid y gofod rhwng y cardiau i 8 picsel hefyd.