Poslušajte zvočno različico tega članka
Leta 1976 je Johnny Cash izšel En kos naenkrat , pesem, ki pripoveduje zgodbo avtomobilskega delavca iz Detroita, ki dvajset let zbira dele Cadillaca, ukradene s tekočega traku.
Na žalost, ko delavec začne graditi svoj bootleg Cadillac, ugotovi, da so številni deli nezdružljivi, ker so se ključne značilnosti oblikovanja skozi leta spreminjale. Z malo iznajdljivosti se avtomobil po meri sestavi, a gre za grdo mešanico, ki vzbuja posmeh, kamor koli gre.
Tudi zadnji del je bil videti nekako smešno
Ampak smo ga sestavili in ko smo prišli skozi
No, takrat smo opazili, da imamo samo eno repno plavut.
Oblikovalci in razvijalci današnjih digitalnih izkušenj se soočajo s podobnim izzivom. Čas je močan sovražnik, ki lahko uniči kontinuiteto digitalnih izdelkov. Sčasoma člani ekipe prihajajo in odhajajo, trendi se razvijajo in funkcije se spreminjajo. Poleg tega hiter tempo naše sodobne digitalne krajine pomeni, da se inovacije izdelkov pojavljajo v četrtletjih in ne v letih.
Če podjetje ali oblikovalska skupina nima skupne evidence, ki dokumentira predvideni videz in občutek izdelka, se bodo pojavile vizualne in izkustvene nedoslednosti, uporabniki bodo razočarani in ugled blagovne znamke bo zadel.
UI Style Guides so orodje za oblikovanje in razvoj, ki prinaša kohezijo v uporabniški vmesnik in izkušnjo digitalnega izdelka. V svojem bistvu:
Preden podrobneje preučimo, kako sestaviti vodnik po slogu uporabniškega vmesnika na strokovni ravni, je pomembno razumeti, da ne obstaja enoten pristop za vse. Vrednost slogovnih vodnikov z velikimi skupinami izdelkov presega velike blagovne znamke. Srednja in majhna podjetja, ki iščejo dosledno digitalno izkušnjo, koristijo tudi, če so uporabniški vmesniki po meri narejeni po njihovih posebnih potrebah.
Oblikovalci, ki poznajo smernice za identiteto blagovne znamke, ne bi smeli imeti težav s prehodom na vodnike po slogu uporabniškega vmesnika, saj se veliko ključnih komponent oblikovanja, ki jih je treba vključiti, precej prekriva.
Nasvet za profesionalce: Dokumentirajte samo ustrezne komponente oblikovanja. Zaradi tujih informacij so vodniki po slogu uporabniškega vmesnika napihnjeni in z njimi težko delati.
Tipografija je eden najpogostejših elementov zasnove vmesnika, zato ni dovolj le naštevanje imen pisav, uporabljenih v izdelku. Za naslove, podnapise, naslove (H1, H2, H3), osnovno besedilo in napise je treba dati jasna navodila.
Poleg tega je treba navesti velikosti pisav, navesti uteži in določiti sloge. Potrebni sta tudi višina črte in rezanje, zato je dobro, da v posebnih okoliščinah izberete pisavo, ki se bo uporabila.
Ko so digitalni izdelki zasnovani naokrog odziven omrežnih sistemov, morajo vodniki po slogu uporabniškega vmesnika obravnavati postavitve vmesnikov na različnih velikostih zaslona. To pomeni, da vključite opombe in primere za razmike, obloge in umestitve. Prav tako je koristno prikazati prosojnice mrežnega sistema izdelka glede na različne velikosti zaslona.
Glavni cilj tukaj je zagotoviti dovolj konteksta, da se prepreči potreba po enkratnih zasnovah zaslona. Sčasoma se ti seštevajo in spodkopavajo kohezijo digitalnega izdelka.
Eden najhitrejših načinov, kako razbiti vmesnik, je nedosledna uporaba barv, zato je treba barvne kombinacije jasno opredeliti. Seznam barv in njihovih vrednosti (HEX, UIColor) je dober začetek, vendar je treba navesti tudi posebne sezname in primere uporabe.
Če se vodnik po slogu uporabniškega vmesnika sklicuje na niz identiteta blagovne znamke smernice, preverite, ali je na voljo sekundarna shema svetlejših naglasnih barv. Če ne, ustvarite svojega in dokumentirajte. Uporabna je tudi izbira sivih vrednosti.
Skoraj vsak vmesnik vključuje gumbe, zato si vzemite čas, da dokumentirate njihove velikosti, sloge, barve, postavitev, razmik in tipografske elemente. Če v različnih okoliščinah uporabljate različne gumbe, to tudi pojasnite.
Poleg komponent uporabniškega vmesnika, ki jih je treba imeti, obstajajo številne praktične funkcije, ki podjetjem in oblikovalskim skupinam olajšajo sklicevanje na uporabniške vmesnike, navigacijo in izvedbo.
Dobro organizirana in jasno označena vsebina je preprost način, da lahko vsakdo hitro najde tisto, kar je v dokumentu.
Nemogoče je napovedati vsako problematično oblikovalsko odločitev, ki se lahko pojavi v življenjski dobi izdelka, zato lahko artikuliranje utemeljitve zasnove za pogosto uporabljenimi komponentami uporabniškega vmesnika olajša razrešitev nepredvidenih scenarijev.
Na primer:
»V bistvu gre pri našem izdelku za predstavitev najboljših arhitekturnih slik z vsega sveta. Iz tega razloga je postavitev našega vmesnika prednost velikim in prhkim slikam pred besedilom. Kadar koli je mogoče, naj bodo slike osrednja točka našega izdelka. '
Razmiki in pozicioniranje so pogosto zajeti v poglavju 'Odzivne postavitve'. Glede na zapletenost digitalnega izdelka so lahko navodila sestavljena iz splošnih 'palčnih pravil' ali pa so precej natančna.
Pogosto je lahko koristno, če jasno opišete načrte, ki jih je treba in česa ne. Na primer:
Ali ne in kaj preprečujejo razprave ter prihranijo čas načrtovanja in razvoja, vendar je vedno najbolje, da navedete takšen kontekst:
»Ta seznam naredi in ne zajema široko paleto pomembnih oblikovalskih odločitev, vendar ne upošteva vseh možnih zlorab oblikovalskih elementov našega izdelka. S tem v mislih uporabite najboljšo presojo, ko se pojavi negotovost, in se odločite, ki natančno odražajo celoten videz in občutek našega izdelka. '
Smernice za identiteto blagovne znamke so običajno statični dokumenti, vendar vodniki po slogu uporabniškega vmesnika vključujejo aktivne elemente, ki delujejo tako, kot bi delali v končnem izdelku - kar pomeni, da se gumbi obnašajo kot gumbi, spustni meniji dejansko padajo in animacije so animirane.
Delčki kode omogočajo razvijalcem, da hitro kopirajo in prilepijo kodo elementov v živo v zaledje izdelka.
Zdaj, ko razumemo, kako ustvariti vodnik po slogu ter komponente in funkcije, vključene v vodnik po slogu uporabniškega vmesnika, svojo pozornost preusmerimo na skupno rabo in komunikacijo. Natančneje, kakšne so možnosti namestitve UI Style Guides?
Tradicionalno UI Style Guides obstajajo kot spletne strani. To omogoča oblikovalcem in razvijalcem enostaven dostop in omogoča, da elementi oblikovanja delujejo tako kot v izdelku.
V zadnjem času se je pojavilo nekaj platform v oblaku, ki skupinam omogočajo skupno načrtovanje, izdelavo prototipov in testiranje izdelkov. Na teh istih platformah se lahko nahajajo tudi vodniki po slogu uporabniškega vmesnika in člani ekipe lahko izmenjujejo nenehne povratne informacije in ideje.
Poglejmo, kako nekaj teh platform opisuje svoj pristop k vodnikom po uporabniškem vmesniku.
»Ustvarite sisteme za oblikovanje s povezanimi komponentami uporabniškega vmesnika, ki jih lahko uporablja celotna ekipa. Prejemajte posodobitve, ko se spremenijo komponente v skupni rabi ”
»Knjižnice, kakršne bi morale biti: barve, lastnosti in elementi ... celo čas prehoda - vse v komponenti zdaj. Uredite na mestu - vse je mojstrsko. Preglasite vse, kar ne potrebujete, na primer. '
»Vse komponente blagovne znamke in UX, vključno z dokumentacijo o uporabi, se upravljajo na enem mestu. Spremeni sinhronizacijo s celotno ekipo, oblikovalci pa lahko kadar koli preklopijo na najnovejšo različico ali vrnejo posodobitve. '
“Ustvarite svojo temo Material in ustvarite knjižnico simbolov z blagovno znamko, tako da spremenite slog v barvo, obliko in tipografijo. Skupna raba, nalaganje in predstavitev ponovitev oblikovanja v galeriji. Nato uporabite način pregleda za dostop do dokumentacije za razvijalce. '
Pri sestavljanju vodnikov po slogu uporabniškega vmesnika komunikacija ne more biti samoumevna. Skupine izdelkov sestavljajo ljudje iz različnih strok, kulturnega okolja in poklicnih izkušenj. Uporabite ta načela za zagotovitev jasnosti in enostavnosti uporabe.
Vodiči za uporabniški vmesnik zahtevajo čiste, neurejene postavitve zaslona. Vsak zaslon mora biti dobro organiziran, jasno označen in dobro čitljiv. Preobremenjenost zaslonov z vizualnimi informacijami nima nobene koristi, zato si prizadevajte za minimalne in prostorne aranžmaje.
Navodila naj bodo kratka in sladka. Izogibajte se dolgim odstavkom in jih uporabljajte krogle . Kjer je mogoče, demonstrirajte z vizualnimi elementi nad besedami.
Se sprašujete, kdaj uporabiti ta slog drsnika nad tem? 'Scenariji uporabe' razrešijo to vrsto zmede. Tudi tu so vizualni elementi močnejši od besed, zato navedite primere, ki jasno prikazujejo tako scenarij kot tudi pravilno pot naprej.
Digitalni izdelki se pogosto posodabljajo. Ker si skupine izdelkov želijo izboljšati vse podrobnosti o vmesniku, je pomembno, da si neprestano evidentiramo, kako so se oblikovalske komponente razvijale. Tukaj uporabite presojo - za manjša podjetja in produktne skupine je vzdrževanje obsežne knjižnice zgodovin različic morda nepraktično.
Sodobne oblikovalske in razvojne ekipe cenijo učinkovitost in multidisciplinarno sodelovanje - kar dokazujejo jezikovni sistemi oblikovanja, ki jih oglašujejo velike blagovne znamke, kot so MailChimp, Google in Salesforce.
Sistemi jezikov za oblikovanje različnim skupinam, ki delajo na prefinjenih digitalnih izdelkih, omogočajo komunikacijo s standardiziranim vizualnim jezikom. Vodiči po uporabniškem vmesniku so vtkani v strukturo jezikovnih sistemov za oblikovanje in služijo kot orodje, na katerega se lahko zanesete za hitro ponovitev in dosledne digitalne izkušnje.
Hkrati oblikovanje ni namen, namenjeno le velikim podjetjem. Raznoliko paleto produktnih skupin in digitalnih projektov lahko koristijo dobro izdelani vodniki po slogu uporabniškega vmesnika, vendar se viri (finančni, časovni in nadarjeni) razlikujejo od podjetja do podjetja.
Zato so vodniki po slogu uporabniškega vmesnika najbolj uporabni, če so prilagojeni potrebam posameznih podjetij in oblikovalskih skupin. Najvišji cilj vsakega slogovnega uporabniškega vmesnika je ravnovesje med jasnostjo in praktičnostjo, ki vodi do nenehno čudovitih uporabniških izkušenj.
• • •Vodnik po slogu blagovne znamke je dokument, ki vsebuje vse elemente vizualnega oblikovanja podjetja (logotip, barva, tipografija, ikonografija itd.). Vodnik po slogu blagovne znamke vsebuje splošna pravila in opombe o kontekstu, ki oblikovalcem pomagajo doseči skladnost blagovne znamke pri ustvarjanju sredstev za tisk, splet, mobilne naprave itd.
Pomembno je imeti stilski vodnik, ki oblikovalcem pomaga ohranjati enotnost blagovne znamke pri razvoju zavarovanj za tisk, splet, mobilne naprave itd. Stilna vodila so še posebej pomembna, kadar veliko oblikovalcev dela na digitalnem izdelku.
Pri delu z digitalnimi izdelki za splet in mobilne naprave delčki kode razvijalcem omogočajo hitro kopiranje in lepljenje kode elementov oblikovanja v živo v zaledje izdelka.