Galīgais lietotāja saskarnes dizaina ceļvedis

Saturs

• 01. Izvēlieties tipogrāfiju
• 02. Izvēlieties pareizo paleti
• 03. Stila saites un pogas
• 04. Izveidojiet komponentus
• 05. Dokumentējiet un sadarbojieties

Kas ir lietotāja saskarnes dizains? Labāks jautājums būtu, kas patiesībā iet uz lietotāja saskarnes dizainu? Estētika? Lietojamība? Pieejamība? Visus? Kā visi šie faktori apvienojas, lai nodrošinātu optimālu lietotāja pieredzi un kam vajadzētu būt pirmajam?

Pieejamībai vienmēr vajadzētu būt pirmajai, liekot pamatus optimālai lietošanai (šeit palīdzēs augstākā līmeņa vietņu veidotāja izmantošana). Un tad, kad lietotāja interfeiss ir gan pieejams, gan lietojams, tam jau vajadzētu izskatīties diezgan pieklājīgi attiecībā uz estētiku (šeit palīdzēs UI dizaina rīki). Pēc tam, lai pārliecinātos, ka jūsu dizains darbojas visos līmeņos, jums tas būs rūpīgi jāpārbauda, ​​ko varat izdarīt, izmantojot mūsu izvēlētos labākos lietotāju testēšanas rīkus. Apskatīsim vairāku dizaina pamatelementus un to, ko var darīt, lai nodrošinātu vizuālu konsekvenci.

01. Izvēlieties tipogrāfiju

Lieliska tipogrāfija (tāpat kā daudzi dizaina aspekti) ir atkarīga no pieejamības. Vizuālais noformējums noteikti papildina lietotāja vispārējo pieredzi, taču dienas beigās lietotāji mijiedarbojas ar lietotāja saskarni, nevis skatās to kā mākslu. Ar salasāmiem burtiem tiek panākta skaidrība, un salasāmi vārdi palīdz lietotājiem efektīvi sagremot saturu. Abi ir svarīgāki par jebkuru vizuālo estētiku.

Tomēr labi izstrādāta tipogrāfija joprojām var būt estētiski apmierinoša. Melnbaltā Helvetica (vai līdzīgs fonts) var būt skaistums tikai pēc dažiem vienkāršiem tipogrāfiskiem uzlabojumiem. Ar uzlabojumiem mēs domājam fonta lieluma, līnijas augstuma, burtu atstarpes utt., Nevis teksta fonta vai krāsas pielāgošanu.

‘Skaista’ tipogrāfija patiesībā ir neglīta, ja tā nav lasāma, jo neapmierinātība vienmēr pārspēj estētiku. Lielisks dizains ir līdzsvarots un harmonisks.

Tāpat kā daudzi lietotāja saskarnes dizaina aspekti, arī vizuālo izlīdzināšana, lai līdzsvarotu pieejamību un estētiku, nav izaicinājums. Uzdevums ir saglabāt konsekvenci visā dizainā. Konsekvence nosaka skaidru hierarhiju starp dažādas nozīmes elementiem, kas savukārt palīdz lietotājiem ātrāk izprast lietotāja saskarni un pat efektīvāk sagremot saturu.

Runājot par salasāmību un salasāmību, minimālais pieļaujamais fonta lielums, kā noteikts WCAG 2.0 tīmekļa satura pieejamības vadlīnijās, ir 18pt (vai 14pt treknrakstā). Labākais izmantojamais fonta lielums lielā mērā ir atkarīgs no paša fonta, taču ir svarīgi ņemt vērā vizuālo hierarhiju un to, kā šis bāzes lielums atšķiras no kopsavilkumiem un virsrakstiem (ti, h1>, h2>, h3>).

Izmantojot izvēlēto lietotāja saskarnes noformēšanas rīku (mēs izmantosim InVision Studio), izveidojiet virkni teksta slāņu (T) un pēc tam pielāgojiet visus izmērus, lai tie būtu saistīti ar šo veidni:

• h1>: 44 pikseļi
• h2>: 33 pikseļi
• h3>: 22 pikseļi
• p>: 18 pikseļi

Izmantojot InVision Studio (un visus citus lietotāja interfeisa dizaina rīkus), tas tiek darīts, pielāgojot stilus, izmantojot Inspector paneli labajā pusē.

Pēc tam izvēlieties fontu, taču uzmanieties, jo tas, ko jūs, iespējams, pamanīsit ar dažiem fontiem, ir 18 pikseļi p> un 22 pikseļi h3> neizskatās tik atšķirīgi. Mums ir divas izvēles: pielāgot fontu izmērus vai apsvērt citu fontu virsrakstiem. Iet kopā ar pēdējo, ja paredzat, ka jūsu dizains būs smags tekstam.

Paturiet prātā, ka:

• Vizuālais lietotāja interfeisa dizains bieži ir zarnu sajūtas pieeja
• Nekas nav izlemts; viss var mainīties

Līnijas augstums

Optimālais līnijas augstums nodrošina, ka teksta rindām ir pietiekami daudz atstarpes, lai sasniegtu pienācīgu lasāmības līmeni. Tas arvien vairāk tiek atzīts par “standartu”; Google bākas audita rīks to pat iesaka kā manuālu pārbaudi (vai pat atzīmēt, ja tekstā ir saites, kas var būt pārāk tuvu viena otrai nepietiekama līnijas augstuma dēļ).

Vēlreiz WCAG mums palīdz šajā, paziņojot, ka līnijas augstumam jābūt 1,5x fonta lielumam. Tātad savā lietotāja saskarnes noformēšanas rīkā sadaļā “Līnija” (vai līdzīgi) vienkārši reiziniet fonta lielumu ar vismaz - 1,5. Piemēram, ja pamatteksta lielums ir 18 pikseļi, tad līnijas augstums būtu 27 pikseļi (18 * 1,5 - matemātikas darbību var veikt arī tieši inspektorā). Tomēr atkal esiet uzmanīgs - ja 1,6x jūtas labāk, izmantojiet 1,6x. Atcerieties, ka dažādi fonti sniegs atšķirīgus rezultātus.

Ir pāragri domāt par reālu datu izmantošanu mūsu dizainā, taču mums vismaz vajadzētu izmantot nedaudz reālistiskus datus (pat lorem ipsum). InVision Studio ir vietējā reālo datu lietotne, kas palīdz mums redzēt, kāda varētu būt mūsu tipogrāfija.

Rindkopu atstatums

Rindkopu atstarpes nav stils, ko mēs varam deklarēt, izmantojot InVision Studio inspektoru. Tā vietā mums būs manuāli jāsaskaņo slāņi, izmantojot viedos ceļvežus (⌥). Līdzīgi kā līnijas augstumā, maģiskais reizinātājs ir 2x (dubultā fonta lielums). Piemēram, ja fonta lielums ir 18 pikseļi, pirms ievadīšanas nākamajā teksta blokā jābūt vismaz 36 pikseļu atstarpei. Burtu atstarpei jābūt vismaz 0,12.

Tomēr mums par to nav jāuztraucas, līdz sākam veidot komponentus.

Kopīgi stili

Ja jūsu lietotāja saskarnes noformēšanas rīks to atbalsta (InVision Studio vēl neatbalsta), apsveriet iespēju pārvērst šos tipogrāfiskos stilus par “koplietojamiem stiliem”, lai tie būtu ātri atkārtoti izmantojami, vienlaikus nodrošinot vizuālo konsekvenci. Parasti to veic ar inspektora starpniecību.

02. Izvēlieties pareizo paleti

Ideālu krāsu izvēle dizainam pārsniedz estētiku: tā var informēt visu jūsu vietnes hierarhiju.

Runājot par lietotāja saskarnes dizainu, krāsa parasti ir viena no pirmajām lietām, ar kuru mēs priecājamies, bet mums tiek mācīts, ka nirt tieši vizuālajā noformējumā ir slikta lieta. Tas noteikti ir taisnība, tomēr, runājot par vizuālo konsekvenci, krāsām vajadzētu būt galvenajām bažām, jo ​​tām ir citas lomas.

Krāsa lietotāja saskarnes dizainā var būt ļoti efektīva, taču, tā kā daži lietotāji (daudzi, faktiski) cieš no dažāda veida redzes traucējumiem, tā ne vienmēr ir uzticama. Tas nozīmē, ka tas ne vienmēr attiecas uz konkrēto izmantoto krāsu, bet gan par krāsu tipu. Tas var nebūt taisnība, ja runa ir par zīmolu, jo krāsa tiek izmantota emocionālai ietekmei šajā ziņā, bet lietotāja saskarnes dizainā krāsa tiek izmantota arī nodomu, nozīmes un, protams, vizuālās hierarhijas paziņošanai.

01. Starks
Stark spraudnis ir saderīgs ar Sketch un Adobe XD un palīdz pārbaudīt krāsu kontrastu un simulēt krāsu aklumu tieši no audekla. Atbalsts Figma un InVision Studio būs pieejams pavisam drīz.
02.Krāsas
Krāsas ir 90 krāsu kombinācijas, kurām ir atbilstošs krāsu kontrasts, lai apmierinātu WCAG 2.0 vadlīnijas - dažām no tām pat izdodas izpildīt AAA standartu.
03. A11y projekts
A11y projekts ir milzīgs centrs visām lietām, kas saistītas ar pieejamību. Tas ietver resursus, rīkus, padomus, apmācības, un to ir izveidojis spraudņa Stark veidotājs, un tas saņem finansējumu no InVision.

Trīs krāsu veidi

Krāsām ir nozīme, tāpēc ir svarīgi, lai to nebūtu pārāk daudz. Pārāk daudz nozīmju rada vairāk lietu, kuras lietotājam ir jāsaprot un jāatceras - nemaz nerunājot par vairākām krāsu kombinācijām, par kurām mums jāuztraucas. Parasti tas būtu ieteicamais formāts:

• Aicinājuma uz darbību krāsa (arī galvenā zīmola krāsa)
• Neitrāla tumša krāsa (labāk UI elementiem vai tumšajam režīmam)
• Attiecībā uz visu iepriekš minēto, nedaudz gaišākas un tumšākas variācijas

Tas ļauj:

• Tumšais režīms būs viegli sasniedzams
• Mūsu CTA krāsa nekad nebūs pretrunā ar citām krāsām
• Jebkurā scenārijā mēs varēsim uzsvērt un mazināt

Iestatiet savu paleti

Izmantojot izvēlēto lietotāja saskarnes dizaina rīku, izveidojiet vienu diezgan lielu artboard (pieskarieties A) katrai krāsai (ar nosaukumu “Brand”, “Neutral / Light” un “Neutral / Dark”). Pēc tam katrā artboardā izveidojiet papildu mazākus taisnstūrus, kas parāda tumšākas un gaišākas krāsas variācijas, kā arī pašas pārējās krāsas.

Mēs uzskatīsim, ka nedaudz gaišāki un tumšāki ir attiecīgi 10% īpaši balti un 10% īpaši melni. Kad esat pabeidzis, uz katra mākslas paneļa parādiet tipogrāfisko stilu kopiju. Šo teksta slāņu krāsai jābūt neitrālai gaismai, izņemot neitrālās gaismas artboard, kur tām jābūt neitrālām tumšām.

Kontrasts

Pēc tam mums būs jāpārbauda mūsu krāsas, lai iegūtu optimālu krāsu kontrastu. Ir dažādi rīki, kas to var izdarīt, piemēram, Stark spraudnis Sketch un Adobe XD vai Contrast MacOS - tomēr tiešsaistes risinājums, piemēram, Contrast Checker vai Color Contrast Checker, darbosies lieliski.

Pārbaudiet katras kombinācijas krāsu kontrastu un attiecīgi pielāgojiet krāsas. Ja neesat pārliecināts, kādas krāsas lietot, mēģiniet izmantot Color Safe ieteikumus.

03. Stila saites un pogas

Izmērs

Pogām un saitēm, līdzīgi kā tipogrāfijai, vajadzētu būt dažām variācijām. Galu galā ne visām darbībām ir vienāds svarīguma līmenis, un, kā mēs iepriekš apspriedām, krāsa ir neuzticama saziņas metode, tāpēc tā nevar būt galvenā vizuālās hierarhijas ietekmēšanas metode. Mums vajag arī rotaļlietas ar izmēru.

Vizuālās pieejamības pārbaude ir lietojamības pārbaude, ko izmanto, lai noteiktu, vai krāna mērķi var noklikšķināt. Sinhronizējiet dizainu no Studio uz brīvroku (⌘⇧F), nosūtiet iegūto URL testētājiem un ļaujiet viņiem aplīt elementus, uz kuriem, viņuprāt, var noklikšķināt.

Arī lietotāji, kas nav InVision Studio lietotāji, var izmantot brīvroku, bet InVision Studio lietotāji var bez grūtībām palaist savus dizainus brīvrokā no InVision Studio, kas ir ātrākais un efektīvākais veids, kā iegūt vizuālas atsauksmes no lietotājiem.

Parasti pogas tekstu ieteicams deklarēt kā 18 pikseļus (tāpat kā pamattekstu), bet pašām pogām ir trīs izmēru variācijas:

• Normāls: 44 pikseļi augstumā (noapaļoti stūri: 5 pikseļi)
• Liels: 54 pikseļu augstums (noapaļoti stūri: 10 pikseļi)
• Īpaši liels: 64 pikseļu augstums (noapaļoti stūri: 15 pikseļi)

Tas ļauj mums likt noteiktām pogām būt svarīgākām, nepaļaujoties uz krāsu, kā arī ligzdot pogas (piemēram, izmantojiet pogu minimāla izskata formas laukā).

Dziļums

Neatkarīgi no tā, vai pieskaršanās mērķis ir poga vai veidlapas lauks, dziļuma palielināšanai jāizmanto ēnas un tāpēc jāsniedz interaktivitāte. Viens ēnu stils visiem pogu un formas lauku variantiem ir piemērots.

Interaktivitāte

Katram pogas veidam ir nepieciešama variācija, lai norādītu tā kursora stāvokli. Tas paskaidro lietotājam, ka tas, ko viņi ir mēģinājuši darīt, ir pilnīgi labi, un nodrošina to, ka viņš bez kavēšanās turpina darbu.

Tas faktiski ir viens no sarežģītākajiem vizuālās konsekvences uzturēšanas aspektiem, jo ​​krāsa bieži ir labvēlīgais stils, kas jāmaina, kad tiek veidots stāvoklis. Par laimi, šīs stāvokļa izmaiņas var būt samērā smalkas, tāpēc ir labi mainīt krāsu nedaudz gaišākā vai tumšākā variantā - tas ir tas, kam tās ir paredzētas. Tas attiecas arī uz saitēm.

Izlemjot pret to, mēs izmantosim krāsu, kurai jau ir nozīmīga nozīme, kā rezultātā lietotāji kļūs apmulsuši, vai arī izlems nākt klajā ar citu krāsu. Izlemt izmantot sekundāro krāsu ir pilnīgi labi, taču tā ir jāsaglabā mārketinga vizuālajiem materiāliem, nevis lietotāja saskarnes elementiem. Mazāk ir vairāk (un vieglāk).

Atcerieties atkārtot šo soli katram mākslas darbam. Neiekļaujiet zīmola CTA pogas zīmola artboard - vēlāk mēs aprakstīsim, kas notiek, ja noteiktas kombinācijas nedarbojas.

04. Izveidojiet komponentus

Komponenti ir milzīgs laika ietaupījums, un visi lietotāja saskarnes noformēšanas rīki piedāvā šo funkciju (piemēram, skicē tos sauc par simboliem). Studijā mēs varam izveidot komponentus, atlasot visus slāņus, kas veido komponentu, un izmantojot ⌘K saīsne.

Komponentu izmantošana

Vadu rāmji ir ļoti noderīgi ne tikai augstas izmantojamības lietotāja interfeisu projektēšanai, bet arī, lai uzzinātu, kas mūsu lietotāja interfeisam būs vajadzīgs ilgtermiņā. Tas ir kaut kas līdzīgs nākotnes drošībai.

Tas nenozīmē, ka mums jāprojektē daudz komponentu vai jābūt gataviem jebkuram iespējamam scenārijam, bet tas nozīmē, ka mums ir jāizmanto attieksme “Ja būtu?”.

Piemēram, ja mūsu vadu rāmis prasa 3x1 komponentu, bet mēs zinām, ka saturs nav iecerēts akmenī, neliela pārdomas var likt mums domāt: “Ko darīt, ja šie komponenti beigsies ar 4x1?”. Īkšķis ir šāds: dizains paredzēts tikai lietotāju vajadzībām, kas jau pastāv, taču mēģiniet padarīt risinājumus salīdzinoši elastīgus. Pretējā gadījumā mēs vēlāk nonāksim pie ļoti netīra “dizaina parāda”.

Tagad mēs varam atkārtoti izmantot šo komponentu, velkot to uz audekla kreisajā pusē esošajā Bibliotēkas> Dokuments, lai gan ņemiet vērā, ka šī darbplūsma var atšķirties atkarībā no lietotāja saskarnes rīka.

Šī stila ceļvežu izveides metode (un galu galā paša dizaina izveide) īpaši labi darbojas ar moduļu / karšu izkārtojumiem, lai gan tādas kopīgas zonas kā galvenes, kājenes un navigācija ir arī lieliski komponenta kandidāti.

Tāpat kā mēs esam darījuši ar tipogrāfiskajiem stiliem, krāsām un pogām, mums jāatceras, ka rūpīgi jāorganizē komponenti.

Izmantojot mūsu noteikumus

Iepriekš mēs izteicām piezīmi par zīmola CTA pogu neizmantošanu virs zīmola krāsas, jo firmas CTA pogām acīmredzami jāizceļas starp visu pārējo. Tātad, kā mēs turpinām izveidot firmas komponentu, vienlaikus spējot izmantot firmas AUD pogu? Galu galā, ja mēs izmantojam neitrālas tumšas pogas, teiksim, navigācijas pogām vai vienkārši mazāk svarīgām pogām, tas vienkārši nebūtu variants, vai ne?

Pa labi. Tātad šī būtu ideāla iespēja izveidot komponentu - konkrēti, virsraksta + teksta + pogas kombināciju. Ievērojiet, kā esmu izveidojis neitrālas gaismas kartes karti, lai iespējotu zīmola pogas izmantošanu. Līdzīgi neitrālās gaismas formas lauks (formas lauki parasti ir balti, jo mentālais modelis vēsturiski ir sinonīms papīra formām) neizskatās pārsteidzoši uz neitrāla gaiša fona, tāpēc tos var izmantot tikai uz neitrāla tumša fona - vai nu tieši, vai iekšpusē neitrāls tumšs komponents. Tas ir veids, kā mēs padarām savu dizainu elastīgu, vienlaikus ievērojot mūsu noteikumus un saglabājot konsekvenci.

Stresa pārbaude

Ideālā gadījumā ātrākais un efektīvākais veids, kā nodrošināt mūsu dizaina noturību, ir tā pārbaude stresā. Dizaina pārbaude nozīmē būt nežēlīgam. Pieņemsim, ka mums ir navigācija ar X navigācijas elementu daudzumu, jo tā bija prasība; lai patiešām nodrošinātu elastību, mēģiniet mainīt šīs prasības, pievienojot vairāk navigācijas elementu, vai, lai darbos patiešām iemestu uzgriežņu atslēgu, mēģiniet pievienot arī navigācijas elementu ar augstāku vizuālo hierarhiju nekā pārējie. Vai mūsu lieluma, tipogrāfijas un krāsu noteikumi pieļauj kaut ko līdzīgu? Vai arī, lai piedāvātu optimālu lietojamību, mums ir nepieciešams cits noteikums?

Paturiet prātā, ka ir atšķirība starp noteikumu pievienošanu un noteikumu saliekšanu. Vairāk malu lietu nozīmē mazāku konsistenci, tāpēc lielākoties izmantojamības labad labāk vienkārši pārdomāt komponentu.

05. Dokumentējiet un sadarbojieties

Kā padarīt mūsu dizaina failus vieglāk lietojamus gan mums pašiem, gan citiem dizaineriem, kuri varētu izmantot mūsu noformējuma failu? Kā jūs uzzināsiet, ir svarīgi tos droši uzglabāt uzticamā, koplietotā mākoņa krātuvē.

Krāsas

Pirmais solis ir saglabāt visas krāsas paraugā ‘Document Colors’, ja vēl neesam to izdarījuši - tas atvieglos to piekļuvi, kad mums tās jāpielieto mūsu dizainā.Lai to izdarītu, inspektorā atveriet krāsu izvēles logrīku, nolaižamajā izvēlnē izvēlieties Dokumenta krāsas un pēc tam noklikšķiniet uz ikonas +, lai krāsu pievienotu paraugam. Tas darbojas tāpat kā lielākajā daļā lietotāja saskarnes rīku.

Koplietojamas bibliotēkas

Pēc tam mums jāpārvērš mūsu dokuments - komplektā ar tipogrāfiskiem stiliem, krāsām, pogām, koplietošanas telpām un pamata komponentiem - koplietojamā bibliotēkā.

Būtībā tas nozīmē, ka katram elementam jābūt komponentam, pat ja tas sastāv tikai no viena slāņa. Kreisās puses bibliotēku sānjoslā noklikšķiniet uz pogas + ‌ un pēc tam importējiet šo dokumentu jaunā dokumentā. Pareizi: mūsu dokuments tagad ir bibliotēka un ir gatavs izmantot, lai garantētu konsekvenci, veidojot lietotāja saskarnes.

InVision Studio ir nedaudz ierobežota tādā ziņā, ka tā vēl nav sinhronizēta ar InVision oficiālo Design System Manager rīku, taču ir pietiekami viegli ievietot bibliotēku Dropbox, lai citi dizaineri to varētu izmantot un atjaunināt laika gaitā. Kad izmaiņas tiek veiktas (lokāli vai attālināti), katrs Studio fails, kas izmanto bibliotēku (atkal, lokāli vai attālināti), jautās, vai vēlaties atjaunināt krāsas un komponentus. Šādi dizaina bibliotēkas tiek uzturētas dažādās komandās.

Kad tiek izstrādātas vizuāli konsekventas lietotāja saskarnes, atkārtoti izmantojiet visu. Noformējiet pogas, pēc tam izmantojiet pogas, lai izveidotu pogu komponentus, pēc tam izmantojiet
pogas komponenti, lai izveidotu citus komponentus, piemēram, brīdinājumus un dialoglodziņus.

Vienkārši neveidojiet komponentus, kas nav vajadzīgi. Atcerieties, ka bibliotēkas celtniecība ir pastāvīgs, kopīgs darbs. Tas nav jāaizpilda visi vienlaikus, jāpabeidz tikai jums pašiem vai kādreiz. Tam jāpārvalda tikai valoda.

Dizains mērogā

Dizainam paplašinoties, tā pārvaldīšana kļūst grūtāka. Mēs varētu vēlēties veikt dažādas korekcijas, lai tā būtu efektīva un uzturama, it īpaši tāpēc, ka InVision DSM vēl nedarbojas ar Studio.

Piemēram, mēs varētu vēlēties izmantot teksta slāņus, lai anotētu mūsu bibliotēku kā līdzekli dažādu elementu lietošanas gadījumu izskaidrošanai. Attiecībā uz tipogrāfiskajiem stiliem mēs pat varētu rediģēt tekstu aprakstošākam (piemēram, "h1> / 1,3 / 44px"). Tas to saka h1>s jābūt 44 pikseļiem un līnijas augstumam 1,3.

Dizaina nodošana

Dizaina nodošanas rīkos tiek parādīti dažādi stili, kurus izmanto katrs dizaina elements, lai izstrādātāji varētu izveidot lietotni vai vietni. Šie rīki ietver pārskatu par stiliem un arī parauga “dokumenta krāsas” kopiju. Izstrādātāji var pat kopēt šos stilus kā kodu, kas ir lieliski, ja esat nolēmis izveidot rakstisku dizaina dokumentāciju un vēlaties iekļaut komponentu koda fragmentu attēlojumus.

Ja jūs uztrauc problēmu novēršana un vietnes pārvaldība, palīdzēs pārliecināties, vai esat ieguvis pareizo tīmekļa mitināšanas pakalpojumu, taču jūsu dizaina sistēmai ir jāizmanto InVision dizaina nodošanas rīks Inspect. Lai to izmantotu, InVision Studio noklikšķiniet uz pogas / ikonas Publicēt InVision, atveriet iegūto URL un pēc tam pieskarieties, lai pārslēgtos uz Pārbaudes režīmu. Tas ir patiešām ērti.

Šis saturs sākotnēji parādījās tīkla žurnālā.