Den ultimate UI-designveiledningen

Innhold

• 01. Velg typografi
• 02. Velg riktig palett
• 03. Stillenker og knapper
• 04. Lag komponentene dine
• 05. Dokumenter og samarbeid

Hva er design av brukergrensesnitt? Et bedre spørsmål ville være, hva som egentlig går inn i utformingen av et brukergrensesnitt? Estetikk? Brukervennlighet? Tilgjengelighet? Alle sammen? Hvordan forenes alle disse faktorene for å muliggjøre en optimal brukeropplevelse, og hvilke skal komme først?

Tilgjengelighet bør alltid komme først, og legge grunnlaget for optimal brukervennlighet (bruk av en topp nettstedbygger vil hjelpe her). Og når et brukergrensesnitt er både tilgjengelig og brukbart, bør det allerede se ganske anstendig ut med hensyn til estetikk (brukergrensesnittets designverktøy vil hjelpe her). For å sikre at designet ditt fungerer på alle nivåer, må du teste det grundig, noe du kan gjøre med vårt utvalg av de beste brukertestverktøyene. La oss se nærmere på de grunnleggende elementene i de fleste design og hva som kan gjøres for å sikre visuell konsistens.

01. Velg typografi

Stor typografi (som mange aspekter ved design) koker ned på tilgjengelighet. Visuell design gir absolutt brukerens generelle opplevelse, men på slutten av dagen kommuniserer brukerne med brukergrensesnittet og ser ikke på det som kunst. Lesbare bokstaver gir klarhet, og lesbare ord hjelper brukerne å fordøye innholdet effektivt. Begge er viktigere enn noen visuell estetikk.

Imidlertid kan godt designet typografi fortsatt være estetisk tilfredsstillende. Svart-på-hvit Helvetica (eller en lignende font) kan være en skjønnhetssak etter bare noen få enkle typografiske forbedringer. Med forbedringer mener vi å tilpasse skriftstørrelsen, linjehøyden, bokstavavstanden og så videre - ikke skrifttypen eller fargen på teksten.

'Vakker' typografi er faktisk stygg når den er uleselig fordi frustrasjon alltid trumfer estetikk. Flott design er balansert og harmonisk.

Som mange aspekter ved UI-design, er ikke finjustering av grafikk for å balansere tilgjengelighet og estetikk utfordringen. Utfordringen er å opprettholde konsistens gjennom hele designet. Konsistens etablerer et tydelig hierarki mellom elementer av ulik betydning, som igjen hjelper brukerne til å forstå et brukergrensesnitt raskere og til og med fordøye innhold mer effektivt.

Når det gjelder lesbarhet og lesbarhet, er den minste akseptable skriftstørrelsen som definert av WCAG 2.0 Retningslinjer for tilgang til nettinnhold 18pt (eller 14pt fet). Den beste skriftstørrelsen du bruker, avhenger i stor grad av selve fonten, men det er viktig å være oppmerksom på det visuelle hierarkiet og hvordan denne basisstørrelsen skiller seg fra sammendrag og overskrifter (dvs. h1>, h2>, h3>).

Med UI-designverktøyet du velger (vi bruker InVision Studio), lager du en serie tekstlag (T) og juster deretter alle størrelsene for å korrelere med følgende mal:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Med InVision Studio (og alle andre UI-designverktøy) gjøres dette ved å justere stilene ved hjelp av Inspector-panelet på høyre side.

Velg deretter fonten din, men vær forsiktig fordi det du kanskje legger merke til med noen skrifter, er at 18px p> og 22 piksler h3> ser ikke så annerledes ut. Vi har to valg: finjuster skriftstørrelsene eller vurder en annen skrift for overskrifter. Gå med sistnevnte hvis du forventer at designet ditt vil være teksttungt.

Husk at:

• Visuell UI-design er ofte en tarmfølelsesmetode
• Ingenting er bestemt; alt kan endres

Linjehøyde

Optimal linjehøyde sørger for at tekstlinjer har nok mellomrom for å oppnå anstendig nivå av lesbarhet. Dette blir mer og mer anerkjent som en 'standard'; Googles Lighthouse Audit-verktøy foreslår det til og med som en manuell kontroll (eller til og med et flagg hvis teksten inneholder lenker som kan være for tett sammen som et resultat av suboptimal linjehøyde).

Nok en gang hjelper WCAG oss med denne, og erklærer at linjehøyder skal være 1,5 ganger skriftstørrelsen. Så i UI-designverktøyet ditt under 'Line' (eller lignende) multipliser du ganske enkelt skriftstørrelsen med - minst - 1,5. Som et eksempel, hvis brødteksten er 18 piksler, vil linjehøyden være 27 piksler (18 * 1,5 - du kan også utføre matteoperasjonen direkte i inspektøren). Igjen, vær imidlertid oppmerksom - hvis 1,6x føles bedre passform, bruk 1,6x. Husk at forskjellige skrifttyper gir forskjellige resultater.

Det er for tidlig å tenke på å bruke ekte data i vårt design, men i det minste bør vi fortsatt bruke noe realistiske data (til og med lorem ipsum). InVision Studio har en innfødt ekte data-app som hjelper oss å se hvordan typografien vår faktisk kan se ut.

Avstand mellom avsnitt

Avstand mellom avsnitt er ikke en stil som vi kan erklære ved hjelp av InVision Studios inspektør. I stedet må vi justere lag manuelt ved hjelp av Smart Guides (⌥). I likhet med linjehøyde er den magiske multiplikatoren 2x (dobbel skriftstørrelse). For eksempel, hvis skriftstørrelsen er 18 piksler, bør det være minst 36 piks mellomrom før du fører til neste tekstblokk. Avstand mellom bokstaver bør være minst 0,12.

Vi trenger imidlertid ikke bekymre oss for dette før vi begynner å lage komponenter.

Delte stiler

Hvis UI-designverktøyet ditt støtter det (InVision Studio ikke ennå), bør du vurdere å gjøre disse typografiske stilene til 'Shared Styles' for å gjøre dem raskt gjenbrukbare samtidig som du sørger for visuell konsistens. Dette oppnås vanligvis via inspektøren.

02. Velg riktig palett

Å velge de perfekte fargene for designet ditt går langt utover estetikk: det kan informere hele hierarkiet på nettstedet ditt.

Når det gjelder UI-design, er farge vanligvis en av de første tingene vi liker å dabbe med, men vi lærer at det er dårlig å dykke rett inn i visuell design. Dette er absolutt sant, men når det gjelder visuell konsistens, bør farge være et viktig tema fordi det spiller andre roller.

Farge i UI-design kan være veldig effektivt, men siden noen brukere (mange faktisk) lider av forskjellige typer synshemming, er det ikke alltid pålitelig. Når det er sagt, handler det ikke nødvendigvis om den spesifikke fargen som blir brukt, men om fargetypen. Dette er kanskje ikke sant når det gjelder merkevarebygging siden farge brukes for emosjonell innvirkning i denne forbindelse, men i UI-design brukes farge også til å kommunisere intensjon, mening og, selvfølgelig, visuelt hierarki.

01. Stark
Stark-pluginet er kompatibelt med Sketch og Adobe XD og hjelper deg med å kontrollere fargekontrast og simulere fargeblindhet direkte fra lerretet. Støtte for Figma og InVision Studio kommer veldig snart.
02.Farger
Colors er et sett med 90 fargekombinasjoner som har passende mengde fargekontrast for å tilfredsstille WCAG 2.0-retningslinjene - noen av dem klarer til og med å oppfylle AAA-standarden.
03. A11y-prosjektet
A11y-prosjektet er et massivt knutepunkt for alle ting som er tilgjengelighetsrelatert. Den inkluderer ressurser, verktøy, tips, opplæringsprogrammer og er laget av produsenten av Stark-plugin-programmet og mottar finansiering fra InVision.

De tre typer farger

Farger har betydning, så det er viktig å ikke ha for mange av dem. For mange betydninger resulterer i flere ting som brukeren må forstå og huske - for ikke å nevne flere fargekombinasjoner som vi kan bekymre oss for. Generelt sett vil dette være det anbefalte formatet:

• En handlingsfarge (også hovedmerkefargen)
• En nøytral mørk farge (bedre for UI-elementer eller mørk modus)
• For alt det ovennevnte, en litt lysere og mørkere variasjon

Dette muliggjør følgende:

• Mørk modus er lett å oppnå
• Vår CTA-farge vil aldri komme i konflikt med andre farger
• I ethvert scenario vil vi være i stand til å understreke og de-understreke

Sett opp paletten

Med UI-designverktøyet ditt velger du et stort tavle (trykk A) for hver farge (kalt 'Brand', 'Neutral / Light' og 'Neutral / Dark'). Deretter lager du på hvert tegnebrett flere mindre rektangler som viser de mørkere og lysere variasjonene av fargen og også de andre fargene.

Vi vil vurdere litt lysere og mørkere som henholdsvis 10 prosent ekstra hvit og 10 prosent ekstra svart. Når du er ferdig, kan du vise en kopi av de typografiske stilene på hvert tegnebrett. Fargen på disse tekstlagene skal være nøytralt lys, bortsett fra på det nøytrale lyse tavlen der de skal være nøytrale mørke.

Kontrast

Deretter må vi sjekke fargene for optimal fargekontrast. Det er en rekke verktøy som kan gjøre dette, for eksempel Stark plugin for Sketch og Adobe XD eller Contrast for macOS - en online løsning som Contrast Checker eller Color Contrast Checker vil imidlertid gjøre det bra.

Kontroller fargekontrasten for hver kombinasjon og juster fargene deretter. Hvis du ikke er sikker på hvilke farger du skal bruke, kan du prøve å bruke anbefalingene til Color Safe.

03. Stillenker og knapper

Størrelse

Knapper og lenker, som typografi, burde ha noen få varianter. Tross alt er ikke alle handlinger like viktige, og som vi diskuterte tidligere, er farge en upålitelig kommunikasjonsmetode, så det kan ikke være hovedmetoden for å påvirke visuelt hierarki. Vi må også leke med størrelse.

En visuell overkommelighetstest er en brukervennlighetstest som brukes til å avgjøre om trykkmål synes å være klikkbare. Synkroniser designet fra Studio til Freehand (⌘⇧F), send den resulterende URL-en til testere og få dem til å sirkle elementene de mener er klikkbare.

Ikke-InVision Studio-brukere kan også bruke Freehand, men InVision Studio-brukere kan lansere designene sine i Freehand sømløst fra InVision Studio, som er den raskeste og mest effektive måten å få visuell tilbakemelding fra brukerne.

Generelt vil vi anbefale at knappetekst deklareres som 18px (samme som brødteksten), men at knappene i seg selv har tre variasjoner i størrelse:

• Vanlig: 44px i høyden (avrundede hjørner: 5px)
• Stor: 54 px i høyden (avrundede hjørner: 10 px)
• Ekstra stor: 64 px i høyden (avrundede hjørner: 15 px)

Dette gjør det mulig for oss å få visse knapper til å være viktigere uten å stole på farger og også å hekke knapper (for eksempel bruk en knapp i et minimalt utseende felt).

Dybde

Uansett om tappemålet er en knapp eller et skjemafelt, bør skygger brukes til å øke dybden og derfor foreslå interaktivitet. En enkelt skyggestil for alle varianter av knapper og skjemafelt er greit.

Interaktivitet

Hver knappetype trenger en variant for å indikere hover-tilstanden. Dette tydeliggjør for brukeren at det de har prøvd å gjøre er helt greit og sikrer at de fortsetter uten forsinkelse.

Dette er faktisk en av de mer komplekse aspektene ved å opprettholde visuell konsistens fordi farge ofte er den favoriserte stilen å endre når det gjelder å skape en tilstand. Heldigvis kan disse tilstandsendringene være relativt subtile, så det er greit å endre fargen til den litt lysere eller mørkere variasjonen - det er det de er for. Dette gjelder også lenker.

Å bestemme mot dette vil føre til at vi bruker en farge som enten allerede har betydelig betydning, noe som resulterer i at brukere blir forvirret, eller ellers bestemmer seg for å komme opp med en annen farge. Å bestemme seg for å bruke en sekundærfarge er helt greit, men den bør lagres for markedsføring av visuelle bilder i stedet for UI-elementer. Mindre er mer (og lettere).

Husk å gjenta dette trinnet for hvert tegnebrett. Ikke ta med merket CTA-knapper på merkebordet - senere vil vi dekke hva som skjer når visse kombinasjoner ikke fungerer.

04. Lag komponentene dine

Komponenter er en enorm tidsbesparelse, og alle UI-designverktøy tilbyr denne funksjonen (f.eks. I Sketch kalles de Symbols). I Studio kan vi lage komponenter ved å velge alle lagene som skal utgjøre komponenten og bruke ⌘K snarvei.

Bruke komponenter

Wireframes er veldig nyttige, ikke bare for å designe brukergrensesnitt med høy brukervennlighet, men også for å finne ut hva brukergrensesnittet vårt vil kreve i det lange løp. Det er liksom fremtidssikring.

Dette betyr ikke at vi trenger å designe massevis av komponenter eller være klare for et mulig scenario, men det betyr at vi må benytte en 'Hva om?' - holdning.

For eksempel, hvis vår trådramme krever en 3x1-komponent, men vi vet at innholdet ikke er satt i stein, kan litt kontemplasjon få oss til å lure på: 'Hva om disse komponentene ender med å bli 4x1?'. Tommelfingerregelen er: design bare for brukernes behov som allerede eksisterer, men prøv å gjøre løsninger relativt fleksible. Ellers vil vi avvikle med veldig rotete 'designgjeld' senere på linjen.

Nå kan vi bruke denne komponenten på nytt ved å dra den på lerretet fra Biblioteker> Dokument på venstre side, men husk at denne arbeidsflyten kan variere avhengig av UI-verktøyet ditt.

Denne metoden for å lage stilguider (og til slutt lage selve designet) fungerer spesielt godt med modulære / kortbaserte oppsett, selv om fellesarealer som topptekster, bunntekster og navigasjoner også er gode kandidater for en komponent.

Akkurat som vi har gjort med typografiske stiler, farger og knapper, må vi huske å organisere komponentene våre nøye.

Bruke reglene våre

Tidligere gjorde vi en bemerkning om ikke å bruke merkede CTA-knapper på toppen av merkefargen, siden merkede CTA-knapper åpenbart trenger å skille seg ut blant alt annet. Så hvordan går vi frem for å lage en merkekomponent mens vi fremdeles kan bruke en merket CTA-knapp? Tross alt, hvis vi bruker nøytrale mørke knapper for, la oss si, navigasjonsknapper eller rett og slett mindre viktige knapper, ville det bare ikke være et alternativ, ikke sant?

Ikke sant. Så dette vil være en ideell mulighet til å lage en komponent - spesielt en overskrift + tekst + knappekombinasjon. Legg merke til hvordan jeg har laget et nøytralt lys-kort-bakgrunn for å muliggjøre bruk av merkeknappen. Tilsvarende ser det nøytrale lysformfeltet ut (formfelt er vanligvis hvite på grunn av den mentale modellen historisk synonymt med papirformer) ikke fantastisk på den nøytrale lyse bakgrunnen, slik at de bare kan brukes på den nøytrale mørke bakgrunnen - enten direkte eller innenfor en nøytral mørk komponent. Slik gjør vi designet vårt fleksibelt mens vi overholder våre regler og holder konsistens.

Stresstesting

Ideelt sett er den raskeste og mest effektive måten å sikre robusthet i designet vårt å stresstest det. Å sette et design på prøve betyr å være grusom. La oss si at vi har en navigasjon med X mengde nav-elementer fordi det var kravet; For å virkelig sikre fleksibilitet, prøv å endre disse kravene ved å legge til flere nav-elementer eller, for å virkelig kaste en nøkkel i verk, kan du prøve å legge til et nav-element med et høyere visuelt hierarki enn de andre. Tillater reglene for størrelse, typografi og farger noe slikt? Eller for å kunne tilby optimal brukervennlighet, trenger vi en annen regel?

Husk at det er forskjell på å legge til regler og å bøye reglene. Flere kant tilfeller betyr mindre konsistens, så for det meste av tiden er det bedre for brukervennligheten å bare tenke komponenten på nytt.

05. Dokumenter og samarbeid

Hvordan gjør vi designfilene våre enklere å bruke for oss selv og andre designere som kan bruke designfilen vår? Å holde dem trygt lagret i pålitelig, delt skylagring er viktig, som du vil finne ut av.

Farger

Det første trinnet er å lagre alle fargene i 'Document Colors' fargeprøven hvis vi ikke allerede har gjort det - dette vil gjøre dem lettere tilgjengelige når vi trenger å bruke dem i vårt design.For å gjøre dette, åpne fargevelgeren fra inspektøren, velg 'Dokumentfarger' fra rullegardinmenyen, og klikk deretter på + -ikonet for å legge fargen til fargeprøven. Dette fungerer på samme måte i de fleste brukergrensesnittverktøy.

Delte biblioteker

Deretter må vi konvertere dokumentet vårt - komplett med typografiske stiler, farger, knapper, fellesarealer og grunnleggende komponenter - til et delt bibliotek.

I hovedsak betyr dette at hvert element må være en komponent, selv om det bare består av ett lag. Klikk på + ‌ i venstre sidebar Biblioteker, og importer deretter selve dokumentet til et nytt dokument. Det stemmer: dokumentet vårt er nå et bibliotek og er klart til å brukes til å designe brukergrensesnitt med garantert konsistens.

InVision Studio er noe begrenset i den forstand at det ennå ikke synkroniseres med InVisions offisielle Design System Manager-verktøy, men det er lett nok å huse biblioteket i Dropbox slik at andre designere kan bruke og oppdatere over tid. Når det gjøres en endring (lokalt eller eksternt), vil hver Studio-fil som bruker biblioteket (igjen, lokalt eller eksternt) spørre om du vil oppdatere farger og komponenter. Slik opprettholdes designbiblioteker på tvers av teamene.

Når det gjelder å designe brukergrensesnitt som er visuelt konsistente, kan du bruke alt på nytt. Design knapper, bruk deretter knapper for å lage knappkomponenter, og bruk deretter
knappkomponenter for å lage andre komponenter som varsler og dialoger.

Bare ikke lag komponenter som ikke er nødvendige. Husk at det å bygge et bibliotek er en kontinuerlig, samarbeidende innsats. Det trenger ikke å være ferdig på en gang, fullført av deg alene eller fullført noen gang. Det må bare formidle et språk.

Design i målestokk

Når et design utvides, blir det vanskeligere å administrere det. Det er forskjellige justeringer vi kanskje vil gjøre for å holde den effektiv og vedlikeholdbar, spesielt siden InVision's DSM ikke fungerer med Studio ennå.

For eksempel vil vi kanskje bruke tekstlag til å kommentere biblioteket vårt som et middel til å forklare brukssakene til forskjellige elementer. For typografiske stiler kan vi til og med redigere teksten for å være mer beskrivende (f.eks. "H1> / 1.3 / 44px"). Dette sier det h1>s skal være 44 px og ha en linjehøyde på 1.3.

Design Handoff

Design handoff-verktøy viser de forskjellige stilene som brukes av hvert element i designet, slik at utviklere kan bygge appen eller nettstedet. Disse verktøyene inkluderer en oversikt over stiler og også en kopi av 'dokumentfargenes fargeprøve. Utviklere kan til og med kopiere disse stilene som kode, noe som er utmerket hvis du har bestemt deg for å lage skriftlig designdokumentasjon og du vil inkludere kodebitrepresentasjoner av komponentene.

Hvis du er bekymret for feilsøking og administrering av et nettsted, kan du sørge for at du har riktig webhotelltjeneste, men for designsystemet ditt er InVisions designoverleveringsverktøy, Inspect, tingen å bruke. For å bruke den, klikker vi på 'Publiser til InVision' -knappen / ikonet i InVision Studio, åpner den resulterende URL-en og klikker deretter for å bytte til inspeksjonsmodus. Det er veldig praktisk.

Dette innholdet dukket opprinnelig opp i nettmagasinet.