Visuaalisen suunnittelun peruskehys

Visuaalinen suunnittelu osaamisalueena on käynyt läpi useita vaiheita. Alan ammattilaisille juuri artefakti veti monet meistä rooliin. Kokeneille suunnittelijoille se on huomaavaisen tuotetyön fyysinen ilmaus. Vaikka sen merkitys on kiistanalainen, näkökohdat eivät ole toisiaan poissulkevia. Visuaalinen suunnittelu on monimutkaista. Sitä tulisi ymmärtää leveyden, monimutkaisuuden ja joustavuuden vuoksi.

Tarvitset hyvän silmän visuaaliseen suunnitteluun.

Visuaalinen suunnittelu yhdistetään maun käsitteeseen - kykyyn "tietää" mikä on hyvää tai ei. Se on piirre, joka seuraa useimpia suunnittelijoita perhejuhlissa, kun heidän odotetaan koristavan jonkun olohuonetta tai ampumaan perhekuvaa.

Makua pidetään yleisesti dispoziciona - kykynä. Hyvät visuaaliset taidot johtavat seurauksena tämän linjan ylittämiseen, mikä on seurausta joko 'hyvästä silmästä' tai vuosien käytännöstä.

Keskustelu siitä, onko lahjakkuus todellinen vai ei, on suurempi keskustelu. Totta on kuitenkin se, että visuaalisen suunnittelun työkalupakin osat voivat olla objektiivisia. Tämän viitekehyksen tarkoituksena on luokitella nämä näkökohdat kolmeen ulottuvuuteen, jotta voimme parantaa näköhahmojamme ja luoda kieli puhuaksemme siitä paremmin.

Joten miten voimme määritellä visuaalisen suunnittelun uudelleen?

Hyvä muotoilu välittää tarkalleen mitä suunnittelija suunnitteli. Katsomme, kuinka kritisoimme visuaalista työtä, jotta voimme lähestyä parempaa visuaalista suunnittelua. Emme kysy "näyttääkö hyvältä?" Vertaamme käyttäjän tulkintaa käyttöliittymästä siihen, mitä oli tarkoitus. Kysymme, miten työ liittyy tuotteen ja sen käyttäjien tärkeimpiin tuloksiin. Sanomme, että rajapinnat näyttävät täynnä tai vieraita.

Voimme tiivistää, että visuaalinen suunnittelu tekee seuraavan:

  1. Viestii ja järjestää tärkeää ja monimutkaista tietoa.
  2. Kannustaa suunniteltua käyttäytymistä ja devalvoi muita.
  3. Ylläpitää luettavuutta ja perehtyneisyyttä.

Siksi voimme yhdistää nämä tavoitteet kolmeen kysymykseen, joita voimme kysyä arvioitaessa visuaalista työtä.

  1. Onko siitä hyötyä? Tarjoaako malli käyttäjälle arvoa tai hyödyllisyyttä?
  2. Onko selvä? Kannustaako suunnittelu suunniteltua käyttäytymistä? Seuraako se järkevää kertomusta?
  3. Onko se miellyttävää? Tuntuuko visuaalinen teos kotoisin tuotteesta, jossa se työskentelee? Ovatko elementit tuttuja? Tuntuuko se kiillotetulta?

1. Onko siitä hyötyä?

Tuotteet käyttävät visuaalisia esityksiä tiedon tai toiminnan välittämiseen. Ovenkahvan koukku tarjoaa hinaajan tai vetovoiman. Kaukosäätimen akun säilytysharjat antavat vetäytyä.

Myös digitaalisilla rajapinnoilla on etuja. Itse asiassa aloitimme samanlaisilla fyysisillä saatavuuksilla, käyttämällä ankaria varjoja ja kiiltoa painikkeissa ja ikonografiaa, jotka näyttivät samanlaisilta fyysisiltä esineiltä. Ajan myötä viistot katosivat ja napit tulivat tasaisiksi. Ne kehittyivät uudeksi edullisten perheiden ryhmäksi, joka näytti erilaiselta ulkonäöltään, mutta jolla oli samanlainen hyödyllisyys.

Suunnittelu hyödyllisyyskartat-toiminnolle lomakkeelle. Ensin tarkastellaan heuristiikkaa, joka parantaa sitä, kuinka nopeasti muistamme, mitä jokin tekee, vain katsomalla sitä.

Tässä esimerkissä tässä on yleisiä etuja digitaalisissa käyttöliittymissä. Teksti välittää kulutustietoja. Painikkeet välittävät käyttäjien suorittamia toimia. Navigointi kertoo kuinka käyttäjät voivat liikkua sovelluksen läpi. Viimeinkin, sinulla voi olla varaa myös monimutkaisille visuaalisille ilmaisuille. Näyttelijä on henkilön esitys, joka on yhteinen kaikissa tuotteissa, joita käytämme päivittäin.

Vaikka saatavuudet parantavat odotuksia, se vie sinut vain osittain. Rakeisella tasolla on yksityiskohtia, jotka kuvaavat käyttöliittymääsi paremmin.

  • Jos painike suorittaa tietyn toiminnon, sinun on valittava kieli, joka kuvaa toimintaa paremmin.
  • Jos tekstimerkillä on yksilöivä tila (eli lukematon viesti), voit erottaa sen värin tai painon avulla.
Tässä esimerkissä Lisää ostoskoriin ja Osta nyt -käyttäjät antavat käyttäjien edetä ostoputken läpi. Kieli merkitsee kuitenkin kahta erilaista tulosta. Lisää ostoskoriin antaa käyttäjille mahdollisuuden tehdä päätöksiä myöhemmin ja ostaa useita tuotteita samanaikaisesti kuten vaatekaupasta. Osta nyt -sovelluksen avulla käyttäjät voivat viimeistellä oston kuten ostaessasi lentolipun.

2. Onko se selvää?

Microsoft Word 2010 -työkalurivi

10 vuotta sitten työkalut, kuten Microsoft Word ja Adobe Photoshop, tarjosivat tuotteilleen hyvät hinnat. Heillä oli selkeät painikkeet, etiketit ja ikonografia. Ne mahtuivat erilaisiin käyttötapoihin, joissa oli erilaisia ​​ominaisuuksia. Joitakin ominaisuuksia ei tuskin käytetty, mutta toisia käytettiin koko ajan.

Nyt visuaaliset mallit ovat pelkistäviä ja arvostettuja. Ne antavat ihmisille ongelmien ja liiketoimintatavoitteiden valtuuttaa tietyt toimet ja tiedot. Ne kartoittavat komponentit intuitiivisiksi henkisiksi malleiksi, mutta rohkaisevat myös tuotteelle hyödyllisiä mielenterveysmalleja.

Sen ytimessä selkeys kudostaa mahdollisuudet narratiiviksi. Kertomusten avulla voit ymmärtää selkeämmin käyttöliittymän kulkua ja tuotteen tarkoitusta. Jotkut yleisimmistä ovat peräisin gestaltpsykologiasta.

  1. Esittely: Käytä kovempia visuaalisia hoitoja, jotta komponentit tuntevat olevansa tärkeämpiä ja kevyempiä hoitoja niille, jotka ovat vähemmän.
  2. Läheisyys: Laita lähempänä toisiinsa liittyvää sisältöä.
  3. Samankaltaisuus: Pidä yhtäläisyyksiä komponenttien välillä, joilla on samanlainen käyttäytyminen.
  4. Sulkeminen: Sulje komponentit, jotka liittyvät toisiinsa.
  5. Jatkuvuus: Sijoita sisältö lineaarisesti (esim. Syötteeseen), jotta näytetään samankaltaisuus useiden komponenttien välillä.
Tämä on esimerkki prominenssista. Se vie painikkeen peruskomponentin, mutta käyttää sitten painavaa taustatäyttöä verrattuna vaaleaseen ääriviivaan. Se molemmat kiinnittää huomion siihen, mitä käyttäjä todennäköisesti tekisi ja mitä tuote haluaa käyttäjän tekevän - suorittaa tapahtuma.

3. Onko se miellyttävää?

Hyödylliset komponentit, jotka on ryhmitelty selkeästi, välittävät toiminnon ja mielipiteen siitä, mitä käyttäjän pitäisi tehdä. Aivomme käsittelevät tätä tietoa kaikissa tapauksissa. Se hakee samanlaisia ​​esimerkkejä aiemmista rajapinnoista, ja etsimme malleja ja niitä rikkovia - kumpikin aiheuttaa aivoillemme ylimääräistä energiaa prosessoitavaksi. Liian monet näistä hetkistä ilmenee turhautuneena tai hämmennyksenä. Näemme nämä ongelmat myös tosielämässä - kun kasvoissamme on pieni vika tai kun hiukset ovat paikoillaan. Vaikka käyttöliittymässä emme voi erikseen tunnistaa eroa 24pt: n ja 25pt: n fontin välillä, voimme havaita sen. Emme voi havaita sitä tarkalleen, mutta aivomme tietävät, että joku tuntuu heikolta.

Suunnitellaksesi miellyttäviä visuaalisia kokemuksia, meidän on asetettava pelkistävät ja merkitykselliset säännöt siitä, mikä on erilainen ja mikä on samanlaista, jotta luodaan yksinkertaisia, tunnistettavia ja johdonmukaisia ​​malleja.

Kuinka voimme näyttää eron?

Psykologiassa Just Noticeable Difference (JND) on muutoksen määrä, jotta ero on havaittavissa. Raskaamman painon havaitsemiselle tai huomaamiselle, kun väri on eri sävy, on JND-arvo. Vaikka voimme luoda asteikkokoon muutoksia kokoon ja väriin, jotka ovat hiukan havaittavissa, haluamme silti korostaa erottelua liioittelematta sitä.

Visuaalisten erottimien tulee olla vaatimattomia ja merkityksellisiä. Tarvitsemmeko todella toista kirjasinta vähemmän tärkeän sisällön osoittamiseksi? Luultavasti ei. Onko meidän käytettävä sekä pyöreää että neliömäistä profiilikuvaa koko tuotteessa? Luultavasti ei. Liian monien visuaalisten erottimien kanssa visuaalisia vihjeitä on vaikeampi havaita ja määritellä merkitys.

Tämä on esimerkki tekstikäsittelyjen ja värien pelkistävästä järjestelystä. Jokaisen askelkoon tulisi olla erillinen ja ainutlaatuinen, ja sillä tulisi olla tietty merkitys.

Kuinka voimme osoittaa samankaltaisuuden?

Kun kirjoitat irralliselle paperille, voit kirjoittaa helposti seuraavalle riville edes etsimättä. Rivit käyttävät tasaista välilyöntiä vähentääksesi pyrkimyksiä löytää seuraava rivi ja luoda visuaalinen rytmi. Digitaaliset tuotteet tekevät saman asian. Ne luovat odotuksen toistamalla visuaalisia elementtejä ja organisaatioita, kuten sijoittamalla profiilikuvan sisältötyyppien vasempaan yläkulmaan.

Samankaltaisuuden yleisesti voidaan katsoa johtuvan siitä, että suunnittelijat käyttävät samanlaisia ​​hoitomuotoja yksinkertaisissa muodoissa, kuten kahdella eri otsikkokoolla osioille ja alaosastoille. He voivat luoda samat odotetut käytökset monimutkaisille muodoille kuin ihmiset ja yritykset.

Jopa rakeisella tasolla, se voi myös olla yhtä yksinkertaista kuin aina käyttää punaista, kun on virhe, tai käyttää johdonmukaista työkaluvihjeiden ja opetustekstin käsittelyä. Se voi myös käyttää johdonmukaisia ​​etäisyyssääntöjä elementtien välillä.

Yllä on esimerkki visuaalisesta hoidosta, joka käyttää askelkokoa 4pt luomaan marginaaleja ja pehmusteita elementtien väliin. Se estää sinua mielivaltaisuudesta, mutta antaa tuotteellesi myös yhdenmukaisen välilyönnin.

Laittamalla se yhteen

Yksikään periaate ei voi elää ilman muita. Vaikka se ei ole kattava, se ratkaisee visuaalisen suunnittelun suuret ongelmat noviisi. Se torjuu impulssia täyttää negatiivinen tila tarpeettomalla informaatiolla tai luoda uusia visuaalisia paradigmoja ", koska se näyttää siistiltä". Se varoittaa päätöksen ylikuormituksesta antamalla monille toimille sama painoarvo. Se myös rohkaisee huomaavaisuuteen ja johdonmukaisuuteen heksadesimaalien, fonttikokojen ja välien asettamisessa.

Kolmivaiheinen kehys pakottaa sinut kiertämään jokaisen periaatteen läpi ja sukellamaan syvälle. Sen avulla voit tunnistaa, missä visuaalisen suunnittelun osassa olet heikoin, ja antaa muiden kritisoida työsi tarkemmin. Yritämme kaikki parantaa, mutta tarvitsemme vain saman sanaston sen tekemiseen. Joten seuraavan kerran arvioidessasi visuaalista työtä, kysy:

Onko siitä hyötyä? Onko selvä? Onko se miellyttävää?

___

Kehykset eivät määrää, mikä on oikein, vaan luo sanavarasto, joka yhdenmukaistaa käsitteitä, joita me kaikki vielä käytämme, etiketti. Meillä kaikilla on jonkinlainen mielipide siitä, mitä visuaalisen työn merkitys on hyödyllinen, selkeä tai miellyttävä. Siksi, jos et ole eri mieltä, purkaa määritelmäsi pakkaus, aloita keskustelu ja laskekaa. Mitä nopeammin löydämme yhteiset piirteet, sitä helpompaa on totuuksien purkaminen paketoida ja mitä enemmän ihmisiä voimme kouluttaa rakentamaan parempia kokemuksia.

Kiitos Brad Birdsallille hänen ajatuksistaan ​​ja palautteestaan!