Googlen materiaalisuunnittelumäärittely alun perin suunnattiin Android-alustalle keinona ehdottaa suunnittelun yhdenmukaisuutta alustalla.
01/06
Materiaalin suunnittelukortin luominen Adobe Experience Design CC: ssä
Kun suunnittelijat alkoivat murtautua sen läpi ja ymmärtää ajattelun taustalla, Material Design on hiljaa tullut yksi vaikutusvaltaisimmista visuaalisista filosofioista web- ja mobiilisuunnittelussa . Sinun tarvitsee vain selvittää, mistä olemme tekemässä, tekemällä Material Design -haun Pinterestissä ja näet satoja esimerkkejä ja kokeiluja laitteista, tablet-laitteista ja jopa verkkosivustoista.
Materiaalisuunnittelun kiehtova näkökohta on se, että Google ajattelee, miten sovellukset näyttävät ja toimivat mobiililaitteilla, mutta käsitteitä sovelletaan missä tahansa millä tahansa foorumilla. Kuten Google toteaa erittelyn alussa, "Haastelimme itseämme luomaan visuaalisen kielen käyttäjille, jotka syntetisoivat hyvän suunnittelun klassiset periaatteet innovaatioilla ja teknologian ja tieteen mahdollisuuksilla. Tämä on materiaalinen muotoilu. Tämä spec on elävä asiakirja, jota päivitetään, kun kehitämme edelleen materiaalisuunnittelun periaatteita ja ominaisuuksia. "
Materiaali, josta puhutaan hyvin yleisesti, on paperi, ja materiaalisuunnittelun tunnusmerkki on kortti. Ajattele pöytämikorttia ja olet oikealla tiellä. Kortti on elementti, joka sisältää valokuvia, videoita, tekstilinkkejä ja niin edelleen, mutta jos ne eroavat useimmista vuorovaikutteisista kuvioista, niiden on tarkoitus keskittyä yhteen aiheeseen. Kortilla on pyöristetyt kulmat, heikot varjot osoittavat, että ne ovat pinnan yläpuolella ja jos ne ovat kaikki samalla tasolla, niitä kutsutaan "kokoelmaksi".
Tässä "Miten" aion luoda kortti perustuu spec. Sen sijaan, että luomme kortin erilaisilla kuvankäsittely- ja piirustustyökaluilla, tulemme siihen eri suuntaan. Käytämme työkaluja Adoben Experience Design -työkalussa, joka on tällä hetkellä vain Macintoshin julkisessa esikatselussa ja on ilmainen. Voit ladata sen täältä.
Aloitetaan.
02/06
Prototype Artboardin luominen Adobe Experience Design CC: ssä
Ei ole selvää tapaa luoda Android-näyttöä ExperienceDesign CC (XD) -näytön aloitusnäytöstä. Aiemmin tekemättä, kun avaat XD: n, valitaan iPhone 6 -vaihtoehto ja kun käyttöliittymä avautuu, valitaan Työkalupalkin alaosassa oleva Taulukko-työkalu ja valitsemme Ominaisuudet-paneelin oikealla puolella olevista valinnoista Android Mobile . Sitten siirrymme valintatyökaluun, klikkaa kerran iPhonen taustanäytöstä ja poistamme taulun. Ei enempää.
XD: n nykyisessä versiossa iPhone 6: n vieressä on pieni nuoli, joka avaa avattavaa valikkoa napsauttamalla. Sieltä valitset Android Mobile -version ja valittu avattu Android Mobile -artikkeli avautuu käyttöliittymässä.
Varmistaaksemme, että meillä on oikea näytön tila auki kortille, pääsemme yleensä Sketch 3: hen ja kopioimme ja liitämme Material Design Templen tilapalkin, Nav-palkin ja App-palkin taulusta. Sketch 3.2 sisältää materiaalisuunnittelumallin ( File> New From Template> Material Design ) ja toinen todella hyvä vapaa Kyle Ledbetterilta, jonka voit hankkia täältä. Jos sinulla ei ole Sketchia, voit kopioida ja liittää ne tiedostossa> Avaa UI-sarja> Google-materiaali XD-tarroista. Voit myös ladata ne Googlelta käytettäväksi Photoshopissa, Illustratorissa, After Effectsissa ja Sketchissä.
03/06
Materiaalin suunnittelukortin lisääminen Adobe XD CC Artboard -työkaluun
Yksi XD: n hyödyllisimmistä ominaisuuksista on UI-sarjojen sisällyttäminen Apple iOS: hen, Google Materialiin ja Microsoft Windowsiin. Monessa suhteessa he lisäävät sanan "Rapid" termiin "Rapid Prototyping" ja tekevät suunnittelijan työn helpommaksi siinä, että yhteisiä UI-elementtejä ei tarvitse luoda jatkuvasti muotoilusovelluksessa, kuten Photoshopissa, Illustratorissa tai Luonnos.
UI-elementti, jota tarvitsemme, oli kortti. Pääset siihen valitsemalla Tiedosto> Avaa UI-sarja> Google-materiaali ja sarja avattu uudeksi asiakirjaksi. Tarvitsemamme elementti löytyi Kortit-luokasta.
Mitä me rakastamme näistä on se, että ne noudattavat Material Design -määrittelyä, joka on määritelty Content Blocks -spesifikaatioissa sekä Typography spec: ssa esitetyistä tekstin muotoilusta ja välimatkailusta.
Haluamme korttityylin vasemmassa alakulmassa. Me yksinkertaisesti vedämme sen hiirellä ja kopioimme sen leikepöydälle. Valitettavasti XD ei sisällä välilehtiliitettä avoimille asiakirjoille. Meidän on siirrettävä avoin dokumenttiikkuna hieman alaspäin, jotta voimme paljastaa sen, johon olemme tekemässä, valitse se ja liitä se. Toinen tapa vaihtaa nopeasti avointen XD-dokumenttien välillä on paina Command- ' .
04/06
Materiaalin suunnitteluosion muokkaaminen Adobe Experience Design CC: ssä
Kun XD: n kortti saapuu leikepöydältä, ei ole iloisesti aloittamassa sitä. Ensimmäinen asia, jonka sinun tarvitsee tehdä, on poistaa kortti irrottautuvat, koska tarvitset kortin kokoonpanon bittiä ja kappaleita. Voit tehdä tämän valitsemalla kortin ja valitsemalla Objekti> Poista ryhmä tai painamalla Vaihto-Komento-G.
Korttisi koostuu nyt kolmesta kappaleesta:
- Vaaleanharmaa laatikko kuvaan.
- Keskiruskea harmaa tekstiä varten
- Taustalla käytetty takakansi.
Ensimmäinen vaihe on poistaa vaaleanharmaa laatikko. Sen ainoa tarkoitus on toimia paikanvaraajana kuvaan, mikä tekee siitä, jos valitset, valinnainen.
Tekstissä oleva ruutu on todella tummanharmaa, 50%: n läpikuultamisella. Tätä laatikkoa voi käyttää tekstin taustana ja voit vaihtaa värin ja laatikon peittävyyttä.
Vaikka se ei ole välittömästi ilmeistä, vaaleanharmaa laatikko noudattaa materiaalisuunnittelua, sillä sen yläkulmat on pyöristetty 2 pikseliä. Pidä tämä mielessä, jos lisäät kuvaa. Se tarvitsee myös pyöristetyt kulmat, jotka voidaan lisätä kuvankäsittelyohjelmaan tai XD: hen.
Nähtäväksi, miten tämä on kortin lepoaika, se tarvitsee myös varjon. Speksissä on selvää, että 2 pikselin kortti on lepotilassa. Lisää tämä valitsemalla musta taustakuvio ja asettamalla Y ja B (Blur) -arvot arvoon 2 ominaisuuspaneelissa.
05/06
Kuinka lisätä kuva Adobe XD CC -materiaalin suunnittelukorttiin
Kortin tuntemus on 344 pikseliä leveä ja kuvapinta on 150 pikseliä korkea ( puolet vaaleanharmaa laatikosta ) Avattu kuva Photoshopissa, leikataan kokoon ja tallennetaan se käyttämällä @ 2x-vaihtoehtoa Photoshopin Export As -valintaikkunassa laatikko. Kuva tuotiin Adobe XD: hen.
Vedimme sitten vaaleanharmaa laatikko kuvion päälle liitetiedostossa ja valitsimme objektin> Mask with Shape . Tuloksena oli kuva, joka keräsi muodon pyöreät kulmat. Sitten siirsimme kuvan lopulliseen asemaan.
Kun kuva oli paikallaan, vaihdimme sitten keskiraskaat laatikon taustaväri, muutimme linkin tekstin ja värin.
06/06
Käyttämällä Adobe XD CC Grid -ominaisuutta
Kun kortti on valmis, se on sijoitettava asianmukaisesti materiaalisuunnittelun mukaisesti. Tämä tarkoittaa, että kortin molemmilla puolilla on 8 pikseliä ja kortin on oltava 8 pikseliä app-palkin alapuolella. Voit tehdä tämän napsauttamalla karttanäkymän nimeä ja valitsemalla Ominaisuudet-ruudusta Grid. Verkko näkyy taulun alla.
Oletusarvoisen ruudukon koko on 8 pikseliä, jotka sattuvat olemaan samat ruudukkokoot materiaalisuunnittelussa. Jos tarvitset eri kokoa, muuta arvo Grid-alueella. Jos haluat muuttaa ruudukon väriä, napsauta värisirua ja valitse värinvalinnasta saatu väri.
Kun verkko on näkyvissä, napsauta korttia ja siirrä se lopulliseen asentoonsa.
Lopettamiseksi valitsimme kortin, napsautimme Repeat Grid -painiketta ja muutimme korttien välisen etäisyyden myös 8 pikseliin.