Fullkominn hönnunarleiðbeiningar HÍ

Efni.

• 01. Veldu leturfræði
• 02. Veldu hægri litatöflu
• 03. Stílhlekkir og hnappar
• 04. Búðu til íhlutina þína
• 05. Skjalfestu og samvinnu

Hvað er notendaviðmót hönnun? Betri spurning væri, hvað raunverulega fer í hönnun notendaviðmóts? Fagurfræði? Notagildi? Aðgengi? Öllum þeim? Hvernig sameinast allir þessir þættir til að gera mögulega notendaupplifun og hver ætti að koma í fyrsta sæti?

Aðgengi ætti alltaf að vera í fyrirrúmi og leggja grunninn að bestu notagildi (með því að nota topp vefsíðugerðarmann mun það hjálpa hér). Og þá, þegar HÍ er bæði aðgengilegt og nothæft, ætti það nú þegar að líta frekar þokkalega út hvað snertir fagurfræði (Hönnunartæki HÍ munu hjálpa hér). Síðan, til að tryggja að hönnun þín virki á öllum stigum, þarftu að prófa hana vandlega, sem þú getur gert með úrvali okkar af bestu prófunarverkfærum notenda. Lítum nánar á grunnþætti flestra hönnunar og hvað er hægt að gera til að tryggja sjónrænt samræmi.

01. Veldu leturfræði

Frábær leturfræði (eins og margir þættir hönnunar) snýst um aðgengi. Sjónræn hönnun bætir vissulega heildarupplifun notandans en í lok dags eru notendur í samskiptum við HÍ og líta ekki á það sem list. Læsilegir stafir skila skýrleika og læsileg orð eru það sem hjálpa notendum að melta efni á skilvirkan hátt. Hvort tveggja er mikilvægara en nokkur sjónræn fagurfræði.

Vel hönnuð leturfræði getur samt verið fagurfræðilega fullnægjandi. Svart-á-hvítt Helvetica (eða svipað leturgerð) getur verið fegurð eftir aðeins nokkrar einfaldar leturuppbót. Með aukahlutum er átt við að fínstilla leturstærð, línuhæð, stafróf og svo framvegis - ekki leturgerð eða lit texta.

‘Falleg’ leturgerð er í raun ljót þegar hún er ólesanleg vegna þess að gremja trompar alltaf fagurfræði. Frábær hönnun er í jafnvægi og samræmd.

Eins og margir þættir í hönnun HÍ er fínstillt myndefni til að koma jafnvægi á aðgengi og fagurfræði ekki áskorunina. Áskorunin er að viðhalda samræmi í allri hönnuninni. Samræmi kemur á fót skýru stigveldi milli þátta af mismunandi mikilvægi, sem aftur hjálpar notendum að skilja notendaviðmót hraðar og jafnvel melta efni á skilvirkari hátt.

Þegar kemur að læsileika og læsileika er lágmarks ásættanlegur leturstærð eins og hann er skilgreindur í WCAG 2.0 leiðbeiningum um aðgengi að vefefni 18pt (eða 14pt feitletrað). Besta leturstærðin sem hægt er að nota veltur að miklu leyti á leturgerðinni sjálfri en það er mikilvægt að hafa í huga sjónrænt stigveldi og hvernig þessi grunnstærð greinir sig frá samantektum og fyrirsögnum (þ.e. h1>, h2>, h3>).

Búðu til röð textalaga með hönnunarverkfæri HÍ þíns að eigin vali (við munum nota InVision Studio)T) og stilltu síðan allar stærðirnar til að tengja við eftirfarandi sniðmát:

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

Með InVision Studio (og öllum öðrum Hönnunarverkfærum HÍ) er þetta gert með því að stilla stílinn með því að nota Inspector spjaldið hægra megin.

Veldu næst leturgerðina þína, en gættu þín vegna þess að það sem þú gætir tekið eftir með sumum leturgerðum er þessi 18px p> og 22px h3> lítur ekki allt öðruvísi út. Við höfum tvo möguleika: að laga leturstærðir eða íhuga annað letur fyrir fyrirsagnir. Farðu með hið síðarnefnda ef þú gerir ráð fyrir að hönnunin þín verði textaþung.

Hafðu í huga að:

• Sjónræn hönnun HÍ er oft tilfinning fyrir þörmum
• Ekkert er ákveðið; allt er breytingum háð

Línuhæð

Best línuhæð tryggir að textalínur hafi næg bil á milli sín til að ná viðunandi stigi læsileika. Þetta verður æ viðurkennt sem „staðall“; Lighthouse endurskoðunarverkfæri Google leggur það jafnvel til sem handvirkt eftirlit (eða jafnvel fáni ef textinn inniheldur krækjur sem geta verið of nærri saman vegna afleiðingar lítillar hæðar).

Enn og aftur hjálpar WCAG okkur við þennan og lýsir því yfir að línuhæð ætti að vera 1,5x leturstærð. Svo, í hönnunarverkfæri HÍ undir ‘Line’ (eða álíka), einfaldlega einfaldaðu leturstærðina með - að minnsta kosti - 1,5. Sem dæmi, ef meginmálið er 18px, þá væri línuhæðin 27px (18 * 1,5 - einnig er hægt að framkvæma stærðfræðiaðgerðina beint í eftirlitsmanninum). Aftur, þó, hafðu í huga - ef 1,6x líður betur, notaðu 1,6x. Mundu að mismunandi leturgerðir skila mismunandi niðurstöðum.

Það er of snemmt að hugsa um að nota raunveruleg gögn í hönnun okkar en að minnsta kosti ættum við samt að nota nokkuð raunhæf gögn (jafnvel lorem ipsum). InVision Studio er með innbyggt raunverulegt gagnaforrit til að hjálpa okkur að sjá hvernig leturfræði okkar gæti raunverulega litið út.

Málsgreinar bil

Málsgreinabil er ekki stíll sem við getum lýst yfir með því að nota eftirlitsmann InVision Studio. Í staðinn verðum við að samræma lög handvirkt með snjallleiðbeiningum (⌥). Líkt og línuhæð er töfrafjöldinn 2x (tvöföld leturstærð). Sem dæmi, ef leturstærðin er 18px, þá ætti að vera að minnsta kosti 36px bil áður en það leiðir inn í næsta textareit. Bil milli bréfa ætti að vera að minnsta kosti 0,12.

Við þurfum hins vegar ekki að hafa áhyggjur af þessu fyrr en við byrjum að búa til íhluti.

Sameiginlegir stílar

Ef Hönnunarverkfæri HÍ styður það (InVision Studio gerir það ekki enn) skaltu íhuga að breyta þessum leturstílum í „Shared Styles“ til að gera þá endurnýtanlega hratt og tryggja sjónrænt samræmi. Þetta er venjulega gert með eftirlitsmanninum.

02. Veldu hægri litatöflu

Að velja fullkomna liti fyrir hönnunina þína fer langt út fyrir fagurfræði: það getur upplýst allt stigveldi vefsvæðisins.

Þegar kemur að hönnun HÍ er litur venjulega það fyrsta sem við höfum gaman af að fikta við en okkur er kennt að það er slæmt að kafa beint í sjónræna hönnun. Þetta er vissulega rétt, en þegar kemur að sjónrænu samræmi, þá ætti liturinn að vera mest áhyggjuefni vegna þess að hann gegnir öðrum hlutverkum.

Litur í hönnun HÍ getur verið mjög árangursríkur en þar sem sumir notendur (margir, reyndar) þjást af ýmis konar sjónskerðingu, er það ekki alltaf áreiðanlegt. Að því sögðu snýst þetta ekki endilega um sérstakan lit sem er notaður, heldur tegund litarins. Þetta er kannski ekki rétt þegar kemur að vörumerki þar sem litur er notaður til að hafa tilfinningaleg áhrif í þessu sambandi, en í hönnun HÍ er litur einnig notaður til að miðla ásetningi, merkingu og auðvitað sjónrænu stigveldi.

01. Stark
Stark viðbótin er samhæft við Sketch og Adobe XD og hjálpar þér að athuga litaskil og líkja eftir litblindu beint af striganum. Stuðningur við Figma og InVision Studio kemur mjög fljótlega.
02.Litir
Litir eru 90 litasamsetningar sem hafa viðeigandi magn af litaskugga til að uppfylla WCAG 2.0 leiðbeiningarnar - sumar þeirra ná jafnvel að uppfylla AAA staðalinn.
03. A11y verkefni
A11y verkefnið er stórt miðstöð fyrir alla hluti sem tengjast aðgengi. Það inniheldur úrræði, verkfæri, ráð, námskeið og er búið til af framleiðanda Stark viðbótarinnar og fær styrk frá InVision.

Þrjár tegundir litar

Litir hafa merkingu og því er mikilvægt að hafa ekki of marga af þeim. Of mörg merking hefur í för með sér fleiri hluti sem notandinn þarf að skilja og muna - svo ekki sé minnst á fleiri litasamsetningar sem við höfum áhyggjur af. Almennt séð væri þetta ráðlagða sniðið:

• Kallaraðgerðarlitur (einnig aðal litur vörumerkisins)
• Hlutlaus dökkur litur (betri fyrir UI-þætti eða dökkan hátt)
• Fyrir allt ofangreint, aðeins léttari og dekkri afbrigði

Þetta gerir eftirfarandi kleift:

• Auðvelt verður að ná myrkri stillingu
• CTA litur okkar mun aldrei stangast á við aðra liti
• Í hvaða atburðarás sem er munum við geta lagt áherslu á og lagt áherslu á

Settu upp litatöflu þína

Búðu til eitt stórt listaborð (bankaðu á A) fyrir hvern lit (sem heitir „Vörumerki“, „Hlutlaus / Ljós“ og „Hlutlaus / Myrkur“) með hönnunartólinu þínu að eigin vali. Síðan skaltu búa til viðbótar minni rétthyrninga á hverju listaborði sem sýna dekkri og léttari tilbrigði litarins og einnig aðra litina sjálfa.

Við myndum líta á aðeins léttari og dekkri sem 10 prósent aukahvítt og 10 prósent aukalega svart. Þegar þú ert búinn skaltu birta afrit af leturgerðastílnum á hverju listaborði. Liturinn á þessum textalögum ætti að vera hlutlaus, nema á hlutlausa létta listaborðinu þar sem þau ættu að vera hlutlaus dökk.

Andstæða

Næst verðum við að athuga hvort litir okkar séu bestir í litum. Það eru margs konar verkfæri sem geta gert þetta, til dæmis Stark viðbótin fyrir Sketch og Adobe XD eða Contrast fyrir macOS - en netlausn eins og Contrast Checker eða Colour Contrast Checker mun ganga ágætlega.

Athugaðu litaskil fyrir hverja samsetningu og lagaðu litina í samræmi við það. Ef þú ert ekki viss um hvaða liti þú átt að nota skaltu prófa að nota tillögur Color Safe.

03. Stílhlekkir og hnappar

Stærð

Hnappar og tenglar, eins og leturfræði, ættu að hafa nokkrar afbrigði. Þegar öllu er á botninn hvolft eru ekki allar aðgerðir jafn mikilvægar og eins og við ræddum áðan er litur óáreiðanlegur samskiptaaðferð og því getur það ekki verið aðalaðferðin til að hafa áhrif á sjónrænt stigveldi. Við þurfum líka að leika okkur með stærð.

Sjónrænt hagkvæmnispróf er notagildispróf sem notað er til að ákvarða hvort smellimarkmið virðast smella. Samstilltu hönnunina frá Studio til Freehand (⌘⇧F), sendu vefslóðina sem myndast til prófunaraðila og láttu þá hringja um þá þætti sem þeir telja að hægt sé að smella á.

Notendur Non-InVision Studio geta líka notað Freehand, en notendur InVision Studio geta sett hönnun sína í Freehand óaðfinnanlega frá InVision Studio, sem er fljótlegasta og skilvirkasta leiðin til að fá sjónræna endurgjöf frá notendum.

Almennt mælum við með því að hnappatexti verði lýst sem 18px (sami og meginmálið) en að hnapparnir sjálfir hafi þrjú stærðarafbrigði:

• Venjulegt: 44px á hæð (ávöl horn: 5px)
• Stór: 54px á hæð (ávöl horn: 10px)
• Auka stór: 64px á hæð (ávöl horn: 15px)

Þetta gerir okkur kleift að láta ákveðna hnappa virðast vera mikilvægari án þess að treysta á lit og einnig að hreiðra um hnappa (til dæmis notaðu hnapp inni í formsviði sem er í lágmarki).

Dýpt

Burtséð frá því hvort tappamarkmiðið er hnappur eða formreitur, ætti að nota skugga til að auka dýpt og því stinga upp á gagnvirkni. Einn skuggastíll fyrir öll afbrigði hnappa og formreita er fínn.

Gagnvirkni

Hver hnappategund þarf afbrigði til að gefa til kynna sveimaástand sitt. Þetta skýrir notandann frá því að það sem þeir hafa reynt að gera er í lagi og tryggir að þeir haldi áfram án tafar.

Þetta er í raun einn af flóknari þáttum þess að viðhalda sjónrænu samræmi þar sem litur er oft ákjósanlegur stíll til að breyta þegar kemur að því að búa til ríki. Sem betur fer geta þessar ástandsbreytingar verið tiltölulega lúmskar, svo það er fínt að breyta litnum í aðeins léttari eða dekkri afbrigði - til þess eru þeir. Þetta á einnig við um krækjur.

Ákvörðun gegn þessu mun valda því að við notum lit sem annaðhvort hefur þegar verulega þýðingu, sem leiðir til þess að notendur verða ringlaðir, eða annars að ákveða að koma með annan lit. Að ákveða að nota aukalit er algerlega fínt en það ætti að vista það til markaðssetningar frekar en HÍ-þátta. Minna er meira (og auðveldara).

Mundu að endurtaka þetta skref fyrir hvert listaborð. Ekki láta merkja CTA hnappa fylgja listaborðinu - síðar munum við fjalla um það sem gerist þegar ákveðnar samsetningar virka ekki.

04. Búðu til íhlutina þína

Íhlutir eru mikil sparnaður og öll hönnunarverkfæri HÍ bjóða upp á þennan eiginleika (td í Sketch, þeir kallast tákn). Í Studio getum við búið til íhluti með því að velja öll lögin sem eiga að mynda íhlutinn og nota ⌘K flýtileið.

Notkun íhluta

Wireframes eru mjög gagnleg, ekki aðeins til að hanna notendaviðmóta með mikla notagildi heldur einnig til að komast að því hvað HÍ okkar þarfnast til lengri tíma litið. Það er svona eins og framtíðarsönnun.

Þetta þýðir ekki að við þurfum að hanna fullt af íhlutum eða vera tilbúnir fyrir allar mögulegar atburðarásir en það þýðir að við þurfum að nota „Hvað ef?“ Viðhorf.

Til dæmis, ef víramma okkar kallar á 3x1 íhlut en við vitum að innihaldið er ekki steinsteypt, gæti smá umhugsun orðið til þess að við veltum fyrir okkur: ‘Hvað ef þessir þættir verða 4x1?’. Þumalputtareglan er: hönnun aðeins fyrir þarfir notenda sem þegar eru til staðar en reyndu að gera lausnir tiltölulega sveigjanlegar. Annars munum við ljúka einhverjum mjög sóðalegum „hönnunarskuldum“ síðar í röðinni.

Nú getum við endurnýtt þennan íhlut með því að draga hann á strigann úr bókasöfnum> skjal vinstra megin, þó að hafa í huga að þetta vinnuflæði getur verið mismunandi eftir HÍ tólinu.

Þessi aðferð til að búa til stílaleiðbeiningar (og að lokum að búa til hönnunina sjálfa) virkar sérstaklega vel með uppsetningum / kortasniðnum uppsetningum, þó að „sameiginleg svæði“ eins og hausar, fótar og flakk séu einnig framúrskarandi frambjóðendur fyrir hluti.

Rétt eins og við höfum gert með leturgerðarstíl okkar, liti og hnappa verðum við að muna að skipuleggja íhluti okkar vandlega.

Notum reglurnar okkar

Fyrr gerðum við athugasemd um að nota ekki vörumerki CTA hnappa ofan á lit vörumerkisins, þar sem merktir CTA hnappar þurfa augljóslega að skera sig úr meðal annars. Svo hvernig förum við að því að búa til vörumerkjahluta meðan við getum enn notað vörumerki CTA hnappsins? Þegar öllu er á botninn hvolft, ef við erum að nota hlutlausa dökka hnappa fyrir, við skulum segja, siglingahnappa eða einfaldlega minna mikilvæga hnappa, þá væri það bara ekki möguleiki, ekki satt?

Rétt. Þannig að þetta væri kjörið tækifæri til að búa til íhlut - sérstaklega fyrirsögn + texta + hnappasamsetning. Taktu eftir því hvernig ég hef búið til hlutlaust ljós ‘kort’ bakgrunn til að gera kleift að nota vörumerki hnappinn. Sömuleiðis lítur hlutlaus ljósformsreiturinn (formreitir eru venjulega hvítir út frá andlegu líkaninu sögulega samheiti pappírsforma) ekki ótrúlegt á hlutlausa ljósabakgrunninum svo þeir geta aðeins verið notaðir á hlutlausan dökkan bakgrunn - annað hvort beint eða innan hlutlaus dökkur hluti. Þannig gerum við hönnun okkar sveigjanlega á meðan við hlýðum reglum okkar og höldum samræmi.

Streita próf

Helst er fljótlegasta og árangursríkasta leiðin til að tryggja styrkleika í hönnun okkar að álagsprófa það. Að láta reyna á hönnun þýðir að vera grimmur. Við skulum segja að við höfum leiðsögn með X magni af nav hlutum því það var krafan; til þess að tryggja virkilega sveigjanleika, reyndu að breyta þessum kröfum með því að bæta við fleiri hlutum eða, til að virkilega henda skiptilykli í verkið, reyndu líka að bæta við hlut sem er með hærra sjónrænt stigveldi en hinir. Leyfir stærð okkar, leturfræði og litareglur eitthvað svona? Eða þurfum við aðra reglu til að bjóða sem bestan notagildi?

Hafðu í huga að það er munur á því að bæta við reglum og beygja reglurnar. Fleiri kantatilfelli þýðir minna samræmi, þannig að oftast er betra í þágu notagildis að endurskoða einfaldlega íhlutinn.

05. Skjalfestu og samvinnu

Hvernig gerum við hönnunarskrár okkar auðveldari í notkun fyrir okkur sjálf og aðra hönnuði sem gætu notað hönnunarskrána okkar? Jæja, það er mikilvægt að geyma þau á öruggan hátt í áreiðanlegu, sameiginlegu skýjageymslu eins og þú munt komast að.

Litir

Fyrsta skrefið er að vista alla liti í sýnishorninu 'Document Colors' ef við höfum ekki gert það nú þegar - þetta auðveldar þeim aðgang þegar við þurfum að beita þeim í hönnun okkar.Til að gera þetta, opnaðu litavalargræju frá skoðunarmanninum, veldu ‘Document Colors’ úr fellivalmyndinni og smelltu síðan á + táknið til að bæta litnum við litaprófið. Þetta virkar á sama hátt í flestum verkfærum HÍ.

Sameiginleg bókasöfn

Næst þurfum við að breyta skjalinu okkar - heill með leturgerð, litum, hnöppum, sameign og grunnþáttum - í sameiginlegt bókasafn.

Í meginatriðum þýðir þetta að sérhver þáttur þarf að vera hluti, jafnvel þó að hann samanstendur aðeins af einu lagi. Smelltu á + ‌ hnappinn í vinstri hlið Bókasafna hliðarstiku og flytðu síðan þetta skjal inn í nýtt skjal. Það er rétt: skjalið okkar er nú bókasafn og er tilbúið til að nota til að hanna notendaviðmót með tryggu samræmi.

InVision Studio er nokkuð takmarkað að því leyti að það samstillist ekki enn við opinbert hönnunarkerfisstjóratæki InVision en það er nógu auðvelt að hýsa bókasafnið í Dropbox svo aðrir hönnuðir geti notað og uppfært með tímanum. Þegar breyting er gerð (á staðnum eða í fjarska) spyrja allar Studio skjöl sem nota bókasafnið (aftur, staðbundið eða fjarstýrt) hvort þú viljir uppfæra liti og íhluti. Þannig er hönnunarbókasöfnum haldið uppi þvert á teymi.

Þegar það kemur að því að hanna notendaviðmót sem eru sjónrænt samkvæmir, endurnýttu allt. Hannaðu hnappa, notaðu síðan hnappa til að búa til hnappahluti og notaðu síðan
hnappinn hluti til að búa til aðra hluti eins og viðvaranir og glugga.

Bara ekki búa til íhluti sem ekki er þörf. Mundu að uppbygging bókasafns er viðvarandi, samvinnuverkefni. Það þarf ekki að klára það í einu, klára það eitt af þér eða klára það nokkurn tíma. Það þarf aðeins að flytja tungumál.

Hönnun í mælikvarða

Eftir því sem hönnun stækkar verður erfiðara að stjórna henni. Það eru ýmsar breytingar sem við gætum viljað gera til að halda því skilvirku og viðhaldi, sérstaklega þar sem DSM InVision virkar ekki enn með Studio.

Til dæmis gætum við viljað nota textalög til að skrifa bókasafn okkar til skýringar á notkunartilvikum ýmissa þátta. Fyrir leturgerðina gætum við jafnvel breytt textanum til að vera meira lýsandi (td „h1> / 1.3 / 44px“). Þetta segir það h1>s ætti að vera 44 pixla og hafa línuhæðina 1,3.

Hönnun Handoff

Hönnun handoff verkfæri sýna ýmsa stíla sem allir þættir í hönnuninni nota svo verktaki getur smíðað forritið eða vefsíðuna. Þessi verkfæri fela í sér yfirlit yfir stíla og einnig afrit af liti á skjalalitunum. Hönnuðir geta jafnvel afritað þessa stíla sem kóða, sem er frábært ef þú hefur ákveðið að búa til skrifleg hönnunargögn og þú vilt láta kóðabreytingar á íhlutunum fylgja með.

Ef þú hefur áhyggjur af bilanaleit og umsjón með vefsíðu, að ganga úr skugga um að þú hafir réttan vefþjónustu mun hjálpa, en fyrir hönnunarkerfið þitt er hönnunarhandverk InVision, Inspect, hluturinn til að nota. Til að nýta það smellum við á hnappinn / Táknið 'Birta í InVision' í InVision Studio, opnum slóðina sem myndast og pikkum síðan á til að skipta yfir í Skoðunarstilling. Það er mjög þægilegt.

Upprunalega birtist þetta efni í net tímaritinu.