Skip to content

Luo materiaalisuunnittelukortti Adobe Experience Design CC: n avulla

18 de heinäkuu de 2021

Googlen materiaalisuunnittelumäärittely oli alun perin tarkoitettu Android-alustalle keinona ehdottaa suunnittelun johdonmukaisuutta alustalla. Kun suunnittelijat ovat alkaneet sietää sitä ja ymmärtää sen takana olevan ajatuksen, materiaalisuunnittelusta on hiljaa tullut yksi vaikutusvaltaisimmista visuaalisista filosofioista web- ja mobiilisuunnittelussa. Ainoa mitä sinun tarvitsee tehdä nähdäksesi mitä saamme, on tehdä materiaalisuunnitteluhaku Pinterestissä ja näet satoja esimerkkejä ja kokeita laitteilla, tableteilla ja jopa verkkosivustoilla. Materiaalisuunnittelun kiehtova näkökohta on se, että Google ajattelee sovellusten näyttämistä ja toimintaa mobiililaitteilla, mutta käsitteitä sovelletaan mihin tahansa kokoiseen näyttöön millä tahansa alustalla. Kuten Google toteaa erittelyn alkukappaleessa: ”Haastimme itsemme luomaan käyttäjillemme visuaalisen kielen, joka syntetisoi hyvän suunnittelun klassiset periaatteet tekniikan ja tieteen innovaatioiden ja mahdollisuuksien kanssa. Tämä on materiaalisuunnittelu. Tämä tiedote on elävä asiakirja, joka päivitetään, kun jatkamme materiaalisuunnittelun periaatteiden ja yksityiskohtien kehittämistä. ” Materiaali, josta puhutaan, on hyvin yleisesti ottaen paperia ja materiaalisuunnittelun tunnusmerkki on kortti. Ajattele indeksikorttia pinnalla ja olet oikealla tiellä. Kortti on elementti, joka sisältää valokuvia, videoita, tekstilinkkejä ja niin edelleen, mutta jos ne eroavat useimmista interaktiivisista malleista, niiden on tarkoitus keskittyä yhteen aiheeseen. Korteissa on pyöristetyt kulmat, niissä on heikkoja varjoja, jotka osoittavat, että ne ovat pinnan yläpuolella, ja jos ne kaikki ovat samalla tasolla, niitä kutsutaan ”kokoelmiksi”. Tässä ”How To” -ohjelmassa aiomme luoda kortin, joka perustuu spec. Sen sijaan, että luisimme kortin erilaisilla kuvantamis- ja piirtotyökaluilla, tulemme siihen eri suunnasta. Aiomme käyttää Adoben Experience Design -työkaluja, joka on tällä hetkellä vain Macintoshin julkisessa esikatselussa ja ilmainen. Voit ladata sen täältä. Aloitetaan.

Prototyyppitaulun luominen Adobe Experience Design CC: ssä

Ei ole selvää tapaa luoda Android-näyttöä aloitusnäytöltä Experience Design CC: ssä (XD). Aikaisemmin teimme, kun avasimme XD: n, on valita iPhone 6 -vaihtoehto ja kun käyttöliittymä avautuu, valitsemme Piirustustyökalu pohjassa Työkalurivi ja valitse Android Mobile Ominaisuudet-paneelin valinnoista oikealle. Sitten siirrymme valintatyökaluun, napsauta kerran iPhonen piirtoalustan nimi ja poista piirtoalusta. XD: n nykyisessä versiossa iPhone 6: n vieressä on pieni nuoli, joka napsautettaessa avaa avattavan valikon. Sieltä valitset Android-mobiiliversio ja valittu Android Mobile -taulukko avautuu käyttöliittymään. Varmistaaksemme, että kortille on avattu oikea näyttötila, siirrymme yleensä Sketch 3: een ja kopioimme ja liitämme tilarivin, navigointipalkin ja sovelluspalkin materiaalisuunnittelumallista taululle. Piirros 3.2 sisältää materiaalisuunnittelumallin (Tiedosto > Uusi mallista > Materiaalisuunnittelu) ja toinen todella hyvä ilmainen on Kyle Ledbetteriltä, ​​jonka voit hankkia täältä. Jos sinulla ei ole Sketchia, voit kopioida ja liittää ne XD-tarroista Tiedosto > Avaa käyttöliittymäsarja > Google-aineisto. Voit myös ladata ne Googlesta käytettäväksi Photoshopissa, Illustratorissa, After Effectsissä ja Sketchissä.

Materiaalikortin lisääminen Adobe XD CC -taululle

Material UI Kit näkyy ja käytettävä kortti on valittu.

Yksi XD: n hyödyllisimmistä ominaisuuksista on käyttöliittymäpakettien sisällyttäminen Apple iOS: lle, Google-materiaalille ja Microsoft Windowsille. Monissa suhteissa he lisäävät sanan ”Rapid” termiin ”Rapid Prototyping”. Samalla ne helpottavat suunnittelijan työtä, koska yleisiä käyttöliittymäelementtejä ei tarvitse luoda uudelleen suunnittelusovelluksessa, kuten Photoshop, Illustrator tai Sketch. Tarvittava käyttöliittymäelementti oli kortti. Pääsimme siihen valitsemalla Tiedosto > Avaa käyttöliittymäsarja > Google-aineisto ja paketti avattiin uutena asiakirjana. Tarvittava elementti löydettiin Korttiluokka. Rakastamme näissä asioissa sitä, että ne noudattavat materiaalisuunnitteluvaatimuksia, jotka on määritelty Content Blocks -määrityksissä, sekä tekstin muotoilua ja välitietoja, jotka on määritelty typografian määrityksissä. Halusimme korttityylin vasemmassa alakulmassa. Me yksinkertaisesti telttaan se hiirellä ja kopioimme sen leikepöydälle. Valitettavasti XD ei sisällä välilehdellä varustettua käyttöliittymää avoimille asiakirjoille. Se, mitä teemme, on siirtää avoin asiakirja-ikkuna hieman alaspäin paljastamaan työstämämme ikkuna, valita se ja liittää. Toinen tapa siirtyä nopeasti avoimen XD-asiakirjan välillä on painaa Komento+.

Materiaalin suunnitteluelementin muokkaaminen Adobe Experience Design CC: ssä

Kortin kolme osaa on erotettu taululla.

Kun XD-kortti saapuu leikepöydältä, älä aloita iloisesti sen kanssa. Ensimmäinen asia, joka sinun on tehtävä on purkaa kortti, koska tarvitset pääsyn kortin muodostaviin paloihin. Voit tehdä tämän valitsemalla kortin ja valitsemalla Esine > Pura ryhmä tai Lehdistö Siirtää+Komento+G.

Korttisi koostuu nyt kolmesta osasta:

  • Vaaleanharmaa ruutu kuvalle.
  • Medium harmaa laatikko tekstille.
  • Taustaruutua käytetään taustana.

Ensimmäinen vaihe on poistaa vaaleanharmaa ruutu. Sen ainoa tarkoitus on toimia kuvan paikkamerkkinä, mikä tekee siitä valinnaisen, jos haluat. Tekstilaatikko on itse asiassa tummanharmaa, 50% peittävyys. Tätä laatikkoa voidaan käyttää tekstitaustana, ja voit muuttaa väriä ja laatikon peittävyyttä. Vaaleanharmaa laatikko noudattaa materiaalisuunnittelun spesifikaatiota siinä mielessä, että sen yläkulmat on pyöristetty 2 pikselillä. Pidä tämä mielessä, jos lisäät kuvaa. Se tarvitsee myös pyöristetyt kulmat, jotka voidaan lisätä kuvankäsittelyohjelmaan tai XD: nä. Nähdessään kuinka tämä on kortin lepotila, se tarvitsee myös varjon. Tekniset tiedot tekevät selväksi, että kortti on levossa 2 pikselin korkeudella. Lisää tämä valitsemalla mustan taustan muoto ja aseta Y- ja B (hämärtää) -arvoksi 2 ominaisuuspaneelissa.

Kuinka lisätä kuva materiaalisuunnittelukortille Adobe XD CC: ssä

Kuva on ruudun vasemmalla puolella ja kuvan peittämiseen on käytetty harmaata ruutua.

Tietäen, että kortti on 344 pikseliä leveä ja kuva-ala on 150 pikseliä korkea (puolet vaaleanharmaan laatikon korkeudesta) Avasimme kuvan Photoshopissa, rajaimme sen kokoon ja tallensimme sen käyttämällä Photoshopin Vie nimellä -valintaikkunan @ 2x -vaihtoehtoa. Kuva tuotiin Adobe XD: hen. Vedimme sitten vaaleanharmaata laatikkoa kartongin kuvan päälle ja valitsimme Esine > Naamio muodon kanssa. Tuloksena oli, että kuva poimi muodon pyöristetyt kulmat. Siirtimme kuvan lopulliseen asentoonsa. Kun kuva oli paikallaan, muutimme sitten Medium harmaa -ruudun taustaväriä, muutimme tekstiä ja linkkitekstin väriä.

Adobe XD CC Grid -ominaisuuden käyttäminen

Ruudukon päällekkäin näkyy taulun yli.

Kun kortti on valmis, se on nyt asetettava oikein materiaalisuunnittelun mukaisesti. Tämä tarkoittaa, että kortin kummallakin puolella on 8 pikseliä, ja kortin on oltava 8 pikseliä sovelluspalkin alapuolella. Voit tehdä tämän napsauttamalla kerran taulun nimi ja Ominaisuudet-paneeli, valitse Ruudukko. Ristikko ilmestyy taulun yli. Ruudukon oletusarvo on 8 pikseliä, jotka satunnaisesti ovat samankokoiset ruudukon materiaalisuunnittelussa. Jos tarvitset eri kokoa, muuta arvoa Ruudukko-alueella. Jos haluat muuttaa ruudukon väriä, napsauta värisiru ja valitse väri tuloksesta Värinvalitsija. Kun ruudukko on näkyvissä, napsauta kortti- ja siirrä se lopulliseen asentoonsa. Lopuksi valitsimme kortin, napsautimme Toista ruudukko -painiketta ja muutti myös korttien välisen etäisyyden 8 pikseliksi.