Kasutajaliidese ülim disaini juhend

Sisu

• 01. Valige oma tüpograafia
• 02. Valige õige palett
• 03. Stiililingid ja nupud
• 04. Looge oma komponendid
• 05. Dokumenteerige ja tehke koostööd

Mis on kasutajaliidese disain? Parem küsimus oleks, mis tegelikult toimub kasutajaliidese kujundamisel? Esteetika? Kasutatavus? Juurdepääsetavus? Kõik nemad? Kuidas kõik need tegurid optimaalse kasutuskogemuse võimaldamiseks ühinevad ja mis peaksid olema esimesed?

Juurdepääsetavus peaks alati olema esikohal, pannes aluse optimaalsele kasutatavusele (siin aitab tipp-veebisaidi koostaja kasutamine). Ja siis, kui kasutajaliides on nii ligipääsetav kui ka kasutatav, peaks see juba esteetika osas üsna korralik välja nägema (siin on abiks kasutajaliidese disainivahendid). Seejärel peate veenduma, et teie disain töötab kõikidel tasanditel, seda põhjalikult testima, mida saate teha meie parimate kasutajate testimistööriistade valiku abil. Vaatame lähemalt enamiku kujunduste põhielemente ja seda, mida saab teha visuaalse järjepidevuse tagamiseks.

01. Valige oma tüpograafia

Suurepärane tüpograafia (nagu paljud disaini aspektid) taandub ligipääsetavusele. Visuaalne disain lisab kindlasti kasutaja üldist kogemust, kuid päeva lõpuks suhtlevad kasutajad kasutajaliidesega, mitte ei näe seda kunstina. Loetavate tähtede tulemuseks on selgus ja loetavad sõnad aitavad kasutajatel sisu tõhusalt seedida. Mõlemad on olulisemad kui igasugune visuaalne esteetika.

Hästi läbimõeldud tüpograafia võib siiski esteetiliselt rahuldust pakkuda. Mustvalge Helvetica (või sarnane font) võib olla ilu vaid mõne lihtsa tüpograafilise täiustamise järel. Täiustuste all peame silmas fondi suuruse, rea kõrguse, tähevahe jms muutmist - mitte fondi ega teksti värvi.

’Ilus’ tüpograafia on tegelikult kole, kui seda pole võimalik lugeda, sest pettumus trumpib alati esteetikat. Suurepärane disain on tasakaalustatud ja harmooniline.

Nagu paljud kasutajaliidese kujunduse aspektid, pole ka visuaalide peenhäälestamine ligipääsetavuse ja esteetika tasakaalustamiseks väljakutse. Väljakutse on järjepidevuse säilitamine kogu kujunduses. Järjepidevus loob erineva tähtsusega elementide vahel selge hierarhia, mis omakorda aitab kasutajatel kasutajaliidest kiiremini mõista ja isegi sisu tõhusamalt seedida.

Loetavuse ja loetavuse osas on WCAG 2.0 veebisisu juurdepääsetavuse juhistes määratletud minimaalne vastuvõetav fondi suurus 18pt (või paksusega 14pt). Parim kasutatav fondi suurus sõltub suuresti fondist endast, kuid on oluline olla tähelepanelik visuaalses hierarhias ja selles, kuidas see baasuurus eristub kokkuvõtetest ja pealkirjadest (st h1>, h2>, h3>).

Looge oma valitud kasutajaliidese kujundustööriistaga (kasutame InVision Studio) tekstikihtide seeria (T) ja seejärel kohandage kõiki suurusi järgmise malliga korrelatsiooniks:

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

InVision Studio (ja kõigi teiste kasutajaliidese kujundustööriistade) abil saate seda stiile reguleerida, kasutades parempoolset paneeli Inspector.

Järgmisena valige oma font, kuid olge ettevaatlik, sest mõne fondi puhul võite märgata seda, et 18 pikslit p> ja 22px h3> ei tundu nii eriline. Meil on kaks valikut: muuta fondi suurust või kaaluda pealkirjade jaoks teist fondi. Minge viimasega, kui arvate, et teie disain on tekstirikas.

Pidage meeles, et:

• Visuaalne kasutajaliidese disain on sageli kõhutunde lähenemine
• Midagi pole otsustatud; kõik võib muutuda

Reakõrgus

Optimaalne rea kõrgus tagab, et tekstiridadel oleks piisavalt loetavuse saavutamiseks piisavalt ruumi. Seda tunnustatakse üha enam kui standardit; Google'i tuletorni auditi tööriist soovitab seda isegi käsitsi kontrollida (või isegi lippu, kui tekst sisaldab linke, mis võivad olla liiga optimaalse joone kõrguse tõttu liiga lähestikku).

Veelkord aitab WCAG meid sellest välja, kinnitades, et joone kõrgus peaks olema 1,5x fondi suurus. Nii korrutage oma kasutajaliidese kujundustööriista jaotises „Rida” (või muu sarnane) fondi suurus - vähemalt - 1,5. Näiteks, kui põhiteksti suurus on 18 pikslit, oleks joone kõrgus 27 pikslit (18 * 1,5 - matemaatikaoperatsiooni saate teha ka otse inspektoris). Jällegi olge tähelepanelik - kui 1,6x tunneb end paremini, kasutage 1,6x. Pidage meeles, et erinevad fondid annavad erinevaid tulemusi.

Reaalsete andmete kasutamisel disainis on veel vara mõelda, kuid vähemalt peaksime siiski kasutama mõnevõrra realistlikke andmeid (isegi lorem ipsum). InVision Stuudios on natiivne reaalandmete rakendus, mis aitab meil näha, milline võib meie tüpograafia tegelikult välja näha.

Lõigude vahe

Lõigude vahed ei ole stiil, mille saame InVision Studio inspektorit kasutades deklareerida. Selle asemel peame kihid käsitsi joondama, kasutades nutikaid juhendeid (⌥). Sarnaselt joone kõrgusele on maagiline kordaja 2x (kahekordne fondisuurus). Näiteks kui fondi suurus on 18 pikslit, peaks enne järgmisesse tekstiplokki viimist jääma vähemalt 36 pikslit suurune ruum. Kirjavahe peaks olema vähemalt 0,12.

Kuid me ei pea selle pärast muretsema enne, kui hakkame komponente looma.

Jagatud stiilid

Kui teie kasutajaliidese kujundustööriist seda toetab (InVision Studio veel ei toeta), kaaluge nende tüpograafiliste stiilide muutmist jagatud stiilideks, et muuta need kiiresti korduvkasutatavaks, tagades samal ajal visuaalse järjepidevuse. Tavaliselt saavutatakse see inspektori kaudu.

02. Valige õige palett

Disaini jaoks ideaalsete värvide valimine läheb kaugemale esteetikast: see võib informeerida kogu teie saidi hierarhiat.

Mis puutub kasutajaliidese kujundusse, siis on värv tavaliselt üks esimesi asju, millega me nautime tupsutamist, kuid meile õpetatakse, et otse visuaalsesse kujundusse sukeldumine on halb asi. See on kindlasti tõsi, kuid kui tegemist on visuaalse järjepidevusega, peaks värv olema peamine probleem, kuna see mängib muid rolle.

Värv kasutajaliidese kujunduses võib olla võimas, kuid kuna mõned kasutajad (paljud, tegelikult) kannatavad erinevat tüüpi nägemispuude all, pole see alati usaldusväärne. Nagu öeldud, ei tähenda see tingimata konkreetset kasutatavat värvi, vaid pigem värvi tüüpi. See ei pruugi kaubamärgi puhul tõsi olla, kuna värve kasutatakse selles osas emotsionaalseks mõjutamiseks, kuid kasutajaliidese kujunduses kasutatakse värvi ka kavatsuse, tähenduse ja loomulikult visuaalse hierarhia edastamiseks.

01. Stark
Starki pistikprogramm ühildub Sketchi ja Adobe XD-ga ning aitab teil kontrollida värvikontrasti ja simuleerida värvipimedust otse lõuendilt. Figma ja InVision Studio tugi on varsti saadaval.
02.Värvid
Värvid on komplekt 90 värvikombinatsioonist, millel on WCAG 2.0 juhiste täitmiseks sobiv värvikontrastsus - mõned neist suudavad täita isegi AAA standardit.
03. A11y projekt
Projekt A11y on kõigi juurdepääsetavusega seotud asjade massiivne keskus. See sisaldab ressursse, tööriistu, näpunäiteid ja õpetusi ning on loodud Starki pistikprogrammi looja poolt ja saab rahastamist InVisionilt.

Kolme tüüpi värvi

Värvid omavad tähendust, seega on oluline, et neid ei oleks liiga palju. Liiga palju tähendusi toob kaasa rohkem asju, mida kasutaja peab mõistma ja meeles pidama - rääkimata rohkematest värvikombinatsioonidest, mille pärast peaksime muretsema. Üldiselt oleks see soovitatav formaat:

• Tegevusele kutsuv värv (ka peamine brändi värv)
• Neutraalne tume värv (parem kasutajaliidese elementide või tumeda režiimi jaoks)
• Kõigi eeltoodute puhul veidi heledam ja tumedam variatsioon

See võimaldab järgmist:

• Tume režiim on hõlpsasti saavutatav
• Meie CTA värv ei lähe kunagi teiste värvidega vastuollu
• Mis tahes stsenaariumi korral saame rõhutada ja rõhutada

Seadistage oma palett

Looge oma valitud kasutajaliidese kujundustööriistaga iga värvi jaoks üks üsna suur tahvel (puudutage A) (nimedega “Brand”, “Neutral / Light” ja “Neutral / Dark”). Seejärel looge igale tahvlile täiendavad väiksemad ristkülikud, mis näitavad värvi tumedamaid ja heledamaid variatsioone ning ka teisi värve.

Peaksime veidi heledamaks ja tumedamaks, kuna vastavalt 10 protsenti ekstra valget ja 10 protsenti eriti musta. Kui olete lõpetanud, kuvage igal tahvlil tüpograafiliste stiilide koopia. Nende tekstikihtide värv peaks olema neutraalne, välja arvatud neutraalsel heledal tahvlil, kus need peaksid olema neutraalsed tumedad.

Kontrast

Järgmisena peame kontrollima oma värve optimaalse kontrastsuse saavutamiseks. Seda saab teha mitmesuguste tööriistade abil, näiteks Starki pistikprogramm Sketchi jaoks ja Adobe XD või Contrast macOS-i jaoks - siiski sobib veebipõhine lahendus nagu Contrast Checker või Color Contrast Checker suurepäraselt.

Kontrollige iga kombinatsiooni värvikontrasti ja kohandage värve vastavalt. Kui te pole kindel, milliseid värve kasutada, proovige kasutada Color Safe'i soovitusi.

03. Stiililingid ja nupud

Suurus

Nuppudel ja linkidel peaks sarnaselt tüpograafiaga olema mõned variatsioonid. Lõppude lõpuks ei ole kõik toimingud võrdse tähtsusega ja nagu me varem arutlesime, on värv ebausaldusväärne suhtlemisviis, seega ei saa see olla peamine meetod visuaalse hierarhia mõjutamiseks. Samuti peame mängima suurusega.

Visuaalse taskukohasuse test on kasutatavuse test, mida kasutatakse selleks, et teha kindlaks, kas kraani sihtmärgid näivad olevat klõpsatavad. Kujunduse sünkroonimine stuudiost vabakäega (⌘⇧F), saatke tulemuseks olev URL testijatele ja laske neil ringida elemendid, mis nende arvates on klikitavad.

Mitte-InVision Studio kasutajad saavad kasutada ka Freehand'i, kuid InVision Studio kasutajad saavad oma disainilahendusi vabakäeseadmesse käivitada InVision Studio kaudu, mis on kiireim ja tõhusam viis kasutajatelt visuaalse tagasiside saamiseks.

Üldiselt soovitame nuppude tekst deklareerida 18px (sama kui teksttekst), kuid nuppudel endil on kolm suurust:

• Tavaline: 44px kõrgune (ümardatud nurgad: 5px)
• Suur: 54px kõrgune (ümardatud nurgad: 10px)
• Väga suur: 64px kõrgune (ümardatud nurgad: 15px)

See võimaldab meil muuta teatud nupud tähtsamateks ilma värvile toetumata ja pesitseda ka nupud (näiteks kasutada nuppu minimaalse välimusega vormiväljal).

Sügavus

Sõltumata sellest, kas puudutamise sihtmärk on nupp või vormivälja, tuleks sügavuse suurendamiseks kasutada varje ja soovitada seetõttu interaktiivsust. Kõikide nuppude ja vormiväljade variantide jaoks on üks varjude stiil hea.

Interaktiivsus

Iga nuputüüp vajab hõljutuse oleku näitamiseks variatsiooni. See selgitab kasutajale, et see, mida ta proovis teha, on täiesti hea ja tagab, et ta jätkab viivitamatult.

See on tegelikult visuaalse järjepidevuse säilitamise üks keerulisemaid aspekte, sest värvi loomine on riigi loomisel eelistatav stiil. Õnneks võivad need olekumuutused olla suhteliselt peened, nii et on hea muuta värv veidi heledamaks või tumedamaks variatsiooniks - selleks nad on. See kehtib ka linkide kohta.

Selle vastu otsustamine sunnib meid kasutama värvi, millel on juba märkimisväärne tähendus, mille tulemuseks on kasutajate segadus või muul viisil otsustamine tulla mõne muu värviga. Teise värvi kasutamise otsus on täiesti hea, kuid see tuleks salvestada visuaalide, mitte kasutajaliidese elementide jaoks. Vähem on rohkem (ja lihtsam).

Ärge unustage seda sammu korrata iga tahvli jaoks. Ärge lisage kaubamärgiga CTA nuppe bränditahvlile - hiljem kajastame, mis juhtub, kui teatud kombinatsioonid ei toimi.

04. Looge oma komponendid

Komponendid säästavad tohutult aega ja seda funktsiooni pakuvad kõik kasutajaliidese kujundustööriistad (nt Sketchis nimetatakse neid sümboliteks). Stuudios saame komponente luua, valides kõik komponendi moodustavad kihid ja kasutades ⌘K otsetee.

Komponentide kasutamine

Traadiraamid on väga kasulikud mitte ainult kõrge kasutatavusega kasutajaliideste kujundamisel, vaid ka selleks, et teada saada, mida meie kasutajaliides pikas perspektiivis nõuab. See on umbes nagu tulevikukindel.

See ei tähenda, et peame kavandama hulgaliselt komponente või olema valmis mis tahes võimalikuks stsenaariumiks, kuid see tähendab, et peame kasutama suhtumist „mis oleks, kui?”.

Näiteks kui meie traadiraam nõuab 3x1 komponenti, kuid me teame, et sisu pole kivisse raiutud, võib väike mõtisklus panna meid mõtlema: "Mis siis, kui see komponent on lõpuks 4x1?" Rusikareegel on: disain ainult kasutaja vajaduste jaoks, mis on juba olemas, kuid proovige lahendusi suhteliselt paindlikuks muuta. Vastasel juhul lõpetame hiljem väga räpase kujundusvõlaga.

Nüüd saame seda komponenti uuesti kasutada, lohistades selle lõuendile vasakul küljel asuvatest teekidest> dokumendist, kuigi pidage meeles, et see töövoog võib teie kasutajaliidese tööriistast olenevalt erineda.

See stiilijuhtide loomise meetod (ja lõpuks ka kujunduse enda loomine) toimib eriti hästi moodul- / kaardipõhiste paigutustega, ehkki ‘ühispiirkonnad’ nagu päised, jalused ja navigeerimised on ka komponendi jaoks suurepärased kandidaadid.

Nii nagu oleme teinud oma tüpograafiliste stiilide, värvide ja nuppudega, peame meeles pidama oma komponentide hoolikat korraldamist.

Meie reeglite kasutamine

Varem tegime märkuse selle kohta, et kaubamärgiga CTA nuppe ei kasutata kaubamärgi värvi peal, kuna kaubamärgiga CTA nupud peavad kõige muu hulgas silma paistma. Niisiis, kuidas jätkame kaubamärgiga komponendi loomist, kui saame endiselt kasutada kaubamärgiga CTA nuppu? Lõppude lõpuks, kui me kasutame neutraalseid tumedaid nuppe, ütleme, et navigeerimisnupud või lihtsalt vähem tähtsad nupud, siis see lihtsalt ei oleks valikuvõimalus, eks?

Õige. Nii et see oleks ideaalne võimalus luua komponent - täpsemalt pealkirja + teksti + nupu kombinatsioon. Pange tähele, kuidas olen loonud neutraalse valguse kaardi tausta, et võimaldada kaubamärgiga nupu kasutamist. Samamoodi ei paista neutraalse helevormi väli (vormiväljad on tavaliselt paberivormide sünonüümiks oleva vaimse mudeli tõttu valged) neutraalsel heledal taustal hämmastav, nii et neid saab kasutada ainult neutraalsel tumedal taustal - kas otse või siseruumides neutraalne tume komponent. Nii muudame oma disaini paindlikuks, järgides samal ajal oma reegleid ja säilitades järjepidevuse.

Stressitestimine

Ideaalis on kiireim ja tõhusam viis meie disaini vastupidavuse tagamiseks selle stressitest. Kujunduse proovile panek tähendab julmust. Oletame, et meil on navigeerimine, milles on X naviga elementide arv, sest see oli nõue; paindlikkuse tagamiseks proovige neid nõudeid muuta, lisades rohkem naviüksusi, või kui soovite mutrivõtme tõepoolest visata, proovige lisada ka naviga üksus, millel on teistest kõrgem visuaalne hierarhia. Kas meie suurus, tüpograafia ja värvireeglid võimaldavad midagi sellist? Või vajame optimaalse kasutatavuse pakkumiseks teist reeglit?

Pidage meeles, et reeglite lisamisel ja reeglite painutamisel on vahe. Rohkem servakohvreid tähendab vähem järjepidevust, nii et enamasti on kasutatavuse huvides parem komponent lihtsalt ümber mõelda.

05. Dokumenteerige ja tehke koostööd

Kuidas muuta meie disainifailid nii enda kui ka kõigi teiste disainerite jaoks, kes võivad meie kujundusfaili kasutada, hõlpsamini kasutatavad? Nagu teada saate, on oluline hoida neid turvaliselt usaldusväärses, jagatud pilvemälus.

Värvid

Esimene samm on salvestada kõik värvid dokumendivärvide näidisesse, kui me pole seda veel teinud - see hõlbustab neile juurdepääsu, kui peame neid oma kujunduses rakendama.Selleks avage inspektoris värvivalija vidin, valige rippmenüüst „Dokumendi värvid“ ja klõpsake seejärel värvile lisamiseks ikooni +. See töötab enamikul kasutajaliidese tööriistadel samamoodi.

Jagatud raamatukogud

Järgmisena peame oma dokumendi - koos tüpograafiliste stiilide, värvide, nuppude, üldkasutatavate alade ja põhikomponentidega - teisendama jagatud teegiks.

Sisuliselt tähendab see, et iga element peab olema komponent, isegi kui see koosneb ainult ühest kihist. Klõpsake vasakpoolses raamatukogude külgribal nuppu + ‌ ja importige see dokument uude dokumenti. Täpselt nii: meie dokument on nüüd raamatukogu ja on valmis kasutamiseks garanteeritud järjepidevusega kasutajaliideste kujundamisel.

InVision Studio on mõnevõrra piiratud selles mõttes, et seda ei sünkroonita veel InVisioni ametliku disainisüsteemi halduri tööriistaga, kuid Dropboxis on raamatukogu paigutamine piisavalt lihtne, et teised disainerid neid aja jooksul saaksid kasutada ja värskendada. Kui muudatus on tehtud (lokaalselt või kaugelt), küsib iga teeki kasutav Studio fail (uuesti, lokaalselt või eemalt), kas soovite värve ja komponente värskendada. Nii hoitakse disainiraamatukogusid meeskondade vahel.

Visuaalselt järjepidevate kasutajaliideste kujundamisel kasutage kõike uuesti. Kujundusnupud, seejärel kasutage nupukomponentide loomiseks nuppe, seejärel kasutage nuppu
nupu komponendid muude komponentide, näiteks märguannete ja dialoogide loomiseks.

Lihtsalt ärge looge komponente, mida pole vaja. Pidage meeles, et raamatukogu ehitamine on pidev koostöö. See ei pea olema täidetud korraga, ainult teie ise või kunagi varem. See peab ainult keelt edasi andma.

Kujundus mastaabis

Disaini laienedes muutub selle haldamine raskemaks. Efektiivsuse ja hooldatavuse tagamiseks võiksime teha erinevaid kohandusi, eriti kuna InVisioni DSM ei tööta veel Stuudioga.

Näiteks võiksime kasutada tekstikihte oma raamatukogu märkmete lisamiseks, et selgitada erinevate elementide kasutusjuhtumeid. Tüpograafiliste stiilide jaoks võiksime teksti isegi kirjeldavamaks muuta (nt "h1> / 1,3 / 44px"). See ütleb seda h1>s peaks olema 44px ja joone kõrgus 1,3.

Disaini üleandmine

Disaini üleandmise tööriistad näitavad erinevaid stiile, mida disainilahenduse kõik elemendid kasutavad, et arendajad saaksid rakenduse või veebisaidi ehitada. Need tööriistad hõlmavad ülevaadet stiilidest ja ka koopiat dokumendi värvide näidisest. Arendajad saavad neid stiile isegi koodina kopeerida, mis on suurepärane, kui olete otsustanud koostada kirjaliku disainidokumentatsiooni ja soovite lisada komponentide koodilõikude esitused.

Kui olete mures veebisaidi tõrkeotsingu ja haldamise pärast, aitab see kindlasti õige veebimajutusteenuse olemasolu, kuid teie disainisüsteemi jaoks on kasutada InVisioni disainivahetuse tööriista Inspect. Selle kasutamiseks klõpsake InVision Studio nupul / ikoonil Avalda InVisionis, avage tulemuseks olev URL ja seejärel puudutage kontrollirežiimile lülitumiseks. See on tõesti mugav.

See sisu ilmus algselt netiajakirjas.