Den ultimative UI design guide

Indhold

• 01. Vælg din typografi
• 02. Vælg den rigtige palet
• 03. Style links og knapper
• 04. Opret dine komponenter
• 05. Dokumenter og samarbejde

Hvad er brugergrænsefladesign? Et bedre spørgsmål ville være, hvad der faktisk går ind i designet af en brugergrænseflade? Æstetik? Anvendelighed? Tilgængelighed? Allesammen? Hvordan forenes alle disse faktorer for at muliggøre en optimal brugeroplevelse, og hvilke skal komme først?

Tilgængelighed skal altid komme først og lægge grundlaget for optimal brugervenlighed (brug af en top website builder hjælper her). Og så, når et brugergrænseflade er både tilgængeligt og anvendeligt, skal det allerede se ret anstændigt ud med hensyn til æstetik (brugergrænseflades designværktøjer vil hjælpe her). For at sikre, at dit design fungerer på alle niveauer, skal du teste det grundigt, hvilket du kan gøre med vores valg af de bedste brugertestværktøjer. Lad os se nærmere på de grundlæggende elementer i de fleste designs, og hvad der kan gøres for at sikre visuel konsistens.

01. Vælg din typografi

Stor typografi (som mange aspekter af design) koges ned til tilgængelighed. Visuelt design tilføjer bestemt brugerens samlede oplevelse, men i slutningen af ​​dagen interagerer brugerne med brugergrænsefladen og ser det ikke som kunst. Læsbare bogstaver resulterer i klarhed, og læsbare ord er det, der hjælper brugerne med at fordøje indholdet effektivt. Begge er vigtigere end nogen visuel æstetik.

Imidlertid kan veldesignet typografi stadig være æstetisk tilfredsstillende. Sort-på-hvid Helvetica (eller en lignende skrifttype) kan være en skønhedssag efter kun et par enkle typografiske forbedringer. Ved forbedringer mener vi at tilpasse skriftstørrelsen, liniehøjden, bogstavafstanden og så videre - ikke skrifttypen eller farven på teksten.

'Smuk' typografi er faktisk grim, når den ikke kan læses, fordi frustration altid trumfer æstetik. Fantastisk design er afbalanceret og harmonisk.

Som mange aspekter af UI-design er det ikke udfordringen at finjustere grafik for at afbalancere tilgængelighed og æstetik. Udfordringen er at opretholde konsistens gennem hele designet. Konsistens etablerer et klart hierarki mellem elementer af forskellig betydning, hvilket igen hjælper brugerne med at forstå et brugergrænseflade hurtigere og endda fordøje indhold mere effektivt.

Når det kommer til læsbarhed og læsbarhed, er den mindst acceptable skriftstørrelse som defineret i WCAG 2.0-retningslinjerne for tilgængelighed af webindhold 18pt (eller 14pt fed). Den bedste skriftstørrelse, der skal bruges, afhænger i høj grad af selve skrifttypen, men det er vigtigt at være opmærksom på det visuelle hierarki, og hvordan denne basisstørrelse adskiller sig fra resuméer og overskrifter (dvs. h1>, h2>, h3>).

Opret en række tekstlag med dit valgte UI-designværktøj (vi bruger InVision Studio) (T), og juster derefter alle størrelserne for at korrelere med følgende skabelon:

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

Med InVision Studio (og alle andre UI-designværktøjer) gøres dette ved at justere typografierne ved hjælp af Inspector-panelet på højre side.

Vælg derefter din skrifttype, men pas på, for hvad du måske bemærker med nogle skrifttyper, er den 18px p> og 22 px h3> ser ikke så anderledes ud. Vi har to valg: Tilpas skriftstørrelserne eller overvej en anden skrifttype til overskrifter. Gå med sidstnævnte, hvis du forventer, at dit design vil være teksttungt.

Husk at:

• Visuelt UI-design er ofte en tarmfølelsesmetode
• Intet er bestemt; alt kan ændres

Linjehøjde

Optimal linjehøjde sikrer, at tekstlinjer har tilstrækkelig afstand mellem dem for at opnå anstændige niveauer af læsbarhed. Dette bliver mere og mere anerkendt som en 'standard'; Googles fyrværktøjsovervågningsværktøj foreslår endda det som en manuel kontrol (eller endda et flag, hvis teksten indeholder links, der kan være for tæt på hinanden som et resultat af suboptimal linjehøjde).

Endnu en gang hjælper WCAG os med denne og erklærer, at linjehøjder skal være 1,5x skriftstørrelsen. Så i dit brugergrænseflade-designværktøj under 'Line' (eller lignende) skal du blot gange skriftstørrelsen med - mindst - 1,5. For eksempel, hvis brødteksten er 18 pixel, ville liniehøjden være 27 pixel (18 * 1,5 - du kan også udføre matematikoperationen direkte i inspektøren). Igen skal du dog være opmærksom - hvis 1,6x føles en bedre pasform, skal du bruge 1,6x. Husk, at forskellige skrifttyper viser forskellige resultater.

Det er for tidligt at tænke på at bruge ægte data i vores design, men i det mindste skal vi stadig bruge noget realistiske data (endda lorem ipsum). InVision Studio har en indfødt ægte data-app, der hjælper os med at se, hvordan vores typografi faktisk kan se ud.

Afstand mellem afsnit

Afstand mellem afsnit er ikke en stil, som vi kan erklære ved hjælp af InVision Studios inspektør. I stedet skal vi manuelt justere lag ved hjælp af Smart Guides (⌥). Svarende til linjehøjde er den magiske multiplikator 2x (dobbelt skriftstørrelse). For eksempel, hvis skrifttypestørrelsen er 18 pixel, skal der være mindst 36 pixel mellemrum, før de går ind i den næste tekstblok. Mellemrum mellem bogstaver skal være mindst 0,12.

Vi behøver dog ikke bekymre os om dette, før vi begynder at oprette komponenter.

Delte stilarter

Hvis dit UI-designværktøj understøtter det (InVision Studio gør det endnu ikke), kan du overveje at gøre disse typografiske stilarter til 'Shared Styles' for at gøre dem hurtigt genanvendelige og samtidig sikre visuel konsistens. Dette opnås normalt via inspektøren.

02. Vælg den rigtige palet

At vælge de perfekte farver til dit design går langt ud over æstetik: det kan informere hele hierarkiet på dit websted.

Når det kommer til UI-design, er farve sædvanligvis en af ​​de første ting, som vi kan lide at dabbe med, men vi lærer, at dykning lige ind i visuelt design er en dårlig ting. Dette er bestemt sandt, men når det kommer til visuel konsistens, bør farve være et meget vigtigt problem, fordi det spiller andre roller.

Farve i UI-design kan være mægtig effektiv, men da nogle brugere (mange faktisk) lider af forskellige typer synshandicap, er det ikke altid pålideligt. Når det er sagt, handler det ikke nødvendigvis om den specifikke farve, der bruges, men snarere om farvetypen. Dette er muligvis ikke sandt, når det kommer til branding, da farve bruges til følelsesmæssig indflydelse i denne henseende, men i UI-design bruges farve også til at kommunikere hensigt, mening og selvfølgelig visuelt hierarki.

01. Stark
Stark-pluginet er kompatibelt med Sketch og Adobe XD og hjælper dig med at kontrollere farvekontrast og simulere farveblindhed direkte fra lærredet. Support til Figma og InVision Studio kommer meget snart.
02.Farver
Colors er et sæt med 90 farvekombinationer, der har den passende mængde farvekontrast for at opfylde WCAG 2.0-retningslinjerne - nogle af dem formår endda at opfylde AAA-standarden.
03. A11y-projekt
A11y-projektet er et massivt knudepunkt for alt tilgængelighedsrelateret. Det inkluderer ressourcer, værktøjer, tips, tutorials og er oprettet af producenten af ​​Stark-pluginet og modtager finansiering fra InVision.

De tre typer farver

Farver har betydning, så det er vigtigt ikke at have for mange af dem. For mange betydninger resulterer i flere ting, som brugeren skal forstå og huske - for ikke at nævne flere farvekombinationer, som vi kan bekymre os om. Generelt set vil dette være det anbefalede format:

• En opfordring til handling-farve (også hovedmærkefarven)
• En neutral mørk farve (bedre for UI-elementer eller mørk tilstand)
• For alle ovenstående, en lidt lysere og mørkere variation

Dette muliggør følgende:

• Mørk tilstand kan let opnås
• Vores CTA-farve kommer aldrig i konflikt med andre farver
• I ethvert scenarie vil vi være i stand til at understrege og de-understrege

Opret din palet

Opret et ret stort tegnebræt (tryk A) med dit valgte UI-designværktøj for hver farve (kaldet 'Brand', 'Neutral / Light' og 'Neutral / Dark'). Derefter opretter du på hver tegnebræt yderligere mindre rektangler, der viser de mørkere og lysere variationer af farven og også de andre farver.

Vi vil overveje lidt lysere og mørkere som henholdsvis 10 procent ekstra hvid og 10 procent ekstra sort. Når du er færdig, skal du vise en kopi af de typografiske stilarter på hvert tegnebræt. Farven på disse tekstlag skal være neutralt lys, undtagen på det neutrale lyse tegnebræt, hvor de skal være neutralt mørke.

Kontrast

Derefter skal vi kontrollere vores farver for optimal farvekontrast. Der er en række forskellige værktøjer, der kan gøre dette, for eksempel Stark-plugin til Sketch og Adobe XD eller Contrast til macOS - en online løsning som f.eks. Contrast Checker eller Color Contrast Checker vil dog gøre det fint.

Kontroller farvekontrasten for hver kombination, og juster farverne i overensstemmelse hermed. Hvis du ikke er sikker på, hvilke farver du skal bruge, kan du prøve at bruge Color Safe's anbefalinger.

03. Style links og knapper

Størrelse

Knapper og links, ligesom typografi, burde have et par variationer. Når alt kommer til alt er ikke alle handlinger af samme niveau, og som vi diskuterede tidligere, er farve en upålidelig kommunikationsmetode, så det kan ikke være den vigtigste metode til at påvirke det visuelle hierarki. Vi har også brug for at lege med størrelse.

En visuel overkommelighedstest er en brugervenlighedstest, der bruges til at afgøre, om trykmål synes at være klikbare. Synkroniser designet fra Studio til Freehand (⌘⇧F), send den resulterende URL til testere og få dem til at cirkulere de elementer, de mener er klikbare.

Ikke-InVision Studio-brugere kan også bruge Freehand, men InVision Studio-brugere kan starte deres designs i Freehand problemfrit fra InVision Studio, som er den hurtigste og mest effektive måde at få visuel feedback fra brugerne på.

Generelt vil vi anbefale, at knaptekst erklæres som 18 pixel (samme som brødteksten), men at knapperne selv har tre variationer i størrelse:

• Normal: 44 pixel i højden (afrundede hjørner: 5 pixel)
• Stor: 54 px i højden (afrundede hjørner: 10 px)
• Ekstra stor: 64 px i højden (afrundede hjørner: 15 px)

Dette gør det muligt for os at få bestemte knapper til at synes at være vigtigere uden at være afhængige af farve og også at nesteknapper (brug f.eks. En knap inde i et minimalt udseende formfelt).

Dybde

Uanset om tapmålet er en knap eller et formfelt, skal skygger bruges til at øge dybden og derfor foreslå interaktivitet. En enkelt skygge-stil til alle varianter af knapper og formularfelter er fint.

Interaktivitet

Hver knaptype har brug for en variation for at indikere dens svævende tilstand. Dette tydeliggør for brugeren, at det, de har forsøgt at gøre, er helt fint og sikrer, at de fortsætter uden forsinkelse.

Dette er faktisk et af de mere komplekse aspekter ved opretholdelse af visuel konsistens, fordi farve ofte er den foretrukne stil, der skal ændres, når det kommer til at skabe en tilstand. Heldigvis kan disse tilstandsændringer være relativt subtile, så det er fint at ændre farven til den lidt lysere eller mørkere variation - det er det, de er til. Dette gælder også for links.

At beslutte imod dette får os til at bruge en farve, der enten allerede har betydelig betydning, hvilket resulterer i, at brugerne bliver forvirrede, eller ellers beslutter at komme med en anden farve. At beslutte at bruge en sekundær farve er helt fint, men det skal gemmes til markedsføring af visuals snarere end UI-elementer. Mindre er mere (og lettere).

Husk at gentage dette trin for hvert tegnebræt. Medtag ikke de mærkevarer CTA-knapper på mærketavlen - senere vil vi dække, hvad der sker, når visse kombinationer ikke fungerer.

04. Opret dine komponenter

Komponenter er en enorm tidsbesparelse, og alle UI-designværktøjer tilbyder denne funktion (f.eks. I Sketch kaldes de Symboler). I Studio kan vi oprette komponenter ved at vælge alle de lag, der skal udgøre komponenten, og bruge ⌘K genvej.

Brug af komponenter

Wireframes er meget nyttige, ikke kun til at designe brugergrænseflader med høj brugbarhed, men også til at finde ud af, hvad vores brugergrænseflade vil kræve i det lange løb. Det er som en fremtidssikring.

Dette betyder ikke, at vi har brug for at designe masser af komponenter eller være klar til ethvert muligt scenario, men det betyder, at vi har brug for en 'Hvad hvis?' - holdning.

For eksempel, hvis vores wireframe kræver en 3x1-komponent, men vi ved, at indholdet ikke er sat i sten, kan en lille overvejelse få os til at spekulere på: 'Hvad hvis disse komponenter ender med at blive 4x1?'. Tommelfingerreglen er: design kun til brugernes behov, der allerede findes, men prøv at gøre løsninger relativt fleksible. Ellers afslutter vi med en meget rodet 'designgæld' senere på linjen.

Nu kan vi genbruge denne komponent ved at trække den på lærredet fra Biblioteker> Dokument på venstre side, selvom du skal huske på, at denne arbejdsgang kan variere afhængigt af dit UI-værktøj.

Denne metode til at oprette stilguider (og til sidst skabe selve designet) fungerer især godt med modulære / kortbaserede layouts, selvom 'fælles områder' som sidehoveder, sidefødder og navigationer også er fremragende kandidater til en komponent.

Ligesom vi har gjort med vores typografiske stilarter, farver og knapper, skal vi huske at organisere vores komponenter omhyggeligt.

Brug af vores regler

Tidligere fremsatte vi en bemærkning om ikke at bruge mærkevarer CTA-knapper oven på mærkefarven, da brandede CTA-knapper naturligvis skal skille sig ud blandt alt andet. Så hvordan går vi i gang med at oprette en branded-komponent, mens vi stadig kan bruge en brandet CTA-knap? Når alt kommer til alt, hvis vi bruger neutrale mørke knapper til, lad os sige, navigeringsknapper eller simpelthen mindre vigtige knapper, ville det bare ikke være en mulighed, ikke?

Ret. Så dette ville være en ideel mulighed for at oprette en komponent - specifikt en overskrift + tekst + knapkombination. Læg mærke til, hvordan jeg har skabt et neutralt lys 'kort' baggrund for at muliggøre brugen af ​​den mærkevarer knap. Tilsvarende ser det neutrale lysformfelt ud (formfelter er normalt hvide på grund af den mentale model, der historisk er synonymt med papirformer), ikke fantastiske på den neutrale lys baggrund, så de kun kan bruges på den neutrale mørke baggrund - enten direkte eller indeni en neutral mørk komponent. Sådan gør vi vores design fleksibelt, samtidig med at vi overholder vores regler og opretholder konsistens.

Stresstest

Ideelt set er den hurtigste og mest effektive måde at sikre robusthed i vores design på at stresstest det. At sætte et design på prøve betyder at være grusom. Lad os sige, at vi har en navigation med X mængde nav-emner, fordi det var kravet; For virkelig at sikre fleksibilitet, prøv at ændre disse krav ved at tilføje flere nav-emner eller for virkelig at kaste en skruenøgle i værkerne, prøv også at tilføje et nav-emne med et højere visuelt hierarki end de andre. Tillader vores størrelse, typografi og farveregler noget lignende? Eller har vi brug for en anden regel for at kunne tilbyde optimal brugbarhed?

Husk, at der er forskel på at tilføje regler og at bøje reglerne. Flere kanttilfælde betyder mindre konsistens, så det er oftest bedre af hensyn til brugervenligheden at bare genoverveje komponenten.

05. Dokumenter og samarbejde

Hvordan gør vi vores designfiler lettere at bruge for både os selv og andre designere, der muligvis bruger vores designfil? Det er vigtigt at opbevare dem sikkert i pålidelig, delt cloud-lager, som du finder ud af.

Farver

Det første trin er at gemme alle farverne i 'Dokumentfarver' -prøven, hvis vi ikke allerede har gjort det - dette vil gøre dem lettere at få adgang til, når vi har brug for dem i vores design.For at gøre dette skal du åbne farvevælgerwidgeten fra inspektøren, vælge 'Dokumentfarver' i rullemenuen og derefter klikke på + -ikonet for at tilføje farven til farveprøven. Dette fungerer på samme måde i de fleste UI-værktøjer.

Delte biblioteker

Derefter skal vi konvertere vores dokument - komplet med typografiske stilarter, farver, knapper, fællesområder og grundlæggende komponenter - til et delt bibliotek.

I det væsentlige betyder det, at hvert element skal være en komponent, selvom det kun består af et lag. Klik på knappen + in i sidebjælken til venstre for Biblioteker, og importer derefter netop dette dokument til et nyt dokument. Det er rigtigt: vores dokument er nu et bibliotek og er klar til at blive brugt til at designe brugergrænseflader med garanteret konsistens.

InVision Studio er noget begrænset i den forstand, at det endnu ikke synkroniseres med InVisions officielle Design System Manager-værktøj, men det er let nok at huse biblioteket i Dropbox, så andre designere kan bruge og opdatere over tid. Når der foretages en ændring (lokalt eller eksternt), vil hver Studio-fil, der bruger biblioteket (igen, lokalt eller eksternt) spørge, om du vil opdatere farver og komponenter. Sådan opretholdes designbiblioteker på tværs af hold.

Når det kommer til at designe brugergrænseflader, der er visuelt konsistente, skal du genbruge alt. Design knapper, brug derefter knapper til at oprette knapkomponenter, og brug derefter
knapkomponenter for at oprette andre komponenter såsom advarsler og dialoger.

Bare lav ikke komponenter, der ikke er nødvendige. Husk at opbygge et bibliotek er en løbende, fælles indsats. Det behøver ikke at være afsluttet på én gang, udfyldt af dig alene eller afsluttet nogensinde. Det skal kun formidle et sprog.

Design i målestok

Når et design udvides, bliver det sværere at styre det. Der er forskellige justeringer, vi måske vil foretage for at holde det effektivt og vedligeholdeligt, især da InVision's DSM ikke fungerer sammen med Studio endnu.

For eksempel vil vi måske bruge tekstlag til at kommentere vores bibliotek som et middel til at forklare brugen af ​​forskellige elementer. For typografiske stilarter kunne vi endda redigere teksten for at være mere beskrivende (f.eks. "H1> / 1.3 / 44px"). Dette siger det h1>s skal være 44 pixel og have en liniehøjde på 1,3.

Design Handoff

Design handoff-værktøjer viser de forskellige stilarter, der bruges af hvert element i designet, så udviklere kan oprette appen eller webstedet. Disse værktøjer inkluderer en oversigt over stilarter og også en kopi af 'dokumentfarverne'. Udviklere kan endda kopiere disse stilarter som kode, hvilket er fremragende, hvis du har besluttet at oprette en skriftlig designdokumentation, og du gerne vil medtage kodestykkerepræsentationer af komponenterne.

Hvis du er bekymret for fejlfinding og administration af et websted, kan det være en hjælp at sikre dig, at du har den rigtige webhostingtjeneste, men for dit designsystem er InVision's designhandoff-værktøj, Inspect, det, du skal bruge. For at udnytte det skal vi klikke på knappen 'Publicer til InVision' / ikonet i InVision Studio, åbne den resulterende URL og derefter trykke for at skifte til inspektionstilstand. Det er virkelig praktisk.

Dette indhold blev oprindeligt vist i netmagasinet.