az emberi agy vezetékes, hogy a szerkezet, a logika, és a minták. Segít megérteni a világot. Az 1920-as években a német pszichológusok egy csoportja elméleteket dolgozott ki arról, hogy az emberek hogyan érzékelik a körülöttük lévő világot, az úgynevezett Gestalt elveket.
például, Mit látsz, amikor megnézed ezt a képet?,
forrás: the Inspired Eye
Ha olyan vagy, mint a legtöbb ember, valószínűleg háromszöget látsz. De a valóságban, minden, ami van három fehér ” pac férfiak.”Azért látjuk a háromszöget, mert az agyunk a kétértelmű vizuális információkat olyanba veszi, aminek van értelme számunkra—valami ismerős, rendezett, szimmetrikus, amit megértünk.
amikor ez a kognitív folyamat beindul, elménk az összes elem egyéni és független összetevőként való megértésétől az egész alak egészének megjelenéséig ugrik., Ennek eredményeként olyan formákat és objektumokat érzékelünk, amelyekben egyik sem jött létre.
a folyamat további illusztrálásához nézze meg az alábbi GIF-et. Az agyad egy kutyát sétál, de ez nem más, mint egy sor mozgó pont.
forrás: Gizmodo
Ezek egyszerű példák, de bemutatják az agyunk gyorsbillentyűinek típusát, hogy mindig gyorsan értelmezzük a világot.
mik a Gestalt alapelvek?,
ezeket a parancsikonokat a vizuális észlelés Gestalt elveinek nevezik, és részletezik, hogy az agyunk alapértelmezés szerint hogyan hoz létre struktúrát. De miért fontos ez a web-és mobiltervezés szempontjából?
miért kell a tervezőknek törődniük a Gestalt elvekkel
A nagy tervezők megértik azt a hatalmas szerepet, amelyet a pszichológia játszik a vizuális érzékelésben. Mi történik, ha valaki szeme megfelel a tervezési alkotásainak? Hogyan reagál az elméjük arra az üzenetre, amelyet a darab megoszt?, – Laura Busche, márka tartalom stratéga Autodesk
Gondolj az idézet egy percig. Amikor az emberek először látják a terveket, hogyan tapasztalják meg őket? Ahhoz, hogy megértsük, mi teszi a felhasználói felület tervezését, meg kell értenünk az emberi észlelés pszichológiáját.
a Gestalt-elvet szabályozó alaptörvény az, hogy hajlamosak vagyunk a tapasztalatainkat rendszeres, rendezett és felismerhető módon megrendelni. Ez az, ami lehetővé teszi számunkra, hogy értelmet teremtsünk egy összetett és kaotikus világban., És ha jól megértjük, hogyan működnek ezek az alapelvek, az háromféleképpen segít.
- segítenek meghatározni, hogy mely tervezési elemek a leghatékonyabbak egy adott helyzetben. Például, mikor kell használni a vizuális hierarchiát, a háttér árnyékolását, a színátmeneteket, valamint a hasonló elemek csoportosítását és a különböző elemek megkülönböztetését.
- ezek a pszichológiai elvek képesek befolyásolni a vizuális érzékelésünket, ami lehetővé teszi a tervezők számára, hogy figyelmünket bizonyos fókuszpontokra irányítsák, hogy konkrét lépéseket tegyünk, viselkedésbeli változást hozzunk létre.,
- végül, a legmagasabb szinten, a Gestalt elvek segítenek olyan termékek tervezésében, amelyek megoldják az ügyfél problémáját, vagy megfelelnek a felhasználó igényeinek oly módon, hogy szép, kellemes, intuitív.
ebben a cikkben hét Gestalt törvényt vagy elvet fogunk megvitatni, amelyek közvetlenül vonatkoznak a modern tervezésre, és megosztunk néhány példát arra, hogyan használják őket az UI designban. Ez nem kimerítő lista, de gyorsan észre fogod venni, hogy sok elv között átfedés van, és hogy mindannyian folyékonyan működnek együtt. Most merüljünk be.,
- Ábra-föld
- Hasonlóság
- Közelség
- Közös régió
- Folytonosság
- Bezárása
- fókuszpont
Elv #1: ábra-föld
A. ábra-föld elv kimondja, hogy az emberek ösztönösen érzékelik a tárgyak, mint sem, hogy az előtérben vagy a háttérben. Vagy kiemelkednek az elején (az ábra), vagy visszahúzódnak a hátba (a talajba).,
forrás: egy Warren
nevű törpe a fenti képen például a szeme azonnal lát egy fehér almát, amely fekete háttéren ül.
ez a meghatározás a legtöbb esetben gyorsan és tudat alatt történik. Az ábra / talaj tudatja velünk, hogy mire kell összpontosítanunk, és mit lehet biztonságosan figyelmen kívül hagyni egy kompozícióban. – Steven Bradley, web designer
amikor az emberek az Ön webhelyét vagy mobilalkalmazását használják, az egyik első dolog, amit minden képernyőn megtesznek, annak meghatározása, hogy melyik a szám, és melyik a föld.,
példák a figure-ground elvre
a Basecamp honlapja egy csomó grafikával, szöveggel, űrlapokkal és egyéb információkkal rendelkezik. Az ábra-föld elv miatt azonnal elmondhatja, hogy a fehér előtérben lévő területekre kell összpontosítania.
az AngelList az alábbi két módon használja az ábra-föld elvet. Először is, az oldal bal oldalán található szöveg és logó egyértelműen a háttérkép tetején található. Másodszor, a jobb oldali menüben található fehér szöveg a fekete háttér tetején áll.,
elv #2: hasonlóság
a hasonlóság elve azt állítja, hogy amikor a dolgok hasonlóak egymáshoz, együtt csoportosítjuk őket. És hajlamosak vagyunk azt hinni, hogy ugyanaz a funkciójuk.
Ezen a képen például két különálló és különálló csoport látható az alakzat alapján: a körök és a négyzetek.
forrás: Creative Beacon
különböző tervezési elemek, mint a szín és a szervezet, hasonló csoportok létrehozására használhatók., Az alábbi képen például, annak ellenére, hogy az összes alak ugyanaz, egyértelmű, hogy minden oszlop különálló csoportot képvisel:
forrás: Andy Rutledge
példák a hasonlóság elvére
GitHub az alábbi oldalon kétféle módon használja a hasonlóság elvét. Először a különböző szakaszok megkülönböztetésére használják. Azonnal meg lehet mondani, hogy a tetején lévő szürke szakasz más célt szolgál, mint a fekete szakasz, amely szintén elkülönül a kék szakasztól.,
másodszor, a kék színt is használják, hogy megkülönböztessék a linkeket a szokásos szövegtől, és közöljék, hogy minden kék szöveg közös funkcióval rendelkezik.
elv #3: közelség
a közelség elve azt állítja, hogy az egymáshoz közel álló dolgok sokkal összefüggőbbek, mint azok a dolgok, amelyek távolabb vannak egymástól.
forrás: Andy Rutledge
,
forrás: Steven Bradley
A tárgyak relatív közelsége még erősebb hatással van a csoportosításra, mint a szín.
példák a közelségi elvre
az egyes képek közelsége és annak megfelelő szövege közli, hogy egymáshoz kapcsolódnak.
és Vice használja, hogy megkülönböztesse a képek, címoldalára, leírások, és egyéb információkat az egyes történetek.,
elv #4: közös régió
a közös régió elve nagymértékben kapcsolódik a közelséghez. Azt állítja, hogy amikor az objektumok ugyanabban a zárt régióban helyezkednek el, úgy érzékeljük őket, hogy csoportosítják őket.
forrás: Smashing magazin
határok vagy más látható akadályok hozzáadása nagyszerű módja annak, hogy érzékelt szétválasztást hozzunk létre az objektumok csoportjai között—még akkor is, ha ugyanolyan közelséggel, alakkal, színnel stb.,
példák a common region elvre
az alábbi Pinterest példában a common region elvet használjuk minden pin—kód elválasztására-beleértve annak fényképét, címét, leírását, közreműködőjét és egyéb részleteit is—a körülötte lévő összes többi csapból. 
használják a Facebook alábbi példa kommunikálni, hogy a megjegyzéseket, szeret, és / vagy kapcsolódó konkrét post—nem pedig a többi hozzászólás környező.,
elv #5: folytonosság
a folytonosság elve kimondja, hogy a vonalon vagy a görbén elrendezett elemeket inkább összefüggőnek tekintik, mint a vonalon vagy a görbén nem szereplő elemeket.
forrás: Smashing Magazine
a fenti képen például az ívelt vonal piros pontjai jobban kapcsolódnak az ívelt vonal fekete pontjaihoz, mint az egyenes vízszintes vonal piros pontjaihoz., Ennek oka az, hogy a szemed természetesen egy vonalat vagy egy görbét követ, így a folytatás erősebb jelet ad a rokonságnak, mint a szín hasonlósága.
példák a folytonosság elvére
az Amazon a folytonosságot használja annak közlésére, hogy az alábbi termékek mindegyike hasonló és egymáshoz kapcsolódik.
Sprig használja, hogy elmagyarázza a háromlépcsős folyamat használni az alkalmazást.
és Credit Karma használja, hogy bemutassa az előnyöket, hogy a szolgáltatások nyújtanak.,
elv #6: Bezárás
a lezárás elve kimondja, hogy amikor a vizuális elemek összetett elrendezését nézzük, hajlamosak vagyunk egyetlen, felismerhető mintát keresni.
más szóval, ha olyan képet lát, amelynek hiányzó részei vannak, az agy kitölti az üres helyeket, és teljes képet készít, így továbbra is felismerheti a mintát.
forrás: Eduard Volianskyi
például, ha megnézzük a fenti képet, akkor valószínűleg egy zebrát lát, annak ellenére, hogy a kép csak fekete formák gyűjteménye., Az elméd kitölti a hiányzó információkat, hogy felismerhető mintát hozzon létre az Ön tapasztalata alapján.
példák a Bezárás elve
a Bezárás elve gyakran használják logo tervez a különböző vállalatok, köztük az IBM, NBC, Zendesk, és finanszírozási kör.
7.alapelv: fókuszpont
a fókuszpont elve kimondja, hogy bármi is áll ki vizuálisan rögzíti és tartsa a először a néző figyelmét.,
forrás: Smashing magazin
amikor a fenti képet nézzük, például az első dolog, amit észreveszünk, a piros négyzet, mert más, mint az összes fekete kör körülötte. Ez az első érdekes pont, amely megragadja a figyelmet, onnan pedig a figyelem a kép más részeire mozog.
példák a fókuszpont elvére
a Twilio a fókuszpont elvét használja, hogy felhívja a szemét a cselekvésre való felhívás gombjára.,
és az alábbi példában az Instacart egyesíti a fókuszpont elvét az ábra-föld elvvel, hogy felhívja a szemét a fehér előtérbe, majd a zöld” üzletek keresése ” gombra.
végső gondolatok
ha megérted, hogyan működik az emberi elme, könnyebb irányítani az emberek figyelmét a megfelelő helyre. Ezen elvek szem előtt tartása segít abban, hogy a felhasználót a termékfejlesztési folyamat középpontjában tartsa., Ha többet szeretne megtudni a vizuális észlelés Gestalt elveiről, javasoljuk, hogy nézze meg az alábbi erőforrásokat.,
bővebben:
- Egyszerűség, Szimmetria, valamint Több: Gestalt-Elmélet, Valamint A Tervezési Alapelvek szült
- Tervezési Elvek: a Vizuális Észlelés, Az Elvek, A Gestalt
- A Tervező Útmutató a Gestalt Elmélet
- Andy Rutledge öt részes sorozat Gestalt érzékelés:
- 1. Rész: Ábra-Föld Kapcsolatok
- 2. Rész: a Hasonlóság
- 3. Rész: Közelség, Egységes Kapcsolatban, pedig Jó Folytatása
- 4. Rész: Közös Sors
- 5. Rész: Bezárása
szeretne többet megtudni?,
Ha meg szeretné tudni, hogy a UserTesting hogyan segíthet megérteni ügyfeleit az on-demand emberi betekintésen keresztül, vegye fel velünk a kapcsolatot itt.