lidský mozek je zapojen, aby viděl strukturu, logiku a vzory. Pomáhá nám to dávat smysl světu. V roce 1920 skupina německých psychologové vyvinuli teorie kolem, jak lidé vnímají svět kolem sebe, nazývá Gestalt principy.
například, co vidíte, když se podíváte na tento obrázek?,
zdroj: inspirované oko
Pokud jste jako většina lidí, pravděpodobně uvidíte trojúhelník. Ale ve skutečnosti jsou tam jen tři bílí “ pac muži.“Vidíme trojúhelník, protože naše mozky berou nejednoznačné vizuální informace a organizují je do něčeho, co nám dává smysl—něčeho známého, řádného, symetrického a kterému rozumíme.
když tento kognitivní proces začíná, naše mysl skočí z pochopení všech prvků jako jednotlivých a nesouvisejících složek, aby viděla celý tvar jako celek., A v důsledku toho vnímáme formy a objekty, kde nebyly vytvořeny žádné.
Chcete-li tento proces dále ilustrovat, podívejte se na GIF níže. Váš mozek vidí psa, který chodí, ale není to nic jiného než řada pohyblivých teček.
Zdroj: Gizmodo
jedná se o jednoduché příklady, ale ukazují typy zkratek naše mozky, aby všechny čas, aby rychle vytvořit smysl světa.
jaké jsou principy Gestalt?,
tyto zkratky jsou známé jako Gestalt principy vizuálního vnímání a podrobně popisují, jak naše mozky ve výchozím nastavení vytvářejí strukturu. Ale proč je pochopení tohoto důležitého pro web a mobilní design?
proč by se návrháři měli starat o principy Gestalt
velcí návrháři chápou silnou roli, kterou psychologie hraje ve vizuálním vnímání. Co se stane, když něčí oko splňuje vaše designové výtvory? Jak jejich mysl reaguje na zprávu, kterou váš kus sdílí?, – Laura Busche, brand Content stratég na Autodesk
Přemýšlejte o této nabídce na minutu. Když lidé poprvé vidí vaše návrhy, jak je prožívají? Chcete-li pochopit, co dělá UI design práce, musíte pochopit psychologii lidského vnímání.
základní zákon, který upravuje Gestalt principu je, že máme tendenci, aby naše zkušenosti způsobem, který je pravidelný, řádný, a rozpoznatelné. To nám umožňuje vytvořit význam ve složitém a chaotickém světě., A mít solidní pochopení toho, jak tyto principy fungují, vám pomůže třemi způsoby.
- pomohou vám určit, které konstrukční prvky jsou v dané situaci nejúčinnější. Například, kdy použít vizuální hierarchii, stínování pozadí, přechody a jak seskupit podobné položky a rozlišovat různé.
- tyto psychologické principy mají moc ovlivňovat naše vizuální vnímání, což umožňuje návrhářům nasměrovat naši pozornost na konkrétní body zaměření, přimět nás, abychom podnikli konkrétní kroky a vytvořili změnu chování.,
- A konečně na nejvyšší úrovni, Gestalt principy pomoci navrhnout produkty, které vyřešit problém zákazníka nebo splnit potřebu uživatele způsobem, který je krásné, příjemné a intuitivní.
V tomto článku, budeme diskutovat o sedm Gestalt zákony nebo principy, které se přímo vztahují k moderní design, a sdílet některé příklady toho, jak jsou použity v designu uživatelského ROZHRANÍ. Toto není vyčerpávající seznam, ale rychle si všimnete, že mezi mnoha principy existuje překrytí a že všichni pracují plynule. Teď se pojďme ponořit.,
- obrázek-země
- podobnost
- blízkost
- společný region
- kontinuita
- uzavření
- ohniskový bod
princip # 1: obrázek-země
princip obrázku-země uvádí, že lidé instinktivně vnímají objekty jako buď v popředí, nebo na pozadí. Buď vystupují prominentně vpředu (obrázek) nebo ustupují do zad (země).,
zdroj: trpaslík jménem Warren
na obrázku výše například vaše oko okamžitě vidí bílé jablko sedící na černém pozadí.
toto určení se ve většině případů objeví rychle a podvědomě. Obrázek / Země nám umožňuje vědět, na co bychom se měli zaměřit a co můžeme bezpečně ignorovat ve složení. – Steven Bradley, web designer
Když lidé používají váš web nebo mobilní aplikaci, jednou z prvních věcí, které dělají na každé obrazovce, je určit, která je postava a která je zemí.,
příklady principu obrázku-země
domovská stránka Basecamp má spoustu grafiky, textu, formulářů a dalších informací. A kvůli principu postavy-země můžete okamžitě říct, že byste se měli zaměřit na obsah v bílých oblastech popředí.
AngelList používá princip figure-ground dvěma způsoby níže. Za prvé, text a logo na levé straně stránky jasně sedí v horní části obrázku na pozadí. Za druhé, bílý text v nabídce vpravo stojí na černém pozadí.,
Princip #2: podobnost
princip podobnosti říká, že když věci se zdají být vzájemně podobné, jsme skupina je dohromady. A také máme tendenci si myslet, že mají stejnou funkci.
například na tomto obrázku se zdá, že existují dvě samostatné a odlišné skupiny založené na tvaru: kruhy a čtverce.
zdroj: Creative Beacon
různé konstrukční prvky, jako je barva a organizace, lze použít k vytvoření podobných skupin., Na obrázku níže, například, i když všechny tvary jsou stejné, je jasné, že každý sloupec reprezentuje odlišnou skupinu:
Zdroj: Andy Rutledge
Příklady podobnosti princip
GitHub využívá podobnost v zásadě dva způsoby, jak na stránce níže. Nejprve jej používají k rozlišení různých sekcí. Můžete okamžitě zjistit, že šedá část nahoře slouží jinému účelu než černá část, která je také oddělena od modré části a odlišná od modré části.,
za druhé také používají modrou barvu k odlišení odkazů od běžného textu a ke komunikaci, že veškerý modrý text sdílí společnou funkci.
princip # 3: blízkost
princip blízkosti uvádí, že věci, které jsou blízko sebe, se zdají být více příbuzné než věci, které jsou od sebe vzdáleny.
zdroj: Andy Rutledge
blízkost je tak silná, že překonává podobnost barvy, tvaru a dalších faktorů, které by mohly rozlišovat skupinu objektů.,
zdroj: Steven Bradley
Všimněte si tří skupin černých a červených teček výše? Relativní blízkost objektů má ještě silnější vliv na seskupení než barva.
příklady principu proximity
blízkost každého obrázku a jeho odpovídajícího textu komunikují, že jsou vzájemně propojeny.
a Vice jej používá k rozlišení mezi obrázky, titulky, popisy a dalšími informacemi pro každý z jeho příběhů.,
Princip #4: časté regionu
princip společného regionu je vysoce týkající se památek. Uvádí, že když jsou objekty umístěny ve stejné uzavřené oblasti, vnímáme je jako seskupené.
zdroj: Smashing Magazine
přidání hranic nebo jiných viditelných bariér je skvělý způsob, jak vytvořit vnímané oddělení mezi skupinami objektů—i když mají stejnou blízkost, tvar, barvu atd.,
příklady principu společného regionu
v příkladu z Pinterestu níže se princip společného regionu používá k oddělení každého pin-včetně jeho fotografie, názvu, popisu, přispěvatele a dalších podrobností—od všech ostatních kolíků kolem něj.
A používá se na Facebook níže uvedený příklad sdělit, že komentáře, líbí, a interakce jsou spojeny s touto konkrétní příspěvek a ne další příspěvky, které ji obklopují.,
Princip #5: kontinuita
princip kontinuity uvádí, že prvky, které jsou uspořádány na přímce nebo křivce jsou vnímány být více příbuzné, než prvky, které nejsou na čáru nebo křivku.
zdroj: Smashing Magazine
na obrázku výše se například zdá, že červené tečky v zakřivené čáře více souvisejí s černými tečkami na zakřivené čáře než s červenými tečkami na rovné vodorovné čáře., Je to proto, že vaše oko přirozeně sleduje čáru nebo křivku, takže pokračování je silnějším signálem příbuznosti než podobnost barvy.
příklady principu kontinuity
Amazon používá kontinuitu ke komunikaci, že každý z níže uvedených produktů je podobný a vzájemně se souvisí.
snítka ji používá k vysvětlení třístupňového procesu používání jejich aplikace.
a Credit Karma ji používá k ilustraci výhod, které jejich služby poskytují.,
princip # 6: uzavření
princip uzavření uvádí, že když se podíváme na složité uspořádání vizuálních prvků, máme tendenci hledat jediný rozpoznatelný vzor.
jinými slovy, když uvidíte obrázek, který má chybějící části, váš mozek vyplní prázdná místa a vytvoří úplný obrázek, abyste mohli vzor stále rozpoznat.
zdroj: Eduard Volianskyi
například, když se podíváte na obrázek nad vámi, s největší pravděpodobností uvidíte zebru, i když obraz je jen sbírka černých tvarů., Vaše mysl vyplní chybějící informace a vytvoří rozpoznatelný vzor na základě vašich zkušeností.
Příklady uzavření princip
uzavření princip je často používán v logo designs na řadu společností, včetně IBM, NBC, Zendesk, a Funding Circle.
Princip #7: ústředním bodem
ústředním bodem princip říká, že cokoliv, co vyniká vizuálně bude zachytit a držet pozornost diváka jako první.,
zdroj: Smashing Magazine
když se podíváte na obrázek výše, například první věc, kterou si všimnete, je červený čtverec, protože je jiný než všechny černé kruhy kolem něj. Je to první bod zájmu, který upoutá vaši pozornost, a odtud se vaše pozornost přesune do jiných částí obrazu.
příklady principu ohniskového bodu
Twilio používá princip ohniskového bodu k tomu, aby upoutal vaše oko na tlačítko výzva k akci.,
A v níže uvedeném příkladu, Instacart kombinuje ústředním bodem zásadě s postavou-země zásadě čerpat vaše oči na bílé popředí, a pak na zelenou „najít obchody“ tlačítko.
závěrečné myšlenky
pokud pochopíte, jak funguje lidská mysl, je snazší nasměrovat pozornost lidí na správné místo. A udržování těchto zásad špičkovou mysl vám pomůže udržet uživatele ve středu procesu vývoje produktu., Pokud se chcete dozvědět více o principech Gestalt vizuálního vnímání, doporučujeme zkontrolovat níže uvedené zdroje.,
další čtení:
- jednoduchost, symetrie a další: Gestaltova teorie a konstrukční principy, které zrodily principy designu
- : vizuální vnímání a principy Gestalt
- průvodce návrháře k teorii Gestalt
- pětidílná série Andyho Rutledge o vnímání Gestaltu:
- část 1: vztahy mezi postavami
- část 2: podobnost
- část 3: blízkost, jednotná propojenost a dobré pokračování
- část 4: společný osud
- Část 5: uzavření
chcete se dozvědět více?,
Chcete-li se dozvědět, jak vám UserTesting může pomoci porozumět vašim zákazníkům prostřednictvím human insight na vyžádání, kontaktujte nás zde.