the human brain is wired to see structure, logic, and patterns. Se auttaa meitä ymmärtämään maailmaa. 1920-luvulla ryhmä saksalaisia psykologeja kehitti teorioita siitä, miten ihmiset hahmottavat ympäröivää maailmaa, jota kutsutaan Gestaltin periaatteiksi.
esimerkiksi, mitä näet, kun katsot tätä kuvaa?,
lähde: the Inspired Eye
Jos olet kuin useimmat ihmiset, näet todennäköisesti kolmion. Todellisuudessa on vain kolme valkoista pac-miestä.”Näemme, kolmio, koska aivomme ottaa epäselvä visuaalista tietoa ja järjestää se jotain järkevää meille—jotain tuttua, hallittu, symmetrinen ja että ymmärrämme.
Kun tämä kognitiivinen prosessi käynnistyy, mielemme harppaus hahmottamisessa kaikki elementit, kuten yksilön ja liity komponenttien nähdä koko muoto kuin koko., Ja sen seurauksena havaitsemme muotoja ja esineitä, joissa niitä ei ole luotu.
havainnollistaakseen tätä prosessia, katso alla oleva GIF. Aivosi näkevät koiran kävelevän, mutta se on vain sarja liikkuvia pisteitä.
lähde: Gizmodo
nämä ovat yksinkertaisia esimerkkejä, mutta ne osoittavat, millaisia pikakuvakkeita aivomme tekevät koko ajan tehdäkseen maailmasta nopeasti mielekkään.
mitkä ovat Gestaltin periaatteet?,
nämä pikakuvakkeet tunnetaan Gestaltin näköaistin periaatteina, ja ne kertovat yksityiskohtaisesti, miten aivomme luovat rakenteen oletusarvoisesti. Mutta miksi tämän ymmärtäminen on tärkeää web-ja mobiilisuunnittelun kannalta?
Miksi suunnittelijat tulee huolehtia siitä, Gestalt periaatteet
Suuri suunnittelijat ymmärtävät voimakas rooli, että psykologia on näköhavainnon. Mitä tapahtuu, kun jonkun silmä kohtaa design-luomuksesi? Miten heidän mielensä reagoi siihen viestiin, jota teidän kirjoituksenne jakaa?, – Laura Busche, Autodeskin Brändisisältöstrategi
mieti sitaattia hetki. Kun ihmiset näkevät ensi kertaa suunnitelmasi, miten he kokevat ne? Ymmärtää, mikä tekee UI suunnittelu työtä, sinun täytyy ymmärtää psykologiaa ihmisen käsitys.
gestalttiperiaatetta säätelevä peruslaki on, että meillä on taipumus määrätä kokemuksemme tavalla, joka on säännöllinen, järjestyksellinen ja tunnistettava. Tämä antaa meille mahdollisuuden luoda merkitystä monimutkaisessa ja kaoottisessa maailmassa., Ja se, että sinulla on vankka ymmärrys siitä, miten nämä periaatteet toimivat, auttaa sinua kolmella tavalla.
- ne auttavat sinua määrittämään, mitkä suunnitteluelementit ovat tehokkaimpia tietyssä tilanteessa. Esimerkiksi, milloin käyttää visuaalinen hierarkia, Tausta varjostus, kaltevuudet, ja miten ryhmitellä samanlaisia kohteita ja erottaa erilaisia.
- näillä psykologisilla periaatteilla on voimaa vaikuttaa visuaaliseen havaintoomme, jonka avulla suunnittelijat voivat kohdistaa huomiomme tiettyihin painopisteisiin, saada meidät ryhtymään erityisiin toimiin ja luomaan käyttäytymismuutoksia.,
- ja lopuksi, korkeimmalla tasolla, Gestaltin periaatteet auttavat sinua suunnittelemaan tuotteita, jotka ratkaisevat asiakkaan ongelman tai vastaavat käyttäjän tarpeeseen tavalla, joka on kaunis, miellyttävä ja intuitiivinen käyttää.
tässä artikkelissa keskustelemme seitsemästä Gestaltin laista tai periaatteesta, jotka soveltuvat suoraan moderniin muotoiluun, ja kerromme joitakin esimerkkejä siitä, miten niitä käytetään käyttöliittymäsuunnittelussa. Tämä ei ole tyhjentävä luettelo, mutta voit nopeasti alkaa huomata, että siellä on päällekkäisyyksiä monet periaatteet ja että ne kaikki toimivat yhdessä sulavammin. Nyt sukelletaan.,
- Kuva-maa
- samankaltaisuus
- läheisyys
- yleinen alue
- jatkuvuus
- sulkeminen
- polttopiste
periaate #1: Kuva-maa
kuva-maa-periaatteen mukaan ihmiset vaistomaisesti havaitsevat esineiden olevan joko etualalla tai taustalla. Ne joko erottuvat näkyvästi edessä (kuvassa) tai vetäytyvät taakse (maahan).,
lähde: kääpiö nimeltä Warren
yllä olevassa kuvassa esimerkiksi silmäsi näkee heti mustan taustan päällä istuvan valkoisen omenan.
tämä määritys tapahtuu useimmissa tapauksissa nopeasti ja alitajuisesti. Kuva / maa kertoo, mihin meidän pitäisi keskittyä ja mitä voimme turvallisesti jättää huomiotta koostumuksessa. —Steven Bradley, web-suunnittelija
Kun ihmiset käyttää sivuston tai mobile app, yksi ensimmäisistä asioista, joita he tekevät kunkin näytön on määrittää, mikä on kuva ja mikä on maahan.,
esimerkkejä figure-ground-periaatteesta
Basecampin kotisivulla on nippu grafiikkaa, tekstiä, lomakkeita ja muuta tietoa. Ja figure-ground-periaatteen vuoksi voit heti kertoa, että sinun pitäisi keskittyä valkoisen etualan sisältöön.
AngelList käyttää figure-ground-periaatetta kahdella alla olevalla tavalla. Ensinnäkin sivun vasemmalla puolella oleva teksti ja logo istuvat selvästi taustakuvan päällä. Toiseksi mustan taustan päällä seisoo oikealla olevan valikon valkoinen teksti.,
periaate #2: samankaltaisuus
samankaltaisuuden periaate kertoo, että kun asiat näyttävät olevan samanlaisia keskenään, ryhmitämme ne yhteen. Ja meillä on myös taipumus ajatella, että heillä on sama tehtävä.
esimerkiksi tässä kuvassa vaikuttaa olevan kaksi erillistä ja toisistaan erottuvaa ryhmää muodon perusteella: ympyrät ja neliöt.
lähde: Creative Beacon
erilaisia suunnitteluelementtejä, kuten väriä ja organisaatiota, voidaan käyttää samankaltaisten ryhmien perustamiseen., Alla olevassa kuvassa, esimerkiksi, vaikka kaikki muodot ovat samat, on selvää, että kukin sarake edustaa eri ryhmää:
Lähde: Andy Rutledge
Esimerkkejä samankaltaisuuden periaate
GitHub käyttää samankaltainen periaatteessa kahdella tavalla sivun alla. Ensinnäkin he käyttävät sitä erottamaan eri osiot. Voit heti kertoa, että yläosassa oleva harmaa osa palvelee eri tarkoitusta kuin musta osa, joka on myös erillinen ja erilainen kuin sininen osa.,
Toiseksi, he myös käyttävät sininen väri erottaa linkkejä tavallisen tekstin ja ilmoittaa, että kaikki sininen teksti on yhteinen toiminto.
Periaate #3: läheisyys
läheisyysperiaate todetaan, että asiat, jotka ovat lähellä toisiaan näyttävät olevan enemmän sukua kuin asioita, jotka ovat etäämmällä toisistaan.
lähde: Andy Rutledge
läheisyys on niin voimakas, että se syrjäyttää värin, muodon ja muut tekijät, jotka saattavat erottaa joukon esineitä.,
lähde: Steven Bradley
huomaa yllä olevat kolme mustien ja punaisten pisteiden ryhmää? Kappaleiden suhteellinen läheisyys vaikuttaa ryhmittelyyn vielä voimakkaammin kuin väri.
Esimerkkejä läheisyys-periaatetta
läheisyyden jokaisen kuvan, ja sen vastaava teksti viestii, että he ovat sukua toisilleen.
Ja Vice käyttää sitä erottamaan kuvia, otsikot, kuvaukset ja muut tiedot kunkin sen tarinoita.,
Periaate #4: yhteinen alue
periaatetta yhteinen alue on erittäin liittyvät sijaitsee. Siinä todetaan, että kun esineet sijaitsevat samalla suljetulla alueella, näemme ne ryhmitettyinä yhteen.
lähde: Smashing Magazine
rajojen tai muiden näkyvien esteiden lisääminen on oiva tapa luoda koettu ero esineryhmien välille—vaikka niillä olisi sama läheisyys, muoto, väri jne.,
Esimerkkejä yhteisen alueen periaate
esimerkissä Pinterest alla, yhteisen alueen periaate on, jota käytetään erottamaan kukin pin—mukaan lukien sen kuva, otsikko, kuvaus, tekijä ja muut tiedot—kaikki muut nastat ympärille.
ja sitä käytetään alla olevassa Facebook—esimerkissä viestimään, että Kommentit, tykkäykset ja vuorovaikutukset liittyvät tähän tiettyyn postaukseen-eikä muihin sitä ympäröiviin postauksiin.,
periaate #5: jatkuvuus
jatkuvuusperiaate kertoo, että jonolle tai käyrälle asetettujen elementtien katsotaan olevan enemmän sukua kuin linjan tai käyrän ulkopuolella olevien elementtien.
Lähde: Smashing Magazine
kuva yllä, esimerkiksi punaisia pisteitä kaareva linja tuntuu olevan enemmän sukua mustia pisteitä kaareva viiva kuin punaisia pisteitä suora vaakasuora viiva., Se johtuu siitä, että silmäsi luonnollisesti seuraa linjaa tai käyrää, mikä tekee jatkamisesta voimakkaamman signaalin relatedness kuin samankaltaisuus väri.
Esimerkkejä jatkuvuuden periaate
Amazon käyttää jatkuvuuden kommunikoida, että kunkin tuotteen alla on samanlaisia ja liittyvät toisiinsa.
Sprig käyttää sitä selittääkseen kolmivaiheisen prosessin käyttääkseen sovellustaan.
Ja Luotto Karma käyttää sitä kuvaamaan hyötyjä, että niiden palvelut tarjoavat.,
periaate #6: sulkeminen
sulkemisen periaate kertoo, että kun tarkastelemme visuaalisten elementtien monimutkaista järjestelyä, meillä on taipumus etsiä yhtä, tunnistettavaa mallia.
toisin sanoen, Kun näet kuvan, jossa on puuttuvia osia, aivosi täyttävät aihiot ja tekevät täydellisen kuvan, jotta voit vielä tunnistaa kuvion.
lähde: Eduard Volianskyi
esimerkiksi katsoessasi yllä olevaa kuvaa näet mitä todennäköisimmin seepran, vaikka kuva on vain kokoelma mustia muotoja., Mielesi täyttää puuttuvat tiedot luodakseen tunnistettavan kuvion kokemuksesi perusteella.
esimerkkejä sulkemisperiaatteesta
sulkemisperiaatetta käytetään usein logomalleissa useissa yrityksissä, kuten IBM: ssä, NBC: ssä, Zendeskissä ja Rahoituspiirissä.
periaate #7: fokuspiste
tietokeskusperiaate toteaa, että se, joka erottuu visuaalisesti, vangitsee ja pitää katsojan huomio ensin.,
lähde: Smashing Magazine
kun katsoo yllä olevaa kuvaa, huomaa ensimmäisenä esimerkiksi punaisen neliön, koska se on erilainen kuin kaikki ympärillä olevat mustat ympyrät. Se on ensimmäinen kiinnostava, että tarttuu huomiota, ja huomiota siirtyy muihin osiin kuva.
esimerkkejä polttopisteperiaatteesta
Twilio käyttää polttopisteperiaatetta vetääkseen katseen kohti toimintaa-nappiinsa.,
alla olevassa esimerkissä, Instacart yhdistää keskipiste periaate luku-maahan periaate kiinnittää silmän valkoinen etualalla, ja sitten vihreä ”etsi kaupat” – painiketta.
lopulliset ajatukset
Jos ymmärtää, miten ihmismieli toimii, on helpompi ohjata ihmisten huomio oikeaan paikkaan. Ja pitää näitä periaatteita top-of-mind auttaa sinua pitämään käyttäjän keskellä tuotekehitysprosessia., Jos haluat lisätietoja Gestaltin näköaistin periaatteista, suosittelemme alla olevien resurssien tarkistamista.,
lisää luettavaa:
- yksinkertaisuus, symmetria ja muuta: Gestalt-teoria ja sen synnyttämät suunnitteluperiaatteet
- suunnittelijan opas Gestalt-teoriaan
- Andy Rutledgen viisiosainen sarja Gestalt-hahmotuksesta:
- Osa 1: Figure-Ground Relations
- Osa 2: samankaltaisuus
- Osa 3: läheisyys, yhtenäisyys ja hyvä jatkuvuus
- osa 4: yhteinen kohtalo
- Osa 5: sulkeminen
suunnitteluperiaatteet: näköhavainto ja Gestalt
Haluatko lisätietoja?,
saadaksesi tietoa siitä, miten UserTesting voi auttaa sinua ymmärtämään asiakkaitasi tilatulla inhimillisellä oivalluksella, ota meihin yhteyttä täältä.