Kuidas visandis suurepäraseid kaadreid teha?

(See postitus avaldati algselt saidil alexanderskogberg.com)

Viimastel aastatel on Sketch tõusnud disainerite seas üheks parimaks vektorgraafika redigeerijaks. Kasutan seda mitu korda nädalas tööl ja ma armastan seda! Siin on minu näpunäited visandis suurepäraste kaadrite loomiseks.

Kui ma 2011. aastal IT-konsultandina tööle asusin, kasutasid kõik minu disaineri kolleegid erinevaid vektorgraafika redigeerijaid. Tänapäeval kasutavad peaaegu kõik neist eskiisi eranditult.

Kui teete kaadreid, on stiilijuhi loomine või jooniste illustreerimine Sketch ideaalne tööriist! See on populaarne, pole funktsioonidega üle koormatud ja maksab palju vähem kui toimetajad nagu Photoshop.

Siin on minu parimad nõuanded visandist kaadrite tegemisel.

Korrastage oma ekraanid lehtede ja artboardside abil

Raami kaadrite kasvades on kõigi ekraanide korraldamine hädavajalik. Seega peaksite kasutama lehti ja artboards.

Looge iga seotud ekraanikuva jaoks leht

Visandis pakub leht uut tühja lõuendit. Pole põhjust panna kõik ekraanid samale lehele. Selle asemel looge leht rakenduse või veebisaidi kõigi seotud ekraanide komplekti jaoks, mille jaoks teie kaadreid valmistate.

Kui ma teeksin juhtraami veebisaidile, kust ostate topiseid, looksin järgmised lehed:

  • Tööruum („töölaud”, mida vajaliku loomiseks luua)
  • Varad (logode, fotode jms jaoks)
  • Tekstiilid (ainult minu tekstistiilide jaoks)
  • Sümbolid (Sketchi poolt automaatselt loodud)
  • Avaleht (viimaste pakkumiste ja uudiste jaoks)
  • Kategooria leht (erinevate topiste kategooriate jaoks)
  • Toote leht (konkreetse täidisega looma jaoks)
  • Kassa leht (aadressi ja makseteabe sisestamiseks)
  • Kinnitusleht (ostu kinnitamiseks)
Lehtede loend. Valitud lehe artboards on toodud allosas.

Looge lehel iga ekraanivariandi jaoks üks Artboard

Kuna igal ekraanil on tõenäoliselt mitu varianti, soovitaksin luua nende jaoks ühe Artboardi. Kõik teie loodud tahvlid paigutatakse automaatselt valitud lehele.

Uue Artboardi loomisel saate selle laiuse ja kõrguse vastavalt soovile seada, kuid Sketch pakub ka populaarsetele seadmetele ja ekraani eraldusvõimele tuginevaid eelseadeid.

Milline on ekraani variant, on teie enda otsustada. Tavaliselt teen variante erinevate ekraanisuuruste jaoks ja selleks, et näidata, kuidas interaktsiooni kujundus peaks detailselt toimima.

Paigutatud loomade veebisaidi kassasse looksin Artboards järgmiste ekraanivariantide jaoks:

  • Aadressi ega makseteavet pole sisestatud (väikeste ja suurte ekraanide korral)
  • Õigesti sisestatud aadressi- ja makseteave (väikeste ja suurte ekraanide puhul)
  • Valesti sisestatud aadressi- ja makseteave (väikeste ja suurte ekraanide puhul)
Valitud lehe artboards paigutatakse peamisele lõuendile.

Artboardsile nime andmisel soovitan kasutada nimetamismustrit name-number-modifier-size.jpg. Seda mustrit kasutades on teie meeskonnaliikmetel tõenäolisem, et nad suudavad eksporditud Artboardi sisu tuvastada ilma seda avamata.

siin on mõned näidised:

  • checkout-01-default-small.jpg
  • checkout-02-delivery-address-search-small.jpg
  • kassasse-03-õige-makse-teave-väike.jpg
  • kassasse-04-vale-makse-teave-väike.jpg
Näpunäide. Veenduge, et eksporditud Artboard oleks selle nime järgi tuvastatav. Nimi nagu kassasse kandmine-03-õige-makse-teave-väike.jpg on suurepärane, selline nimi nagu screen21.jpg on kohutav.

Kasutage tekstistiile

Kasutate raamraamides mingil määral teksti ja kui peate fondi suurust kohandama või täielikult kirjatüüpi muutma, kulub seda igal ekraanil tohutu aja ja energia raiskamine.

Õnneks pakub Sketch võimalust salvestada ja taaskasutada oma kujundusvalikuid, kasutades tekstistiile. Kui tekstistiil on salvestatud, saab seda kasutada uute tekstiosade jaoks. Kui muudate tekstistiili, mõjutab see seda tekstistiili kasutades kõiki tekstiosasid.

Iga kord, kui hakkan uue projekti kallal töötama, loon tekstistiilid tavalistele tekstiosadele, näiteks:

  • H1 pealkiri
  • H2 pealkiri
  • H3 pealkiri
  • Kere tekst
  • Metatekst (kuupäevade, ajatemplite, sisestusvihjete ja nii edasi) jaoks
  • Sisestussildid (sisestusväljade ja raadionuppude ning märkeruutude rühmade jaoks)
Panen oma tekstistiilid alati nende enda lehele, nii et näen neid kõiki korraga.

Seadke nimetamise tava

Nii nagu veebiarendajatel (loodetavasti) on CSS-klasside nimetamiseks reeglistik, peaksite seadistama kasutatavate lehtede, siltide ja sümbolite ning tekstistiilide nimetamise tava.

Tasub kasutada sama (või väga sarnast) nimetamismeetodit, mida arendajad kasutavad. Kui jagate oma raamiraami nendega, kasutades selliseid tööriistu nagu Zeplin, on vähem segadust ja teist arvamist, kui kasutate kõik samade komponentide jaoks samu nimesid.

Näiteks kui teie arendusmeeskond on nimetanud CSS-klassi veebisaidi peamiste nuppude kujundamiseks „nupp-primaarseks”, peaksite kasutama seda nime, mitte millegi taolise tegevusele kutsumise asemel.

Näpunäide. Kujutage ette, et loote nimetamise tava kellegi teise, mitte ainult enda jaoks. Küsige kelleltki teiselt, kas teie terminoloogial on mõtet.

Kui otsite nimetamistava kohta reaalse elu näidet, siis tutvuge Trello CSS juhendi või BEM-iga.

Valda sümboleid

Sümbolid on visandil ilmselt parim funktsioon. See on nagu tekstistiilid, kuid kõigi kujundite ja tekstiosade kombinatsioonide jaoks. See on võimas ja säästab pikas perspektiivis palju aega.

Näpunäide. Salvestage logod ja ikoonid ka sümbolitena.

Oletagem, et loote näiteks sisestusvälja sildi ja sisestusvihjega ning soovite seda rohkematel ekraanidel kasutada. Salvestades need kolm elementi ühe sümbolina, salvestatakse see nüüd teie teeki ja seda saab kasutada igal ajal, kui soovite.

Kui teie sümbol sisaldab teksti, saate selle sümboli kõigi eksemplaride tekstitükid alistada. Teksti (mitte selle kujunduse) muutmine ei mõjuta teisi esinemisjuhte.

Sisestusvälja sümbol sildi, sisestusvihje ja sisestustekstiga. Teksti tükke saab selle sümboli iga esinemisjuhu korral tühistada. Näpunäide. Sisestusriba peitmiseks sisestage tühik.

Kui muudate seda sümbolit hiljem, mõjutavad muudatused kõiki selle sümboleid.

Pange oma sümbolitele kaldkriipsud

Kuna tõenäoliselt loote palju sümboleid, peaksite nende nimesse kaldkriipsud (/) panema, et neid korralikult korraldada.

Kui lisate sümbolite nimedele kaldkriipsu, loob Sketch automaatselt neist alamrühmad, mis hõlbustab otsitavate otsimist.

Ma soovitaksin kasutada neid kahte nimetamismustrit:

  1. kategooria / tüüp / olek
  2. kategooria / tüüp / variatsioon-olek
Näpunäide: pidage kinni maksimaalselt kahest kaldkriipsust, nii et teil oleks ainult kolme kihi sügavus (see on minu jaoks siiani kõige paremini mõjunud).

Siin on mõned näited sümbolitest, mis põhinevad neil kahel mustril:

  • nupp / primaarne / vaikimisi
  • nupp / primaarne / keelatud
  • nupp / sekundaarne / vaikimisi
  • nupp / sekundaarne / keelatud
  • sisend / nolabel / vaikimisi
  • sisend / silt / vaikeseade
  • sisend / silt / keelatud
  • sisend / labelandhint / vaikeseade
  • sisend / labelandvihje / keelatud
Alamkaustad Sketch loovad, kui paned kaldkriipsud (/) oma loodud sümbolite nimedesse.

Looge levinud sümbolite kogu

Visand pakub tavalisi kujundeid, nagu ristkülikud, ringid, kolmnurgad ja nooled. Neid pole vaja uuesti joonistada, kuid peaksite neid kasutama ühiste liidese komponentide, nagu nupud, sisestusväljad, kuupäevavalijad ja modaalaknad, loomiseks.

Näiteks loon alati eri olekutes ühiste komponentide sümboleid, näiteks:

  • Peamised nupud (vaikimisi ja keelatud)
  • Sekundaarsed nupud (vaikimisi ja keelatud)
  • Tekstsiltidega ruudud (märgitud ja märkimata)
  • Tekstisildiga raadionupud (kontrollitud ja kontrollimata)
  • Laiendatavad plokid (laiendatud ja laiendamata)
  • Sisendväljad sildiga (vaikimisi ja keelatud)
  • Sisendväljad nii sildi kui ka sisestusvihjega (vaikimisi ja keelatud)

Seal on palju valmis liidese komponente, mida saate tasuta alla laadida ja kasutada, kuid soovitaksin luua oma teegi. Lisateavet eskiisi kasutamise kohta leiate vähem kasutamata sümbolitest.

Sümbolite lehekülje visand luuakse automaatselt, kui alustate sümbolite loomist ja salvestamist.

Pange oma sümbolid reageerima

Täna raamiraamide tegemisel peate tõenäoliselt looma ekraanide erinevad variandid erineva suurusega ekraanide jaoks. Üks variant väikeste ekraanide jaoks, üks suurte ekraanide jaoks ja võib-olla üks keskmise suurusega ekraanide jaoks.

See tähendab, et peaksite oma sümbolid seadistama nii, et horisontaalselt või vertikaalselt sirutades nende paigutus ei puruneks.

Õnneks saab Sketch sellega suurepäraselt hakkama! Paremal asuvate omaduste veerus oleva juhtnupu abil saate sümboli iga elemendi jaoks määrata, kuidas see sümboli venitamisel käitub.

Siin on mõned sätted, mida saate sümboli valitud elemendi jaoks teha:

Venib igas suunas.Hoiab selle suuruse, kuid liigub samade proportsioonidega külgede, ülaosa ja põhja poole.Ülaosa külge kinnitatud. Pikendab oma laiust, kuid hoiab samal kõrgusel.Kinnitatakse vasakusse ülanurka. Hoiab oma suuruse.

Raamraami esitlemine

Raamraamide esitamisel oma meeskonna arendajatele on teil mitu võimalust.

Mõned arendajad eelistavad vaadata visandifaili otse, teised eelistavad, et teie ekraanid eksporditakse piltidele ja mõned eelistavad tööriistu klõpsatavate prototüüpide, näiteks InVisioni valmistamiseks.

Näpunäide: kohelge oma meeskonna arendajaid nagu kasutajaid. Esitage neile oma raamiraami nii, nagu nad eelistavad.

Kui inVision kõlab huvitavalt, lugege palun minu postituse prototüüpi nagu inVisioni profiga.

Ärge kasutage visandifailides kihte

Minu arendajatega töötamise kogemuse põhjal ei tohiks te visandite Sketchis kihte kasutada. Arvan, et see tööviis oli tavapärane, kui Photoshop valitses kõrgeimat.

Enamiku arendajate jaoks, kellega ma olen töötanud, on tüütu peita ja näidata palju (sageli halvasti nimega) kihte, et õppida ekraani väljanägemist ja käitumist. Erinevate ekraanivariantide tutvustamiseks kasutage selle asemel lihtsalt rohkem Artboards.

Lisalugemist

Sketchi kasutamisest on juba kirjutatud palju suurepäraseid artikleid. Siin on minu lemmikud:

  • Vastuvõtlik eskiis - 1. osa, autor Emin Inanc Ulu
  • Javier 'Simón' Cuello visandis sümbolite täieliku potentsiaali vabastamine
  • Lloyd Humphreys visandisümboli parimad tavad (nüüd, kui pesastatud alistamine on asi)

Kas on midagi, mida arvate, et peaksin seda postitust lisama, eemaldama või muutma? Andke mulle kommentaaride jaotises teada.

Oh, muide! Kui seda tüüpi traatraamimist on teie projekti jaoks natuke liiga palju, lugege palun minu uut postitust “Kuidas pabertraadist raamid muudavad teid paremaks kujundajaks”.

/ Alex