La Specifo pri Materialo-Dezajno de Google origine celis la platformon de Android kiel maniero por sugesti konsiston pri dezajno sur la platformo.
01 de 06
Kiel Krei Materialon Dezajno-Karton en Adobe Experience Design CC
Fojo kiun la diseñadores komencis trafi ĝin kaj kompreni la pensadon malantaŭ ĝi, Material Designo trankvile fariĝis unu el la plej influaj vidaj filozofioj en retejo kaj movebla dezajno . Ĉio, kion vi bezonas por vidi, kion ni bezonas estas fari serĉon pri Materialo-Desegno sur Pinterest kaj vi vidos centojn da ekzemploj kaj eksperimentoj pri aparatoj, tablojdoj kaj eĉ retejoj.
La fascinanta aspekto de Materialo-Desegno estas, ke la pensado de Google pri kiel aplikaĵoj aperos kaj funkcias sur mekanismoj móviles, sed la konceptoj estas aplikataj al ajna ekrano de ajna ajn grandeco en ajna platformo. Kiel Google statas en la malferma alineo de la specifaĵo, "Ni defias nin krei vidan lingvon por niaj uzantoj, kiuj sintezas la klasikajn principojn de bona dezajno kun la novigo kaj ebleco de teknologio kaj scienco. Ĉi tiu estas materiala dezajno. Ĉi tiu speco estas vivanta dokumento, kiu estos ĝisdatigita dum ni daŭrigos evoluigi la funkciojn kaj specifajn materialojn. "
La materialo raportita, en tre ĝeneralaj terminoj, estas papero kaj stampo de Material Design estas la karto. Pensu pri indekskarto sur surfaco kaj vi estas sur la ĝusta vojo. Karto estas elemento enhavanta fotojn, filmetojn, tekstajn ligilojn kaj tiel plu, sed kie ili diferencas de plej interagaj dezajnoj, ili intencas koncentriĝi en sola temo. Kartoj havas rondajn angulojn, enhavas malfortajn ombrojn indikante ke ili estas super surfaco kaj se ili ĉiuj estas sur la sama ebeno, ili estas nomataj "kolekto".
En ĉi tiu "Kiel Al" ni kreos karton bazitan sur la spec. Anstataŭ krei la karton per diversaj bildoj kaj desegnaj iloj, ni venos al ĝi de alia direkto. Ni uzos la ilojn en Adobe's Experience Design, kiu nun estas en nur publika antaŭvido de Macintosh kaj estas senpaga. Vi povas elŝuti ĝin ĉi tie.
Komencu.
02 de 06
Kreante La Prototipan Pordon en Adobe Experience Design CC
Ne ekzistas evidenta maniero krei ekranon de Android de la Komenca Ekrano en Speciala Dezajno CC (XD). Kion ni devas fari kiam ni malfermas XD, ni elektas la iPhone 6-a kaj, kiam la interfaco malfermiĝas, ni elektas la Artforman ilon ĉe la fundo de la Ilobreto kaj elektos Android Mobile el la elektoj en la Propraĵa panelo dekstre. Tiam ni translokiĝos al la elekta ilo, alklaku iun fojon sur la nomo de iPhone artboard kaj forigu la artranon. Ne plu.
En la nuna versio de XD, estas malgranda sago apud la iPhone 6 kiu, kiam alklakis, malfermas malsupren-menuon. De tie vi elektas la Android Mobile-versio kaj la Android Poŝtelefono- poŝtelefono elektita malfermiĝas en la interfaco.
Por certigi, ke ni havas la taŭgan ekranan spacon malfermitan por la karto, ni kutime kondukas al Skizo 3 kaj kopiu kaj pekas Statusan Trinkejon, Nav-Baron kaj App-trinkejon de la Materialo-Design Ŝablono en la artrankon. Skizo 3.2 enhavas Ŝablonon pri Materialo-Dezajno ( File> New From Template> Material Design ) kaj alia vere bona libera estas de Kyle Ledbetter, kiun vi povas akiri ĉi tie. Se vi ne havas Skizon, vi povas kopii kaj bati ilin de la XD-stiloj trovitaj en File> Open UI Kit> Google Materialo . Vi ankaŭ povas elŝuti ilin de Google por uzi en Photoshop, Illustrator, After Effects kaj Skizo.
03 de 06
Aldonante Materialon-Desegnkarton al Adobo XD CC Artboard
Unu el la plej utilaj trajtoj de XD estas la inkludo de UI Kits por Apple iOS, Google Materialo, kaj Microsoft Windows. En multaj aspektoj, ili aldonas la vorton "Rapida" al la termino "Rapida Prototipo". Ili ankaŭ faras pli facilan laboron de la dezajno en tiuj komunaj elementoj de UI senĉese rekreataj en Aplikaĵo Aplikaĵo kiel Photoshop, Illustrator aŭ Skizo.
La UI-elemento, kiun ni bezonis, estis karto. Por atingi ĝin, ni elektis File> Open UI Kit> Google Materialo kaj la kitaro malfermiĝis kiel nova dokumento. La elemento, kiun ni bezonis, estis trovita en la kategorio Kartoj.
Kion ni amas pri ĉi tiuj, ili aliĝas al la Materialo-Desegnaĵo kiel enmetita en la Specifaj Blokaj specoj, kiel ankaŭ la formato de teksto kaj interspacaj specoj en la specifa Tipografio.
La karta stilo, kiun ni deziris, estis la en la maldekstra parto. Ni simple marŝas ĝin per nia muso kaj kopiis ĝin al la poŝo. Bedaŭrinde, XD ne enhavas pestaña interfaco por malfermaj dokumentoj. Kion ni faras, movu la malfermitan dokumentan fenestron iom por malkaŝi tiun, kiun ni laboras, elektu ĝin kaj batu. Alia maniero rapide ŝanĝi inter malfermaj XD-dokumentoj estas premi Komandon- ' .
04 de 06
Kiel redakti Materialon Dezajno Elemento en Adobe Experience Design CC
Kiam la karto en XD alvenas el la poŝo, vi ne funkcios bone labori kun ĝi. La unua afero, kiun vi devas fari estas al Ungroup la karto, ĉar vi bezonas aliron al la bitoj kaj pecoj, kiuj formas la karton. Por fari tion, elektu la karton kaj elektu Object> Ungroup aŭ premu Shift-Command-G.
Via karto nun konsistas el tri pecoj:
- Luma griza skatolo por la bildo.
- Meza griza skatolo por la teksto
- La dorso-skatolo uzata kiel fono.
La unua paŝo estas forigi la grizan skatolon. Lia sola celo estas agi kiel lokokupilon por la bildo, kiu ebligas ĝin, se vi elektas, laŭvola.
La skatolo kun la teksto estas fakte malluma griza kun 50% de opakeco. Ĉi tiu skatolo povas esti uzata kiel teksta fono kaj vi povas ŝanĝi la koloron kaj la opakecon de la skatolo.
Kvankam ĝi ne estas tuj evidenta, la luma griza skatolo sekvas la Material-Desegnaĵon spec en kiu ĝiaj supraj anguloj estas rondigitaj per 2 pikseloj. Konsideru ĉi tion se vi aldonas bildon. Ĝi ankaŭ bezonos la rondajn angulojn, kiuj povas esti aldonitaj al bilda apliko aŭ en XD.
Vidante kiel ĉi tiu estas la ripoza stato de la karto, ĝi ankaŭ bezonas ombro. La speco lasas certe ke estas ripozo de la karto de 2 pikseloj. Por aldoni ĉi tion, elektu la nigran fonan formon kaj starigu la valorojn Y kaj B (Blur) al 2 en la propraĵara panelo.
05 de 06
Kiel aldoni bildon al la Materiala Dezajno-Karto en Adobe XD-CC
Sciante, ke la karto estas 344 pikseloj larĝe kaj la bildo de la bildo estas 150 pikseloj alta ( duono de alteco de la griza skatolo ) Ni malfermis la bildon en Photoshop, kroĉis ĝin al la grandeco kaj savis ĝin per la opcio @ 2x en Photoshop's Export As dialog skatolo. La bildo estis importita en Adobe XD.
Ni tiam trenis la grizan skatolon super la bildo sur la kurteno kaj elektis Object> Mask With Shape . La rezulto estis la bildo kaptanta la rondajn angulojn de la formo. Ni tiam movis la bildon al ĝia fina pozicio.
Kun la bildo en la loko, ni ŝanĝis la fonan koloron de la meza griza skatolo, ŝanĝis la tekston kaj la koloron de la ligilo.
06 de 06
Uzante la Adobe XD CC Grid Feature
Kun la karto kompleta ĝi nun devas esti konvene metita laŭ la Materialo-Design-spec. Ĉi tio signifas, ke ekzistas 8 pikseloj ĉe ĉiu flanko de la karto kaj la karto devas esti 8 pikseloj sub la aplikaĵo. Por fari tion, alklaku iun fojon sur la artara nomo kaj, en la Propra Panelo, elektu Grid. La krado aperas super la artbo.
La defaŭlta krado grandeco estas 8 rastrumeroj, kiuj okazas esti la sama grida grandeco por Material Design. Se vi bezonas malsaman grandecon, ŝanĝu la valoron en la Grid-areo. Se vi volas ŝanĝi la koloron de la krado, alklaku la koloron kaj elektu koloron de la rezultanta Kolora Elektilo.
Kun la krado videbla, alklaku la karton kaj movu ĝin en ĝian finan pozicion.
Por fini, ni elektis la karton, alklakis la Repeat Grid-butonon kaj ŝanĝis la interspacon inter la kartoj al 8 pikseloj.