1. No category

Interakcija človek - računalnik
(Izbira barv)
Franc Novak
Interakcija človek - računalnik (Izbira barv)
Slide 1/66
vsebina
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
uvod
zaznavanje barv
barvni modeli
mešanje barv
barvno kolo
uporaba barv
barvne konotacije
napotki za izbiro barv
Interakcija človek - računalnik (Izbira barv)
Slide 2/66
uvod
Barvni zasloni omogočajo učinkovito uporabo barv za doseganje ciljev, ki si
jih postavimo pri snovanju uporabniškega vmesnika.
Pri tem se pogosto srečujemo z naslednjima osnovnima napakama:
ƒ ozadje je takšno, da privablja večjo pozornost kot sami podatki na zaslonu,
ƒ barve so predozirane.
Barva sama ima določen pomen. Če je predozirana, pride do tega, da skuša
uporabnik interpretirati njen pomen še preden prebere vsebino informacije na
zaslonu.
Interakcija človek - računalnik (Izbira barv)
Slide 3/66
uvod
Interakcija človek - računalnik (Izbira barv)
Slide 4/66
uvod
Preden navedemo napotke za ustrezno uporabo barv si oglejmo
nekaj osnovnih pojmov.
ƒ
ƒ
ƒ
ƒ
zaznavanje barv
barvni modeli
mešanje barv
barvno kolo
Interakcija človek - računalnik (Izbira barv)
Slide 5/66
zaznavanje barv
Barva je način zaznavanja svetlobe v človeškem očesu.
Človeško oko zaznava svetlobo z valovno dolžino od približno 400 nm do
približno 700 nm.
(http://sl.wikipedia.org/wiki/Barva)
Interakcija človek - računalnik (Izbira barv)
Slide 6/66
zaznavanje barv
Človeško oko lahko zazna kakih 10 miljonov barvnih odtenkov.
Oko vsebuje receptorje (paličice in
čepke) občutljive na svetlobo.
ƒ paličice so predvsem receptorji za
nočno zaznavanje.
ƒ obstajajo tri vrste čepkov, ki se
razlikujejo po občutljivosti na barve
(rdeča, modra, zelena)
(http://en.wikipedia.org/wiki/File:Eye-diagram_no_circles_border.svg)
Interakcija človek - računalnik (Izbira barv)
Slide 7/66
zaznavanje barv
Pri zaznavanju barve razlikujemo naslednje fiziološke veličine:
ƒ barvni ton (angl. hue)
ƒ nasičenost (angl. saturation)
ƒ svetlost (angl. value ali lightness)
Interakcija človek - računalnik (Izbira barv)
Slide 8/66
zaznavanje barv
ƒ barvni ton (angl. hue)
ƒ nasičenost (angl. saturation)
ƒ svetlost (angl. value ali lightness)
(http://en.wikipedia.org/wiki/Hue)
Interakcija človek - računalnik (Izbira barv)
Slide 9/66
zaznavanje barv
ƒ barvni odtenek (angl. hue)
ƒ nasičenost (angl. saturation)
ƒ svetlost (angl. value ali lightness)
(http://en.wikipedia.org/wiki/Saturation_%28color_theory%29)
Interakcija človek - računalnik (Izbira barv)
Slide 10/66
zaznavanje barv
ƒ barvni odtenek (angl. hue)
ƒ nasičenost (angl. saturation)
ƒ svetlost (angl. value ali lightness)
(http://en.wikipedia.org/wiki/Lightness_(color))
Interakcija človek - računalnik (Izbira barv)
Slide 11/66
skupni prikaz
barvni ton
Interakcija človek - računalnik (Izbira barv)
nasičenost
svetlost
Slide 12/66
barvni modeli
Za uporabo barv v računalniški grafiki in tiskarstvu je potrebno barve ustrezno
specificirati.
Obstajajo različni barvni modeli, v okviru katerih specificiramo barve, kot na
primer:
barvni model RGB
Interakcija človek - računalnik (Izbira barv)
barvni model CMY
Slide 13/66
barvni modeli
Barvni model RGB.
ƒ Primarne barve tega modela so Red, Green, Blue.
ƒ Čepki v človeškem očesu so občutljivi na te tri barve.
Interakcija človek - računalnik (Izbira barv)
Slide 14/66
barvni modeli
Barvni model RGB.
ƒ barvni ekran televizorja ali računalniškega monitorja
ƒ osnovni princip:
Interakcija človek - računalnik (Izbira barv)
Slide 15/66
barvni modeli
Barvni model RGB.
ƒ barvni ekran televizorja ali računalniškega monitorja
ƒ osnovni princip:
Interakcija človek - računalnik (Izbira barv)
Slide 16/66
barvni modeli
Prikaz mešanja rdeče in zelene barve:
Interakcija človek - računalnik (Izbira barv)
Slide 17/66
barvni modeli
Barvni model RGB.
ƒ Primarne barve tega modela so
Red, Green, Blue.
ƒ Čepki v človeškem očesu so
občutljivi na te tri barve.
ƒ S seštevanjem svetlobe teh
barv v različnih razmerjih
dobimo ostale barvne odtenke
tega modela.
ƒ To je seštevalni model.
ƒ Ta model je primeren za
računalniško grafiko (barvni
prikazovalnik s katodno cevjo).
Interakcija človek - računalnik (Izbira barv)
Slide 18/66
barvni modeli
Barvni model CMY.
ƒ Primarne barve tega modela so Cyan, Magenta, Yellow.
ƒ Ta model je primeren za ponazarjanje objektov, ki niso svetlobni izvori.
barvni tisk
Interakcija človek - računalnik (Izbira barv)
Slide 19/66
barvni modeli
Barvni model CMY.
ƒ pigmenti selektivno absorbirajo svetlobo
ƒ odštevalni model.
Interakcija človek - računalnik (Izbira barv)
Slide 20/66
barvni modeli
Odštevalni barvni model
bel premaz odbija vso svetlobo
Interakcija človek - računalnik (Izbira barv)
Slide 21/66
barvni modeli
Odštevalni barvni model
rdeč pigment odbija rdečo barvo, absorbira vse ostale
Interakcija človek - računalnik (Izbira barv)
Slide 22/66
barvni modeli
Odštevalni barvni model
če dodamo beli barvi rdeč in zelen pigment, dobimo črno barvo
(to je res le v teoriji, v praksi dobimo nekakšno umazano temno barvo –
ker pigmenti ne absorbirajo vse svetlobe)
Interakcija človek - računalnik (Izbira barv)
Slide 23/66
barvni modeli
Odštevalni barvni model
črno barvo naj bi dobili tudi če mešamo rdeč in moder pigment, ali pa če
mešamo zelen in moder pigment
Interakcija človek - računalnik (Izbira barv)
Slide 24/66
barvni modeli
Barvni model CMY.
cyan:
kombinacija zelene
in modre barve,
magenta:
kombinacija rdeče in
modre,
rumena:
kombinacija rdeče in
zelene,
absorbira rdečo
absorbira zeleno
absorbira modro
Interakcija človek - računalnik (Izbira barv)
Slide 25/66
barvni modeli
Barvni model CMY.
če mešamo pigmenta cyan in rumen
Interakcija človek - računalnik (Izbira barv)
Slide 26/66
barvni modeli
Barvni model CMY.
če mešamo pigmenta cyan in magenta
Interakcija človek - računalnik (Izbira barv)
Slide 27/66
barvni modeli
Barvni model CMY.
ƒ Primarne barve tega modela so
Cyan, Magenta, Yellow.
ƒ Ta model je primeren za
ponazarjanje objektov, ki niso
svetlobni izvori.
ƒ Ta model je primeren za
tiskarstvo.
ƒ Rdeč barvni pigment, na
primer, odbija rdečo barvno
svetlobo in absorbira zeleno in
modro.
ƒ To je odštevalni model.
Interakcija človek - računalnik (Izbira barv)
Slide 28/66
mešanje barv
Osnovne pigmentne barve so rdeča, modra in rumena.
Interakcija človek - računalnik (Izbira barv)
Slide 29/66
mešanje barv
Z mešanjem dveh osnovnih barv dobimo sekundarno barvo.
Interakcija človek - računalnik (Izbira barv)
Slide 30/66
mešanje barv
Z mešanjem dveh osnovnih barv dobimo sekundarno barvo.
Z nadaljnjim mešanjem barv dobimo terciarne barve, itd.
Rezultat mešanja barv lahko ponazorimo z barvnim kolesom.
Barvno kolo lahko uporabimo za izbiro harmoničnih, človeku prijaznih
kombinacij barv.
Interakcija človek - računalnik (Izbira barv)
Slide 31/66
pigmentno barvno kolo
Barvno kolo je vizuelna predstavitev barv razvrščenih glede na njihovo
barvno odvisnost.
Pigmentno barvno kolo konstruiramo na naslednji način:
osnovne barve
(povzeto po: http://www.worqx.com/color/color_wheel.htm)
Interakcija človek - računalnik (Izbira barv)
Slide 32/66
pigmentno barvno kolo
Barvno kolo je vizuelna predstavitev barv razvrščenih glede na njihovo
barvno odvisnost.
Pigmentno barvno kolo konstruiramo na naslednji način:
osnovne barve
sekundarne barve
(povzeto po: http://www.worqx.com/color/color_wheel.htm)
Interakcija človek - računalnik (Izbira barv)
Slide 33/66
pigmentno barvno kolo
Barvno kolo je vizuelna predstavitev barv razvrščenih glede na njihovo
barvno odvisnost.
Pigmentno barvno kolo konstruiramo na naslednji način:
osnovne barve
sekundarne barve
terciarne barve
(povzeto po: http://www.worqx.com/color/color_wheel.htm)
Interakcija človek - računalnik (Izbira barv)
Slide 34/66
pigmentno barvno kolo
Barvno kolo je vizuelna predstavitev barv razvrščenih glede na njihovo
barvno odvisnost.
Pigmentno barvno kolo konstruiramo na naslednji način:
osnovne barve
sekundarne barve
terciarne barve
barvno kolo
(povzeto po: http://www.worqx.com/color/color_wheel.htm)
Interakcija človek - računalnik (Izbira barv)
Slide 35/66
barvna kolesa
pigmentno barvno kolo
procesno barvno kolo
(povzeto po: Edith Andreson Feisner: Color Studies, Laurence King Publ. 2006
Interakcija človek - računalnik (Izbira barv)
Slide 36/66
barvna kolesa
svetlobno barvno kolo
(povzeto po: Edith Andreson Feisner: Color Studies, Laurence King Publ. 2006
Interakcija človek - računalnik (Izbira barv)
Slide 37/66
barvna kolesa
Munsellovo barvno kolo
(povzeto po: Edith Andreson Feisner: Color Studies, Laurence King Publ. 2006
Interakcija človek - računalnik (Izbira barv)
Slide 38/66
barvna kolesa
vizualno barvno kolo
(povzeto po: Edith Andreson Feisner: Color Studies, Laurence King Publ. 2006
Interakcija človek - računalnik (Izbira barv)
Slide 39/66
uporaba barv
Z barvami lahko oblikujemo informacijo na zaslonu tako, da
ƒ povezujemo elemente v grupe,
ƒ ločujemo med seboj različne grupe,
ƒ povezujemo informacijo, ki je sicer razporejena na različnih mestih na
zaslonu,
ƒ poudarjamo tisto informacijo, za katero želimo opozoriti uporabnika (na
primer: razna opozorila).
Interakcija človek - računalnik (Izbira barv)
Slide 40/66
uporaba barv
Interakcija človek - računalnik (Izbira barv)
Slide 41/66
uporaba barv
Barva v vlogi vizualne kode
ƒ nakazuje, kakšne vrste informacija je prikazana,
ƒ omogoča hiter pregled zaslona in iskanje informacije, ki jo iščemo,
ƒ mora biti splošno uveljavljena in se mora dobro razlikovati od ostalih
uporabljenih barv.
Interakcija človek - računalnik (Izbira barv)
Slide 42/66
uporaba barv
Barvno kodiranje:
Interakcija človek - računalnik (Izbira barv)
Slide 43/66
uporaba barv
Nekateri problemi povezani z uporabo barv:
ƒ napačno vzbujanje pozornosti
• V primerih, ko so objekti na zaslonu sicer enake barve, vendar med
seboj nimajo logične povezave, lahko uporabnik naredi napačne
zaključke.
• Objekti enake barve lahko spodbudijo uporabnika, da skuša najti
vzročne povezave, ki v bistvu ne obstajajo.
ƒ težave z razpoznavanjem barv
• 8% moških in 0.4% žensk ima neke vrste “barvno slepoto”
• protanopija – težave z razpoznavanjem rdeče barve
• deuteronopija - težave z razpoznavanjem zelene barve
• tritanopija - težave z razpoznavanjem modre barve
Interakcija človek - računalnik (Izbira barv)
Slide 44/66
barvne konotacije
barva
pozitiven pomen
negativen pomen
rdeča
aktivna
atraktivna
močna
agresivna
alarmantna
modra
harmonična
racionalna
čutna
misteriozna
agresivna
hladna
melanholična
zelena
blizu naravi
optimistična
osvežujoča
nežna
zavidljiva
ljubosumna
neizkušena
rumena
vesela
slikovita
živahna
mladostna
bojazljiva
pretirana
površna
jalova
Interakcija človek - računalnik (Izbira barv)
Slide 45/66
barvne konotacije
Barve imajo v različnih socialnih okoljih in kulturah različne pomene.
Tako na primer pomeni modra barva v ameriški družbi:
‰ finančnim menažerjem – kvaliteto in zanesljivost,
‰ bolničarjem – smrt,
‰ filmski javnosti – pornografijo.
Medkulturne razlike: rdeča barva na primer pomeni
‰ v Združenih državah – nevarnost,
‰ v Egiptu – smrt,
‰ v Indiji – življenje.
Interakcija človek - računalnik (Izbira barv)
Slide 46/66
napotki za izbiro barv
Ko izbiramo barve na zaslonu, moramo upoštevati:
ƒ
ƒ
ƒ
ƒ
ƒ
ƒ
vizualni sistem človeka,
možne probleme, ki bi jih povzročila uporaba barv,
okolje, v katerem bo uporabljen zaslon,
naloge uporabnika,
kako bodo barve uporabljene,
na kakšni aparaturni opremi (zaslon) bodo barve predstavljene.
Primarni cilj uporabe barv je posredovanje informacije, ki je predstavljena na
zaslonu, uporabniku.
Interakcija človek - računalnik (Izbira barv)
Slide 47/66
napotki za izbiro barv
Če uporabnik išče
določeno vrsto
informacije na
zaslonu
Interakcija človek - računalnik (Izbira barv)
Uporabimo
različne barvne tone
za
različne dele informacije
na zaslonu
Slide 48/66
Interakcija človek - računalnik (Izbira barv)
Slide 49/66
napotki za izbiro barv
Če se uporabnik
odloča na podlagi
statusa določene
vrste informacije na
zaslonu
Interakcija človek - računalnik (Izbira barv)
Uporabimo
barvno kodiranje
z ustrezno izbiro
barve
Slide 50/66
Interakcija človek - računalnik (Izbira barv)
Slide 51/66
napotki za izbiro barv
Če gre za posredovanje
informacije
v določenem vrstnem redu
Interakcija človek - računalnik (Izbira barv)
Uporabimo
barvni ton ali svetlost
za
ponazoritev vrstnega reda
Slide 52/66
napotki za izbiro barv
Interakcija človek - računalnik (Izbira barv)
Slide 53/66
napotki za izbiro barv
.
Če gre za posredovanje
informacije na nabito polnem
zaslonu
Interakcija človek - računalnik (Izbira barv)
Uporabimo
barvni ton
za grupiranje sorodne informacije
Slide 54/66
uporaba barv
Interakcija človek - računalnik (Izbira barv)
Slide 55/66
napotki za izbiro barv
ƒ Nikoli ne uporabljaj barv kot edinega sredstva za identificiranje elementov
na zaslonu, ker imajo uporabniki lahko barvno slepoto.
ƒ Pomagaj si z uporabo prostorskega formatiranja (grupiranja s praznim
prostorom, grupiranja z robovi), poudarjanja teksta in/ali dodatnih sporočil.
Interakcija človek - računalnik (Izbira barv)
Slide 56/66
napotki za izbiro barv
Uvodni napotki za učinkovito izbiro barv
ƒ najprej izdelaj monokromatsko verzijo uporabniškega vmesnika,
ƒ nato dodajaj barve le po potrebi,
ƒ ne uporabljaj barv, če je možno uporabiti druge načine identifikacije
objektov.
Interakcija človek - računalnik (Izbira barv)
Slide 57/66
napotki za izbiro barv
Človeško oko je sposobno razlikovati le med omejenim naborom barv.
Če se zahteva pomnenje barv in njihovo absolutno razpoznavanje (barva
mora biti pravilno razpoznana pri čemer v vidnem polju ni prisotnih drugih
barv):
ƒ izberemo največ štiri ali pet barv, ki so med seboj precej oddaljene v
barvnem kolesu.
ƒ dobra izbira so rdeča, rumena, zelena, modra in rjava.
ƒ dve dobri nasprotni barvi sta rdeča/zelena in rumena/modra.
ƒ če je treba uporabiti več kot pet barv, moramo njihov pomen pojasniti v
dodatni legendi.
Interakcija človek - računalnik (Izbira barv)
Slide 58/66
napotki za izbiro barv
Če uporabljamo primerjalno razlikovanje barv (barva mora biti pravilno
razpoznana ob prisotnosti ostalih barv v vidnem polju):
ƒ izberemo največ šest ali sedem barv, ki so med seboj precej oddaljene v
barvnem kolesu.
ƒ poleg prej omenjenih barv so primerne tudi oranžna, rumenozelena, cyan,
vijolična in magenta.
Interakcija človek - računalnik (Izbira barv)
Slide 59/66
napotki za izbiro barv
Barvna harmonija
ƒ Harmonične barve so tiste, ki si sledijo brez velikih kontrastov. Barvno
harmonijo najlažje dosežemo z monokromatsko paleto.
ƒ Harmonične barvne kombinacije v večbarvnem okolju je malo težje izbrati.
• izogibajmo se komplementarnim barvam v Munsellovem barvnem
kolesu.
• dobre izbire so ena barva in dve na njeni nasprotni strani, ali pa tri
barve na ekvidistančnih mestih barvnega kolesa.
Interakcija človek - računalnik (Izbira barv)
Slide 60/66
napotki za izbiro barv
Poudarek
ƒ Za povečanje pozornosti ali poudarjanje elementov na zaslonu uporabimo
svetlejše barve.
ƒ Za poudarjanje razlik uporabimo kontrastne barve (rdeča in zelena, modra
in rumena).
ƒ Za izražanje podobnosti izberemo podobne barve (oranžna in rumena,
modra in vijolična).
Interakcija človek - računalnik (Izbira barv)
Slide 61/66
napotki za izbiro barv
Splošni pomeni barv
ƒ Za označevanje nujnih akcij uporabimo tople barve (rdeča, oranžna,
rumena).
ƒ Za označevanje informacije o statusu uporabimo hladne barve (zelena,
modra, vijolična).
ƒ Uporabljaj že uveljavljene pomene. Nekaj primerov:
• rdeča - stop, ogenj, vroče, nevarnost
• rumena – previdno!, počasi!, test
• modra – mrzlo, voda, mir, nebo, nevtralnost
• siva, bela - nevtralnost
Interakcija človek - računalnik (Izbira barv)
Slide 62/66
napotki za izbiro barv
ƒ Če je treba razvrstiti barve, je najprimernejša razvrstitev glede na njihovo
spektralno pozicijo: Red, Orange, Yellow, Green, Blue, Indigo, Violet.
ƒ Razvrstitev si lahko zapomnimo kot “ROY G. BIV” oziroma s stavkom
"Richard Of York Gave Battle In Vain"
Interakcija človek - računalnik (Izbira barv)
Slide 63/66
napotki za izbiro barv
Ospredje (angl. foreground)
ƒ Izbiraj barve, ki so zelo kontrastne od barve ozadja.
ƒ Za tekst izberi:
• črno barvo na svetli podlagi (sivo-beli, krem, svetlo sivi)
• nenasičene barve ali barve s sredine spektra (bela, rumena, zelena)
na temni podlagi,
• toplejše, bolj aktivne barve.
ƒ Barve ospredja naj imajo enako nasičenost in svetlost.
ƒ Poudarjanje elementov se izvede s svetlejšo barvo ospredja.
ƒ Nepoudarjanje elementov se izvede s temnejšo barvo ospredja. Pri tem je
potrebno paziti, da ostaja zadovoljiv kontrast od barve ozadja.
ƒ Izogibati se je treba istočasnemu poudarjanju in nepoudarjanju.
Interakcija človek - računalnik (Izbira barv)
Slide 64/66
napotki za izbiro barv
Ozadje (angl. background)
ƒ Uporabi barve, ki ne konkurirajo barvam ospredja.
ƒ Barve ozadja naj imajo majhno svetlost (na primer neintenzivna bela ali
neintenzivna siva).
ƒ Barve ozadja naj bodo nenasičene.
ƒ Za temna ozadja uporabi hladne, temne barve. Modra barva je še posebno
primerna zaradi zmanjšane senzibilnosti v centralnem delu in povečane
senzibilnosti v perifernem delu človeškega očesa.
Interakcija človek - računalnik (Izbira barv)
Slide 65/66
napotki za izbiro barv
Pomembni napotki:
ƒ
ƒ
ƒ
ƒ
Najprej izberemo barvo ozadja, šele nato pa barve ospredja.
Istočasno naj bodo na zaslonu prisotne največ štiri barve.
V velikem številu primerov zadostujejo že tri barve ali pa celo samo dve.
V primeru snovanja spletnih strani izberi takšne barve, da jih bo možno
enostavno reproducirati v črno – beli tehniki.
Interakcija človek - računalnik (Izbira barv)
Slide 66/66