Jokainen suunnitteluprojekti voi hyötyä hyvin harkitusta tyylioppaasta. Käytä tätä opetusohjelmaa rakentamaan käyttöliittymäsarja ja luomalla samalla mukautettu (ja uudelleenkäytettävä) kirjasto nopeaa prototyyppien tekemistä varten.

Onko a Luonnosasiantuntija tai uusi Sketchissä , suunnittelijat huomaavat, että tyylin oppaiden luominen Sketchissä voi olla arvokas resurssi heidän suunnittelutyökalupakkikokonaisuudelleen, mikä voi säästää paljon aikaa.

Tyylin opas paitsi auttaa pitämään asiat yhtenäisinä, myös mahdollistaa päivitykset elementteihin, kuten väreihin ja kuvakkeisiin, useissa asiakirjoissa paljon vähemmän vaivaa. Tässä opetusohjelmassa käydään läpi vaiheittainen tyylioppaan ja käyttöliittymäsarjan luomisprosessi, ja se antaa suunnittelijoille paremman käsityksen Sketch-symboleista, viittaamalla Sketch-kirjastoon heidän suunnittelussaan ja luottamuksen suunnitteluvarojen organisaatioon.

Luonnostyylioppaasi luominen

'Tyylin opas on kattava' elävä asiakirja ', joka seuraa kaikkia projektin toistuvia elementtejä tuotemerkkisäännöistä toimintakehotuspainikkeiden viisteiden määrään.' UXPin . Tyylioppaassa voi olla mitä tahansa yksinkertaisista visuaalisista elementeistä sanastoon ja hyväksyttyihin kuviin. Tämä opas kattaa organisaation, värit, kuvakkeet, fontit, tekstityylit ja omaisuuden.

Ensimmäinen vaihe: Organisaatio

1. Luo pääkansio luontitiedostojen, laajennusten ja muun tarvittavan sisällön, kuten fonttien ja ikonografian, säilyttämiseksi. (Laajennuksista keskustellaan opetusohjelman lopussa.)
2. Aloita uusi luonnostiedosto ja nimeä se Asiakkaan Nimi Kirjasto.' Esimerkiksi, jos asiakkaasi on ApeeScape, tiedosto on nimeltään 'ApeeScape Library'.

Toinen vaihe: Värit

Jos värit on jo valittu, seuraava vaihe on muuttaa värit symboleiksi.

1. Tee tämä tekemällä saman kokoiset neliöt ja muuttamalla niiden värejä vastaavasti. Napsauta 'Luo symboli' ja tallenna nämä elementit värillä / @ väri-nimi merkintäjärjestelmä.Väri / @ vaaleanpunainen,väri / @ tausta-harmaataiväri / @ FFFFFovat esimerkkejä oikeista tarroista. Nimeämiskäytännöt ovat tärkeitä tyylioppaan järjestyksessä pitämisessä, joten kaikelle tulisi luoda muoto ja noudattaa sitä alusta alkaen.
2. Kun olet valmis, lisää ne tyylioppaan sivulle.
3. Tallenna värimallisto väripalettisi asiakirjat-osioon.

Hyödyllisiä pikavalintoja: R - suorakulmion työkalu, T - tekstityökalu, alt - mittaa etäisyys.

Kolmas vaihe: kuvakkeet

Kuvakkeiden muuttaminen dynaamisiksi symboleiksi antaa niiden värin helposti vaihtaa mihin tahansa yllä olevassa vaiheessa 2 tallennettuihin väreihin. Tämä tarkoittaa sitä, että kun kuvake on sijoitettu kuvioon, väriä voidaan muuttaa yksinkertaisessa pudotusvalikossa, jota kutsutaan ohitukseksi, käyttämällä kankaan oikealla puolella olevaa Tarkastaja-kohtaa.

1. Tallenna kuvake symbolina (pidä sisällön tyyppi .svg: ssä, jos mahdollista).
2. Mene symbolisivulle, etsi kuvake ja peitä se oletusvärillä aiemmin tallennetuista väreistä. Voit tehdä tämän peittämällä värisymbolin kuvakkeen päälle ja napsauttamalla työkalupalkissa 'Mask' (tai napsauttamalla hiiren kakkospainikkeella ja valitsemalla ponnahdusvalikosta 'Mask').
3. Kun kuvake on peitetty, poista täyttö poistamalla valinta Tarkastajan Täytöt-osion valintaruudusta.
4. Järjestä kuvakkeet tyylioppaan sivulle. Samassa osassa on hyödyllistä määrittää aktiivisten ja passiivisten kuvakkeiden väri sekä muut tärkeät värimääritykset.

Neljäs vaihe: tekstityylit

Yhden kerran fontit on valittu, on aika määrittää tekstityylit: H1, H2, H3, H4, H5, runko, linkit, kuvatekstit, tarrat jne. blogipostaus kirjoittanut Typecast.

1. Valitse koko, paino, merkki ja riviväli niin monelle tyylille kuin tarpeen.
2. Kirjoita sana ('Kirjoita jotain' ilmestyy automaattisesti, kun painat tekstityökalua T) ja muotoile se vastaamaan valitun tyylin yksityiskohtia.
3. Napsauta Luo uusi tekstityyli.
4. Järjestä tekstityylit tyylisivun sivulla.

Viides vaihe: Omaisuus

Nyt hauska osa. On aika yhdistää kaikki edelliset vaiheet sisällön luomiseksi. Jos sisällöt on jo luotu, yhdenmukaisuuden vuoksi on parasta luoda ne uudelleen käyttämällä jo valitsemiasi tekstityylejä, kuvakkeita ja värejä. Esimerkiksi työskentelevässä suunnitteluasiakirjassa voi olla monia erilaisia ​​harmaita värejä, joita malli ei ole ottanut huomioon, joten omaisuuden uudelleen luominen takaa valitun värin tasaisuuden. Älä unohda pitää nimeämistä johdonmukaisina ja muista lisätä resursseja tyylioppaan sivulle niiden luomisen yhteydessä.

Tässä on joitain ehdotettuja resursseja, joita voit työskennellä:

Painikkeet

1. Tee näistä dynaamisista symboleista, aivan kuten kuvakkeetkin, peittämällä oletusvärinen painike ja poistamalla täytteen.
2. Jos haluat pitää tekstin aina keskitettynä, aseta tekstiruudun leveys samaksi kuin painike ja keskitä teksti.
3. Varmista yhdenmukaisuus varmistamalla, että käytät tallennettuja tekstityylejä.
4. Tallenna nämä elementit symboleina käyttämälläpainike / painikkeen nimi nimeämisjärjestelmä.
5. Käytä ohitustoimintoa vaihtaaksesi tarroja ja värejä.

Hakupalkit

1. Käytä rajoitteiden koon muuttaminen hakukenttään ja itse kentässä käytetyt kuvakkeet ja teksti.
2. Älä unohda aiemmin asiakirjan väripalettiin tallennettujen tekstityylien ja värien soveltamista.
3. Tallenna tämä elementti symbolina käyttämälläHaeotsikkona tai jos sinulla on erityyppisiä hakuja, noudata merkintäjärjestelmää, kutenhaku / vakiojahaku / ei-kuvaketta.

Radiopainikkeet ja valintaruudut

1. Symboli voi olla symbolin sisällä, ja hyvä tapa testata sitä on luoda älykkäitä valintanappeja ja valintaruutuja.
2. Tee ensin painikeomaisuus itse. Tallenna tämä elementti symbolina käyttämällävalintaruutu / valittujavalintaruutu / poistettu valintaesimerkkinä merkinnöistä.
3. Luo nyt syöttö. Lisää paikkamerkkiteksti valintaruudun symbolin viereen ja muunna sitten koko sisältö symboliksi. Koska tämä on nyt syöte, on suositeltavaa tallentaa sisältö sellaisenaan, joten hyvä tunniste olisisyöttö / valintaruutu / valittujasyöte / valintaruutu / poistettu valinta.

Vaihe kuusi: Käytä tyyliopasta!

Työn tekeminen tyylin luomiseksi on hyödyllistä vain, jos se todella tekee projektista sujuvamman. Kun kaikki resurssit on luotu, on aika soveltaa kirjastoa suunniteltavaan asiakirjaan. Siirry Luonnoksessa kohtaan Asetukset -> Lisää kirjasto ... ja lisää kirjastodokumentti.

Kun olet lisännyt kirjaston projektisuunnitustiedostoon, voit käyttää kirjastoa ja sen symboleja symboliosassa. Huomaat iOS-käyttöliittymäsuunnittelukirjaston, joka tulee Sketch-kirjastovaihtoehtona, sekä äskettäin tuotun kirjaston.

Jos haluat päivittää symbolin, kaksoisnapsauta itse symbolia, jolloin kirjastosi asiakirja tulee näkyviin. Kun olet tehnyt muutokset, palaa takaisin suunnitteluasiakirjaan ja napsauta päivityspainiketta oikeassa yläkulmassa.

Bonus: Tekstityylien tuonti / vienti

Tekstityylejä ei tallenneta kirjastoon, mutta Jaetut tekstityylit Sketch-laajennus ratkaisee sen. Kun olet ladannut laajennuksen, siirry kirjastodokumenttiin ja sitten valikkoon: 'Laajennukset -> Jaetut tekstityylit -> Vie ...' Tallenna tämä tiedosto samaan kansioon kuin kirjastosi asiakirja. Siirry sitten suunnitteluasiakirjassa uudelleen valikkoon: 'Laajennukset -> Jaetut tekstityylit -> Tuo tekstityylit ...' ja tuo juuri tallentamasi tiedosto. Tekstityylisi ilmestyvät.

Bonus: Väripalettien tuonti / vienti

Kuten tekstityylit, asiakirjan värit eivät tallennu Sketch-kirjastoon, mutta Sketch Palettes -laajennus ratkaisee sen. Paljon samoin kuin yllä, vie paletti käyttämällä ”Plugins -> Sketch Palette -> Document Colors -> Save Palette” ja tuo se valitsemalla “Plugins -> Sketch Palette -> Document Colors -> Load Palette”. Muista tallentaa se samaan kansioon kuin muut kirjaston asiakirjat.

Bonus: Fontit

Alus by InVision on sarja laajennuksia, jotka vievät Sketch-ohjelmiston uudelle tasolle. Craftin avulla voit korvata kuvat arkistokuvilla, prototyypillä ja synkronoida InVisioniin, luoda kirjastoja ja paljon muuta. Jos Craft ladataan, paina asiakirjassa cmd-shift-c, jolloin tyylitaulukko luodaan. Fontit luetellaan tässä.

Edellä kuvattujen kuuden vaiheen noudattaminen tekee sekä suurista että pienistä suunnitteluprojekteista sujuvammat ja lopputuloksen kiillotetaan paremmin. Jos ne ovat yksilöllisiä tai hyvin spesifisiä, tyyliopasta, kirjastoa ja käyttöliittymäsarjaa voidaan käyttää yhdelle asiakkaalle tai monille projekteille, jos jatkuvasti luodaan vakio-käyttöliittymäelementtejä, kuten lankakehyksiä ja prototyyppejä. Aikojen käyttäminen alussa näiden Sketch-käyttöliittymäkomponenttien oikeaan luomiseen säästää paljon aikaa linjassa ja mahdollisesti monissa projekteissa.

• • •

Lue lisää ApeeScape Design Blogista:

• Miksi startupit tarvitsevat tyylisuunnan
• Asiat, joita et ehkä tiedä typografiasta luonnoksessa
• Lopullinen luettelo 50 parhaasta luonnoslaajennuksesta
• Adobe XD vs. Sketch - mikä UX-työkalu sopii sinulle parhaiten?
• Kuinka luoda tehokas suunnittelukehys (sisältää ilmaisen luonnoksen käyttöliittymäkehyksen)

Perustietojen ymmärtäminen

Kuinka rakennat tuotemerkin identiteetin?

Brändin identiteetti rakentuu brändin arvojen ympärille, käännettynä visuaaliseen muotoon valitsemalla värejä, ikonografiaa, kuvia, typografiaa ja muita elementtejä.

Mitä elävänä asiakirjana oleminen tarkoittaa?

Elävä asiakirja on iteratiivinen ja sitä muokataan ja päivitetään jatkuvasti joko muodollisen muutosprosessin avulla tai ilman sitä.

Mikä on tuotemerkin tyyliopas?

Brändäystyylin opas toimii viitteenä kaikille tietylle tuotemerkille luoduille suunnitteluominaisuuksille visuaalisten suunnitteluelementtien (fontit, värit, logot, kuvakkeet jne.) Kannalta, jotta asiat pysyvät yhtenäisinä kaikissa malleissa.

Miksi on tärkeää, että sinulla on tyyliopas?

Tyylioppaalla on kaksi päätarkoitusta: se on nopea viite suunnittelijoille, jotka luovat omaisuutta tuotemerkille, ja varmistaa yhdenmukaisuus eri kohteiden (verkkosivustot, mainokset, esitteet jne.) Sekä eri suunnittelijoiden ja suunnittelutiimien välillä.