Uporaba načina Ljudje proces vizualne informacije v Web Design

Oblikovanje spletnih strani in uporabniških vmesnikov je v zadnjih nekaj letih postalo veliko lažje. Obstaja toliko orodij, ki jih lahko uporabite, zaradi česar je nepotrebno začeti iz nič, ko razvijate uporabniške vmesnike (preglejte našo novo kompilacijo uporabniškega vmesnika). Ampak nisem tukaj, da bi se prepiral o smrti spletnega oblikovanja.

Namesto tega bom poskušal razložiti osnovne, psihološko zasnovane koncepte za množico vizualnih orodij za oblikovanje (od najbolj osnovnih CSS kompleta do najbolj naprednih premium vrst).. Ne boste jih uporabili samo, ampak jih boste tudi razumeli. Prepričan sem, da bo to tudi olajšalo spreminjanje obstoječih z uspehom.

Poglejmo, kako deluje človeški um in telo, ko gre za obdelavo vizualnih informacij in kako se to znanje razlaga v oblikovanju za splet.

Načela zaznavne organizacije

Po Gestalt psihologiji, celota se razlikuje od vsote njenih delov. Sledilci te šole mislijo, da obstaja nekaj načel o tem, kako človeški um združuje predmete. Ne gre samo za teorije, ampak za dejanska praktična dejstva o organiziranju vizualnih skupin.

Spodaj boste našli nekatere zakone in bolj priljubljene in znane uporabe teh načel. Morda boste celo našli nekaj novih idej za vaš naslednji načrt.

Zakon o podobnosti

V prvem načelu je navedeno majhni predmeti, ki so podobni, se dojemajo kot skupina, namesto večkratnikov istega majhnega predmeta. Podobnost lahko temelji na obliki, barvi, senčenju ali kakšni drugi kakovosti. To načelo je podlaga za. \ T oblikovanje vzorca kot tudi veliko geometrijskih in minimalističnih logotipov.

Ta slika na primer prikazuje kot krožno logotip namesto ločenih trikotnikov. Trikotna oblika na dnu orla nas narekuje, da mislimo, da je oblika tudi del podobe.

Verjetno ste uporabili tudi ta zakon nevede, ko ste ustvarili nekaj, enake velikosti vsebovane škatle z vsebino za vaše spletno mesto. Če želite pokazati, da so nekateri elementi vsebine enako pomembni ali da imajo podobne informacije, v ta namen ustvarite posebno obliko. Tako bo vaš uporabnik to obliko takoj povezal z določenim področjem informacij.

Zakon bližine

Po tem zakonu predmeti, ki so bližje drug drugemu iz iste skupine. Isti kvadrati, ki so prikazani drug ob drugem v tesni, redni bližini, ustvarjajo občutek združevanja.

To načelo je v zadnjem času v veliki meri uporabljeno na spletu, zlasti pri delu zank, npr. na blogih in spletnih trgovinah.

Naslov, izbrano sliko, metapodatke in odlomke lahko takoj združite, tudi brez meja ali ozadja. Mogoče boste lahko očistili nepotrebne linije in barve od svojega dizajna, da bo bolj minimalističen, vendar še vedno povsem razumljiv.

Za vaše udobje bom navedel tudi Wikipedijo, ki navaja:

Zakon dobre oblike

Znan tudi kot zakon Pragnanza ali Dobrega Gestalta, ta zakon navaja, da skušamo združiti predmete skupaj, če so oblikujejo preprost, pravilen in urejen vzorec. Naš um skuša ločiti kompleksne in zaznavno težke oblike v veliko skupin preprosto razumljivih oblik; to vodi do pomen jedrnatosti.

To je tudi eden od možnih razlogov za uspeh zasnova, ki temelji na mreži in to je omogočilo tako priljubljeno spletno strukturo, ki temelji na mizah in okvirjih (hvaležnost stvari v temnem obdobju oblikovanja).

Če se držite tega načela v mislih, verjetno ne boste na koncu ustvarili spletnega mesta, polnega zapletenih oblik vsebinskih blokov, ki bi bili povezani z drugimi zakoni zgoraj. Še vedno lahko združite svoje predmete na zanimiv način, npr. v obliki diamanta ali zmaja, saj se še vedno dojemajo kot urejene in jedrnate oblike.

Teorija barv, zaznavanje in uporaba

Barvna vizija in zaznavanje barve je večinoma subjektivno temelji na kako se reagirajo možgani gledalcev na svetlobne valove, ki jih odbijajo pisani predmeti ali oblike. Pravilo je, da različni ljudje, tudi brez kakršnihkoli motenj vida, vidijo isti predmet v drugačni barvi (morda se spomnite obleke).

Lastnosti barv

Še vedno obstajajo tri objektivne lastnosti barve; odtenek, vrednost in intenzivnosti.

Hue je ime barve, ki je označena na barvnem kolesu ali mavrici. Osnovnih odtenkov je šest (ali dvanajst, odvisno od tega, s kom govorite): rdeča, oranžna, rumena, zelena, modra in vijolična.

Rumena, modra in rdeča so primarno, oranžna, zelena in vijolična sekundarno hues; prav tako obstajajo terciarni odtenki, ki so neposredne zmesi dveh primarnih in sekundarnih odtenkov (npr. rumeno zelena ali rdeča vijolična).

Vrednost je svetlost ali temačnost barve, ki se imenuje visoka vrednost za svetle barve ali nizka vrednost za temne barve.

Intenzivnost se nanaša na. \ t svetlost ali dim barve; to pomeni, da se lahko barva z enakim odtenkom in isto vrednostjo še vedno zatemni ali osvetli s spreminjanjem intenzivnosti in ustvarjanjem različnih barvnih izhodov..

Največja intenzivnost vsake barve je odtenek, ki ga kažejo na barvnem kolesu (glej spodaj), najnižja pa je barva siva.

Barvni kontrasti

Sklicujoč se na prej omenjene zakone podobnosti, misli opazovalcev ustvarjajo skupine majhnih predmetov, ki jih vidijo na podlagi podobnih in različnih lastnosti - pogosto barve.

Ko izberete barvno paleto za vašo spletno stran, še posebej, če se odločite za minimalističen pristop ali če načrtujete vsebino, ki je težka za besedilo, npr. blogih ali oglasih zavedajte se različnih barvnih kontrastov ki vam lahko pomagajo najti prave barvne vrednosti za najboljši rezultat.

Glede na Johannes Itten je 7 barvnih kontrastov, čeprav bom omenil samo 3.

1. Kontrast odtenka

Rumena, rdeča in modra s polno intenzivnostjo neposredni in živahni kontrasti. Sekundarni odtenki povzročajo manj ostro razlikovanje, vendar še vedno delujejo, tako kot terciarni odtenki, čeprav niti ne proizvajajo kot odlični rezultati kot pri primarnih odtenkih.

2. Dopolnilni kontrast

Dve barvi sta v komplementarnem kontrastu, če zmešata skupaj, ustvarita nevtralno sivo. Te se imenujejo tudi čudni pari. Če so v bližini, povečajo živost in intenzivnost, medtem ko se med seboj pomešajo. Vsaka barva ima eno in samo eno dopolnilno; na barvnem kolesu so pari diagonalno nasproti drug drugemu.

3. Svetlo-temen kontrast

Če želite eksperimentirati z enobarvnim spletnim mestom, uporabljajo različne vrednosti istega odtenka lahko povzroči izjemne rezultate. Pogosto uporabljeni v minimalističnem spletnem oblikovanju lahko ustvarite odlične rezultate, ki temeljijo na kontrastu svetlo-temno, če želite uporabniku ponuditi možnosti barv teme. Ta kontrast se uporablja tudi za sivinsko oblikovanje.

Če želite nadaljevati s preostalimi 4 barvnimi kontrasti, jih lahko najdete tukaj.

Ustvarjanje palet in preverjanje kontrastov

Poznavanje teorije je veliko, razlaganje vaših idej je druga stvar. Ne bi smeli skrbeti, vendar splet zagotavlja veliko podporo za vaše potrebe barvnega žongliranja. Obstajajo številna orodja, ki vam pomagajo ustvariti barvne vzorce po meri, ki temeljijo na pravilih barvnega kontrasta, npr. Paletton ali Adobe Kuler.

Za spletne namene boste morda želeli preveriti kontraste, ki ste jih izbrali za uporabo na spletnem portalu WebAIM, na spletnem mestu Jonathan Snook ali tukaj prenesite primerek analizatorja barvnega kontrasta skupine The Paciello Group..

Zaključek

Ko začnete delati z novo temo ali začnete spreminjati obstoječe, poskusite razmisliti o načelih zaznavanja, da organizirate svojo vsebino, in ne pozabite upoštevati barvnih pravil, ko vašemu oblikovanju dajete končno obliko in barvo.

Uredniška opomba: Ta objava je napisana za Hongkiat.com Marton Fekete. Marton je madžarski razvijalec spletnih strani, ki je pred kratkim zapleten v WordPress. On je redesign navdušenec in svobodni pisatelj vsebin, ki rad igra RPG v svojem prostem času.