Den ultimata designguiden för användargränssnittet

Innehåll

• 01. Välj typografi
• 02. Välj rätt palett
• 03. Stillänkar och knappar
• 04. Skapa dina komponenter
• 05. Dokumentera och samarbeta

Vad är användargränssnittsdesign? En bättre fråga skulle vara, vad som egentligen går in i utformningen av ett användargränssnitt? Estetik? Användbarhet? Tillgänglighet? Allihopa? Hur förenas alla dessa faktorer för att möjliggöra en optimal användarupplevelse och vilka bör komma först?

Tillgänglighet bör alltid komma först och lägga grunden för optimal användbarhet (att använda en toppwebbplatsbyggare hjälper här). Och sedan, när ett användargränssnitt är både tillgängligt och användbart, borde det redan se ganska anständigt ut när det gäller estetik (användargränssnittsdesignverktygen hjälper till här). För att säkerställa att din design fungerar på alla nivåer måste du testa den noggrant, vilket du kan göra med vårt urval av de bästa användartestverktygen. Låt oss titta närmare på de grundläggande elementen i de flesta mönster och vad som kan göras för att säkerställa visuell konsistens.

01. Välj typografi

Stor typografi (som många aspekter av design) beror på tillgänglighet. Visuell design ökar verkligen användarens övergripande upplevelse, men i slutet av dagen interagerar användarna med användargränssnittet och ser inte på det som konst. Läsbara bokstäver ger tydlighet och läsbara ord är det som hjälper användare att smälta innehåll effektivt. Båda är viktigare än någon visuell estetik.

Väl utformad typografi kan dock fortfarande vara estetiskt tillfredsställande. Svart-på-vit Helvetica (eller ett liknande teckensnitt) kan vara en skönhet efter bara några enkla typografiska förbättringar. Med förbättringar menar vi att justera teckenstorlek, radhöjd, bokstavsavstånd och så vidare - inte teckensnittet eller färgen på texten.

'Vacker' typografi är faktiskt ful när den är oläslig eftersom frustration alltid trumfar estetik. Fantastisk design är balanserad och harmonisk.

Liksom många aspekter av UI-design är det inte utmaningen att finjustera bilder för att balansera tillgänglighet och estetik. Utmaningen är att upprätthålla enhetlighet genom hela designen. Konsistens skapar en tydlig hierarki mellan element av varierande betydelse, vilket i sin tur hjälper användare att förstå ett användargränssnitt snabbare och till och med smälta innehåll mer effektivt.

När det gäller läsbarhet och läsbarhet är den lägsta acceptabla teckenstorleken enligt definitionen i WCAG 2.0 riktlinjer för tillgänglighet för webbinnehåll 18pt (eller 14pt fet). Den bästa teckensnittsstorleken som ska användas beror till stor del på själva teckensnittet, men det är viktigt att vara medveten om den visuella hierarkin och hur denna basstorlek skiljer sig från sammanfattningar och rubriker (dvs. h1>, h2>, h3>).

Skapa en serie textlager med ditt UI-designverktyg (du använder InVision Studio)T) och justera sedan alla storlekar för att korrelera med följande mall:

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

Med InVision Studio (och alla andra UI-designverktyg) görs detta genom att justera stilarna med hjälp av inspektörspanelen på höger sida.

Välj sedan ditt teckensnitt, men se upp för det som du kanske märker med vissa teckensnitt är att 18px p> och 22 pixlar h3> ser inte så annorlunda ut. Vi har två val: justera teckensnittsstorlekarna eller överväga ett annat teckensnitt för rubriker. Gå med det senare om du räknar med att din design kommer att vara text-tung.

Tänk på att:

• Visuell UI-design är ofta en tarmkänsla
• Ingenting bestäms; allt kan ändras

Radavstånd

Optimal radhöjd säkerställer att textrader har tillräckligt avstånd mellan sig för att uppnå anständiga läsbarhetsnivåer. Detta blir mer och mer erkänt som en ”standard”; Googles fyrverktygsredigeringsverktyg föreslår till och med det som en manuell kontroll (eller till och med en flagga om texten innehåller länkar som kan vara för nära varandra på grund av suboptimal radhöjd).

Återigen hjälper WCAG oss med den här och förklarar att radhöjderna ska vara 1,5 gånger teckenstorleken. Så i ditt användargränssnittsdesignverktyg under ”Line” (eller liknande), multiplicerar du helt enkelt teckensnittsstorleken med - åtminstone - 1,5. Som ett exempel, om brödtexten är 18 pixlar, skulle radhöjden vara 27 pixlar (18 * 1,5 - du kan också utföra matteoperationen direkt i inspektören). Återigen, dock, var uppmärksam - om 1,6x känns bättre passar, använd 1,6x. Kom ihåg att olika teckensnitt ger olika resultat.

Det är för tidigt att tänka på att använda riktiga data i vår design, men åtminstone bör vi fortfarande använda något realistiska data (även lorem ipsum). InVision Studio har en inbyggd app för riktiga data som hjälper oss att se hur vår typografi faktiskt kan se ut.

Avstånd mellan stycken

Avstånd mellan stycken är inte en stil som vi kan förklara med InVision Studios inspektör. Istället måste vi justera lager manuellt med hjälp av Smart Guides (⌥). På samma sätt som linjens höjd är den magiska multiplikatorn 2x (dubbelt teckenstorlek). Till exempel, om teckensnittstorleken är 18 pixlar, bör det finnas minst 36 pixlar innan det går in i nästa textblock. Bokstavsavståndet bör vara minst 0,12.

Vi behöver dock inte oroa oss för detta förrän vi börjar skapa komponenter.

Delade stilar

Om ditt UI-designverktyg stöder det (InVision Studio inte ännu), överväg att förvandla dessa typografiska stilar till "Delade stilar" för att göra dem snabbt återanvändbara och samtidigt säkerställa visuell konsistens. Detta görs vanligtvis via inspektören.

02. Välj rätt palett

Att välja de perfekta färgerna för din design går långt utöver estetik: det kan informera hela webbplatsens hierarki.

När det gäller användargränssnittsdesign är färg vanligtvis en av de första sakerna som vi tycker om att gräva med, men vi får lära oss att dyka direkt i visuell design är en dålig sak. Detta är verkligen sant, men när det gäller visuell konsistens, bör färg vara en viktig fråga eftersom det spelar andra roller.

Färg i UI-design kan vara väldigt effektivt men eftersom vissa användare (många faktiskt) lider av olika typer av synstörningar är det inte alltid pålitligt. Med detta sagt handlar det inte nödvändigtvis om den specifika färgen som används, utan snarare om vilken typ av färg. Detta kanske inte är sant när det gäller varumärke eftersom färg används för emotionell påverkan i detta avseende, men i UI-design används färg också för att kommunicera avsikt, mening och, naturligtvis, visuell hierarki.

01. Stark
Stark-pluginet är kompatibelt med Sketch och Adobe XD och hjälper dig att kontrollera färgkontrast och simulera färgblindhet direkt från duken. Stöd för Figma och InVision Studio kommer snart.
02.Färger
Colors är en uppsättning med 90 färgkombinationer som har lämplig mängd färgkontrast för att uppfylla WCAG 2.0-riktlinjerna - några av dem klarar till och med att uppfylla AAA-standarden.
03. A11y-projekt
A11y-projektet är ett enormt nav för allt tillgänglighetsrelaterat. Den innehåller resurser, verktyg, tips, handledning och skapas av tillverkaren av Stark-plugin-programmet och får finansiering från InVision.

De tre typerna av färg

Färger har betydelse, så det är viktigt att inte ha för många av dem. För många betydelser resulterar i fler saker som användaren måste förstå och komma ihåg - för att inte tala om fler färgkombinationer som vi kan oroa oss för. Generellt sett skulle detta vara det rekommenderade formatet:

• En uppmaningsfärg (även huvudmärkesfärgen)
• En neutral mörk färg (bättre för UI-element eller mörkt läge)
• För alla ovanstående, en något ljusare och mörkare variation

Detta möjliggör följande:

• Mörkt läge kan lätt uppnås
• Vår CTA-färg kommer aldrig i konflikt med andra färger
• I alla scenarier kommer vi att kunna betona och de-betona

Ställ in din palett

Med ditt UI-designverktyg som du väljer skapar du en ganska stor tavla (tryck A) för varje färg (med namnet 'Brand', 'Neutral / Light' och 'Neutral / Dark'). Skapa sedan på varje tavla ytterligare mindre rektanglar som visar de mörkare och ljusare variationerna i färgen och även själva de andra färgerna.

Vi skulle betrakta något ljusare och mörkare som 10 procent extra vitt respektive 10 procent extra svart. När du är klar visar du en kopia av typografiska stilar på varje tavla. Färgen på dessa textlager ska vara neutralt ljus, utom på det neutrala ljuset tavlan där de ska vara neutrala mörka.

Kontrast

Därefter måste vi kontrollera våra färger för optimal färgkontrast. Det finns en mängd olika verktyg som kan göra detta, till exempel Stark-plugin för Sketch och Adobe XD eller Contrast för macOS - en online-lösning som Contrast Checker eller Color Contrast Checker kommer dock att fungera bra.

Kontrollera färgkontrasten för varje kombination och justera färgerna därefter. Om du inte är säker på vilka färger du ska använda kan du prova att använda Color Safes rekommendationer.

03. Stillänkar och knappar

Storlek

Knappar och länkar, ungefär som typografi, borde ha några varianter. När allt kommer omkring är inte alla åtgärder lika viktiga, och som vi diskuterade tidigare är färg en opålitlig kommunikationsmetod, så det kan inte vara huvudmetoden att påverka den visuella hierarkin. Vi måste också leka med storlek.

Ett visuellt överkomlighetstest är ett användbarhetstest som används för att avgöra om tappmål verkar vara klickbara. Synkronisera designen från Studio till Freehand (⌘⇧F), skicka den resulterande webbadressen till testare och låt dem cirkulera om de element som de anser vara klickbara.

Icke-InVision Studio-användare kan också använda Freehand, men InVision Studio-användare kan lansera sina mönster i Freehand sömlöst från InVision Studio, vilket är det snabbaste och mest effektiva sättet att få visuell feedback från användare.

Generellt rekommenderar vi att knapptexten förklaras som 18 pixlar (samma som brödtexten) men att knapparna själva har tre variationer i storlek:

• Vanligt: 44 pixlar i höjd (rundade hörn: 5 pixlar)
• Stor: 54 pixlar i höjd (rundade hörn: 10 pixlar)
• Extra stor: 64 pixlar i höjd (rundade hörn: 15 pixlar)

Detta gör det möjligt för oss att göra vissa knappar verkar vara viktigare utan att vi är beroende av färg och även att bygga in knappar (använd till exempel en knapp i ett minimalt utseende formulärfält).

Djup

Oavsett om tappmålet är en knapp eller ett formulärfält, bör skuggor användas för att öka djupet och därför föreslå interaktivitet. En enda skuggstil för alla varianter av knappar och formulärfält är bra.

Interaktivitet

Varje knapptyp behöver en variation för att ange dess svävande tillstånd. Detta klargör för användaren att det de har försökt göra är helt bra och säkerställer att de fortsätter utan dröjsmål.

Detta är faktiskt en av de mer komplexa aspekterna av att upprätthålla visuell konsistens eftersom färg ofta är den favoritstil som ska ändras när det gäller att skapa ett tillstånd. Tack och lov kan dessa tillståndsförändringar vara relativt subtila, så det går bra att ändra färgen till den något ljusare eller mörkare variationen - det är vad de är för. Detta gäller även länkar.

Att besluta mot detta kommer att leda till att vi använder en färg som antingen redan har betydande betydelse, vilket resulterar i att användare blir förvirrade eller annars väljer att komma med en annan färg. Att välja att använda en sekundärfärg är helt bra men det bör sparas för marknadsföring av visuella bilder snarare än UI-element. Mindre är mer (och lättare).

Kom ihåg att upprepa detta steg för varje tavla. Ta inte med CTA-knapparna på märketavlan - senare kommer vi att ta upp vad som händer när vissa kombinationer inte fungerar.

04. Skapa dina komponenter

Komponenter är en enorm tidsbesparing och alla UI-designverktyg erbjuder den här funktionen (t.ex. i Sketch kallas de Symbols). I Studio kan vi skapa komponenter genom att välja alla lager som ska bestå av komponenten och använda ⌘K genväg.

Använda komponenter

Trådramar är mycket användbara, inte bara för att utforma användargränssnitt med hög användbarhet utan också för att ta reda på vad vårt gränssnitt kommer att kräva på lång sikt. Det är ungefär som framtidssäker.

Detta betyder inte att vi behöver utforma massor av komponenter eller vara redo för alla möjliga scenarier, men det betyder att vi måste använda en ”Vad om?” -Attityd.

Till exempel, om vår trådram kräver en 3x1-komponent men vi vet att innehållet inte är i sten, kan lite kontemplation få oss att undra: 'Vad händer om de här komponenterna blir 4x1?'. Tumregeln är: design endast för användarbehov som redan finns men försök att göra lösningar relativt flexibla. Annars slutar vi med lite rörig designskuld senare.

Nu kan vi återanvända den här komponenten genom att dra den på duken från Bibliotek> Dokument på vänster sida, men kom ihåg att detta arbetsflöde kan skilja sig beroende på ditt användargränssnittsverktyg.

Denna metod för att skapa stilguider (och så småningom skapa själva designen) fungerar särskilt bra med modulära / kortbaserade layouter, även om gemensamma områden som sidhuvuden, sidfot och navigering också är utmärkta kandidater för en komponent.

Precis som vi har gjort med våra typografiska stilar, färger och knappar, måste vi komma ihåg att ordna våra komponenter noggrant.

Använda våra regler

Tidigare gjorde vi en anmärkning om att inte använda märkesvaror CTA-knappar ovanpå märkesfärgen, eftersom märkesvaror CTA-knappar uppenbarligen måste sticka ut bland allt annat. Så hur ska vi skapa en varumärkeskomponent medan vi fortfarande kan använda en märkes-CTA-knapp? När allt kommer omkring, om vi använder neutrala mörka knappar för, låt oss säga, navigeringsknappar eller helt enkelt mindre viktiga knappar, skulle det bara inte vara ett alternativ, eller hur?

Rätt. Så detta skulle vara en perfekt möjlighet att skapa en komponent - specifikt en rubrik + text + knappkombination. Lägg märke till hur jag har skapat ett bakgrundskort för neutralt ljus för att möjliggöra användning av märket. På samma sätt ser det neutrala ljusformfältet (formfält vanligtvis vita på grund av den mentala modellen som historiskt är synonymt med pappersformer) inte fantastiskt på den neutrala ljusbakgrunden så att de bara kan användas på den neutrala mörka bakgrunden - antingen direkt eller inom en neutral mörk komponent. Det är så vi gör vår design flexibel samtidigt som vi följer våra regler och bibehåller konsekvens.

Stresstestning

Helst är det snabbaste och mest effektiva sättet att säkerställa robusthet i vår design att stresstesta den. Att testa en design innebär att vara grym. Låt oss säga att vi har en navigering med X-antal nav-objekt eftersom det var kravet; För att verkligen säkerställa flexibilitet, försök att ändra dessa krav genom att lägga till fler nav-objekt eller, för att verkligen kasta en nyckel på gång, försök också lägga till ett nav-objekt med en högre visuell hierarki än de andra. Tillåter vår storlek, typografi och färgregler något liknande? Eller för att kunna erbjuda optimal användbarhet behöver vi en annan regel?

Tänk på att det finns en skillnad mellan att lägga till regler och att böja reglerna. Fler kantfall betyder mindre konsistens, så det är oftast bättre för användbarhetens skull att helt enkelt tänka om komponenten.

05. Dokumentera och samarbeta

Hur gör vi våra designfiler enklare att använda för oss själva och andra designers som kan använda vår designfil? Att hålla dem säkert lagrade i tillförlitlig, delad molnlagring är viktigt, som du får reda på.

Färger

Det första steget är att spara alla färger i färgen "Dokumentfärger" om vi inte redan har gjort det - det gör det lättare att komma åt dem när vi behöver använda dem i vår design.För att göra detta öppnar du färgväljarwidgeten från inspektören, väljer ”Dokumentfärger” i rullgardinsmenyn och klickar sedan på + -ikonen för att lägga till färgen i färgrutan. Detta fungerar på samma sätt i de flesta UI-verktyg.

Delade bibliotek

Därefter måste vi konvertera vårt dokument - komplett med typografiska stilar, färger, knappar, gemensamma områden och grundläggande komponenter - till ett delat bibliotek.

I grund och botten betyder detta att varje element måste vara en komponent, även om det bara består av ett lager. Klicka på + ‌-knappen i vänster sida Bibliotek sidofält och importera just detta dokument till ett nytt dokument. Det stämmer: vårt dokument är nu ett bibliotek och är redo att användas för att utforma användargränssnitt med garanterad konsistens.

InVision Studio är något begränsat i den meningen att det ännu inte synkroniseras med InVisions officiella Design System Manager-verktyg men det är enkelt att rymma biblioteket i Dropbox för att andra designers ska kunna använda och uppdatera över tiden. När en ändring görs (lokalt eller fjärr) kommer varje Studio-fil som använder biblioteket (igen, lokalt eller fjärr) att fråga om du vill uppdatera färgerna och komponenterna. Det här är hur designbibliotek upprätthålls i olika team.

Återanvänd allt när det gäller att utforma användargränssnitt som är visuellt konsekventa. Designa knappar, använd sedan knappar för att skapa knappkomponenter och använd sedan
knappkomponenter för att skapa andra komponenter som varningar och dialogrutor.

Skapa bara inte komponenter som inte behövs. Kom ihåg att bygga ett bibliotek är en pågående samarbetsinsats. Det behöver inte slutföras på en gång, slutföras av dig ensam eller slutfört någonsin. Det behöver bara förmedla ett språk.

Design i skala

När en design expanderar blir hantering svårare. Det finns olika justeringar som vi kanske vill göra för att hålla den effektiv och underhållbar, särskilt eftersom InVisions DSM inte fungerar med Studio ännu.

Till exempel kanske vi vill använda textlager för att kommentera vårt bibliotek som ett sätt att förklara användningsfall för olika element. För de typografiska stilarna kan vi till och med redigera texten så att den blir mer beskrivande (t.ex. "h1> / 1.3 / 44px"). Detta säger det h1>s ska vara 44 pixlar och ha en linjehöjd på 1,3.

Design Handoff

Designhandoff-verktyg visar olika stilar som används av varje element i designen så att utvecklare kan bygga appen eller webbplatsen. Dessa verktyg innehåller en översikt över stilar och även en kopia av färgen på dokumentfärgerna. Utvecklare kan till och med kopiera dessa stilar som kod, vilket är utmärkt om du har bestämt dig för att skapa någon skriftlig designdokumentation och vill inkludera kodavsnitt av komponenterna.

Om du är orolig för felsökning och hantering av en webbplats kan du se till att du har rätt webbhotell, men för ditt designsystem är InVisions designhandoff-verktyg, Inspect, det du ska använda. För att använda det klickar vi på knappen / Publicera till InVision / -ikonen i InVision Studio, öppnar den resulterande webbadressen och trycker sedan på för att växla till inspektionsläge. Det är väldigt bekvämt.

Detta innehåll uppträdde ursprungligen i nätmagasinet.