Lytt til lydversjonen av denne artikkelen

Sikre et sammenhengende produktdesign og brukeropplevelse

I 1976 slapp Johnny Cash Ett stykke om gangen , en sang som forteller historien om en Detroit-bilarbeider som bruker tjue år på å samle Cadillac-deler stjålet fra samlebåndet.

Dessverre, når arbeideren begynner å bygge bagasjerommet Cadillac, oppdager han at mange deler er inkompatible fordi viktige designfunksjoner har endret seg gjennom årene. Med litt oppfinnsomhet kommer den tilpassede bilen sammen, men det er en skjemmende mishmash som inspirerer til latter hvor som helst.

Bakenden så ganske morsom ut også
Men vi satte det sammen og da vi kom gjennom
Det var da vi la merke til at vi bare hadde en halefinne.

Designere og utviklere av dagens digitale opplevelser står overfor en lignende utfordring. Tidens gang er en formidabel fiende som er i stand til å herje kaos på kontinuiteten til digitale produkter. Med tiden kommer teammedlemmene og går, trender utvikler seg, og funksjonene endres. I tillegg betyr det raske tempoet i vårt moderne digitale landskap at produktinnovasjon skjer i kvartaler, ikke år.

Hvis et forretnings- eller designteam ikke har en felles registrering som dokumenterer det tiltenkte utseendet og føles som et produkt, vil visuelle og erfaringsmessige uoverensstemmelser oppstå, vil brukerne bli frustrerte, og merkevarens omdømme vil treffe.

UI Style Guides er et design- og utviklingsverktøy som gir sammenheng i et digitalt produkts brukergrensesnitt og opplevelse. I sin kjerne:

• Registrer alle designelementene og interaksjonene som forekommer i et produkt
• List viktige UI-komponenter som knapper, typografi, farge, navigasjonsmenyer osv.
• Dokument viktig UX-komponenter som svevstilstander, rullegardinfyll, animasjoner osv.
• Inneholder live-elementer og kodebiter som utviklere kan referere til og bruke

Før vi tar en nærmere titt på hvordan vi kan sette sammen en ekspertnivå UI Style Guide, er det viktig å forstå at det ikke er en tilnærming som passer alle. Verdien av stilguider strekker seg utover store merker med store produktteam. Midt til små bedrifter som søker en jevn digital opplevelse, har også fordel når UI Style Guides er skreddersydd etter deres spesifikke behov.

Inkluder disse viktige designkomponentene i UI-stilveiledninger

Designere som er kjent med retningslinjer for merkeidentitet, bør ikke ha noe problem med å gå over til UI Style Guides fordi det er rikelig med overlapping med mange av de avgjørende designkomponentene som må inkluderes.

Proffstips: Dokumenter bare relevante designkomponenter. Ekstrem informasjon gjør UI Style Guides oppblåst og vanskelig å jobbe med.

Typografisk ordning

Typografi er et av de vanligste grensesnittdesignelementene, så det er ikke nok å bare liste opp navnene på skrifttypene som brukes i et produkt. Klare instruksjoner bør gis for titler, undertekster, overskrifter (H1, H2, H3), brødtekst og bildetekster.

I tillegg bør skriftstørrelser oppgis, vekter angitt og stiler definert. Linjehøyde og kerning er også nødvendig, og det er lurt å peke ut en go-to-font som skal brukes når spesielle forhold oppstår.

Responsive oppsett

Når digitale produkter er designet rundt mottakelig rutenett, må UI Style Guides adressere grensesnittoppsett på tvers av skjermstørrelser. Dette betyr å inkludere notater og eksempler for avstand, polstring og plassering. Det er også nyttig å vise overlegg på produktets rutenett i forhold til forskjellige skjermstørrelser.

Det store målet her er å gi nok kontekst til å forhindre behovet for engangsskjermdesign. Over tid legger disse til og undergraver et digitalt produkts kohesjon.

Farge palett

En av de raskeste måtene å ødelegge et grensesnitt er inkonsekvent fargebruk, så fargekombinasjoner må defineres tydelig. Oppføring av farger og deres verdier (HEX, UIColor) er en god start, men spesifikke sammenkoblinger og brukseksempler bør også gis.

Hvis UI Style Guide refererer til et sett med merkeidentitet retningslinjer, sjekk for å se om en sekundær ordning med lysere aksentfarger er tilgjengelig. Hvis ikke, lag ditt eget og dokument. Et utvalg av grå verdier er også nyttig.

Knapper

Nesten hvert grensesnitt inneholder knapper, så ta deg tid til å dokumentere størrelser, stiler, farger, plassering, avstand og typografiske elementer. Hvis forskjellige knapper brukes i forskjellige sammenhenger, gjør det også klart.

Ekstra UI-komponenter som kan være behov for

• Ikonografi
• Verktøytips og popover
• Modaler
• Formelementer
• Datatabeller
• Navigasjonsmenyer
• Diagrammer og datavisualiseringer
• Faner
• Av / på-brytere
• Dialoger
• Innholdsnettlister
• Vertikale lister
• Verktøylinjer
• Plukkere for dato og tid
• Laster indikatorer
• Avkrysningsruter
• Varsler
• Rullegardinmenyer
• Glidere
• Steppers
• Paginering

Organiser og kontekstualiser designinstruksjoner

I tillegg til må-ha UI-komponenter, er det en rekke praktiske funksjoner som gjør UI-stilveiledninger enklere for bedrifter og designteam å referere, navigere og implementere.

Innholdsfortegnelse

En godt organisert og tydelig merket innholdsfortegnelse er en enkel måte å hjelpe alle med å raskt finne det som er inne i dokumentet.

Kontekstnotater

Det er umulig å forutsi alle problematiske designbeslutninger som kan oppstå i løpet av et produkts levetid, så det å artikulere designbegrunnelsen bak ofte brukte UI-komponenter kan gjøre uforutsette scenarier lettere å løse.

For eksempel:

“I kjernen handler vårt produkt om å vise frem de beste arkitekturbildene fra hele verden. Av den grunn prioriterer utformingen av grensesnittet store, sprutete bilder fremfor tekst. Når det er mulig, må du gjøre bilder som fokuspunkt for vårt produkt. ”

Avstand og posisjoneringsinstruksjoner

Avstand og posisjonering blir ofte dekket i delen 'Responsive Layouts'. Avhengig av kompleksiteten til det digitale produktet, kan instruksjonene bestå av generelle 'tommelfingerregler' eller være ganske detaljerte.

Gjør og ikke gjør

Ofte kan det være nyttig å tydelig skissere design Do's and Don'ts. For eksempel:

• ' Gjøre bruk den hvite ordmerkeversjonen av selskapets logo i grensesnittfoten. ”
• ' Ikke gjør det bruk alternative fargeversjoner av firmaets ordmerke på svart bakgrunn. ”

Må og ikke hindre debatt og sparer design og utviklingstid, men det er alltid best å gi et notat av kontekst som dette:

“Denne listen over må og ikke må dekke et bredt spekter av viktige designbeslutninger, men den tar ikke hensyn til all mulig misbruk av produktets designelementer. Med dette i bakhodet, bruk best skjønn når usikkerhet oppstår, og ta valg som nøyaktig gjenspeiler det generelle utseendet og følelsen til vårt produkt. '

Live Elements og Code Snippets

Retningslinjer for merkeidentitet er vanligvis statiske dokumenter, men UI-stilveiledninger inkluderer liveelementer som fungerer som de ville gjort i sluttproduktet, noe som betyr at knapper oppfører seg som knapper, rullegardinmenyer faktisk faller ned og animasjoner animeres.

Kodebiter lar utviklere raskt kopiere og lime inn koden til live-elementer i produktets back-end.

Gjør UI-stilveiledninger lett tilgjengelige for designteam

Nå som vi forstår hvordan vi lager en stilguide og komponentene og funksjonene som er inkludert i en UI-stilveiledning, skyver vi oppmerksomheten mot deling og kommunikasjon. Mer spesifikt, hva er alternativene for å huse UI Style Guides?

Tradisjonelt har UI Style Guides eksistert som websider. Dette gir designere og utviklere enkel tilgang og lar designelementer fungere som de ville vært i produktet.

På det siste har en håndfull skybaserte plattformer dukket opp, slik at teamene kan designe, prototype og teste produkter sammen. De samme plattformene er også i stand til å huse UI Style Guides og gjøre det mulig for teammedlemmer å utveksle løpende tilbakemeldinger og ideer.

La oss se hvordan noen av disse plattformene beskriver deres tilnærming til UI Style Guides.

Figma

“Lag designsystemer med koblede brukergrensesnittkomponenter som hele teamet kan bruke. Få oppdateringer når det gjøres endringer i delte komponenter ”

Fase

“Biblioteker som de alltid burde ha vært: farger, egenskaper og elementer ... til og med overgangstider - alt i en komponent nå. Rediger på plass - alt er en mester. Overstyr alt du ikke trenger, per forekomst. '

InVision

“Alle merkevare- og UX-komponenter - inkludert bruksdokumentasjon - administreres på ett sted. Endringer synkroniseres til hele teamet, og designere kan når som helst bytte til den nyeste versjonen eller tilbakestille oppdateringer. ”

Material.io

”Lag ditt eget materielle tema og lag et symbolmerkebibliotek ved å bruke stilendringer i farge, form og typografi. Del, last opp og presenter designdesign i Gallery. Bruk deretter Inspiser-modus for å få tilgang til utviklerdokumentasjon. ”

UI-stilveiledninger bør være enkle å bruke

Når du monterer UI Style Guides, kan kommunikasjon ikke tas for gitt. Produktlag består av mennesker fra forskjellige fagområder, kulturell bakgrunn og profesjonelle erfaringer. Bruk disse prinsippene for å sikre klarhet og brukervennlighet.

Enkle oppsett

UI Style Guides krever rene, ryddige skjermoppsett. Hver skjerm skal være godt organisert, tydelig merket og svært leselig. Det er ingen fordel å overbelaste skjermer med visuell informasjon, så sikte på arrangementer som er både minimale og romslige.

Kortfattede instruksjoner

Hold instruksjonene korte og søte. Unngå lange avsnitt og bruk nøkkelpunkter . Når det er mulig, demonstrer med bilder over ord.

Informativ bruksscenarier

Lurer du på når du skal bruke denne glidestilen over den? ‘Bruk scenarier’ løser denne typen forvirring. Igjen, visuelt er sterkere enn ord her, så gi eksempler som tydelig viser både scenariet og riktig vei fremover.

Relevante versjonshistorier

Digitale produkter oppdateres ofte. Ettersom produktteamene ønsker å avgrense hver eneste detalj i grensesnittet, er det viktig å holde oversikt over hvordan designkomponenter har utviklet seg. Bruk skjønn her - for mindre bedrifter og produktteam kan det være upraktisk å ha et omfattende bibliotek med versjonshistorikker.

UI Style Guides er en verdifull ressurs og kraftig designverktøy

Moderne design- og utviklingsteam setter pris på effektivitet og tverrfaglig samarbeid - som det fremgår av designspråksystemene som er spioneringen av store merker som MailChimp, Google og Salesforce.

Designspråksystemer lar ulike team som jobber med sofistikerte digitale produkter kommunisere ved hjelp av et standardisert visuelt språk. UI Style Guides er vevd inn i stoffet til designspråksystemer og fungerer som et verktøy som kan stole på for rask iterasjon og konsistente digitale opplevelser.

Samtidig er design ikke et mål som er forbeholdt store selskaper. Et mangfoldig utvalg av produktteam og digitale prosjekter kan dra nytte av velkonstruerte UI-stilveiledninger, men ressurser (økonomisk, tid og talent) varierer fra virksomhet til virksomhet.

Av denne grunn er UI Style Guides mest nyttige når de er skreddersydd for behovene til individuelle virksomheter og designteam. Det høyeste målet for hver UI Style Guide er en balanse mellom klarhet og praktisk som fører til gjennomgående herlige brukeropplevelser.

• • •

Videre lesing på ApeeScape Design Blog:

• Skriftstiler for web- og utskriftsdesign
• Responsiv design - beste praksis og hensyn
• Hvorfor oppstart trenger en Styleguide
• Beste fremgangsmåter for brukbarhet og design av ikon
• Bruk din inspirasjon - en guide til humørbrett

Forstå det grunnleggende

Hva er en guide for merkevarestil?

En guide for merkevarestil er et dokument som inneholder alle selskapets visuelle designelementer (logo, farge, typografi, ikonografi, etc.). En guide for merkevarestil gir tommelfingerregler og kontekstnotater for å hjelpe designere å oppnå merkevarekonsistens når de lager eiendeler for trykk, nett, mobil osv.

Hvorfor er det viktig å ha en stilguide?

Det er viktig å ha en stilguide for å hjelpe designere å opprettholde merkevarenhetlighet når de utvikler sikkerhet for trykk, nett, mobil osv. Stilguider er spesielt viktige når det er mange designere som jobber med et digitalt produkt.

Hva er kodebiter, og hvordan kan de brukes?

Når du arbeider med digitale produkter for nett og mobil, tillater kodeutdrag utviklere å raskt kopiere og lime inn koden til levende designelementer i produktets back-end.