Sisältö
- Vaihe 01
- Vaihe 02
- Vaihe 03
- Vaihe 04
- Vaihe 05
- Vaihe 06
- Vaihe 07
- Vaihe 08
- Vaihe 09
- Vaihe 10
- Vaihe 11
- Vaihe 12
- Vaihe 13
- Vaihe 14
- Vaihe 15
- Vaihe 16
- Vaihe 17
- Vaihe 18
Oletko koskaan taistellut johdonmukaisuuden suhteen web-suunnittelussa? Tätä tapahtuu liian usein, varsinkin kun työskentelet mittakaavassa. Onneksi meille kuviokirjastot auttavat!
Kuvakirjasto on kokoelma käyttöliittymän suunnitteluelementtejä, joita voidaan käyttää uudelleen sivujen luomiseen. Esimerkkejä ovat navigoinnit, painikkeet, kappaleet, otsikot ja lomakkeet. Suunnittelemalla yksittäisiä elementtejä kokonaisen sivun sijaan kannustamme aktiivisesti uudelleenkäytettävyyttä, mikä johtaa yhtenäisiin ja helppohoitoisiin malleihin.
Ennen mallikirjaston toteuttamista on varmistettava, että suunnittelutyökalumme pystyvät käsittelemään uudelleenkäytettäviä elementtejä. Viimeisten kahden vuoden aikana suunnittelutyökaluni on ollut Sketch: kevyt, vektoripohjainen työkalu, joka sopii täydellisesti rajapintoihin ja kuvakirjastoihin. Miksi se on täydellinen? Annan sinulle esimerkin.
Oletetaan, että sinulla on painikeelementti, jota käytetään useita kertoja verkkosivustolla, ja päättää sitten muuttaa sitä. Normaalisti joudut käymään läpi ja vaihtamaan manuaalisesti kyseisen painikkeen kaikki esiintymät. Ei Sketchin kanssa. Ohjelmisto sisältää ominaisuuden nimeltä Symbolit: erityinen tasoryhmä, jossa kaikki symboliin tekemäsi muutokset otetaan automaattisesti käyttöön kaikissa muissa instansseissa. Se sopii erinomaisesti käytettäväksi uudelleenkäytettävien elementtien kanssa.
OK, tarpeeksi minua laulaa Sketchin kiitoksia. Sukelletaan opetusohjelmaan! Eikö sinulla ole kopiota Sketchistä? Lataa ilmainen kokeiluversio täältä.
Vaihe 01
Ennen kuin aloitamme, varmista, että sinulla on ilmainen Google-fontti Source Sans Pro asennettuna. Luo uusi asiakirja ja lisää sitten uusi piirtoalusta siirtymällä kohtaan Lisää> Piirrä (pikanäppäin: A). Piirtotaulu on kiinteä kangas, jota käytämme näytön koona. Huomaat, että Artboard 1 on lisätty vasemmalla olevaan tasoluetteloon. Määritä oikealla olevassa Tarkastaja-paneelissa Leveykseksi 1280 kuvapistettä ja Korkeudeksi 2000 kuvapistettä.
Vaihe 02
Nyt luoda verkkomme. Kun Artboard 1 on valittu, siirry kohtaan Näytä> Kanvaasi> Näytä asettelu (pikanäppäin: Ctrl + L). Näet oletusruudukon. Nyt meidän on vain muokattava sitä. Kun Artboard 1 on edelleen valittuna, siirry kohtaan Näytä> Kanvaasi> Asetteluasetukset. Aseta kokonaisleveydeksi 1080 kuvapistettä, sarakkeiden lukumääräksi 12, kourun leveydeksi 30 kuvapistettä ja sarakkeen leveydeksi 60 kuvapistettä. Varmista, että kouru ulkona on valittuna. Napsauta keskipainiketta.
Vaihe 03
Nyt piirtoalusta ja ruudukko on määritetty, on aika lisätä sisältöä. Tätä opetusohjelmaa varten aiomme luoda neljä erityyppistä mallikirjastoelementtiä. Aloitetaan painikkeilla. Voit luoda painikkeen taustan valitsemalla Lisää> Muoto> Suorakulmio (pikanäppäin: R). Määritä Tarkastuksessa Leveykseksi 280 kuvapistettä ja Korkeudeksi 44 kuvapistettä. Aseta säteeksi 3 kuvapistettä ja täyteväriksi # 1A9DD3.
Vaihe 04
Lisää nyt teksti. Siirry kohtaan Lisää> Teksti (pikakuvake: T). Vaihda kirjasintyypiksi Source Sans Pro, painosta lihavoitu, väristä #FFFFFF, koon arvoksi 16pt ja napsauta keskityskuvaketta. Sijoita teksti siten, että se on keskellä taustaa. Valitse molemmat tasot ja siirry kohtaan Järjestä> Ryhmäkerrokset (pikanäppäin: Cmd + G). Kun ryhmä on valittu, siirry Taso> Luo symboli. Huomaat, että Sketch kehottaa sinua nimeämään symbolin, joten kirjoita Button. Symbolit voidaan tunnistaa purppuran kerroksen kuvakkeella.
Vaihe 05
Symboliin tehdyt muutokset, kuten juuri luomamme muutokset, sovelletaan kaikkiin muihin symboleihin. Ainoa ongelma on, että jos muutamme painikkeen tekstiä symbolin sisällä, se muuttaa kaikkien muiden painikkeiden tekstiä. Voit estää tämän tapahtumisen valitsemalla tekstikerroksen ja valitsemalla valintaruudun Sulje pois tekstiarvo Symbolista Inspectorissa. Luodaan nyt kaksoiskappale. Siirry kohtaan Lisää> Symbolit> Painike.
Vaihe 06
Jos haluat nähdä symbolit toiminnassa, muuta yhden painikkeen taustaväri. Huomaa, kuinka väri muuttuu molemmille. Mutta jos muutat yhden painikkeen tekstiä, toisen painikkeen teksti ei muutu. Vain tyylit ovat synkronoituja, ei tekstimerkkijonoja. Tämä tarkoittaa, että voimme esimerkiksi luoda Rekisteröidy, Osta nyt ja Ota yhteyttä -painikkeet, joilla kaikilla on sama tyyli.
Vaihe 07
Ennen kuin jatkat, on tärkeää olla tietoinen siitä, miten mittaus toimii Sketchissä. Valitse yksi painike, pidä Alt-näppäintä painettuna ja vie hiiri toisen painikkeen päälle näyttääksesi niiden välisen etäisyyden. Tämä ei ole vain ominaisuus, jota suunnittelijat käyttävät jatkuvasti, vaan se sopii erinomaisesti kehittäjille, joiden on säännöllisesti laskettava tarkat pikselimittaukset.
Vaihe 08
Seuraavaksi otsikot. Koska otsikot ovat uudelleenkäytettäviä tekstielementtejä, on tärkeää käyttää Tekstityylit-ominaisuutta symbolien sijaan. Lisää tekstikerros ja kirjoita Otsikkotaso 1. Vaihda kirjasintyypiksi Source Sans Pro, paino rohkeaksi, väri arvoksi # 3A4654 ja koko arvoksi 37pt. Valitse Taso> Luo jaettu tyyli. Tarkastuksessa huomaat, että teksti on korostettu. Luonnos kehottaa sinua nimeämään tekstityylin, joten kirjoita H1.
Vaihe 09
Luo H1 - H6 -elementit toistamalla viimeinen vaihe. Otsikkofontini koot ovat H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt ja H6: 15pt. Koska kukin otsikko on tekstityyli, kaikki muutokset tehdään kaikkiin muihin sen esiintymiin. Olen käyttänyt Jeremy Churchin Type Scale -työkalua otsikoiden koon määrittämiseen. Tyyppi-asteikko käyttää modulaarista asteikkoa valitaksesi suhteelliset kirjasinkoot valitsemastasi suhteesta riippuen.
Vaihe 10
Voit järjestää juuri luomamme tekstityylit valitsemalla Lisää> Tyylitelty teksti> Järjestä tekstityylit. Täällä voit poistaa ja nimetä tekstityylejä, mutta et järjestää niitä uudelleen. Koska tekstityylit on järjestetty aakkosjärjestykseen, nimeän samanlaiset elementit samalla ensimmäisellä sanalla: esimerkiksi Lista järjestämätön ja Lista järjestetty. Noudata samaa prosessia symbolien järjestämisessä. OK, olemme käsitelleet painikkeita ja otsikoita! Mutta entä kuvat?
Vaihe 11
Avatareille lisää kuva ja suorakulmio, joiden molempien leveys ja korkeus ovat 130 kuvapistettä. Anna suorakulmion säde 65 kuvapistettä. Ryhmittele molemmat kerrokset ja sijoita suorakulmio kuvan taakse. Napsauta hiiren kakkospainikkeella suorakulmion tasoa ja valitse Käytä maskina. Meillä on nyt pyöreä avatar. Olemme käyttäneet suorakulmiota, jonka säde on asetettu todellisen ympyrän sijasta, koska jos haluat tehdä avatar-neliön, voit yksinkertaisesti muokata sädettä uuden muodon lisäämisen sijaan.
Vaihe 12
Mutta entä jos haluan korvata kuvan, kuulen sinun kysyvän? OK, ehkä et kysynyt sitä, mutta se johtaa minut siistiin ominaisuuteen, nimeltään asianmukaisesti Image Replace. Valitse hahmosi ja siirry kohtaan Taso> Kuva> Korvaa. Valitse toinen valokuva. Sketch muuttaa uuden kuvan kokoa automaattisesti ja vaihtaa sen nykyiseen. Käytät tätä useammin kuin luulet: se on toinen hieno ajansäästäjä!
Vaihe 13
Vaihtoehto omien kuviesi lisäämiselle on käyttää Timur Carpeevin Content Generator for Sketch -laajennusta. Luo yksinkertaisesti muoto ja siirry Plugins> Content Generator Sketch Plugin> Persona> Photos. Se vetää käyttäjän valokuvat User Inter Faces -sovelluksesta ja lisää ne muotoon. Sketch-laajennusyhteisö on loistava.
Vaihe 14
Seuraavaksi värimallit! On tärkeää dokumentoida yleisesti käytetyt värit kuvakirjastossamme. Lisää suorakulmio, jonka leveys ja korkeus on 120 kuvapistettä, ja anna sille täyteväri # 1A9DD3. Toista tämä vaihe väreillä # 3A4654, # 475361, # 8793A1 ja # EFF0F1. Mukana on myös laajennus Jody Heavenerin värimallien luomiseen. Siirry kohtaan Laajennukset> Värimallit ja kirjoita viisi yllä olevaa hex-arvoa.
Vaihe 15
Valitse värimalli ja napsauta Inspectorin täyttöväriä. Värivalitsimen alaosassa on kaksi osiota: Yleiset värit ja Asiakirjan värit. Kaikille luomillesi luonnosdokumenteille tallennetaan yleiset värit, kun taas asiakirjan värit ovat ainutlaatuisia jokaiselle asiakirjalle. Lisäämällä värejä asiakirjan väreihin voit luoda oman värikirjaston.
Vaihe 16
Asiakirjan värien lisäksi Sketch poimii automaattisesti asiakirjan yleiset värit ja ilmoittaa kuinka usein niitä on käytetty! Tämä ominaisuus on piilotettu näkymältä, mutta siihen pääsee värivalitsimesta. Napsauta sävyn ja peittävyyden liukusäätimien oikealla puolella olevaa aluetta. Näet ponnahdusikkunan nimeltä Usein käytettävät värit ... Sketch ei vain kerro kuinka usein väriä on käytetty, mutta missä.
Vaihe 17
Viimeisiä vaiheita varten lataa tämän opetusohjelman mukana oleva resurssi ja varmista, että fontti Source Code Pro on asennettu. Resurssissa HTML sisältyy jokaisen elementin viereen. Tämä varmistaa, että kehitykseen käytetään oikeita HTML-tunnisteita ja luokkien nimiä. Käyttöhuomautuksia voidaan antaa tarvittaessa. Hieno esimerkki tästä on ruudukkojärjestelmässä, jossa on hyödyllistä saada tietoa sarakeluokista, sarakkeiden offsetista ja niin edelleen.
Vaihe 18
Resurssissa huomaat myös, että otsikossa on Jump to ... -valitsin. Kuvakirjastot voivat olla pitkiä, joten on tärkeää, että tiimisi jäsenet pystyvät siirtymään nopeasti elementtiin ilman, että sinun tarvitsee selata koko sivua. Esimerkki tästä löytyy A List Apart -mallikirjastosta ja Anna Debenhamin kuvakirjastosta.
Se siitä! Nyt tiedät kuinka työskennellä kuvakirjastojen kanssa: sinun tarvitsee vain löytää inspiraatiota omaan kirjastoon.Suosittelen, että vierailet Anna Debenhamin ja Brad Frostin verkkosivustotyylioppaassa, josta löydät paljon hienoja artikkeleita, työkaluja ja esimerkkejä.
Sanat: Richard Child
Richard Child on suunnittelukonsultti. Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 272.
Piditkö tästä? Lue nämä!
- Miksi sinun pitäisi hallita CSS: täsi mallikirjastoilla
- Kuinka rakentaa sovellus: kokeile näitä upeita opetusohjelmia
- Ilmainen graafinen suunnitteluohjelmisto on käytettävissäsi juuri nyt!
