5 Tekniikoita värin hienosäätöön UX
Väri on yksi suunnittelijärjestelmän keskeisistä elementeistä. Sivustoissa tai sovelluksissa väriä voidaan käyttää monin eri tavoin: joskus väriä voidaan käyttää luomaan polttopiste kontrastin avulla tai rajoittamalla väriä valittuun paikkaan; Väri voi myös auttaa määrittämään hierarkian ja siten vaikuttamaan siihen, missä käyttäjä näyttää.
Tässä artikkelissa puhutaan siitä, miten väriä käytetään strategisesti.
1. Luodaan tarkennuspiste mittasuhteiden kautta
Hyvä esimerkki värimääristä on Viporte . Kun vierität alas kotisivulla, jokainen osa on koristeltu keskellä suurella kirjaimella. Kirje on täynnä kaunista väriä, ennen kuin leikkeet animaatiot innoittavat sisään. Eri kuvien väri, jotka animoivat, liittyvät kirjainten väreihin. Painopiste on varmasti leikkausten keskellä kiitos osittain värin kohdennetusta käytöstä. Osuudet vaihtelevat - joskus on vähän väriä ja joskus on paljon. Joko, mittasuhteita käytetään kiinnittämään huomiota keskipisteeseen. Jos väri oli näkyvämpi kaikkialla osassa jokaisen osan kohdalla, keskipiste ei olisi yhtä selvä.
2. Huomion kiinnittäminen kontrastin avulla
Toinen asia, jota väri voi manipuloida, on kontrasti. Kun koko mallin värit ovat rauhallisia tai täyteläisiä, lisäämällä vastakkaisen värin kiinnittää paljon huomiota kuviin.
Juuri näin tapahtuu suunnittelussa Thinx . Kotisivulla käyttöliittymän kokonaisväri on todella mustavalkoinen. Suunnittelu kuitenkin riippuu useista valokuvista. Etenkin kotisivun yläosassa alusvaatekuvissa on tumma punainen tausta. Verrattuna kaikkiin muihin sivuihin, se on melko rohkea. Epäilemättä, tässä hämmästyttävä asia on tummanpunainen. Punainen on paljon suurempi kontrasti mustavalkoiseen värimalliin nähden. Pidän Thinxin käyttämisestä esimerkkinä, koska se osoittaa, että kirkkaat ja neoniset värit eivät ole ainoita, jotka sopivat piirtää jonkun huomion kontrastin avulla. Se on todellakin vain kahden värin tasapainotus, joka antaa yhden niistä todella erottumaan.
3. Värin käyttäminen UX-kuvioiden luomiseen
Paras tapa luoda visuaalisia malleja on johdonmukaisuus. Mallit puolestaan luovat suhteita, joihin käyttäjä voi tottua. Se on samalla tavalla kuin käyttäjiä, joiden mukaan certina-kuvakkeet liittyvät tiettyihin toimintoihin, eli roskakori tarkoittaa poistaa. Värit ovat paljon subjektiivisempia, koska jokainen sivusto tai sovellus voi tehdä omat merkityksensä väreistä.
Otetaan suhde sininen väri päälle Underbellyn salkun verkkosivuilla . Se on yksinkertainen esimerkki, ja se on täydellinen tekeväksi. Kaikki napsautettavat Underbellyn verkkosivustot ovat sinisiä. Käyttämällä verkkosivustoa muutaman sekunnin ajan ilmenee nopeasti, että linkit ovat sinisiä. Ja näin luodaan kuvioita värin kautta. Mallit ovat hyviä, koska ne antavat käyttäjille ja vierailijoille helposti tunnistaa jotain. Helpompi tunnustus muuttuu, sitä vähemmän ihmiset ajattelevat ja nyt me kaikki tiedämme, kuinka onnellinen tämä tekee Steve Krug .
4. Hierarkian luominen värin avulla
Toinen asia, joka voi olla hyvä, on luoda hierarkia. Päällä Skoren tuotesivu , lähes jokaisessa osassa on elementtejä vihreitä siihen. Ei vain vihreää toistuvaa - joka luo tunnistettavan kuvion - se myös auttaa erottamaan tietyn osan tärkeät osat. Usein kerralla on helppo selittää hierarkia kokoa käyttäen sellaisen kirjasimen koon mukaan. Värin voimakkuus ja värin käyttö voivat kuitenkin olla hyviä hierarkian asettamisessa.
Skore-esimerkissä vihreä on hyvä kontrasti harmaan tekstin ja valkoisen taustan kanssa. Se erottuu. Lisäksi niiden värimaailma ei ole riippuvainen muista korostusväreistä, jotka tekevät vihreä primääri. Kaikki tämä edistää jokaisen osion tapa näyttää hierarkia. Siksi vihreä väri auttaa ohjaamaan käyttäjän silmät kohti tärkeitä elementtejä, jotka tarjoavat mukavan hierarkian jokaisen osion sisällä. Vihreät elementit kertovat käyttäjälle, mistä etsiä ensin.
5. Käyttämällä värien yhtäläisyyksiä
Poistamme kaikki erilaiset värien suunnittelijat, useimmiten käytämme sitä ja käytämme sitä uudestaan, jotta suunnittelussa säilyy johdonmukaisuus. Katsotaanpa InVisionin vuoden loppu aloitussivu. Sivun yläosassa on taustakuvana vaaleanpunainen ja violetti kaltevuus. Sivun alaspäin vaaleanpunainen ja violetti käytetään myös painikkeen väreihin. Lisäksi aloitussivu käyttää valkoista vaaleanpunaista ja violetinväristä taustaa vasten. Se käyttää myös mustan ja harmaan tekstin väriä valkoisten taustalla. Jos värit erosivat joka kerta, se ei näyttäisi yhtä hyvältä.
Katsotaanpa toinen esimerkki, erityisesti Co-motion . Kotisivullaan luova studio käyttää muutamia eri värejä. Mutta ne ovat kaikki riittävän samankaltaisia heidän sävyinsä yhtenäisen virtauksen aikaansaamiseksi. Tässä esimerkissä ei ole mitään, mikä erottuu erikseen, mikä voi olla myös hyvä tavoite. Tässä tapauksessa värin korostaminen tehdään sivun hyvälle ja yhtenäiselle virtaukselle, jossa yrität pitää käyttäjä sitoutuneina ja vierittämällä.
johtopäätös
Väri voi olla erinomainen työkalu erilaisten suunnittelutavoitteiden saavuttamiseen. Väri voi auttaa määrittämään ja luomaan hierarkian ja antamaan keskittymiskohdan. Värin korostaminen on eri muotoja. Kummassakin tapauksessa värien tekeminen voi olla hauskaa. Vaikutus, jossa kävijän tai käyttäjän silmät ovat menossa, voi olla helpompaa strategisen värimallin avulla.