Poslušajte zvočno različico tega članka

Zagotovite skladen dizajn izdelka in uporabniško izkušnjo

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:

• Zapišite vse elemente oblikovanja in interakcije, ki se pojavijo znotraj izdelka
• Naštejte ključne komponente uporabniškega vmesnika, kot so gumbi, tipografija, barva, meniji za krmarjenje itd.
• Dokument pomemben UX komponente kot so stanja lebdenja, spustna polja, animacije itd.
• Vsebujejo aktivne elemente in delčke kode, da jih razvijalci lahko uporabijo

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.

Vključite te ključne komponente oblikovanja v vodnike po slogu uporabniškega vmesnika

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.

Shema tipografije

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.

Odzivne postavitve

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.

Barvna paleta

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.

Gumbi

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.

Dodatne komponente uporabniškega vmesnika, ki bodo morda potrebne

• Ikonografija
• Opisi in napotki
• Modalci
• Elementi obrazca
• Podatkovne tabele
• Navigacijski meniji
• Grafikoni in vizualizacije podatkov
• Zavihki
• Stikala za vklop / izklop
• Dialogi
• Seznam omrežij z vsebinami
• Navpični seznami
• Orodne vrstice
• Izbirniki datuma in ure
• Kazalniki nalaganja
• Potrditvena polja
• Opozorila
• Spustni meniji
• Drsniki
• Steperji
• Paginacija

Organizirajte in kontekstualizirajte navodila za oblikovanje

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.

Kazalo

Dobro organizirana in jasno označena vsebina je preprost način, da lahko vsakdo hitro najde tisto, kar je v dokumentu.

Kontekstne opombe

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. '

Navodila za razmik in pozicioniranje

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.

Naredite in ne

Pogosto je lahko koristno, če jasno opišete načrte, ki jih je treba in česa ne. Na primer:

• ' Ali v nogi vmesnika uporabite belo različico z logotipom našega podjetja. '
• ' Ne uporabite nadomestne barvne različice besednega znaka našega podjetja na črnem ozadju. '

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. '

Elementi v živo in delčki kode

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.

Naj bodo vodniki po slogu uporabniškega vmesnika enostavno dostopni oblikovalskim skupinam

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.

Figma

»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 ”

Faza

»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. '

InVision

»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. '

Material.io

“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. '

Navodila za uporabniški vmesnik naj bodo enostavna za uporabo

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.

Preproste postavitve

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.

Kratka navodila

Navodila naj bodo kratka in sladka. Izogibajte se dolgim ​​odstavkom in jih uporabljajte krogle . Kjer je mogoče, demonstrirajte z vizualnimi elementi nad besedami.

Informativni scenariji uporabe

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.

Zgodovine ustreznih različic

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.

Vodiči za uporabniški vmesnik so dragocen vir in močno orodje za oblikovanje

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.

• • •

Nadaljnje branje na blogu ApeeScape Design:

• Slogi pisav za oblikovanje spleta in tiska
• Odziven dizajn - najboljše prakse in premisleki
• Zakaj startupi potrebujejo slog vodnika
• Uporabne ikone in najboljše prakse oblikovanja
• Uporabite svoj navdih - vodnik po razpoloženjih

Razumevanje osnov

Kaj je slog blagovnih znamk?

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.

Zakaj je pomembno imeti vodnik po slogu?

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.

Kaj so delčki kode in kako jih lahko uporabimo?

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.