Käyttämällä tietä Ihmiset käsittelevät visuaalista tietoa Web-suunnittelussa
Verkkosivujen ja käyttöliittymien suunnittelu on tullut helpommaksi viime vuosina. Siellä on niin paljon työkaluja, joita voit käyttää, mikä tekee siitä turhaa aloittaa tyhjästä, kun kehität käyttöliittymiä (tutustu uuteen käyttöliittymän kokoelmaan). Mutta en ole täällä väittänyt web-suunnittelun kuolemasta.
Sen sijaan yritän selittää perustiedot, psykologiaan perustuvat käsitteet visuaalisten suunnittelutyökalujen (monipuolisimpien CSS-sarjojen ja kehittyneimpien premium-teemojen) takana. Et vain aio käyttää niitä, vaan myös ymmärtää ne. Olen varma, että tämä helpottaa myös olemassa olevien muokkaamista onnistuneesti.
Tarkastellaan, miten ihmisen mieli ja keho toimivat visuaalisen tiedon käsittelyssä ja miten nämä tiedot tulkitaan web-suunnittelussa.
Perceptuaalisen organisaation periaatteet
Gestaltin psykologian mukaan, koko on erilainen kuin sen osien summa. Tämän ajatuskoulun seuraajat väittävät, että on olemassa joitakin periaatteita siitä, miten ihmisen mieli ryhmittelee esineitä. Nämä eivät ole vain teorioita, mielessä sinua, vaan todellisia käytännön faktoja visuaalisten ryhmien järjestämisestä.
Alla on joitakin lakeja ja näiden periaatteiden suositumpia ja tunnettuja käyttötapoja. Saatat jopa löytää uusia ideoita seuraavaan suunnitteluun.
Samankaltaisuuden laki
Ensimmäisessä periaatteessa todetaan, että samankaltaisia pieniä esineitä pidetään ryhmänä, pikemminkin kuin saman saman pienen objektin useita esiintymiä. Samankaltaisuus voi perustua muotoon, väriin, varjostukseen tai muuhun laatuun. Tämä periaate on perustana kuvion suunnittelu sekä monia geometrisia ja minimalistisia logo-malleja.
Esimerkiksi tämä kuva näkyy pyöreänä logona erillisten kolmioiden sijasta. Kotkan pohjassa oleva kolmiomainen muoto saa meidät ajattelemaan, että muoto on myös osa kuvaa.
Olet luultavasti myös käyttänyt tätä lakia tietämättään luodessasi muutamia, samankokoiset esillä olevat sisältölaatikot sivustoosi. Jos haluat osoittaa, että tietyt sisältöelementit ovat yhtä tärkeitä tai jakavat samanlaisia tietoja, luo juuri tätä tarkoitusta varten erityinen muoto. Tällä tavoin käyttäjä yhdistää välittömästi kyseisen muodon tietyn alueen tietoon.
Läheisyyslaki
Tämän lain mukaan objektit, jotka ovat lähempänä toisilleen katsotaan kuuluvan samaan ryhmään. Samat neliöt, kun ne tehdään lähekkäin läheisessä, säännöllisessä läheisyydessä, luovat ryhmittelytunteen.
Tätä periaatetta on viime aikoina hyödynnetty laajalti verkossa, erityisesti työskennellessään sisällön silmukoita, esimerkiksi. blogeissa ja verkkokaupoissa.
Voit heti ryhmitellä otsikon, varustellun kuvan, metatiedot ja otteen yhteen ilman rajoja tai taustoja. Saatat pystyä puhdistamaan tarpeettomat linjat ja värit pois suunnittelustasi, jotta se olisi minimalistinen, mutta silti täysin ymmärrettävä.
Avustan Wikipediaa myös, että:
Hyvä muotolaki
Tämä laki tunnetaan myös nimellä Pragnanzin tai hyvän Gestaltin laki, että meillä on tapana ryhmitellä esineitä yhdessä, jos ne ovat muodostavat mallin, joka on yksinkertainen, säännöllinen ja asianmukainen. Mielemme yrittää erottaa monimutkaiset ja havainnollisesti vaikeat muodot moniin yksinkertaisesti ymmärrettävien muotojen ryhmiin; tämä johtaa tiivistämisen merkitys.
Tämä on myös yksi mahdollisista syistä verkkoon perustuva suunnittelu ja tämä teki pöytä- ja kehyspohjaiset (kiitos muotoilun pimeiden aikojen asiat) web-rakenteista niin suosittuja.
Jos pidät tätä periaatetta mielessäsi, luultavasti ei pääse luomaan sivustoa, joka on täynnä monimutkaisia sisältölohkojen muotoja, jotka olisivat yhteydessä toisiin edellä oleviin lakeihin. Vielä voit ryhmittele esineet yhteen mielenkiintoisella tavalla, esimerkiksi. timantti- tai leija-muotoisena, koska niitä pidetään edelleen kunnollisina ja ytimekkäinä.
Väriteoria, havainto ja käyttö
Väri-visio ja värin havaitseminen suurelta osin subjektiivinen perustuen miten katsojien aivot reagoivat värikkäisiin esineisiin tai muotoihin heijastuvat valon aallot. Sääntö on, että eri ihmiset, jopa ilman näköhäiriöitä, näkevät saman kohteen eri värillä (saatat muistaa puvun).
Värin ominaisuudet
Vielä on olemassa kolme värin objektiivista ominaisuutta; värisävy, arvo ja intensiteetti.
Värisävy on värin nimi, joka on merkitty väripyörään tai sateenkaariin. On kuusi (tai kaksitoista, riippuen siitä, kenelle puhut) perusvärejä: punainen, oranssi, keltainen, vihreä, sininen ja violetti.
Keltainen, sininen ja punainen ovat ensisijainen, oranssi, vihreä ja violetti ovat toissijainen sävyjä; myös siellä on tertiäärinen sävyt, jotka ovat kahden ensisijaisen ja toissijaisen sävyn suoria seoksia (esim. keltainen vihreä tai punainen violetti).
Arvo on värin vaaleus tai pimeys, jota kutsutaan nimellä Korkea arvo vaaleat värit tai low-arvo tummat värit.
Intensiteetti viittaa kirkkaus tai himmeys väri; tämä tarkoittaa, että samaa värisävyä ja samaa arvoa sisältävä väri voidaan silti himmentää tai kirkastaa muuttamalla intensiteettiä ja luomalla eri värituloksia.
Jokaisen värin korkein intensiteetti on värisävyssä näkyvä sävy (katso alla), kun taas alin väri on harmaa.
Värikontrastit
Viitaten edellä mainittuihin samankaltaisuuteen perustuviin lakeihin, havaitsijoiden mielet luovat pieniä esineitä, joita he katsovat samanlaisten ja eri ominaisuuksien perusteella - usein värit.
Kun valitsit verkkosivustosi värivalikoiman, varsinkin jos käytät minimalistista lähestymistapaa tai suunnittelet teksti-raskaan sisältöalueen, esim. blogeja tai mainoksia olla tietoinen erilaisista värivalikoista jotka voivat auttaa löytämään oikeat väriarvot parhaan tuloksen saavuttamiseksi.
Johannes Ittenin mukaan on 7 värikontrastia, vaikka mainitsen vain 3.
1. Värisävyn kontrasti
Keltainen, punainen ja sininen täydellä teholla ovat suoria ja kirkkaita kontrasteja. Toissijaiset sävyt tekevät vähemmän terävästä erottelusta, mutta toimivat edelleen, aivan kuten tertiääriset sävyt tekevät, vaikka kumpikaan niistä ei tuota mahtavia tuloksia kuin primäärisävyt.
2. Täydentävä kontrasti
Kaksi väriä on täydentävässä kontrastissa, jos ne sekoittuvat keskenään neutraaliksi harmaaksi. Näitä kutsutaan myös outoja paria. Jos ne ovat vierekkäisiä, ne lisäävät eloisuutta ja voimakkuutta, mutta sekoittuvat keskenään. Jokaisella värillä on yksi ja vain yksi täydentävä; väripyörällä parit ovat diagonaalisesti toisiaan vastapäätä.
3. Vaalea-tumma kontrasti
Jos haluat kokeilla yksiväristä verkkosivustoa, käyttämällä saman värisävyn eri arvoja saattaa tuottaa mahtavia tuloksia. Usein käytetään minimalistisessa web-suunnittelussa, voit myös tuottaa loistavia tuloksia vaalean tumman kontrastin perusteella, jos haluat antaa teeman värivaihtoehtoja käyttäjälle. Tätä kontrastia käytetään myös harmaasävyjen suunnitteluun.
Jos haluat jatkaa jäljellä olevia 4 värikontrastia, löydät ne täältä.
Palettien luominen ja kontrastien tarkistaminen
Teorian tunteminen on suuri, ajatusten tulkinta on toinen asia. Sinun ei kuitenkaan pitäisi huolehtia siitä, että verkko tukee suuresti väritekijäsi tarpeita. On olemassa lukuisia työkaluja, joiden avulla voit luoda mukautettuja värikuvioita, jotka perustuvat värikontrastisääntöihin, esim. Paletton tai Adobe Kuler.
Web-tarkoituksiin kannattaa tarkistaa webAIM-sovelluksessa valitsemaasi kontrastia Jonathan Snookin sivustolla tai ladata Paciello Groupin värikontrastianalysaattorin esimerkki täältä.
johtopäätös
Kun aloitat työskentelyn uuden teeman kanssa tai aloitat nykyisten muokkaamisen, yritä miettiä, millainen on käsitys, jotta voit järjestää sisältöä ja muistaa harkita värisääntöjä, kun annat muotoilulle lopullisen muodon.
Toimittajan huomautus: Tämä vierasviesti on kirjoitettu Hongkiat.comille Marton Fekete. Marton on unkarilainen sivustokehittäjä, joka on hiljattain koukussa WordPressiin. Hän on uudelleensuunnittelun harrastaja ja freelance-sisällön kirjoittaja, joka tykkää pelata RPG: itä vapaa-ajallaan.
