L-ispeċifikazzjoni tad-Disinn ta 'Materjal minn Google oriġinarjament kienet immirata lejn il-pjattaforma Android bħala mod li tissuġġerixxi l-konsistenza tad-disinn fuq il-pjattaforma.
01 ta '06
Kif Toħloq Karta tad-Disinn ta 'Materjal f'Diviżżjoni ta' Esperjenza Adobe CC
Ladarba d-disinjaturi jkunu bdew jgħadduh u jifhmu l-ħsieb warajh, Design tal-Materjali waqa 'saret waħda mill-aktar filosofiji viżwali influwenti fid -disinn tal-web u tal-mowbajl . Kull ma trid tagħmel biex tara x'qedna nagħmlu hija li tagħmel tfittxija ta 'Materjal Disinn fuq Pinterest u se tara mijiet ta' eżempji u esperimenti fuq apparati, pilloli, u anki websajts.
L-aspett affaxxinanti tad-Disinn ta 'Materjal huwa l-ħsieb ta' Google dwar kif l-apps għandhom jidhru u jaħdmu fuq apparat mobbli iżda l-kunċetti qed jiġu applikati għal kwalunkwe skrin ta 'kwalunkwe daqs fuq kwalunkwe pjattaforma. Kif istati Google fil-paragrafu tal-ftuħ ta 'l-ispeċifikazzjoni, "Aħna sfida lilna nfusna biex toħloq lingwa viżiva għall-utenti tagħna li sintetizza l-prinċipji klassiċi ta' disinn tajjeb bl-innovazzjoni u l-possibbiltà tat-teknoloġija u x-xjenza. Dan huwa disinn materjali. Din l-ispeċifikazzjoni hija dokument ħaj li se jiġi aġġornat billi nkomplu niżviluppaw il-prinċipji u l-ispeċifiċitajiet tad-disinn tal-materjal. "
Il-materjal li tkellem dwaru, f'termini ġenerali ħafna, huwa l-karta u s-sular ta 'Materjal Design huwa l-karta. Aħseb fil-karta tal-indiċi fuq wiċċ u int fit-triq it-tajba. Karta hija element li fih ritratti, vidjows, links tat-testi u oħrajn imma fejn huma differenti minn disinji l-aktar interattivi huma maħsuba biex jiffokaw fuq suġġett wieħed. Il-karti għandhom kantunieri ttundjati, fihom dellijiet ħżiena li jindikaw li huma 'l fuq minn wiċċ u jekk huma kollha fuq l-istess pjan huma msejħa "ġbir".
F'dan il- "Kif Nista" se nkunu se nibdew biljett ibbażat fuq il-spec. Minflok ma toħloq il-karta b'varjetà ta 'għodod ta' immaġni u tpinġija, se nkunu qed nidħlu minn direzzjoni differenti. Se nagħmlu użu mill-għodod fid-Disinn ta 'l-Esperjenza ta' Adobe li bħalissa jinsab fil-preview pubbliku ta 'Macintosh biss u huwa b'xejn. Tista 'tniżżilha hawn.
Ejja nibdew.
02 ta '06
Il-Ħolqien ta 'Prototip Artboard fl-Adobe Experience Design CC
M'hemm l-ebda mod evidenti biex tinħoloq skrin Android mill-Screen Bidu fid-Disinn tal-Esperjenza CC (XD). Dak li użajna biex nagħmlu meta niftħu XD huwa li tagħżel l-għażla ta 'l-iPhone 6 u, meta tinfetaħ l-interface, aħna nagħżlu l- għodda Artboard fil-qiegħ tal-Toolbar u tagħżel Android Mobile minn selezzjonijiet fuq il-pannell tal-Properties fuq il-lemin. Imbagħad ngħaddu għall-għodda ta 'għażla, ikklikkja darba fuq l-isem tal-artboard tal-iPhone u ħassar l-artboard. Mhux aktar.
Fil-verżjoni attwali ta 'XD, hemm vleġġa żgħira ħdejn l-iPhone 6 li, meta għafast, tiftaħ menu drop-down. Minn hemm tagħżel il-verżjoni Android Mobile u l-artboard Mobile Android magħżula tiftaħ fl-interface.
Biex niżguraw li jkollna l-ispazju xieraq tal-iskrin miftuħ għall-biljett, aħna normalment immexxi fuq Skeċċ 3 u kkopja u paste Bar Status, Nav Bar, u App bar mill-Mudell tad-Disinn ta 'Materjal fl-artboard. Sketch 3.2 fih mudell ta 'Disinn ta' Materjal ( File> New From Template> Disinn ta 'Materjal ) u ieħor verament tajjeb wieħed huwa minn Kyle Ledbetter li tista' tikseb hawn. Jekk ma jkollokx Skeċċ, tista 'tikkopjahom u twaħħalhom mill-istikers XD misjuba fil- Fajl> Open UI Kit> Google Material . Tista 'wkoll tniżżilhom minn Google għall-użu fil-Photoshop, Illustrator, After Effects u Sketch.
03 ta '06
Żieda ta 'Karta ta' Disinn ta 'Materjal għal Adobe XD CC Artboard
Waħda mill-iktar karatteristiċi utli ta 'XD hija l -inklużjoni ta' UI Kits għal Apple iOS, Google Material, u Microsoft Windows. F'ħafna aspetti, huma jżidu l-kelma "Rapidu" għat-terminu "Prototipar Rapidu". Barra minn hekk, jagħmlu l-impjieg tad-disinjatur eħfef f'dik l-elementi komuni tal-UI m'għandhomx għalfejn jiġu kkrekkjati b'mod kostanti f'Applikazzjoni tad-Disinn bħal Photoshop, Illustrator jew Skeċċ.
L-element tal-UI li kellna kien karta. Biex tasal għandna għażilna File> Open UI Kit> Google Material u l-kitt jinfetaħ bħala dokument ġdid. L-element li kellna nstabu fil-kategorija tal-Karti.
Dak li nħobbu dwar dawn huwa li jaderixxu ma 'l-ispeċifikazzjoni tad-Disinn ta' Materjal kif stipulat fil-specs tal-Kontenut ta 'Blokki kif ukoll l-ifformattjar tat-test u spazjar ta' speċifikazzjonijiet stabbiliti fil-Ispeċifikazzjoni Tipografika.
L-istil tal-biljett li ridna kien dak tal-qiegħ tax-xellug. Aħna sempliċement marquee bil-maws tagħna u kkupjatha fuq it-clipboard. Sfortunatament, XD ma fihx interface tabbed għad-dokumenti miftuħa. Dak li nagħmlu huwa li jċaqlaq it-tieqa tad-dokument miftuħ 'l isfel ftit biex tiżvela dik li qed naħdmu fuqha, agħżelha u paste. Mod ieħor ta 'qlib rapidu bejn dokumenti XD miftuħa hu li tagħfas Command- " .
04 ta '06
Kif Tibdel Element ta 'Disinn ta' Materjal f'Diviżjonijiet ta 'Esperjenza ta' l-Adobe CC
Meta l-biljett f'XD jasal mill-portafoll ma tantx jibda jaħdem miegħu. L-ewwel ħaġa li għandek bżonn tagħmel huwa li tissawwar il-karta għax għandek bżonn aċċess għall-bit u biċċiet li jikkomponu l-biljett. Biex tagħmel dan, agħżel il-karta u tagħżel Oġġett> Ungrupp jew agħfas Shift-Command-G.
Il-biljett tiegħek issa huwa magħmul minn tliet biċċiet:
- Kaxxa griża ħafifa għall-immaġni.
- Kaxxa griża medja għat-test
- Il-kaxxa ta 'wara użata bħala l-isfond.
L-ewwel pass huwa li titħassar il-kaxxa griża ħafifa. L-uniku għan tagħha huwa li taġixxi bħala spazju għall-pożizzjoni tad-dehra li tagħmilha, jekk tagħżel, fakultattiv.
Il-kaxxa bit-test hija fil-fatt griż skur b'50% opaċità. Din il-kaxxa tista 'tintuża bħala l-isfond tat-test u tista' tbiddel il-kulur u l-opaċità tal-kaxxa.
Għalkemm mhux immedjatament evidenti, il-kaxxa griża ħafifa ssegwi l-ispeċifikazzjoni tad-Disinn tal-Materjal billi l-kantunieri ta 'fuq tagħha huma mqarrba b'2 pixels. Żomm dan f'moħħok jekk inti żżid immaġni. Se jeħtieġ ukoll il-kantunieri fit-tond li jistgħu jiġu miżjuda ma 'applikazzjoni għall-immaġini jew f'XD.
Meta tara kif dan huwa l-istat ta 'mistrieħ tal-karta teħtieġ ukoll dell. Il-spec jagħmilha ċara hemm elevazzjoni tal-mistrieħ tal-karta ta '2 pixels. Biex iżżid dan, agħżel l-għamla ta 'l-isfond iswed u stabbilixxiet il-valuri Y u B (Blur) għal 2 fil-pannell tal-proprjetajiet.
05 ta '06
Kif Żid Image mal-Karta tad-Disinn ta 'Materjal f'Adobe XD CC
Li tkun taf il-karta hija ta '344 pixel wiesa' u ż-żona ta 'l-immaġni hija ta' 150 pixels għoli ( nofs l-għoli tal-kaxxa griża ħafifa ) Ahna nfetħu l-immaġini f'Photoshop, qamuha sad-daqs u ffrankawha billi tuża l-għażla @ 2x fil- Esportazzjoni ta 'Photoshop bħala dialog kaxxa. L-istampa kienet importata f'Adobe XD.
Aħna mbagħad ġibdet il-kaxxa griża ħafifa fuq l-immaġni fuq il-pakkett tal-pakkett u l-Għażla magħżula > Maskra Bil-Forma . Ir-riżultat kien l-immaġni li telgħet il-kantunieri tondi tal-forma. Imbagħad mxejna l-istampa għall-pożizzjoni finali tagħha.
Bl-immaġni f'postha, aħna mbagħad biddilt il-kulur fl-isfond tal-kaxxa griża Medja, biddel it-test u l-kulur tat-test tal-link.
06 ta '06
Bl-użu tal-Karatteristika tal-Grid Adobe XD CC
Bil-karta kompluta issa għandha tkun imqiegħda sewwa skont id-Diskrezzjoni ta 'Materjal spec. Dan ifisser li hemm 8 pixels fuq kull naħa tal-biljett u l-biljett irid ikun ta '8 pixels taħt il-bar tal-app. Biex tagħmel dan, ikklikkja darba fuq l-isem artboard u, fil-Properties Panel, agħżel Grid. Il-grilja tidher fuq l-artboard.
Id-daqs tal-grilja default huwa ta '8 pixels li jiġri li jkun l-istess daqs tal-grilja għal Disinn ta' Materjal. Jekk għandek bżonn daqs differenti, ibdel il-valur fl-erja tal-Grid. Jekk trid tibdel il-kulur tal-grilja, ikklikkja ċ-ċippa tal-kulur u agħżel kulur mill-Picker tal-Kulur li jirriżulta.
Bil-grilja viżibbli, ikklikkja fuq il-karta u ġġeddu fil-pożizzjoni finali tagħha.
Biex tispiċċa, għażilna l-biljett, għamilt il-buttuna Irrepeti Grid u biddilt l-ispazjar bejn il-karti sa 8 pixels ukoll.