Osnovne tehnike vizualne komunikacije (prvi del)

Transcription

Osnovne tehnike vizualne komunikacije (prvi del)
Osnovne tehnike vizualne
komunikacije
(prvi del)
Franc Novak
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 1/57
vizualni dizajn grafičnih uporabniških vmesnikov
prej:
estetski vidiki forme
urejenost prostora
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 2/57
vizualni dizajn grafičnih uporabniških vmesnikov
prej:
estetski vidiki forme
urejenost prostora
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
splošno,
neodvisno od
ciljne
aplikacije
Slide 3/57
vizualni dizajn grafičnih uporabniških vmesnikov
prej:
estetski vidiki forme
urejenost prostora
sedaj:
splošno,
neodvisno od
ciljne
aplikacije
zakonitosti vizualnega dizajna
ciljna aplikacija
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 4/57
vizualni dizajn grafičnih uporabniških vmesnikov
prej:
estetski vidiki forme
urejenost prostora
sedaj:
zakonitosti vizualnega dizajna
splošno,
neodvisno od
ciljne
aplikacije
konkreten
problem
ciljna aplikacija
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 5/57
uvod
Orodje, ki ga imamo na razpolago, je vizualni jezik.
Sintakso vizualnega jezika tvorijo osnovni elementi: točka, linija, ploskev in
volumen.
Skupaj z atributi: oblika, velikost, barva in tekstura določajo strukturo
vizualnega jezika.
Vizualni jezik ima:
ƒ formalni slovar, ki vsebuje osnovne elemente dizajna,
ƒ vizualno sintakso, ki opisuje način medsebojnega kombiniranja elementov
v okviru danega sistema.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 6/57
primer slabega dizajna
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 7/57
osnovna izhodišča
Kdaj vključiti dizajn v razvoju nekega produkta?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 8/57
vizualni dizajn vmesnika
Osnovne tehnike komunikacijsko
orientiranega grafičnega dizajna
‰ eleganca in enostavnost
‰ sorazmerje, kontrast, dimenzijska
harmonija
‰ organizacija in vizualne strukture
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 9/57
eleganca in enostavnost
Eleganco v dizajnu razpoznamo v primerih, ko gre za rešitev danega
problema na inovativen, uspešen način, ki je hkrati popoln in skrajno
ekonomičen.
Zelo pomembna je enostavnost rešitve.
Enostavnost rešitve dosežemo s ponavljajočim poenostavljanjem.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 10/57
eleganca in enostavnost
Henry C. Beck, 1933
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 11/57
eleganca in enostavnost
London Underground's Victoria Line
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 12/57
eleganca in enostavnost – običajne napake
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 13/57
tehnike za doseganje elegance in enostavnosti
Reduciranje dizajna do njegovega bistva
Napotki:
• določi glavne lastnosti, ki naj jih ima dizajn (tipično krajši spisek
pridevnikov); navedi tudi formalne elemente, kot je na primer ime,
oznaka, barva, tekstura ali slika.
• kritično preglej vsak element dizajna; ali je dizajn možen brez njega? Če
ne znaš odgovoriti, ga izpusti.
• poskusno odstrani element iz dizajna in poglej, kaj se zgodi. Če se dizajn
poruši, ga ohrani. Če ne, pa razmisli, če ne bi morda element izpustil.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 14/57
tehnike za doseganje elegance in enostavnosti
Dva primera:
Logo Victoria and Albert Museum, London
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
dostop za invalide
Slide 15/57
tehnike za doseganje elegance in enostavnosti
Regularnost dizajna
Napotki:
• kjerkoli je možno, uporabljaj regularne geometrijske oblike, umirjene
barve, enostavne obrise.
• če uporabljaš več podobnih elementov (form, oblik), jih po možnosti
naredi enake z vidika velikosti, barve, teksture, debeline linij, orientacije,
poravnanja ali medsebojne razdalje.
• omeji variacije v tipografiji na nekaj velikosti ene ali dveh družin pisav.
• da bi izrabil prednosti regularnosti, izpostavi kritične elemente namenoma
na neregularen način.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 16/57
tehnike za doseganje elegance in enostavnosti
primer :
regularne oblike
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 17/57
tehnike za doseganje elegance in enostavnosti
primer:
poenotenje oblik elementov
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 18/57
tehnike za doseganje elegance in enostavnosti
primer :
omejitev nabora pisav
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 19/57
tehnike za doseganje elegance in enostavnosti
Večkratna funkcionalnost elementov dizajna
Osnovna ideja: poiskati elemente dizajna, ki lahko igrajo večkratno vlogo
Napotki:
• preveri funkcijo, ki jo ima vsak posamezni element dizajna.
• poišči situacije, ko imajo različni elementi enako vlogo.
• preveri, če je možno nadomestiti kak element z drugim (tudi če naredimo
kako manjšo spremembo).
• združi redundantne elemente v enostavno enoto ali pa jih zamenjaj z
neko skupno funkcionalnostjo glede na dano ciljno okolje
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 20/57
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti iz vsakdanjega življenja
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 21/57
tehnike za doseganje elegance in enostavnosti
Primer večkratne funkcionalnosti
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 22/57
razmerje, kontrast, skladnost
ƒ Razmerje predstavlja relativno velikost danega elementa dizajna glede
na ostale elemente celotne kompozicije.
ƒ Kontrast predstavlja opazne razlike znotraj dane vizualne dimenzije (kot
na primer oblika, velikost, barva, tekstura, pozicija).
ƒ Skladnost (dimenzijska harmonija) - tipičen primer: zlati rez.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 23/57
razmerje, kontrast, skladnost
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 24/57
kako ljudje zaznavajo in obdelujejo informacije?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 25/57
kako ljudje zaznavajo in obdelujejo informacije?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 26/57
kako ljudje zaznavajo in obdelujejo informacije?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 27/57
kako ljudje zaznavajo in obdelujejo informacije?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 28/57
kako ljudje zaznavajo in obdelujejo informacije?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 29/57
vizualne spremenljivke
Učinkovit vizualni dizajn upošteva zmožnosti človekovega zaznavanja.
Zanimajo nas osnovna vizualna razlikovanja, ki jih lahko izvaja človeški vid.
Parametri vizualnega razlikovanja so:
• velikost,
• svetlost,
• barvni ton,
• orientacija,
• tekstura,
• oblika,
• pozicija.
Bertin (1983) jih je imenoval “retinalne spremenljivke”, zato ker jih človek
zazna takoj in neposredno ob pogledu na celotno vizualno polje.
Mi jih bomo v nadaljevanju imenovali “vizualne spremenljivke”.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 30/57
vizualne spremenljivke
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 31/57
vizualne spremenljivke
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 32/57
lastnosti vizualnih spremenljivk
asociativnost, disociativnost
ƒ Vizualna spremenljivka je asociativna, če ne vpliva na vidnost ostalih
parametrov elementov, na katerih je uporabljena.
ƒ Vizualna spremenljivka je disociativna, če je vidnost ostalih parametrov
elementov občutno zmanjšana pri nekaterih vrednostih te
spremenljivke.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 33/57
lastnosti vizualnih spremenljivk
asociativnost
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 34/57
lastnosti vizualnih spremenljivk
ali je oblika asociativna?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 35/57
lastnosti vizualnih spremenljivk
oblika
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 36/57
lastnosti vizualnih spremenljivk
oblika je asociativna
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 37/57
lastnosti vizualnih spremenljivk
ali je svetlost asociativna?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 38/57
lastnosti vizualnih spremenljivk
svetlost
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 39/57
lastnosti vizualnih spremenljivk
svetlost ni asociativna
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 40/57
lastnosti vizualnih spremenljivk
ali je velikost asociativna?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 41/57
lastnosti vizualnih spremenljivk
velikost ni asociativna
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 42/57
lastnosti vizualnih spremenljivk
selektivnost
ƒ Vizualna spremenljivka je selektivna, če je možno zaznati vse njene
instance takoj in brez napora.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 43/57
lastnosti vizualnih spremenljivk
selektivnost
oblika
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 44/57
lastnosti vizualnih spremenljivk
Oblika je edina vizualna spremenljivka, ki ni selektivna.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 45/57
lastnosti vizualnih spremenljivk
razvrstitev
ƒ Dana vizualna spremenljivka ima lastnost razvrstitve, če je možno takoj
in brez napora razpoznati zaporedje njenih vrednosti.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 46/57
lastnosti vizualnih spremenljivk
Pozicija, velikost in svetlost imajo lastnost razvrstitve.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 47/57
lastnosti vizualnih spremenljivk
kvantitativno zaznavanje
ƒ Dana vizualna spremenljivka ima lastnost kvantitativnega zaznavanja,
če je možno ugotoviti, za koliko se razlikujeta dve njeni vrednosti.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 48/57
lastnosti vizualnih spremenljivk
Velikost in pozicija imata lastnost kvantitativnega zaznavanja.
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 49/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ Oblika
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 50/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ pozicija
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 51/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ Orientacija
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 52/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ svetlost
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 53/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ tekstura
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 54/57
lastnosti vizualnih spremenljivk
nabor vrednosti vizualnih spremenljivk
ƒ barvni ton
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 55/57
vizualne spremenljivke
asociativna disociativna selektivna razvrstitev kvantno
zaznavanje
velikost
x
x
x
svetlost
x
x
x
x
nabor
10≥
≤10
barvni ton
x
x
10≥
orientacija
x
x
malo
tekstura
x
x
≤10
oblika
x
pozicija
x
∞
x
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
x
x
∞
Slide 56/57
ponovni razmislek
Subtilna (prefinjena) povezava med razmerjem, kontrastom in skladnostjo
je značilnost vsakega skladnega dizajna.
Učinek jasne kompozicije je odvisen od posameznih delov dizajna, kakor
tudi od njihove medsebojne odvisnosti.
Medsebojne odvisnosti delov dizajna, ki delujejo na globalnem nivoju
predstavitve, pa dejansko določamo lokalno s spreminjanjem lastnosti
(atributov) posameznih komponent.
Kako to narediti, da bi dosegli želene učinke?
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 57/57