Den ultimativen UI Design Guide

Inhalt

• 01. Wielt Är Typographie
• 02. Wielt déi richteg Palette
• 03. Styl Linken a Knäppercher
• 04. Erstellt Är Komponenten
• 05. Dokumentéiert a kollaboréieren

Wat ass User Interface Design? Eng besser Fro wier, wat geet eigentlech an den Design vun enger User-Interface? Ästhetik? Notzbarkeet? Zougänglechkeet? Alleguer? Wéi vereenegen sech all dës Faktoren fir eng optimal Benotzererfarung z'erméiglechen a wat soll als éischt kommen?

Accessibilitéit sollt ëmmer als éischt kommen, d'Fundamenter leeën fir optimal Usability (mat engem Top Websäit Builder hëlleft hei). An dann, wann eng UI souwuel zougänglech wéi och benotzbar ass, sollt et scho relativ anstänneg a Saache Ästhetik ausgesinn (d'UI Design Tools hëllefen hei). Dann, fir sécher ze sinn datt Äert Design op allen Niveauen funktionnéiert, musst Dir et grëndlech testen, wat Dir maache kënnt mat eiser Auswiel vun de beschten Usertestinstrumenter. Loosst eis d'fundamental Elementer vun de meeschten Designs méi no kucken a wat ka gemaach ginn fir visuell Konsistenz ze garantéieren.

01. Wielt Är Typographie

Grouss Typographie (wéi vill Aspekter vum Design) kënnt op Accessibilitéit. Visuellt Design füügt sécher d'Gesamterfarung vum Benotzer bäi awer um Enn vum Dag interagéiere Benotzer mat der UI, gesinn et net als Konscht. Liesbar Bréiwer resultéieren zu Kloerheet a liesbar Wierder sinn dat, wat de Benotzer hëlleft den Inhalt effizient ze verdauen. Béid si méi wichteg wéi all visuell Ästhetik.

Wéi och ëmmer, gutt entwéckelt Typographie kann ëmmer ästhetesch zefriddestellend sinn. Schwaarz-op-wäiss Helvetica (oder eng ähnlech Schrëft) kann eng Saach vu Schéinheet sinn no nëmmen e puer einfachen typographesche Verbesserungen. Mat Verbesserunge menge mir Tweaking vun der Schrëftgréisst, Linnhéicht, Buschtawen asw - net d'Schrëft oder d'Faarf vum Text.

'Schéin' Typographie ass eigentlech ellen wann et onliesbar ass, well Frustratioun ëmmer Ästhetik trumpt. Super Design ass ausgeglach an harmonesch.

Wéi vill Aspekter vum UI Design ass d'Finuning vun Visualiséierungen fir d'Accessibilitéit an d'Ästhetik ze balancéieren net d'Erausfuerderung. D'Erausfuerderung behält d'Konsequenz am ganzen Design. Konsequenz etabléiert eng kloer Hierarchie tëscht Elementer mat ënnerschiddlecher Bedeitung, wat hirersäits de Benotzer hëlleft eng UI méi séier ze verstoen an och den Inhalt méi effizient ze verdauen.

Wann et ëm d'Liesbarkeet an d'Liesbarkeet geet, ass déi minimal akzeptabel Schrëftgréisst wéi definéiert vun de WCAG 2.0 Web Content Accessibility Guidelines 18pt (oder 14pt fett). Déi bescht Schrëftgréisst fir ze benotzen hänkt gréisstendeels vun der Schrëft selwer of, awer et ass wichteg op visuell Hierarchie oppassen a wéi dës Basisgréisst sech vun Zesummefaassungen an Iwwerschrëfte ënnerscheet (dh h1>, h2>, h3>).

Mat Ärem UI Designinstrument vun Ärer Wiel (mir benotzen InVision Studio), erstellen eng Serie vun Text Schichten (T) an dann all d'Gréissten upassen fir mat der folgender Schabloun ze korreléieren:

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

Mat InVision Studio (an all aner UI Design Tools) gëtt dëst gemaach andeems d'Stiler mat der Inspector Panel op der rietser Säit ugepasst ginn.

Als nächst wielt Är Schrëft, awer passt op, well wat Dir mat e puer Schrëften opfale kënnt ass dat 18px p> an 22px h3> gesäit net alles anescht aus. Mir hunn zwou Wiel: Tweak d'Schrëftgréissten oder betruecht eng aner Schrëft fir Iwwerschrëften. Gitt mat der leschter wann Dir viraussiichtlech datt Ären Design textschwéier ass.

Denkt drun datt:

• Visuell UI Design ass dacks eng Daarm-Gefill Approche
• Näischt gëtt decidéiert; alles ka geännert ginn

Linn Héicht

Optimal Zeilhéicht garantéiert datt Zeilen vum Text genuch Abstand tëscht hinnen hunn fir anstänneg Niveaue vu Liesbarkeet z'erreechen. Dëst gëtt ëmmer méi unerkannt als 'Standard'; Google's Lighthouse Audit Tool suggeréiert et souguer als manuellen Check (oder souguer e Fändel wann den Text Linken enthält déi ze enk matenee sinn als Resultat vun der suboptimaler Linnhéicht).

Nach eng Kéier hëlleft de WCAG eis mat dësem aus, deklaréiert datt d'Linnshéichten 1,5x d'Schrëftgréisst soll sinn. Also, an Ärem UI Designinstrument ënner 'Line' (oder ähnlech) multiplizéiert einfach d'Schrëftgréisst mat - op d'mannst - 1,5. Als Beispill, wann de Kierpertext 18px ass, da wier d'Linneshéicht 27px (18 * 1,5 - Dir kënnt och d'Rechnenoperatioun direkt am Inspekter ausféieren). Awer och ëmmer, passt op - wann 1.6x besser passt, benotzt 1.6x. Denkt drun datt verschidde Schrëfte verschidde Resultater ausginn.

Et ass ze fréi ze denken iwwer richteg Daten an eisem Design ze denken, awer op d'mannst solle mir ëmmer nach e bësse realistesch Daten benotzen (och lorem ipsum). InVision Studio huet eng gebierteg echt Daten App fir eis ze hëllefen ze gesinn wéi eis Typographie tatsächlech kéint ausgesinn.

Paragraph Abstand

Paragraph Abstand ass net e Stil dee mir mat InVision Studio's Inspector deklaréiere kënnen. Amplaz musse mir Schichten manuell mat Smart Guides (⌥) ausriichten. Ähnlech wéi d'Linnshéicht ass de magesche Multiplier 2x (duebel Schrëftgréisst). Als Beispill, wann d'Schrëftgréisst 18px ass, da sollt et op d'mannst e 36px Raum sinn ier Dir an den nächsten Textblock féiert. Bréif Abstand soll op d'mannst 0,12 sinn.

Wéi och ëmmer, mir brauche keng Gedanken iwwer dëst ze maachen, bis mir ufänken Komponenten ze kreéieren.

Gedeelt Stiler

Wann Ären UI Designinstrument et ënnerstëtzt (InVision Studio nach net), betruecht dës typographesch Stiler an 'Shared Styles' ze maachen fir se séier wiederverwendbar ze maachen a visuell Konsistenz ze garantéieren. Dëst gëtt normalerweis iwwer den Inspekter realiséiert.

02. Wielt déi richteg Palette

Wiel vun de perfekte Faarwen fir Äert Design geet wäit iwwer Ästhetik eraus: et kann déi ganz Hierarchie vun Ärem Site informéieren.

Wann et ëm UI Design geet, ass d'Faarf normalerweis eng vun den éischte Saachen, mat deene mir eis freeën, awer mir gi geléiert datt Tauchen direkt a visuellem Design eng schlecht Saach ass. Dëst ass sécher richteg, awer wann et ëm visuell Konsistenz geet, soll d'Faarf eng Top Suerg sinn, well et aner Rollen spillt.

Faarf am UI Design ka mächteg effektiv sinn awer well verschidde Benotzer (vill, tatsächlech) ënner verschiddenen Aarte vu visuellen Handicap leiden, ass et net ëmmer zouverléisseg. Wéi gesot, et geet net onbedéngt ëm déi spezifesch Faarf, déi benotzt gëtt, mä éischter ëm d'Faarfaart. Dëst kann net stëmmen wann et ëm de Branding geet well d'Faarf fir emotional Auswierkung an dëser Hisiicht benotzt gëtt, awer am UI Design gëtt d'Faarf och fir d'Kommunikatioun vun Intent, Bedeitung an natierlech visuell Hierarchie benotzt.

01. Stark
De Stark Plugin ass kompatibel mat Sketch an Adobe XD an hëlleft Iech Faarfkontrast ze kontrolléieren a Faarfblindheet direkt vum Canvas ze simuléieren. Ënnerstëtzung fir Figma an InVision Studio kënnt séier.
02.Faarwen
Faarwen ass e Set vu 90 Faarfkombinatiounen déi de passende Faarfkontrast hunn fir de WCAG 2.0 Richtlinnen zefridden ze stellen - e puer vun hinnen hunn et och fäerdeg bruecht dem AAA Standard gerecht ze ginn.
03. A11y Projet
Den A11y Projet ass e massive Hub fir all Accessibilitéit bezunn. Et enthält Ressourcen, Tools, Tipps, Tutorials a gëtt vum Hersteller vum Stark Plugin erstallt a kritt Finanzéierung vun InVision.

Déi dräi Aarte vu Faarf

Faarwen hunn Bedeitung, sou datt et wichteg ass net ze vill vun hinnen ze hunn. Ze vill Bedeitunge resultéieren zu méi Saachen déi de Benotzer muss verstoen an erënneren - fir net méi Faarfkombinatiounen ze nennen fir eis Suergen ze maachen. Allgemeng ass dëst de recommandéierte Format:

• Eng Call-to-Action Faarf (och d'Haaptmarkfaarf)
• Eng neutral donkel Faarf (besser fir UI Elementer oder donkel Modus)
• Fir all déi hei uewen, e bësse méi hell an däischter Variatioun

Dëst erlaabt déi folgend:

• Däischter Modus wäert einfach erreechbar sinn
• Eis CTA Faarf wäert ni mat anere Faarwen konfliktéieren
• An all Szenario kënne mir ënnersträichen an ofsträichen

Setzt Är Palette op

Mat Ärem UI Designinstrument no Ärer Wiel kreéiert en zimlech grousst Artboard (Tap A) fir all Faarf (mam Numm 'Brand', 'Neutral / Liicht' an 'Neutral / Däischter'). Dann, an all Artboard, kreéiert zousätzlech méi kleng Rechtecker, déi däischter a méi hell Variatioune vun der Faarf weisen an och déi aner Faarwen selwer.

Mir géifen e bësse méi hell a méi däischter als 10 Prozent extra wäiss respektiv 10 Prozent extra schwaarz betruechten. Wann Dir fäerdeg sidd, affichéiert eng Kopie vun den typographesche Stiler op all Artboard. D'Faarf vun dësen Text Schichten soll neutral Liicht sinn, ausser op der neutral Liicht Artboard wou se neutral donkel solle sinn.

Kontrast

Als nächst wäerte mir eis Faarwen fir en optimale Faarfkontrast kontrolléieren. Et gi vill Tools déi dëst maache kënnen, zum Beispill de Stark Plugin fir Sketch an Adobe XD oder Contrast fir macOS - awer eng Online Léisung wéi Contrast Checker oder Color Contrast Checker wäert et gutt maachen.

Kuckt de Faarfkontrast fir all Kombinatioun an tweak d'Faarwen entspriechend. Wann Dir net sécher sidd, wéi eng Faarwen ze benotzen, probéiert d'Commandatioune vu Color Safe ze benotzen.

03. Styl Linken a Knäppercher

Gréisst

Knäppchen a Linken, sou wéi Typographie, sollten e puer Variatiounen hunn. No all, sinn net all Handlungen gläichwäerteg u Wichtegkeet a wéi mir virdru diskutéiert hunn, ass Faarf eng onzouverlässeg Kommunikatiounsmethod, sou datt et net d'Haaptmethod ka sinn fir visuell Hierarchie ze beaflossen. Mir mussen och mat der Gréisst spillen.

E visuellen Affirmatiounstest ass en Usabilitystest benotzt fir ze bestëmmen ob Krunnziler klickbar sinn. Synchroniséiert den Design vu Studio op Freehand (⌘⇧F), schéckt déi doraus resultéierend URL un Tester a loosst se ronderëm d'Elementer kreéieren déi se gleewen ze klicken.

Net-InVision Studio Benotzer kënnen och Freehand benotzen, awer InVision Studio Benotzer kënnen hir Designs an Freehand nahtlos vun InVision Studio starten, wat de schnellsten an effizientste Wee ass fir visuell Feedback vu Benotzer ze kréien.

Generell wäerte mir recommandéieren datt de Knäppchen Text als 18px deklaréiert gëtt (déiselwecht wéi de Kierpertext) awer datt d'Knäppercher selwer dräi Variatiounen an der Gréisst hunn:

• Normal: 44px an der Héicht (ofgerënnt Ecken: 5px)
• Grouss: 54px an der Héicht (ofgerënnt Ecken: 10px)
• Extra grouss: 64px an der Héicht (ofgerënnt Ecken: 15px)

Dëst erméiglecht eis verschidde Knäppercher méi wichteg ze schéngen ouni Ofhängegkeet vu Faarf ze sinn an och Knäppercher ze nestelen (zum Beispill, benotzt e Knäppchen an engem minimale Formfeld).

Déift

Egal ob den Tippziel e Knäppchen oder e Formfeld ass, sollten d'Schatten benotzt ginn fir d'Tiefe ze erhéijen an dofir Interaktivitéit virschloen. Een eenzegen Schattestil fir all Varianten vu Knäppercher a Formfelder ass gutt.

Interaktivitéit

All Knäpptyp brauch eng Variatioun fir säi Schwieftestat unzeginn. Dëst kläert dem Benotzer datt dat wat se probéiert hunn ze maachen ass ganz fein a garantéiert datt se ouni Verspéidung weidergoen.

Dëst ass tatsächlech ee vun de méi komplexen Aspekter fir d'visuell Konsistenz ze halen, well d'Faarf ass dacks de favoriséierte Stil fir z'änneren wann et drëm geet e Staat ze kreéieren. Glécklecherweis kënnen dës Zoustänn Ännerunge relativ dezent sinn, sou datt et gutt ass d'Faarf an hir liicht heller oder däischter Variatioun z'änneren - dofir si se. Dëst gëllt och fir Links.

Entscheed driwwer veruersaacht eis eng Faarf ze benotzen déi entweder scho bedeitend Bedeitung huet, doduerch datt Benotzer verwiesselt ginn, oder awer décidéiere mat enger anerer Faarf ze kommen. Entscheede fir eng sekundär Faarf ze benotzen ass ganz gutt, awer et sollt fir Marketingvisualitéit gespäichert ginn anstatt UI Elementer. Manner ass méi (a méi einfach).

Denkt drun dëse Schrëtt fir all Artboard ze widderhuelen. Maacht net déi markéiert CTA Knäppercher op der Mark Artboard - spéider wäerte mir ofdecken wat geschitt wann verschidde Kombinatiounen net funktionnéieren.

04. Erstellt Är Komponenten

Komponente sinn e riesegen Zäitspuerer an all UI Designtools bidden dës Feature (z. B. a Sketch, si gi Symboler genannt). Am Studio kënne mir Komponente kreéieren andeems mir all d'Schichten auswielen déi de Komponent ausmaache sollten a mat der ⌘K Ofkiirzung.

Komponente benotzt

Wireframes si ganz nëtzlech, net nëmme fir héich Usability UIen ze gestalten awer och fir erauszefannen wat eis UI laangfristeg erfuerdert. Et ass sou wéi zukunftsbestätegend.

Dëst heescht net datt mir vill Komponente musse designen oder prett si fir all méiglech Szenario awer et heescht datt mir eng 'Wat wann?' Haltung musse benotzen.

Zum Beispill, wann eise Wireframe en 3x1 Komponent fuerdert awer mir wëssen datt den Inhalt net a Stee gesat ass, kann e bëssen Iwwerleeung eis féieren ze froen: 'Wat wann dës Komponenten um Enn 4x1 sinn?'. D'Regel vum Daum ass: Design nëmme fir d'Benotzerbedürfnisser, déi et scho gëtt, awer probéiert Léisunge relativ flexibel ze maachen. Soss wäerte mir mat e puer ganz knaschteg 'Design Scholden' méi spéit op der Linn ophiewen.

Elo kënne mir dës Komponent weiderbenotzen andeems se se op d'Leinwand aus Bibliothéiken> Dokument op der lénkser Säit zéien, och wann Dir am Kapp hutt datt dësen Workflow ofhängeg vun Ärem UI-Tool kann ënnerscheeden.

Dës Methode fir Stilguiden ze kreéieren (a schliisslech den Design selwer ze kreéieren) funktionnéiert besonnesch gutt mat modulär / kaartebasis Layouten, obwuel 'gemeinsame Gebidder' wéi Header, Fousszeilen an Navigatiounen och exzellent Kandidate fir eng Komponent sinn.

Just wéi mir mat eisen typografesche Stiler, Faarwen a Knäppercher gemaach hunn, musse mir drun denken eis Komponente suergfälteg z'organiséieren.

Benotzt eis Regelen

Virdrun hu mir eng Bemierkung gemaach iwwer net Marked CTA Knäppercher uewen op der Markefaarf ze benotzen, well Mark CTA Knäppercher selbstverständlech ënner alles anescht musse opfalen. Also wéi maache mir e Marke Komponent ze kreéieren wärend mir ëmmer nach e markéierte CTA Knäppchen benotze kënnen? No all, wa mir neutral donkel Knäppercher benotze fir, loosst eis soen, Navigatiounsknäppercher oder einfach manner wichteg Knäppercher, dat wier just keng Optioun, oder?

Riets. Also dëst wier eng ideal Geleeënheet fir e Komponent ze kreéieren - speziell eng Iwwerschrëft + Text + Knäppchen Kombinatioun. Notiz wéi ech eng neutral Luucht 'Kaart' Kuliss erstallt hunn fir d'Benotzung vum Markeknäppchen z'erméiglechen. Ähnlech gesäit d'neutral Liichtform Feld (Formfelder normalerweis wäiss wéinst dem mentale Modell historesch synonym mat Pabeierformen) net erstaunlech op den neutralen hellem Hannergrond sou datt se nëmmen am neutralen donkelen Hannergrond kënne benotzt ginn - entweder direkt oder bannent eng neutral donkel Komponent. Dëst ass wéi mir eisen Design flexibel maachen andeems mir eis Regelen halen an d'Konsistenz behalen.

Stress Testen

Ideal ass de schnellsten an effektivsten Wee fir Robustheet an eisem Design ze garantéieren et ze stresstest. En Design op den Test stellen heescht grausam ze sinn. Loosst eis soen datt mir eng Navigatioun mat X Betrag vun nav Artikelen hunn, well dat war d'Fuerderung; fir wierklech Flexibilitéit ze garantéieren, probéiert dës Ufuerderungen z'änneren andeems Dir méi nav Artikele bäifügt oder, fir e Spanner wierklech an d'Wierker ze geheien, probéiert och en Nav Element mat enger méi héijer visueller Hierarchie bäizefüge wéi déi aner. Erlaabt eis Gréisst, Typographie a Faarfregelen esou eppes? Oder fir eng optimal Usability ze bidden, brauche mir eng aner Regel?

Denkt drun datt et en Ënnerscheed gëtt tëscht derbäisetzen vun de Regelen an der Béckung vun de Regelen. Méi Randfäll heescht manner Konsequenz, also meeschtens ass et besser fir d'Benotzerfrëndlechkeet de Komponent einfach ze iwwerdenken.

05. Dokumentéiert a kollaboréieren

Wéi maache mir eis Design Dateie méi einfach fir eis selwer an all aner Designer ze benotzen déi eis Design Datei benotze kënnen? Gutt, se sécher ze halen an zouverléissege, gemeinsame Cloud Späicherung ass wichteg, wéi Dir et erausfënnt.

Faarwen

Den éischte Schrëtt ass fir all d'Faarwen am 'Document Colors' Swatch ze späicheren wa mir dat nach net gemaach hunn - dëst wäert hinnen méi einfach maachen Zougang wann mir se an eisem Design uwenden mussen.Fir dëst ze maachen, öffnen de Faarfwieler Widget vum Inspekter, wielt 'Document Colors' aus dem Dropdown a klickt dann op d'Ikon + fir d'Faarf an de Swatch bäizefügen. Dëst funktionnéiert déiselwecht Manéier an de meeschten UI Tools.

Gedeelt Bibliothéiken

Als nächstes musse mir eis Dokument konvertéieren - komplett mat typographesche Stiler, Faarwen, Knäppchen, gemeinsame Beräicher a Basis Komponenten - an eng gemeinsam Bibliothéik.

Wesentlech heescht dat datt all Element e Bestanddeel muss sinn, och wann et nëmmen aus enger Schicht besteet. Klickt op de + ‌ Knäppchen an der lénkser Säit Bibliothéiken Sidebar an importéiert dëst Dokument an en neit Dokument. Dat ass richteg: eist Dokument ass elo eng Bibliothéik an ass prett fir UIe mat garantéierter Konsequenz ze designen.

InVision Studio ass e bësse limitéiert am Sënn datt et nach net synchroniséiert gëtt mam InVision offiziellen Design System Manager Tool awer et ass einfach genuch fir d'Bibliothéik an Dropbox z'ënnerstëtzen fir aner Designer ze benotzen an iwwer Zäit ze aktualiséieren. Wann eng Ännerung gemaach gëtt (lokal oder op Distanz), all Studio Datei déi d'Bibliothéik benotzt (erëm, lokal oder fern) freet ob Dir d'Faarwen a Komponente wëllt aktualiséieren. Dëst ass wéi Designbibliothéiken iwwer Teams gefleegt ginn.

Wann et drëm geet Benotzerinterfaces ze designen déi visuell konsequent sinn, benotze se alles erëm. Design Buttons, da benotzt Buttons fir Knäppkomponenten ze kreéieren, da benotzt
Knäppchen Komponente fir aner Komponenten ze kreéieren wéi Alarmer an Dialogen.

Maacht just keng Komponenten déi net gebraucht ginn. Denkt drun, eng Bibliothéik ze bauen ass e lafenden, kollaborativen Effort. Et muss net op eemol fäerdeg sinn, vun Iech eleng ofgeschloss oder jeemools ofgeschloss ginn. Et muss nëmmen eng Sprooch vermëttelen.

Design op Skala

Wéi e Design erweidert, gëtt et méi schwéier ze managen. Et gi verschidde Upassungen déi mir wëlle maache fir se effizient an ze halen, besonnesch well den DSM vum InVision nach net mam Studio funktionnéiert.

Zum Beispill wëlle mir Textschichten benotze fir eis Bibliothéik ze annotéieren als Mëttel fir d'Benotzungsfäll vu verschiddenen Elementer z'erklären. Fir déi typografesch Stiler kéinte mer den Text och méi beschreiwe bezeechnen (z. B. "h1> / 1.3 / 44px"). Dëst seet dat h1>s soll 44px sinn an eng Linnshéicht vun 1.3 hunn.

Design Handoff

Design Handoff Tools weisen déi verschidde Stiler déi vun all Element am Design benotzt ginn, sou datt Entwéckler d'App oder Websäit bauen. Dës Tools enthalen en Iwwerbléck iwwer Stiler an och eng Kopie vum 'Dokumentfaarwen' Swatch. Entwéckler kënnen dës Stiler souguer als Code kopéieren, wat exzellent ass wann Dir decidéiert hutt eng schrëftlech Designdokumentatioun ze kreéieren an Dir wëllt Codestécker Representatioune vun de Komponente mat abannen.

Wann Dir Iech Suergen iwwer Troubleshooting a Gestioun vun enger Websäit maacht, gitt sécher datt Dir de richtege Webhosting Service hutt hëlleft, awer fir Ären Designsystem ass InVision's Design Handoff Tool, Inspect, d'Saach fir ze benotzen. Fir et ze benotzen, klickt mir op de 'Publish to InVision' Knäppchen / Ikon am InVision Studio, maach déi resultéierend URL op an da klickt op fir op Inspect Mode ze wiesselen. Et ass wierklech bequem.

Dësen Inhalt erschéngt ursprénglech am Netzmagazin.