10 huijauskoodia käyttöliittymien suunnittelussa

Oletan todennäköisesti, että suurin osa meistä aloitti käyttöliittymäsuunnittelussa vähiten tiedolla tai ei lainkaan. Mutta vaikka kertoimet olivat meitä vastaan ​​alussa, saimme tiensä läpi lukuisten suunnittelukirjojen ja artikkeleiden ymmärtääksemme, kuinka värit, typografia, ulkoasu jne. Toimivat. Muistan, kuinka meille, UX: n johtamalle yritykselle Make Technology, on vahvistettu, että suunnittelua ei voida yksinkertaisesti selittää väreillä, muodoilla ja tekstillä. Se on prosessi, jonka takana on ”Miksi”, että aina kun luomme tekstiä suurempana, lisäämme varjon tai vaihdamme väriä, siellä on oltava syy siihen, miksi asioiden on oltava.

Siksi tässä artikkelissa jaan luettelon asioista, jotka olen oppinut eri yrityksiltä, ​​suunnittelijoilta, asioista, jotka olen oppinut suunnittelemalla käyttöliittymiä, ja uusista löytöistä, joita olen löytänyt matkan varrella:

* Vastuuvapauslauseke: Seuraavat toimitetut ”älä” -näytteet eivät välttämättä tarkoita, että ne ovat väärässä. Se on perusta, jonka avulla voimme parantaa hyvästä suunnitteluratkaisusta paljon parempaan

1. Tämä teksti on tärkeä, tee siitä suurempi!

Kun kohdatetaan sisältöä, joka vaatii fonttihierarkiaa, tekstin suurentaminen painottamisen ja tärkeyden lisäämiseksi ei yleensä ratkaise ongelmaa, kuten alla oleva:

Fonttien hierarkia ei tarkoita vain pieniä tai suuria kirjasinkokoja. Kontrasti luodaan oikeassa koossa koosta, painosta ja väreistä. Mitä suurempi kontrasti, sitä parempi.

Pahoittelemme, jos valokuva on pienimuotoinen format️

Joten miten voin luoda paremman kontrastin?

  • Älä käytä erään tyyppisiä painoja eri fonttikokojen kanssa kontrastin ja hierarkian luomiseen.
  • Käytä sen sijaan ensisijaiseen sisältöön rohkeampaa ja tummempaa tyyliä tai toissijaiseen sisältöön pienempää ja vaaleampaa tyyliä (vähemmän tärkeätä).
  • Luo kolmenlaisia ​​tekstivärejä, jotka vaihtelevat tummasta vaaleaksi (katso alla oleva esimerkki). Yleensä käytän pohjaväriä tekstitekstin värinä.
  • Älä pelkää soveltaa suuria kirjasinkoiluja kohteisiin (ts. 24px-otsikko, 16pxteksti, 10pxmeta jne.). Suurempi aukko = parempi kontrasti.
  • Katso Modularscale -laskuri, jolla voit luoda paremman fonttihierarkian.
  • Muista, että kontrasti on = koko + paino + väri.
  • Viimeiseksi tarkista sen kontrastisuhde. Tämän laskurin avulla voit tarkistaa sen saatavuuden.
perusväristäni siirryn otsikoista tummempiin ja sivusisällön vaaleampiin.

2. Älä luo useita mustan sävyjä

Älä tee elämästäsi vaikeaa siirtämällä värienvalitsinta ylös ja alas tuottamaan mustan tekstin eri sävyjä valkoisen taustan päällä.

Me kaikki tiedämme, että mustan tekstivärin (# 000) käyttäminen aiheuttaa lukijoille silmien rasituksia, joten ratkaisumme on luoda vaihtoehtona tummempia variantteja. Mutta sen sijaan, että valitsisimme värin vähintään 3 heksaariväriarvoa, voimme käyttää ratkaisuna mustaa, jolla on erilainen opasiteetti:

Yllä olevassa esimerkissä käytin mustana päävärinäni (# 000) ja pienensin sen opasiteettia sen mukaan, missä sitä käytetään (ts. Ensisijainen sisältö, toissijainen sisältö jne.)

3. Tee matematiikka värien ymmärtämiseksi

Suurin osa meistä imee oikeiden väriyhdistelmien valitsemisesta, ja aina kun näemme mallin, jolla on hyvin organisoitu värivalikoima, kysymme itseltämme “Kuinka F he tekivät sen?” (Aivan kuten alla):

otettu momoandspiritistä

Kunnes opin, että värien ymmärtäminen ei ole vain niille, joilla on muotoilun lahja jo aikojen alusta, että yksinkertainen lisäys ja vähennys sävyssä, kylläisyydessä, kirkkaudessa (HSB) tekee taikuuden (käytämme tähän HSB: tä kaava RGB: n sijasta). Voit helposti päästä eroon tylsästä valkoisesta yli värillisistä taustaista ja muuttaa siitä Picasso-teoksen, kuten seuraava:

Joten missä summaus ja vähennys tulee HSB: ssä?

Kaksi lähestymistapaa värien ymmärtämiseen

Meillä on oikeastaan ​​kaksi lähestymistapaa, ja kuten näemme, molemmilla vaihtoehdoilla on sama perusväri # B9F4BC (ympyrän tausta), mutta se eroaa kansion ja nauhan väreistä. Kun aloitamme, muista aina, että ensimmäinen numero vastaa sävyä, jota seuraa kylläisyys ja viimeiseksi kirkkaus.

Vaihtoehto A

Vaihtoehto A

Vaihtoehdossa A voidaan nähdä, että sävyarvo 123 pidettiin läpi muotojen (ympyrä, kansio, nauhat), kun taas muutos tapahtuu kylläisyydessä ja kirkkaudessa.

Nyt kun keskitymme pohjan, joka on 24, ja sen kirkkauden, 96, kylläisyyteen, molemmat arvot muuttuivat, kun loimme kansiolle tummemman vihreän. 24: n kylläisyydestä tuli 40 (+16: n lisäys) ja 96: n kirkkaudella 82 (-14: n väheneminen), mikä osoittaa, että kylläisyyden muutos vaatii käänteisesti verrannollisen kirkkauden säätämisen, onko inkrementaalinen vai aleneva luoda hyvä kontrasti (päinvastoin). Ja sama asia tapahtui Stripissä, käyttämällä kansion kylläisyyttä ja kirkkautta perusarvona, siirryttiin 40: stä 44: een (+04: n lisäys) ja laskettiin 82: sta 75: ään (-07: n vähennys) kirkkauden suhteen.Niin, johtaa meitä kaavaan:

Tummempi arvo = kylläisyyden lisäys on kirkkauden väheneminen
Kevyempi arvo = kylläisyyden väheneminen on kirkkauden lisäys

Tämä kaava auttoi minua joka kerta, kun ihmettelen, mitä oikeita värejä minun tulisi käyttää kuvioissani. Olen oppinut, että paras lähtökohta on perusvärin käyttö, ja aloita sieltä säädöt kylläisyydessä ja kirkkaudessa pitämällä sävyarvo samana.

Vaihtoehto B

Vaihtoehto B

Vaihtoehdossa B käytetään edelleen samaa periaatetta (kaava, joka meillä oli yllä), mutta sävyarvot muuttuvat. Ja RGB: n ja CMY: n terminologialla, jota aiemmin käyimme läpi erilaisissa suunnittelumateriaaleissa, on nyt meille järkevä.

RGB tarkoittaa punaista, vihreää ja sinistä, kun taas CMY on syaani, magenta ja keltainen. Nämä terminologiat eivät ole antaneet minulle mitään merkitystä aloittaessani, kunnes sain havainnon käyttää RGB: tä ja CMY: tä väriyhdistelmiin.

Nyt vaihtoehdossa B, jos haluamme perusvärin tummemman variaation, kaikki mitä meidän tarvitsee tehdä on siirtää värivalitsijamme suuntaan, jossa lähin RGB sijaitsee värivalikoimassamme, tai siirtää sitä CMY-suuntaan kevyempi variaatio. Esimerkiksi:

Värinvalitsija

Koska haluamme luoda tummemman variaation perusväristämme # B9F4BC (ympyrän tausta), jota käytetään kansiokuvakessamme, meidän on siirrettävä värivalitsijamme suuntaan, johon lähin RGB sijaitsee (mikä tässä on sininen) tapaus). Mutta jos haluamme saada kevyemmän version kansiosta, siirrämme valitsijamme vasemmalle, lähellä CMY: tä (tässä tapauksessa keltaista).

* Usein RGB johtaa tummempiin variaatioihin ja CMY vaaleampaan

Kun olet siirtänyt värinvalitsimen haluttuun variaatioomme, käytämme nyt vaihtoehdon A kaavaa, joka johtaa meihin tämän väriyhdistelmän saamiseen:

Punainen, vihreä, sininen (RGB) + Vaihtoehto A-kaava = Tummempi variaatio
Syaani, magenta, keltainen (CMY) + Vaihtoehto A-kaava = Kevyempi variaatio

4. Käytä välilyöntiä ryhmien erottamiseen

Ole antelias tilan antaja

Sen lisäksi, että lisätään viiva kahden ryhmän välillä erottelun osoittamiseksi, antelias tilan käyttäminen välillä on parempi ja helpompi ratkaisu.

Läheisyyslain mukaan:

Objektit, jotka ovat lähellä tai lähellä toisiaan, ovat yleensä ryhmiteltyinä toisiinsa.

Yllä olevasta esimerkistäni tavoitteeni on luoda erotus otsikon ja sen kirjoittajan välillä käyttämällä suurta avaruusrakoa, joka on 24px.

5. Erota rivit väreillä

Värit erottimina

Riviliittymien tekeminen voi olla toisinaan tylsää suunnitella, koska se vaatii vain komponentin kopioimisen n kertaa. Mutta käyttäjän puolella niiden lukeminen voi olla erityisen vaikeaa, jos riveillä ei ole eroja toisistaan. Joten rivien käytön lisäksi, väritaustan lisääminen riveihin voi olla paljon hyödyllistä käyttäjille lukemisessa, ja se on myös meille suunnittelijoille miellyttävämpää

6. Kertoa varjotekstin sijasta

Otsikon suunnittelu

Otsikkokomponenttien suunnittelu tai tekstin lisääminen kuvan päälle on varsin haastavaa, jos kuvan tausta on dynaaminen (tai sitä voidaan muuttaa ajoittain).

Yleensä yleinen ratkaisu dynaamisella kuvataustalla olevaan tekstiin on varjojen lisääminen, mutta se ei auta käyttäjän luettavuutta. Se lisää visuaalista sotkua kirjainten ja sanojen ympärille, koska ne täyttävät niiden välissä olevat tilat.

Joillekin musta / valkoinen väripeitto on ratkaisu, joka on hyödyllinen hakkerointi tällaisille malleille. Mutta viime aikoina olen huomannut käyttävän Kerroin sekoitusvälineenä gradienttitäyttöön.

Tekniset tiedot kerto-sekoitusvaihtoehdoista

Se on paljon helpompaa kuin luoda musta tausta kuvan päälle ja vähentää sen opasiteettiä. Harmaasteikon ansiosta myös kuvan toinen osa säilyttää luonnollisen värinsä ja tekee tekstin luettavuutta varten osan, jossa teksti sijaitsee, hieman tummempi.

7. Linjan pituus

Yleisin asia, jota useimmat suunnittelijat tekevät, on viivon pituuden pidentäminen niin, että se sopii astiaan. Mutta näin luominen aiheuttaa käyttäjille silmien rasitusta, toisin kuin siinä, että rivillä on 45–65 merkkiä, mikä on ihanteellinen.

Jos olet törmännyt ongelmaan lyhentää pituutta tehdäksesi siitä ihanteellisen, niin seurauksena on oikealla puolella iso valkoinen tila, kuten alla oleva:

oikealla iso valkoinen tila

Älä epäröi tehdä niin ja aseta koko tekstisarakkeen keskusta säiliöön niin, että voit poistaa valkoisen tilan.

keskitetty sisältö

8. Älä keksii pyörää uudelleen

Suunnittelu on epäjohdonmukaista, kun se ei ole komponenttipohjainen. Se on kun huomasit tehneesi 5 erilaista korttiliittymää, 10 painiketta, 5 otsikkotyyliä jne.

Ennen kuin aloitat tietyn sisällön käyttöliittymän luomisen, yritä katsoa ympärillesi aiemmin luomia malleja, sillä saatat nähdä kuvion, jonka voit kierrättää ja käyttää.

Sen sijaan, että keksisimme pyörän uudelleen ja luomme toisen kortin taideryhmälle (yllä oleva esimerkki), voimme käyttää artikkelikorttia ja korvata sen taideryhmän sisällöllä. Tämä säästää suunnittelijoiden aikaa ja tekee käyttöliittymästä johdonmukaisen.

9. Käytä merkkivärejä aksentteina

Luulemme yleensä, että tuotemerkkien väreiden on käytettävä suuri osa liitäntäväreistämme. Meillä on vaikea esitellä asiakkaidemme järkyttäviä neonkeltaisia, oransseja ja vaaleanpunaisia ​​brändivärejä puhtaassa ja minimalistisessa asettelussamme. Vastaus? käytä niitä korostusväreinä.

10. Ripusta luodit

Ja viimeiseksi, jos olet luomassa yllä olevan kaltaista luettelosuunnitelmaa, aseta luettelomerkit, kuviot tai numero reunan päälle korostaaksesi luetteloa. Tämä tekee käyttäjän luettavuudesta jatkuvan ja helposti luettavan.

Vielä on pitkä luettelo huijauskoodista, joita haluaisin lisätä, mutta toivon nyt, että nämä 10 suunnitteluvihjettä auttavat sinua suunnitteluliittymien luomisessa. Lisää myös huijauskoodisi vastauksiin

Tämä artikkeli on inspiroitunut 7 käytännöllisestä väärästä suunnittelun huijaamisesta ja monista lukemistani artikkeliartikkeleista :)

Muita tarinoita minulta

Jos sinulla on kysyttävää, kirjoita minut osoitteeseen mhariellmosqueriola@gmail.com

giphy