Kuinka tehdä loistavia lankakehyksiä Sketchissä

(Tämä viesti on alun perin julkaistu alexanderskogberg.com-sivustossa)

Viime vuosina Sketch on noussut yhdeksi suunnittelijoiden suurimmista vektorigrafiikan toimittajista. Käytän sitä useita kertoja viikossa töissä ja rakastan sitä! Tässä on vinkkejä loistavien lankakehysten luomiseen Sketchissä.

Kun aloin työskentelemään IT-konsulttina vuonna 2011, suunnittelijakollegani käyttivät kaikkia erilaisia ​​vektorigrafiikan toimittajia. Nykyään melkein kaikki heistä käyttävät Sketchiä yksinomaan.

Jos teet metallilankoja, tyylioppaan luominen tai piirroskuvien luominen Sketch on täydellinen työkalu! Se on suosittu, eikä se ole liikaa rasitettu ominaisuuksilla ja maksaa paljon vähemmän kuin Photoshopin kaltaiset toimittajat.

Tässä ovat parhaat neuvojani tekeessään lankakehyksiä Sketchissä.

Järjestä näytöt Pages and Artboards -sovelluksella

Rautakehyksesi kasvaessa kaikkien näytöiden pitäminen järjestettyinä on välttämätöntä tehokkuuden ylläpitämiseksi. Siksi sinun tulisi käyttää sivuja ja taulukoita.

Luo sivu jokaiselle liittyvälle näytölle

Sketchissä sivu tarjoaa uuden tyhjän kankaan. Ei ole syytä sijoittaa kaikkia näytöitä samalle sivulle. Luo sen sijaan sivu jokaiselle sovelluksen tai verkkosivuston liittyvälle näyttöruudulle, joille olet tekemässä lankakehyksiä.

Jos tein rautakehyksiä verkkosivustolle, josta ostat täytettyjä eläimiä, luon seuraavat sivut:

  • Työtila (”työpöytä” kaiken tarvittavan luomiseen)
  • Omaisuus (logoja, valokuvia ja niin edelleen) varten
  • Tekstityylit (vain minun tekstityyleihini)
  • Symbolit (luonut Sketch automaattisesti)
  • Kotisivu (uusimmat tarjoukset ja uutiset)
  • Luokkasivu (täytettyjen eläinten eri luokille)
  • Tuotesivu (tietylle täytetylle eläimelle)
  • Kassasivu (osoitteen ja maksutietojen syöttämiseen)
  • Vahvistussivu (ostoksen vahvistamiseksi)
Sivuluettelo. Valitun sivun taulut on lueteltu alareunassa.

Luo sivulle yksi taulu jokaiselle näyttömuunnelmalle

Koska jokaisella näytöllä on todennäköisesti useita variantteja, suosittelen, että jokaiselle luodaan yksi kuvataulu. Kaikki luomasi piirrostaulut sijoitetaan automaattisesti valitulle sivulle.

Kun luot uuden taulun, voit asettaa sen leveyden ja korkeuden haluamallasi tavalla, mutta Sketch tarjoaa myös esiasetuksia, jotka perustuvat suosittuihin laitteisiin ja näytön tarkkuuksiin.

Kuka näyttövaihtoehto on, on sinun vastuullasi. Teen yleensä variantteja erilaisille näytön kokoille ja osoittaakseen kuinka vuorovaikutussuunnittelun on tarkoitus toimia yksityiskohtaisesti.

Täytettyjen eläinten verkkosivun kassasivulle luon kuvataulut seuraaville näyttövaihtoehdoille:

  • Osoitetta tai maksutietoja ei annettu (pienille ja isoille näytöille)
  • Oikein syötetyt osoite- ja maksutiedot (pienille ja isoille näytöille)
  • Väärin syötetyt osoite- ja maksutiedot (pienille ja isoille näytöille)
Valitun sivun taulut asetetaan pääkankaalle.

Suunnittelulevyjen nimeämisessä suosittelen nimeämiskuvion name-number-modifier-size.jpg käyttöä. Tätä mallia käyttämällä ryhmäsi jäsenet todennäköisemmin tunnistavat vietyn kuvataulun sisällön tarvitsematta avata sitä.

Tässä muutamia esimerkkejä:

  • kassalle-01-default-small.jpg
  • kassalle-02-toimitus-osoite-haku-small.jpg
  • kassalle-03-oikea-maksu-informaatio-small.jpg
  • kassalle-04-virheellisiä-maksu-informaatio-small.jpg
Vinkki: Varmista, että viety Artboard on tunnistettavissa nimellä. Nimi, kuten kassalle-03-oikea-maksu-informaatio-pieni.jpg, on hieno, nimi kuten screen21.jpg on kauhea.

Hyödynnä tekstityylejä

Käytät tekstiä jossain määrin kehyskehyksissäsi ja kun joudut säätämään fontin kokoa tai muuttamaan kokonaan kirjasintyyppiä, se on valtava ajan ja energian tuhlaus jouduttaessa tekemään se jokaisessa näytössä.

Onneksi Sketch tarjoaa mahdollisuuden tallentaa ja käyttää uudelleen suunnitteluvalintojasi tekstityylien avulla. Kun tekstityyli on tallennettu, sitä voidaan käyttää uusissa tekstitiedostoissa. Jos muutat tekstityyliä, se vaikuttaa kaikkiin tekstiosiin, joissa tekstiä käytetään.

Aina aloittaessani uuden projektin työskentelyä luon tekstityylejä tavallisille tekstiosille, kuten:

  • H1-otsikko
  • H2-otsikko
  • H3-otsikko
  • Leipäteksti
  • Metateksti (päivämäärille, aikaleimoille, syöttövihjeille ja niin edelleen)
  • Syöttötarrat (syöttökenttiä ja valintanappien ja valintaruutujen ryhmiä varten)
Laitan tekstityylit aina omalle sivulle, jotta näen ne kaikki kerralla.

Asenna nimeämiskäytäntö

Aivan kuten web-kehittäjillä (toivottavasti) on joukko sääntöjä CSS-luokkien nimeämiselle, sinun tulee luoda nimeämiskäytäntö käyttämillesi sivuille, tauluille, symboleille ja tekstityyleille.

On hyvä idea käyttää samaa (tai hyvin samanlaista) nimeämiskäytäntöä, jota kehittäjät käyttävät. Jos jaat lankakehyksesi heidän kanssaan Zeplinin kaltaisilla työkaluilla, hämmennystä ja toisen arvaamista on vähemmän, jos käytät samoja nimiä samoille komponenteille.

Esimerkiksi, jos kehitysryhmäsi on nimennyt CSS-luokan verkkosivuston ensisijaisten painikkeiden muotoiluun “painike-ensisijainen”, sinun tulisi käyttää tätä nimeä jotain kuten ”toimintakehotus”.

Vinkki: Kuvittele, että luot nimeämiskäytännön jollekin muulle eikä vain itsellesi. Kysy joltakin muulta, onko terminologiallasi järkevää.

Jos etsit tosielämän esimerkkiä nimeämiskäytännöstä, katso Trello CSS Guide tai BEM.

Hallitse symbolien voima

Symbolit on luultavasti paras ominaisuus luonnos. Se on kuin tekstityylit, mutta kaikille muoto- ja kappaleyhdistelmille. Se on tehokas ja säästää paljon aikaa pitkällä tähtäimellä.

Vihje: Tallenna logot ja kuvakkeet myös symboleiksi.

Oletetaan esimerkiksi, että luot syöttökentän, jossa on tarra ja syöttövihje, ja haluat käyttää sitä uudelleen useilla näytöillä. Tallentamalla nämä kolme elementtiä yhtenä symbolina, se on nyt tallennettu kirjastoosi ja sitä voidaan käyttää milloin haluat.

Jos symbolissasi on teksti, voit ohittaa tekstimerkkien kaikki symbolin esiintymät. Tekstin (ei sen mallin) muuttaminen ei vaikuta muihin esiintymiin.

Syöttökentän symboli, jossa tarra, syöttövihje ja syöttöteksti. Tekstit voidaan ohittaa jokaiselle tämän symbolin esiintymälle. Vihje: Kirjoita musta välilyönti

Jos muokkaat tätä symbolia myöhemmin, muutokset vaikuttavat kaikkiin sen esiintymiin.

Nimeä symbolit viivoilla

Koska luot todennäköisesti paljon symboleja, sinun tulee laittaa viivat (/) heidän nimiinsä niiden järjestämiseksi siististi.

Kun lisäät viivan symbolien nimiin, Sketch luo niistä automaattisesti alaryhmiä helpottaen etsimiesi löytämistä.

Suosittelen näiden kahden nimeämismallin käyttöä:

  1. luokka / tyyppi / tila
  2. luokka / tyyppi / vaihtelu-tilassa
Vinkki: Kiinnitä korkeintaan kahteen viivaan, jotta sinulla on vain kolmen kerroksen syvyys (mikä on tähän mennessä toiminut parhaiten minulle).

Tässä on esimerkkejä nimetyistä symboleista, jotka perustuvat näihin kahteen malliin:

  • painike / ensisijainen / default
  • painike / ensisijainen / pois käytöstä
  • painike / toissijainen / default
  • painike / toissijainen / estetty
  • input / nolabel / default
  • input / label / default
  • input / label / pois käytöstä
  • input / labelandhint / default
  • input / labelandhint / pois käytöstä
Alakansiot Sketch luodaan, kun lisäät viivat (/) luomiesi symbolien nimiin.

Luo kirjasto yleisistä symboleista

Luonnoksessa on yleisiä muotoja, kuten suorakulmioita, ympyröitä, kolmioita ja nuoleja. Niitä ei tarvitse piirtää uudelleen, mutta sinun pitäisi käyttää niitä luomaan yleisiä käyttöliittymäkomponentteja, kuten painikkeita, syöttökenttiä, päivämäärävalitsimia ja modaalikkunoita.

Esimerkiksi luon aina yhteisten komponenttien symboleja eri tiloissa, kuten:

  • Ensisijaiset painikkeet (oletus ja pois käytöstä)
  • Toissijaiset painikkeet (oletus ja pois käytöstä)
  • Valintaruudut tekstilaatikoilla (valittu ja ei valittu)
  • Valintanapit tekstimerkinnöillä (valittu ja ei valittu)
  • Laajennettavat lohkot (laajennetut ja ei laajennetut)
  • Syöttökentät tunnisteella (oletus ja poistettu käytöstä)
  • Syöttökentät, joissa on sekä tarra että syöttövihje (oletus ja poistettu käytöstä)

Siellä on paljon valmiita käyttöliittymäkomponentteja, joita voit ladata ja käyttää ilmaiseksi, mutta suosittelen oman kirjaston luomista. Opit lisää luonnoksesta ja pääset käyttämään vähemmän käyttämättömiä symboleja.

Symbolit-siviluonne luodaan automaattisesti, kun aloitat symbolien luomisen ja tallentamisen.

Tee symboleistasi reagoiva

Kun teet johdinkehyksiä tänään, sinun on todennäköisesti luotava näyttöruutujen eri variantit eri kokoisille näytöille. Yksi vaihtoehto pienille näytöille, yksi suurille näytöille ja ehkä yksi keskikokoisille näytöille.

Tämä tarkoittaa, että sinun on asetettava symbolit siten, että niiden asettelu ei hajoa, kun venytät niitä vaaka- tai pystysuunnassa.

Onneksi Sketch käsittelee tämän erinomaisesti! Voit määrittää jokaiselle symboliin sisältyvälle elementille miten se käyttäytyy, kun symboli venytetään oikealla puolella olevassa Ominaisuudet-sarakkeessa olevan säätimen avulla.

Tässä on joitain asetuksia, jotka voit tehdä valitulle symbolin elementille:

Venyy mihin tahansa suuntaan.Pitää sen koon, mutta liikkuu samoilla mittasuhteilla sivuille, ylös ja alas.Kiinnitetty alkuun. Venyttelee leveyttä, mutta pitää samalla korkeudella.Kiinnitetty vasempaan yläkulmaan. Pitää sen koon.

Rautalankojen esittely

Kun esität kehyskehyksiä ryhmäsi kehittäjille, sinulla on useita vaihtoehtoja.

Jotkut kehittäjät mieluummin katsovat Sketch-tiedostoa suoraan, toiset mieluummin vievät näytöt vientiin kuviin ja toiset mieluummin työkaluja napsautettavien prototyyppien, kuten InVision, tekemiseen.

Vinkki: Kohtele ryhmäsi kehittäjiä kuten käyttäjiä. Palvelkaa heille langankehyksiä haluamallasi tavalla.

Jos inVision kuulostaa mielenkiintoiselta, lue viestini Prototyyppi kuin proV, jolla on inVision.

Älä käytä tasoja Sketch-tiedostoissa

Kehittäjien kanssa työskentelystäni saatujen kokemusteni perusteella sinun ei tule käyttää tasoja Sketch-näytölläsi. Mielestäni tämä työskentelytapa oli aiemmin ollut normi, kun Photoshop hallitsi korkeinta valtaa.

Useimpien kehittäjien kanssa, joiden kanssa olen työskennellyt, on ärsyttävää joutua piilottamaan ja näyttämään paljon (usein heikosti nimettyjä) tasoja oppiaksesi näytön ulkonäön ja käyttäytymisen. Käytä sen sijaan vain enemmän taulukoita esitelläksesi eri näyttövaihtoehtoja.

Lisätietoja

Sketchin käytöstä on jo kirjoitettu paljon hienoja artikkeleita. Tässä ovat suosikkini:

  • Vastuullinen suunnittelu luonnos - osa 1, kirjoittanut Emin Inanc Ulu
  • Javier 'Simón' Cuello luonnoksen kaikkien symbolien potentiaalin vapauttaminen
  • Lloyd Humphreysin luonnosmerkkien parhaat käytännöt (nyt, kun sisäkkäiset ohitukset ovat asia)

Onko jotain mitä sinun mielestäni pitäisi lisätä, poistaa tai muuttaa tähän viestiin? Kerro siitä kommenttiosassa.

Voi muuten! Jos tämäntyyppinen lankakehys on hiukan liikaa projektillesi, lue uusi viesti "Kuinka paperilankakehys tekee sinusta paremman suunnittelijan".

/ Alex