Click here to load reader

Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · PDF fileInterakcija človek - računalnik (Osnovne tehnike vizualne

  • View
    224

  • Download
    9

Embed Size (px)

Text of Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne...

  • Slide 1Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    Osnovne tehnike vizualne komunikacije

    Franc Novak

  • Slide 2Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    vizualni dizajn grafinih uporabnikih vmesnikov

    prej: estetski vidiki forme

    urejenost prostora

  • Slide 3Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    vizualni dizajn grafinih uporabnikih vmesnikov

    prej: estetski vidiki forme splono,

    neodvisno odciljne

    urejenost prostora aplikacije

  • Slide 4Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    vizualni dizajn grafinih uporabnikih vmesnikov

    prej: estetski vidiki forme splono,

    neodvisno odciljne

    urejenost prostora aplikacije

    sedaj: zakonitosti vizualnega dizajna

    ciljna aplikacija

  • Slide 5Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    vizualni dizajn grafinih uporabnikih vmesnikov

    prej: estetski vidiki forme splono,

    neodvisno odciljne

    urejenost prostora aplikacije

    sedaj: zakonitosti vizualnega dizajna konkretenproblem

    ciljna aplikacija

  • Slide 6Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    uvod

    Orodje, ki ga imamo na razpolago, je vizualni jezik.

    Sintakso vizualnega jezika tvorijo osnovni elementi: toka, linija, ploskev involumen.

    Skupaj z atributi: oblika, velikost, barva in tekstura doloajo strukturovizualnega jezika.

    Vizualni jezik ima: formalni slovar, ki vsebuje osnovne elemente dizajna,vizualno sintakso, ki opisuje nain medsebojnega kombiniranja elementovv okviru danega sistema.

  • Slide 7Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    primer slabega dizajna

  • Slide 8Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    osnovna izhodia

    Kdaj vkljuiti dizajn v razvoju nekega produkta?

  • Slide 9Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    vizualni dizajn vmesnika

    Osnovne tehnike komunikacijskoorientiranega grafinega dizajna

    eleganca in enostavnostsorazmerje, kontrast, dimenzijska harmonijaorganizacija in vizualne strukture

  • Slide 10Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    eleganca in enostavnost

    Eleganco v dizajnu razpoznamo v primerih, ko gre za reitev danegaproblema na inovativen, uspeen nain, ki je hkrati popoln in skrajnoekonomien.

    Zelo pomembna je enostavnost reitve.

    Enostavnost reitve doseemo s ponavljajoim poenostavljanjem.

  • Slide 11Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    eleganca in enostavnost

    Henry C. Beck, 1933

  • Slide 12Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    eleganca in enostavnost

    London Underground's Victoria Line

  • Slide 13Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    eleganca in enostavnost obiajne napake

  • Slide 14Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Reduciranje dizajna do njegovega bistva

    Napotki: doloi glavne lastnosti, ki naj jih ima dizajn (tipino kraji spisek

    pridevnikov); navedi tudi formalne elemente, kot je na primer ime, oznaka, barva, tekstura ali slika.

    kritino preglej vsak element dizajna; ali je dizajn moen brez njega? e ne zna odgovoriti, ga izpusti.

    poskusno odstrani element iz dizajna in poglej, kaj se zgodi. e se dizajn porui, ga ohrani. e ne, pa razmisli, e ne bi morda element izpustil.

  • Slide 15Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Dva primera:

    Logo Victoria and Albert Museum, London dostop za invalide

  • Slide 16Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Regularnost dizajna

    Napotki: kjerkoli je mono, uporabljaj regularne geometrijske oblike, umirjene

    barve, enostavne obrise. e uporablja ve podobnih elementov (form, oblik), jih po monosti

    naredi enake z vidika velikosti, barve, teksture, debeline linij, orientacije, poravnanja ali medsebojne razdalje.

    omeji variacije v tipografiji na nekaj velikosti ene ali dveh druin pisav. da bi izrabil prednosti regularnosti, izpostavi kritine elemente namenoma

    na neregularen nain.

  • Slide 17Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    primer :

    regularne oblike

  • Slide 18Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    primer:

    poenotenje oblik elementov

  • Slide 19Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    primer :

    omejitev nabora pisav

  • Slide 20Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Vekratna funkcionalnost elementov dizajna

    Osnovna ideja: poiskati elemente dizajna, ki lahko igrajo vekratno vlogo

    Napotki: preveri funkcijo, ki jo ima vsak posamezni element dizajna. poii situacije, ko imajo razlini elementi enako vlogo. preveri, e je mono nadomestiti kak element z drugim (tudi e naredimo

    kako manjo spremembo). zdrui redundantne elemente v enostavno enoto ali pa jih zamenjaj z

    neko skupno funkcionalnostjo glede na dano ciljno okolje

  • Slide 21Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Primer vekratne funkcionalnosti iz vsakdanjega ivljenja

  • Slide 22Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    tehnike za doseganje elegance in enostavnosti

    Primer vekratne funkcionalnosti

  • Slide 23Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    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) - tipien primer: zlati rez.

  • Slide 24Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    razmerje, kontrast, skladnost

  • Slide 25Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna Jasnost (angl. clarity)

    Predstavljeni elementi so organizirani na smiseln, razumljiv in razpoznaven nain.

    Faktorji, ki vplivajo na jasnost dizajna so:konsistentnost dizajna,vizualno privlana kompozicija,logina razporeditev,predstavitev primerne koliine informacij,grupiranje in poravnava elementov zaslona.

  • Slide 26Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Jasnost (angl. clarity)

  • Slide 27Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Harmonija

    Zlati rez

  • Slide 28Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Zlati rez

  • Slide 29Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Zlati rez

  • Slide 30Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    koren od 2

  • Slide 31Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Simetrija:

  • Slide 32Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Simetrija:

    Doloi linije, ki bodo igrale vlogo osi simetrije. Obiajno se v tem koraku odloamo tudi med vertikalno in horizontalno simetrijo.Za lovekovo zaznavanje je bolj uinkovita vertikalna simetrija.Odloi se o vsebini, ki bo podana na obeh straneh osi simetrije.Prepriaj se, da je os simetrije dejansko na sredini zaslona ali okna, kjer bo podana dana vsebina.

  • Slide 33Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Simetrija:

  • Slide 34Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    uravnoteenost

  • Slide 35Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    uravnoteenost

  • Slide 36Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    uravnoteenost

  • Slide 37Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Optina prilagoditev:

  • Slide 38Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Optina prilagoditev:

  • Slide 39Interakcija lovek - raunalnik (Osnovne tehnike vizualne komunikacije)

    principi dobrega dizajna

    Optina prilagodite

Search related