10 kasutajakoodi kasutajaliideste kujundamisel

Ma eeldan ilmselt, et enamik meist alustas kasutajaliidese kujundamisega kõige vähem teadmistega või üldse mitte midagi. Kuid kuigi koefitsiendid olid meie vastu alguses, suutsime läbi arvukate disainiraamatute ja artiklite mõista, kuidas värvid, tüpograafia, paigutus jne toimivad. Mäletan, kuidas UX-i juhitud ettevõttes Make Technology on meis välja kujunenud, et disaini ei saa lihtsalt seletada värvide, kuju ja tekstiga. See on protsess, mille taga on "Miks", et alati, kui loome teksti suuremaks, lisame varju või muudame värvi, peab olema põhjus, miks asjad peavad olema.

Seega jagan selles artiklis loetelu asjadest, mida olen õppinud erinevatelt ettevõtetelt, disaineritelt, asju, mida olen õppinud kasutajaliideste kujundamisel, ja uusi avastusi, mida ma selle käigus leidsin:

* Kohustustest loobumine: järgmised esitatud näited „Ära” ei tähenda tingimata, et need on valed. See on meie alus sellele, kuidas saaksime heast kujunduslahendusest palju paremaks minna

1. See tekst on oluline, tehke suuremaks!

Kui seisavad silmitsi fondihierarhiat vajava sisuga, ei lahenda see tavaliselt suurema rõhu ja olulisuse suurendamiseks probleemi, nagu allpool:

Fondihierarhia ei tähenda lihtsalt väikestest kuni suurteni ulatuvaid kirjasuurusi. Kontrasti loob just õige suurus, kaal ja värvid. Mida suurem kontrast, seda parem.

Vabandage, kui foto on väikese eraldusvõimega format️

Kuidas siis paremat kontrasti luua?

  • Ärge kasutage kontrastsuse ja hierarhia loomiseks ühte tüüpi kaalu erinevate kirjasuurustega.
  • Selle asemel kasutage esmase sisu jaoks julgemat ja tumedamat stiili või sekundaarse sisu puhul väiksemat ja kergemat stiili (vähem oluline).
  • Looge kolme tüüpi tekstivärve, mis varieeruvad tumedast heledaks (vt näidet allpool). Tavaliselt kasutan põhiteksti värvina põhivärvi.
  • Ärge kartke oma üksuste jaoks suuri fontähte rakendada (nt 24-piksline päis, 16-piksline põhitekst, 10 piksline meta jne). Suurem vahe = parem kontrast.
  • Vaadake veebipõhist kalkulaatorit Modularscale, mida saate kasutada parema fondihierarhia loomiseks.
  • Pidage meeles, et kontrast on = suurus + kaal + värv.
  • Viimaseks kontrollige kindlasti selle kontrastsuse suhet. Selle kalkulaatori abil saate kontrollida selle juurdepääsetavust.
oma põhivärvist kolin pealkirjade peal tumedamalt, abisisu puhul heledamaks.

2. Ärge looge mitut musta tooni

Ärge tehke oma elu keeruliseks, liigutades värvivalijat üles ja alla, et saada valge tausta kohal erinevat tooni musta teksti.

Me kõik teame, et musta teksti värvi (# 000) kasutamine põhjustab lugejatele silmi pingeid ja seetõttu on meie lahendus alternatiivina luua tumedamad variandid. Kuid selle asemel, et valida kolm või enam heksovärvide väärtust, võime lahendusena kasutada erineva läbipaistmatusega musta värvi:

Ülaltoodud näites kasutasin oma põhivärvina musta värvi (# 000) ja vähendasin selle läbipaistmatust sõltuvalt sellest, kus seda kasutatakse (st esmane sisu, teisene sisu jne)

3. Tehke matemaatikat värvide mõistmiseks

Enamik meist imeb õigete värvikombinatsioonide valimisest ja alati, kui näeme hästi korraldatud värvipaletiga kujundust, seame endalt küsimuse: “Kuidas F nad seda tegid?” (Nagu allpool):

võetud momoandspiritidest

Kuni ma õppisin, et värvide mõistmine pole mõeldud ainult neile, kellele on aegade algusest peale kingitus disainitud, teeb lihtsa liitmise ja lahutamise tooni, küllastuse, heleduse (HSB) abil võlu (me kasutame selleks HSB-d valem RGB asemel). Igavast valgest üle värvitud taustaga saate hõlpsalt lahti saada ja muuta selle Picasso-teoseks nagu allpool:

Kust tuleb liitmine ja lahutamine HSB-s?

Kaks lähenemist värvide mõistmiseks

Tegelikult on meil kaks lähenemisviisi ja nagu näeme, on mõlemal valikul sama põhivärv # B9F4BC (ringi taust), kuid see erineb kausta ja riba värvist. Alustades pidage alati meeles, et esimene number vastab toonile, millele järgneb küllastus ja viimasena heledus.

Variant A

Variant A

Valikuvariandis A näeme, et hoidsime tooni väärtust 123 kogu kujundite ulatuses (ring, kaust, riba), samal ajal kui muutused aset leidsid küllastus ja heledus.

Kui keskendume aluse, mis on 24 ja selle heledus, 96 küllastusele, siis mõlemad väärtused muutusid, kui lõime kausta jaoks tumedama rohelise värvi. Alates 24-st küllastumisest sai see 40-ni (+16 juurdekasv) ja heledusest 96-ni 82 (vähenemine -14-ni), mis näitab, et küllastuse muutus, kas inkrementaalne või vähenev, vajab heleduse pöördvõrdelist korrigeerimist, et hea kontrasti loomiseks (vastupidi). Ja sama juhtus ka ribas, kasutades baasväärtusena kausta küllastust ja heledust, liikusime 40-lt 44-le (+04 juurdekasv) ja heleduse korral vähenesime 82-lt 75-le (kahanemine -07). Seega viib meid edasi valemi juurde:

Tumedam väärtus = küllastuse suurenemine on heleduse vähenemine
Heledam väärtus = küllastuse vähenemine on heleduse juurdekasv

See valem aitas mind iga kord, kui mõtlesin, milliseid õigeid värve peaksin oma kujunduses kasutama. Sain teada, et parim lähtepunkt on põhivärvi olemasolu ja alustage sellest korrektsioone küllastuses ja heleduses, hoides Hue väärtust sama.

Variant B

Variant B

Variandis B rakendatakse endiselt sama põhimõtet (valem, mis meil ülal oli), kuid tooni väärtused muutuvad. Ja terminid RGB ja CMY, millest me erinevates kujundusmaterjalides möödusime, on nüüd meie jaoks mõistlikud.

RGB tähistab punast, rohelist ja sinist ning CMY on tsüaan, magenta ja kollane. Need terminoloogiad ei olnud minu käivitamisel minu jaoks olulist tähtsust, kuni ma leidsin, et avastasin värvikombinatsioonide jaoks RGB ja CMY.

Kui variandis B soovime saada alusvärvi tumedamat varieeruvust, siis on kõik, mida vajame, liikuda värvivalija suunas, kus meie värvipaletis asub lähim RGB, või teisaldada see CMY suuna jaoks kergem variatsioon. Näiteks:

Värvivalija

Kuna soovime luua alusvärvi # B9F4BC (ringi taust) tumedama variatsiooni, mida rakendatakse meie kaustaikoonil, peame viima värvivalija suunas, kus asub lähim RGB (mis selles on sinine) juhtum). Kuid kui soovime oma kausta kergemat versiooni, liigutame valija vasakule, CMY (antud juhul kollase) lähedusse.

* Sageli viib RGB tumedama variatsioonini ja CMY heledamaks

Pärast värvivalija viimist soovitud variatsiooni juurde rakendame nüüd variandi A valemit, mille tulemuseks on see värvikombinatsioon:

Punane, roheline, sinine (RGB) + valiku A valem = tumedam variatsioon
Tsüaan, magenta, kollane (CMY) + valiku A valem = heledam variatsioon

4. Kasutage rühmade eraldamiseks tühikuid

Ole helde ruumi andja

Lisaks kahe rühma vahelise rea lisamisele eraldamise näitamiseks on parem ja hõlpsamaks lahenduseks lahuse tühiku kasutamine.

Nagu ütleb läheduse seadus:

Objektid, mis asuvad üksteise lähedal või lähenevad sellele, kipuvad olema rühmitatud.

Ülaltoodud näitest on minu eesmärk luua pealkirja ja selle kirjutaja vaheline eraldusvõime, kasutades nende vahel suurt tühiku, 24xx.

5. Ridade eraldamiseks kasutage värve

Värvid eraldajatena

Ridade liideste tegemine võib vahel olla igav, kuna see nõuab komponendi dubleerimist ainult n korda. Kuid kasutaja poolelt võib nende lugemine olla eriti keeruline, kui ühe rea vahel pole suurt vahet. Lisaks joonte kasutamisele võib ridadena taustpildi lisamine kasutajatele lugemisel palju abiks olla ja on ka meie disaineritele seda rohkem rõõmu

6. Korruta varjutatud teksti asemel

Päise kujundus

Päisekomponentide kujundamine või pildi lisamine on üsna keeruline, eriti kui pildi taust on dünaamiline (või saab seda aeg-ajalt muuta).

Tavaliselt on dünaamilise pilditaustaga teksti jaoks tavaline lahendus varju lisamine, kuid see ei aita kasutaja loetavust. See lisab tähtede ja sõnade ümber visuaalsemat segadust, kuna need täidavad tühikud nende vahel.

Mõnede jaoks on mustvalge värviga ülekate lahendus, mis on kasulik seda tüüpi disainilahenduste puhul. Kuid hiljuti olen avastanud, et saab gradienditäidise jaoks kasutada tööriista Korrutamine.

Korruta seguvalikute tehnilised andmed

Selle tegemine on palju lihtsam kui pildi kohale musta tausta loomine ja selle läbipaistmatuse vähendamine. Halli skaala olemasolu muudab pildi teise osa loomuliku värvi ja tekstiosa loetavuse huvides pisut tumedamaks.

7. Joone pikkus

Tavaline asi, mida enamik disainereid teeb, on rea pikkuse muutmine pikemaks, et see mahuks mahutisse. Kuid nii toimides tekitab meie kasutaja silmi pinget, erinevalt sellest, et 45–65 tähemärki rea kohta on ideaalne.

Kui olete kunagi kohanud dilemmat, et lühendage pikkust ideaalseks, kuid tulemuseks on paremal küljel suur valge tühik, nagu allpool:

paremal suure valge tühikuga

Ärge kõhelge seda teha ja muutke kogu tekstveeru keskpunkt mahutiga vastavaks, et saaksite tühja ruumi eemaldada.

keskne sisu

8. Ärge leiutage ratast uuesti

Mis teeb kujunduse ebajärjekindlaks, on see, kui see ei põhine komponentidel. Just siis, kui saite aru, et olete koostanud viit tüüpi kaardiliidest, 10 nuppu, 5 pealkirjastiili jne.

Enne kui alustate konkreetse sisu jaoks liidese loomist, proovige oma varem loodud kujundused ümber vaadata, kuna võite näha mustrit, mida saate taaskasutada ja kasutada.

Selle asemel, et ratast leiutada ja luua uus grupp Art Groupile (ülaltoodud näide), võime kasutada artiklikaarti ja asendada selle Art Groupi sisuga. See säästab disainerite aega ja muudab liidese ühtlaseks.

9. Kasuta aktsentidena brändivärve

Tavaliselt arvame, et brändivärvid peavad hõlmama meie liidese värvide suurt osa. Meil on keeruline leida oma kliendi šokeerivaid neoonkollase, oranži ja roosa kaubamärgi värve oma puhtas ja minimalistlikus paigutuses. Vastus? kasutage neid aktsentvärvidena.

10. Riputa täppe

Ja kui loote ülaltoodud loendi kujundust, pange loendi esiletõstmiseks täpid, märgid või numbrid veerisele. See muudab kasutaja loetavuse voo katkematuks ja loetavamaks.

Seal on veel pikk nimekiri disainilahenduste petabelitest, mida tahaksin lisada, kuid praegu loodan, et need 10 kujundusnõuannet aitavad teid disainiliideste loomisel. Lisage vastustele julgelt ka oma petmise koodid

See artikkel on inspireeritud 7 praktilisest näpunäitest disaini petmiseks ja paljudest disainitud artiklitest, mida ma olen lugenud :)

Muud lood minu poolt

Kui teil on küsimusi, kirjutage mulle e-posti aadressil mhariellmosqueriola@gmail.com

giphy