Flýttu vinnuflæði þínu með stílaleiðbeiningum

Efni.

• Hvað er stílaleiðbeining?
• Hvar passa stílaleiðbeiningar inn í verkefni?
• Hvað lætur þú fylgja með í góðum stílaleiðbeiningum?
• Hvernig býrðu til stílaleiðbeiningar?
• Hvernig notarðu stílaleiðbeiningar?

Hvað er stílaleiðbeining?
Hvar passa þeir inn í verkefni?
Hvað tekur þú með?
Hvernig býrðu til stílaleiðbeiningar?
Hvernig notarðu stílaleiðbeiningar?

Stíllhandbækur eru nú vel stofnaðar sem lykilþáttur í nútíma vinnuferli vefhönnunar. Notkun þeirra í vefverkefnum hefur aukist stöðugt um nokkurt skeið, þökk sé aukinni samfélagsvitund, þar sem ýmsir sérfræðingar í iðnaði sýna fram á notkun þeirra og árangur. Svo hvort sem þú ert að byggja upp síðu frá grunni eða nota vefsíðuhönnuð er mikilvægt að búa til stílaleiðbeiningar.

Uppgangur stílaleiðbeininga var að hluta til tengdur við þróun móttækilegrar hönnunar á vefnum, en þeir hjálpa nú hönnuðum og tæknimönnum að takast á við kröfur hæfari vefjar og sífellt metnaðarfyllri vefverkefna (ef þitt er metnaðarfullt skaltu ganga úr skugga um að vefurinn þinn hýsing er allt að grunni). Þeir munu hjálpa þér að hanna og byggja hraðar með nákvæmari og stöðugri árangri. Og mundu að vista þau í sameiginlegri skýjageymslu svo allir fái aðgang að þeim.

Í þessari grein munum við fara yfir allt sem þú þarft að vita um hvað stílleiðbeining er, hvernig á að setja einn saman og hvernig á að nota einn. Notaðu hraðtenglana til hægri til að hoppa að þeim hluta sem þú vilt.

Hvað er stílaleiðbeining?

Öfugt við hefðbundna skipulagningu vefsíðuskipunar sem framleidd er í Sketch, Photoshop CC eða álíka, þá er stílaleiðbeiningar sett af þáttum og íhlutum sem þegar þeir eru notaðir saman geta myndað heilt skipulag eða hluta af því uppsetningu. Þegar þau eru framleidd rétt eru þau stigstærð og sveigjanleg og gera það að fullkomnu tæki til að byggja upp móttækilega hönnun. Skoðaðu styleguide.io til að fá mörg dæmi um frábærar stílaleiðbeiningar og úrræði til að læra meira.

Í þessari grein mun ég nota hugtökin „stílaleiðbeiningar“ og „hönnunarkerfi“ til skiptis, þar sem ég tel að stílaleiðbeiningar séu áhrifaríkastar þegar þær mynda kerfi til að stjórna núverandi hönnun og leyfa framleiðslu nýrra með vellíðan.

Svo hvers vegna viltu skipta úr hefðbundnu vinnuflæði? Til að byrja með þýðir það að kynna stílaleiðbeiningar að þú getir komist hraðar inn í vafrann og eytt minni tíma í skjáborðsvefhönnunarverkfæri.

Þegar það er gagnlegast, stílleiðbeiningar gera þér kleift að vinna upp öll hönnunarhugmyndir þínar í vafranum og lækka eins og Photoshop og Sketch í verkfæri til að búa til eignir, frekar en það sem þú notar til að sjá fyrir þér skipulag.

Hvar passa stílaleiðbeiningar inn í verkefni?

Þó að leiðbeiningar um stíl séu fyrst og fremst tæki fyrir vefhönnuði og / eða forritara, þá geta þeir einnig verið afhentir fyrir viðskiptavini. Stílleiðbeiningar veita viðskiptavinum innsýn í hönnunarkerfið sem verið er að koma á fót og litatöflu sem mun mynda afurð þeirra. Samantha Warren kannar þessa hugmynd ítarlega með Style Flísum sínum; aðferð til að sýna fram á sjónrænt tungumál fyrir viðskiptavinum í formi leturgerða, lita og viðmótaþátta.

Vandamálið við hefðbundna nálgun að biðja viðskiptavini um að skrá sig á kyrrstöðu skipulag er að þetta eru í raun ljósmyndir af því hvernig vefsíðan gæti litið út. Auðvitað munum við reyna eftir fremsta megni að láta lokaafurðina líta út eins og fyrirheitin sem við höfum gefið á þessari mynd, en við erum að búa til hugsjónarmynd án þess að þurfa að berjast við alla lifandi hluta vefsins.

Margir litlir blæbrigði - svo sem gerð flutnings og bil - geta breyst. Þetta getur numið því að viðskiptavinurinn finni fyrir því að þeir hafi verið villðir af Photoshop flutningi.

Með því að nota stílaleiðbeiningar sem afhendingarhönnuð útrýma þessum erfiðu viðræðum við viðskiptavin. Þeir gera breytingum á hönnun auðveldara að ljúka án mikils vandræða og koma þér í mátahugsunina frá fyrstu stigum í verkflæðinu.

Hvað lætur þú fylgja með í góðum stílaleiðbeiningum?

Helst ætti stílaleiðbeiningin að gefa þér allt sem þú þarft til að hanna og byggja upp síðu með fyrirvara, án þess að þurfa að opna Photoshop eða Sketch. Hvað sniðið varðar, þá ætti stílaleiðbeiningar að vera lifandi HTML, flokkaðir á þann hátt sem auðvelt er að viðhalda fyrir þig og alla aðra hönnuði sem gætu komist í snertingu við það.

Byrjum á grunnatriðunum og skoðum innihaldsefni þess sem gerir góða leiðbeiningar um stíl. Mér finnst fyrirsagnirnar sem ég hef fjallað um hér hjálpa sem grunnur til að byrja með, en ekki hika við að bæta við undirfyrirsögnum og verða nákvæmari. Skoðaðu Atomic Design Brad Frost sem mögulega aðferðafræði við að skipuleggja þennan hluta hönnunarkerfisins.

Gerð

Þetta felur í sér allt leturfræðilega stigveldið sem nær yfir fyrirsagnir, lista, tilvitnanir í lokun og málsgreinatexta. Það ætti einnig að ná til hvers kyns afbrigða innan þessara flokka, svo sem myndatexta, dropahettna og annarra sérstakra leturfræðilegra meðferða og samhengis HÍ eins og hnappa, flakk og formsviða.

Rist og bil

Þetta ætti að innihalda bæði lárétt og lóðrétt netkerfi. Leiðbeiningar um netkerfi gera þér kleift að frumgera hratt og byggja upp skipulag án þess að þurfa að gera tímafrekar breytingar á bili og framlegð.

Litur

Aðal litaspjaldið þitt, þ.mt helstu hlekkarlitir, aðgerðir og frumlitir (til dæmis hnappar, merkimiðar og tákn). Í þessum kafla þarftu einnig að taka með alla liti utan þessa litatöflu sem eiga sér stað vegna aðstæðna utan kjörhönnunarástands, eins og villu- og kerfisskilaboð og staðfesting.

Mát

Einingar samanstanda af hlutum eins og hnappa, formsviðum, flipum og flakki, auk safna af þáttum eins og myndatexta og metagögnum með bloggpósti. Þeir fela einnig í sér samsetningar þætti sem vinna saman - til dæmis fyrirsögn greinar, dagsetningu og málsgrein fyrir inngang, verkfæri með litlum fyrirsögn og texta osfrv.

Hvernig býrðu til stílaleiðbeiningar?

Hvernig setur þú nákvæmlega saman stílaleiðbeiningar? Hér mun ég leiða þig í gegnum ferlið sem ég nota.

Byrjaðu með vírramma

Áður en þú kóðar eina línu af hönnunarkerfinu þínu þarftu að vita nokkurn veginn hvaða hlutum þú þarft til þess. Snemma í verkefninu, þegar viðskiptavinur hefur lagt fram upphafsefni og eignir sem þú munt vinna með, ættirðu að stefna að því að koma grunninum að hönnunarkerfinu þínu með settum vírrammateikningum.

Wireframes eru leynivopn stílaleiðsögumanns. Gefðu þér tíma til að skissa út alla skjái vörunnar, annaðhvort með penna og pappír, eða með vírramma tólinu. Láttu alla sérstaka HÍ íhluti sem þú munt líklega þurfa í lokavöruna.

Leitaðu að mynstri

Á þessum tímapunkti mæli ég með því að finna stórt líkamlegt vinnusvæði þar sem þú getur dreift vírrammateikningum þínum svo þeir séu allir sýnilegir í einu og þú getir fengið víðtæka sýn á kerfið sem þú ert að fara að koma á fót. Horfðu yfir skissurnar þínar og taktu eftir mynstri. Kannski kemur sambland af þáttum saman oft og gæti orðið margnota eining?

Leitaðu einnig að mynstri sem eru að reyna að koma fram. Til dæmis gæti listi yfir blogggreinar verið með svipuðu sniði og listi yfir leitarniðurstöður, en við skulum segja að þættirnir séu raðaðir í annarri röð. Kannski að breyta öðru hvoru til að passa við hitt hjálpar notandanum að lesa mynstur sem hann hefur ómeðvitað lært annars staðar í vörunni þinni.

Vörulist allt

Mér finnst gaman að nota sett af síðumerkjum Post-It Note til að merkja alla þætti á vírammasíðunum mínum til viðmiðunar. Til dæmis, mát eins og brauðmola sem á sér stað í gegnum skissurnar gæti verið merkt „M01“. ‘M’ gefur til kynna að það sé eining. Talan gefur til kynna hvaða eining það er í kerfinu mínu - næsta eining væri M02, M03 og svo framvegis.

Þátturinn sjálfur gæti verið endurtekinn annars staðar, þannig að þetta brauðmylsna mynstur gæti birst á vörusíðu sem og blogggrein, bæði merkt M01, svo ég lendi ekki í því að hanna og smíða margar útgáfur af sama frumefni þegar kemur að frumgerð vírrammarnir.

Færa í HTML

Eftir að þú hefur lokið skráningu og merkingu vírramma er einfaldlega spurning um að taka þá vörulista og eininga og byggja þá sem lifandi HTML stíl leiðbeiningar.

Hugsaðu um það eins og Airfix líkan. Þú ert með leiðbeiningarblað (vírammateikningar þínar) og sett af merktum hlutum (stílaleiðbeiningar þínar) sem svara til leiðbeiningarblaðsins. Þegar þú hefur fengið hugmynd um hvað þú vilt búa til, þá veistu hvaða hlutum þú þarft og á þeim tímapunkti ertu tilbúinn að byggja hönnunarkerfið þitt.

Það besta við að nálgast hönnunarkerfi á þennan hátt er að það gerir þér kleift að framleiða hratt nýja skjái og íhluti - hver atburðarás er aðeins vírammateikning í burtu. Stíllhandbókin minnir þig á núverandi hluti og mynstur þegar þú teiknar næsta skissu. Þegar skissunni er lokið ertu tilbúinn að byggja hratt með vírrammana sem leiðbeiningarblað og nota tilbúna þætti í stílaleiðbeiningunum þínum.

Hvernig notarðu stílaleiðbeiningar?

Tæknilega séð er stílaleiðbeining í raun aldrei fullkomin; það er síbreytilegt skjal sem vex með verkefninu þínu. Það er ómögulegt að vita fyrirfram um allar samsetningar þætti, mynstra og eininga sem þurfa að vera til, umfram það sem þú hefur áætlað. En það er allt í lagi. Satt að síbreytilegu eðli vefsins okkar getur stílhandbók aðeins verið eins fullkomin og núverandi staða vörunnar.

Í (aðallega) fullkomnu ástandi sínu er stílaleiðbeining tilvísun í yfir-bogið myndmál vörunnar sem þú ert að byggja. Það þýðir að þú getur séð hvernig nýir eiginleikar geta mótast og útlit og tilfinningu sem þeir tileinka sér. Það er líka lifandi bókasafn prófaðra þátta og íhluta sem hægt er að nota til að smíða hratt nýja skjái eða hluta af vöru, sem gerir það skilvirkasta leiðin til að byggja hratt upp verkefni á hvaða mælikvarða sem er.

Það er nauðsynlegt að stílleiðbeiningum sé viðhaldið umfram upphaflega getnað hennar. Það verður að vera núverandi, frekar en að vera mynd af því hvernig hönnunarkerfi vörunnar leit út á ákveðnum tíma. Það ætti að vera sjónrænt orðasamband verkefnisins þíns - aðilinn sem þú ráðfærir þig við þegar ákvörðun um hönnun er tekin að teikningu lokinni. Allir nýir íhlutir og einingar eru búnar til úr DNA þess, þannig að frá sjónarhóli notendaupplifunar munu allir nýir hlutir líta út eins og hluti af heildarmyndinni.

Ef þú hefur aldrei notað stílaleiðbeiningar í vefverkefni áður, prófaðu það í næsta verkefni þínu og sjáðu muninn á því að hjálpa þér að hanna, smíða og frumgerð fljótt. Með æfingu verður auðveldara að búa þau til og þú munt jafnvel finna mynstur í stílaleiðbeiningunum þínum sem hægt er að endurnýta til að flýta fyrir ferlinu við að búa til næsta stílaleiðbeiningar.

Gagnlegur stílhandbók fer út fyrir getu sjónræns tilvísunar. Það verður DNA vöru þinnar, sem hvert stykki núverandi og framtíðar hönnunar á uppruna sinn til að framleiða stöðugan stíl og eiginleika afgangs vörunnar.

Þessi grein birtist upphaflega í net tímarit. Gerast áskrifandi hér.