Luonnosoppaat

Suunnittelujärjestelmän perustaminen

Opi mukauttamaan ja käyttämään Sketchin parhaita käytäntöjä vankkana suunnittelujärjestelmänä, joka säästää satoja tunteja seuraavaan projektiin.

Tämä on osa Frames for Sketch - opetusohjelmaartikkeliä, joka auttaa sinua aloittamaan Frames Design System -sovelluksen ja mukauttamaan sitä tuotemerkkisi ohjeisiin, ja auttaa sinua oppimaan jotain uutta luonnosominaisuuksista ja temppuista, joita et ehkä tiedä.

Oppaan sisältö:

  1. Yleiskatsaus - Nopea katsaus pääosiin.
  2. Värit - Opi lisäämään ja käyttämään värejä.
  3. Typografia - Järjestelmäfonttien korvaaminen.
  4. Komponentit - Symbolien mukauttaminen.
  5. Plugins - Luettelo hyödyllisistä lisäosista kehyksen hallitsemiseksi.
  6. Yhteenveto - Käyttötapaukset ja UKK.

1. Yleiskatsaus - päivitetty

Kehykset on suunnittelijan valmistama tuote, jonka tarkoituksena on toteuttaa uusimmat Sketch-ominaisuudet yhdeksi käyttöliittymäkirjastoksi yhdistämällä parhaat käytännöt ja hyödylliset tekniikat, jotka voivat säästää paljon aikaa pitkällä aikavälillä jokaiselle, joka tuntee luonnossovelluksen.

Järjestelmä on suunniteltu kevyeksi ja mukautettavaksi tuotemerkkeihin, minkä vuoksi monet ryhmät pitävät sitä todella hyödyllisenä työkaluna rakentaakseen siihen perustuvia omia kirjastojaan.

Kehykset-päätiedosto on jaettu viiteen pääsivulle, jotka sisältävät paljon ennalta valmistettua sisältöä: komponentit, tyylit ja ennalta suunnitellut asettelut, joita voidaan mukauttaa ja käyttää oman UI-paketin tai suunnittelujärjestelmän luomiseen (mieleisesi).

Huomaa: Kehykset käyttävät oletusarvoisesti Roboto- ja Muli-google-fontteja, joten muista asentaa ne ennen ensimmäistä julkaisua.
  • Aloita - Tämä on lähtökohta uusille tulokkaille. Täällä voit säätää värejä, tyylejä ja fontteja nopeasti vastaamaan tuotemerkkiäsi.
  • Tyyliopas - Värimaailma, komponentti-välilehti, kuvakkeet, mallit ja kirjasintyyli tarjoavat yhdessä projektin ainoan totuuden lähteen.
  • Web-käyttöliittymäpaketti - Kokoelma esisuunniteltuja ulkoasuja, jotka on rakennettu järjestelmäkomponenteilla, joita voidaan vapaasti mukauttaa ja käyttää nopeaan prototyyppien laatimiseen ja sinistä tyyliä olevan kehyksen muuttamiseksi mukavaksi näyttäviksi otteiksi.
  • Kaaviot ja taulukot - Kehykset sisältävät 32 kaaviota + taulukkomponenttia, joita voidaan helposti muokata, muuttaa niiden kokoa ja käyttää niitä uudelleen, jotta voit keskittyä työskentelemään datan kanssa vektoripisteiden sijaan.
  • Symbolit - Kaikki on ryhmitelty luokkiin ja lajiteltu symbolin tyypin mukaan (värit, painikkeet, sisääntulot jne., Katamme kaikki ryhmät hieman kauemmas).

Jep, nämä 5 sivua tekevät täydellisestä leikkipaikasta sovellusten ja verkkosivustojen nopeasti suunnitteluun, mikä säästää tonneja tunteja suunnittelijana. Siirrymme nyt Aloitussivulle aloittamaan järjestelmän valmistelemisen vastaamaan tuotemerkin perusteita.

2. Värit

Kehykset sisältävät oletuksena kymmenen väriä, joita voidaan muuttaa globaalisti koko asiakirjassa. Sinun tarvitsee vain valita Täytä tasot ja korvata ne uusilla ominaisuuksilla, ottaa sitten käyttöön muutokset ja voila kaikki synkronoidaan, ja uusi väri on nyt saatavana kaikille komponenteille joilla on Väri-määrite ohitusvalikossa!

Huomaa: Voit käyttää kaltevuuksia myös globaalisti, muunna niiden kerrokset vain symboleiksi ja aseta uusien symbolien kokoksi 100x100.

Jos haluat lisätä lisää värejä, siirry Symbolit-sivulle ja kopioi mikä tahansa värilaatikko Kopioi / liitä se ja määritä sille uusi väri.

Vastasyntyneiden järjestelmäelementtien, vaikka ne olisivat vain värejä, tulisi noudattaa nimeämisrakennetta, joten elementti sopii oikeaan ryhmään, ajattele sitä poluna kuvaamaan järjestelmäkansiosi rakennetta, joten muista tehdä muutokset. Esimerkiksi Väri / Oranssi mahdollistaa sen löytämisen kaikista muista järjestelmäelementeistä, joilla on väriominaisuuksia.

HUOMAUTUS: Täytä-tyyliä käytetään koko järjestelmässä ja sitä sovelletaan kaikkiin komponentteihin väri-määritteenä, tämä sisältää myös reunustyylin muodot.
(Kuten painikkeet, hälytykset, merkit tai tunnisteet).

3. Typografia

Kehykset käyttävät oletusarvoisesti yksinkertaista fonttiyhdistelmää Roboto + Muli, joka on järjestetty H1: stä H5-otsikoihin. Yksinkertainen fonttiyhdistelmä voi aina auttaa sinua rakentamaan silmäänpistävää typografiaa projektillesi tai vain pilkottavan kuvan. Joten voit mukauttaa molemmat fontit vapaasti tai poistaa yhden niistä tarvittaessa.

Typografiajärjestelmä on rakennettu jaettuihin tyyleihin, joissa on yksinkertainen rakenne:
* H1 / Fontin nimi / Kohdistus / Väri

Nykyisen fonttijärjestelmän muuttaminen korvataan vain oletustekstikerrokset uudella asetuksella ja levitä muutokset koko kehyksen alueelle. Muista korvata vanha fontinimi jaetusta tekstityylivalikosta käyttämällä erittäin hyödyllistä laajennusta - Sketch Text Style Master. Löydä vain korvattava fontinimi. Ja tekemällä tämän, voit helposti soveltaa uusia tekstiominaisuuksia kaikkiin UI Kit -asetteluihin.

HUOMAUTUS: Komponentit, kuten painikkeet, sisältävät tekstisymboleita, joita tässä tehdyt muutokset eivät korvaa, käsittelemme niitä seuraavassa osassa.

Lisäämme nyt joitain uusia fontteja järjestelmään, joten ne seuraavat rakennettamme seuraavilla yksinkertaisilla ohjeilla:

1. Valitse tai kopioi kaikkien fonttien kaikki tasot - tee tarvittavat muutokset, älä kirjoita jaettuja tyylejä toistaiseksi.

2. Aktivoi Nimeä ja korvaa -komento valituilla tasoilla Nimeä uudelleen -sovelluksella ja korvaa oletusfonttinimi nimitysrakenteessa uudella. (Esimerkki: H1 / Roboto .. - H1 / Arial ..)

3. Luo uusia tyylejä valituista tekstikerroksista. Käytä Style Generator -laajennusta ja paina ”luo jaetut tyylit” ja se on valmis, uusi fontti on valmis.

Nimeä se ja Tyyligeneraattori ovat hyödyllisiä työkaluja tähän lähestymistapaan.

Kun räätälöinti on valmis, voit tallentaa nykyiset fontti tyylit mallina, jotta ne voidaan tuoda nopeasti kaikkiin uusiin projektiin jaetun tyylin laajennuksen avulla. Se säästää paljon aikaa, opi lisää tämän artikkelin tekstin hallitsemiseen.

4. Komponentit

Järjestelmän rakennuspalikat ovat reagoivia komponentteja, jotka tehdään käyttämällä symboleja, joilla on yksi systemaattinen lähestymistapa, seuraamaan polkurakennetta ja muodostamaan loogisia ryhmiä. Kaikki symbolit on jaettu malleihin luokkiin.

Suurin osa symboleista on rakennettu käyttämällä muita symboleja. Kun symboli on sijoitettu toisen symbolin sisään, se edustaa visuaalisen tyylin ominaisuutta, jota voidaan nopeasti säätää ohitusvalikon avulla. (Kuten väri, tila, muoto tai laite).

Katsotaanpa nyt tarkemmin symboliryhmiä oppiaksesi kuinka voimme mukauttaa niitä mittakaavaan.

värit

Yksinkertaisin ja yksi hyödyllisimmistä symboleista - vain lohko, joka tallentaa yhden täyttövärin. (leveys x korkeus = 100 kuvapistettä x 100 kuvapistettä)

Vihje: Käytä 50%: n opasiteettivalkoista väriä, jotta elementit, kuten kuvakkeet, näyttävät läpinäkyviltä.

Teksti

Tekstisymboleita käytetään painikkeisiin, tuloihin ja tekstialueisiin, jotta niiden muuttaminen korvaa tekstikerrosten oletusarvot ja muutokset synkronoidaan vanhemman elementin kanssa.

Vihje: Käytä Säädä sisältöä koon muuttamisvaihtoehdossa sopimaan symbolien säilytysleveyteen, kun oletusarvo korvataan.

painikkeet

Painikkeet on lajiteltu koon mukaan, ja niitä on saatavana seuraavissa muunnelmissa: Perus, Ikoni oikealla, Ikoni vasemmalla, Välilehti ja Teksti-painike. Löydät myös joustavan painikkeen tyypin kuvakkeella, joka pysyy aina tiukasti kiinni tekstin yhdellä sivulla; nämä painikkeet ovat melko hankalia ja tehty tällä tekniikalla.

Painikkeen ulkonäön muuttamiseksi sinun on vaihdettava Tila- ja Väri-ominaisuuksia sisältävä Muoto-määrite, tässä esimerkki siitä, kuinka monta yhden painikkeen muunnelmaa voit saavuttaa tämän määritteen ohittamisessa oletusominaisuuksia käyttämällä.

Lomakkeet

Sisäänsyöttökentät voivat olla joko kuvaavia (lisäetikkelillä / kuvateksteillä) tai ne voivat olla suorakaiteen muotoisia. Voit mukauttaa syötteiden visuaalioita käyttämällä tila-symbolia, korvaamalla kaikki tilakerroksen tyylit muutosten asettamiseksi.

Vaihtamalla Tulot tila -määritteen voit vaihtaa nopeasti Perus-ja Materiaalinäytöstä.

Muoto

Muodosymbolit edustavat lomakkeen elementtiä, kuten painikkeet, merkit, tunnisteet ja ilmoitukset - kukin muoto voi olla joko Täytä tai Reunatty, Täytä väri -määritteen soveltaa molempiin.

Huomaa: Muodosymboleja voidaan helposti mukauttaa muuttamalla säilytyskerroksen säteen ominaisuuksia. Reunatyyliset muodot tehdään käyttämällä ääriviivat ja vähennysominaisuudet, joten muista muuttaa molempien sulautettujen kerrosten säde.

Osavaltio

Tilamerkkejä käytetään kuvaamaan elementtien vuorovaikutuksia ja muunnoksia, kuten painikkeiden tai sisääntulojen hover-, Active- tai Disabled-tiloja. Niiden avulla voit manipuloida sopimaan elementtejä nykyiseen käyttöliittymätilanteeseen.

Painike- tai syöttötilojen päivittämiseksi sinun on päivitettävä tasotyyli. Voit lisätä myös lisätehosteita symboleihin, esimerkiksi - voit lisätä varjosymbolin mihin tahansa hover-tilaan saadaksesi sen näyttämään kelluvalta.

data

Tiedot ovat paikka toiselle tärkeysjärjestyksessä olevalle käyttöliittymäelementille, jotka tarjoavat käyttäjälle olennaista tietoa ja kuvaavat nykyistä käyttöliittymätilannetta positiivisen, negatiivisen tai varoittavan palautteen avulla.

kuvakkeet

Kaikki kuvakkeet perustuvat 24xx-ruudukkoon, niissä on erittäin materiaalimainen tyyli ja niissä on Color-ominaisuus, joka vastaa aina värimaailmaasi, joten kun näet Icon-elementin painikkeen tai tulon sisällä - tiedä, että voit vaihtaa sen helposti millä tahansa muulla kuvakkeella tai muuta sen väriä.

Yleisimmin käytetyt kuvakkeet tehdään kahdessa tyylissä: Täytä ja Stroke.

simulaatiot

Mukautuksia käytetään esittämään visuaalista sisältöä, kuten valokuvia, kaunista taustaa ja laitteen näyttöjä. Voit muuttaa mallin ulkoasua muuttamalla Laite-määrite.

Näyttöasetuksia käyttämällä voit lisätä peittokuvia hämärtääksesi kuvan mustavalkoisella gradientilla tai lisätä FIll-määritteen sävyksi lisätäksesi tekstin luettavuutta valokuvien yläpuolelle.

Kehyksiin sisältyy iPhone 7: n, MacBookin ja iPad Airin mallikappaleita, jotka on tehty Facebook-suunnitteluresurssien avulla.

Voit lisätä malleja nimellä ja PNG-kerroksen symboliin ja asettaa näytön symbolille oikeat mittasuhteet, jotta ne vastaavat laitteiden kuvaa, oppia lisää siitä, miten maketteja käytetään täällä ja älä unohda napata ilmaistarjoustiedostoa.

5. Lisäosat

Kehyksiä voidaan hallita ja laajentaa laajennuksilla. Tämä tarkoittaa, että voit tehdä erittäin villejä liikkeitä dokumentin läpi; Esimerkiksi, voit synkronoida kehykset luonnoskirjaston helposti ja hallita tiivistä versiota tiimisi kanssa tiivistelmäsovelluksen avulla. Tutustu ystävällisempiin käyttötapoihin ja laajennuksiin, joita voit käyttää Framesin kanssa.

6. Yhteenveto

Kun olet määrittänyt perustyylit ja tuonut komponentit haluttuun näkymään, palveluksessasi voi olla täysin ladattu suunnittelujärjestelmä, joka on valmis kytkettäväksi mihin tahansa projektiin. Voit lisäksi tallentaa tiedoston mallina, jotta kehykset olisivat aina käsillä.

Psst. Sinun ei tarvitse räätälöidä kaikkea aloittamista varten, tuotemerkkivärien määrittäminen on tarpeeksi hieno aloittamaan suunnittelun upealta tuotteita.

Kehysten käyttäminen on palkitsevaa ja antaa sinulle mahdollisuuden muuttaa kuvasi lennossa korvaamalla symbolit. Okei, kyllä ​​- saimme sen. Mutta mitkä ovat todellisen käytön tapaukset, joissa tämä järjestelmä on hyvä?

Käytä koteloita

  • Prototyyppien luominen, vaikka määräaika tuleekin 10 minuutissa, voit nopeasti luoda verkkosivun tai tyylioppaan asiakkaallesi.
  • Rakenna tuotemerkin käyttöliittymäpaketti, kirjoita esivalmistettu tyyli kirjoittamalla ne omallasi ja testaa visuaaliset ideasi rakentamalla suunnittelukieli.
  • Langankehys, esivalmistettua sisältöä käyttämällä, voit nopeasti rakentaa kehyskehyksiä ja keskustella ideoistasi ennen siirtymistä lopullisen omaisuuden suunnitteluun.
  • Opi jotain uutta, tule entistä asiantuntevammaksi Sketchillä ja pysy ajan tasalla viimeisimmistä ominaisuuksista ja tekniikoista, jotka voivat säästää päiväsi.
  • Synkronoi, jos työskentelet projektissa kollegoidesi kanssa, käytä Kehyksiä yhteistyöhön ja suunnitteluun samojen synkronoitujen rakennuspalikoiden kanssa.

Tee enemmän vähemmässä ajassa, siirry nopeasti ja rakenna vahvempi.

Jos sinulla ei vieläkään ole järjestelmää, voit käydä Frames for Sketch -verkkosivustolla saadaksesi tuotteen täydellisen version tai ladata Demotiedoston ja tutkia tarkemmin.

Ohje

Kuinka saada uusin versio?
Lähetämme sähköposti-ilmoituksia Gumroadin ja twiitin kautta, kun uusi versio julkaistaan, joten muista seurata meitä. Jos olet jo ostanut kehykset, siirry tuotesivulle ja lataa uusin versio.

Haluatko ehdottaa ominaisuutta tai tarvitsetko lisäapua?
Viileä! Voit vapaasti tavoittaa meidät ja keskustella siitä osoitteessa hello@robowolf.net.

Aiotko tehdä Adobe- tai Figma-versioita?
Ehkä tulevaisuudessa, kunnes nämä työkalut tarjoavat saman joustavuuden kuin Sketch.

Mikä eroaa tuotteestasi muihin suunnittelujärjestelmiin?
Kehykset on integroitu järjestelmään monien muutosten kautta jatkuvien Sketch-päivitysten ja tuotesuunnittelukokemuksen takia. Nyt kaikille, jotka hallitsevat sen, annetaan kyky tuottaa ja skaalata suunnittelujärjestelmiä keskisuurille / suurille asiakkaille nopeasti.

En ole kokeillut mitään muuta järjestelmää markkinoilla, mutta uskon, että maailma on iso paikka, ja melko monia suunnittelijoita on kuin minä.

Ennen kuin lähdet

  • Löydä lisää kehyksiin liittyviä resursseja Sketch App -lähteistä.
  • Auta meitä levittämään sanaa Frames for Sketch -sivustolle ja saat 25% alennuksen. Lähetä meille sähköpostia / tweet meille / DM meille linkki viestiisi, niin otamme sinuun yhteyttä mahdollisimman pian.
  • Seuraa Robowolfia saadaksesi lisää suunnitteluun liittyviä juttuja.