socialgekon.com
  • Hlavná
  • Rise Of Remote
  • Technológie
  • Mobilný Dizajn
  • Proces Návrhu
Dizajn Ux

Skúmanie princípov dizajnu Gestalt

Negatívny priestor bol dlho základom dobrého dizajnu. Prvá vec, ktorá mi napadne, je ponechanie prázdneho miesta okolo prvkov dizajnu. Ale potom existujú dizajny, ktoré využívajú tento biely priestor na odvodenie prvku, ktorý tam vlastne nie je (ako príklad mi okamžite príde na myseľ skrytá šípka medzi E a X v logu FedEx).

negatívny priestor je jedným z kľúčových prvkov a princípov dizajnu

Znaky „E“ a „x“ v logu FedEx vytvárajú šípku v negatívnom priestore medzi nimi.

Ľudský mozog je výnimočne dobrý v tom, ak vypĺňa prázdne miesta v obraze a vytvára celok, ktorý je väčší ako súčet jeho častí. To je dôvod, prečo vidíme tváre vo veciach, ako sú listy stromov alebo praskliny na chodníkoch.



Tento princíp je jednou z najdôležitejších základných myšlienok, ktoré stoja za Gestaltovými princípmi vizuálneho vnímania. Najvplyvnejší počiatočný návrh teórie publikoval Max Wertheimer vo svojich Pravidlách vnímania organizácie z roku 1923, hoci diskusia o fyzickom Gestaltene Wolfganga Köhlera z roku 1920 obsahuje aj veľa vplyvných myšlienok na túto tému.

Bez ohladu na kto prvý navrhol nápady (existujú eseje z roku 1890), Gestaltove princípy sú dôležitým súborom nápadov pre každého návrhár učiť sa a jeho implementácia môže výrazne zlepšiť nielen estetiku dizajnu, ale aj jeho funkčnosť a jednoduché použitie.

Najjednoduchšie povedané, Gestaltova teória je založená na myšlienke, že ľudský mozog sa pokúsi zjednodušiť a usporiadať zložité obrázky alebo návrhy pozostávajúce z mnohých prvkov, nevedomým usporiadaním častí do organizovaného systému, ktorý vytvára skôr celok než iba sériu rôznorodých prvkov. Náš mozog je navrhnutý tak, aby videl štruktúru a vzorce, aby sme lepšie porozumeli prostrediu, v ktorom žijeme.

S Gestaltovou teóriou sa bežne spája šesť jednotlivých princípov: podobnosť , pokračovanie , zatváranie , blízkosť , Obrázok na pozadí , Y symetria a poriadok (tiež nazývaný stručnosť ). S gestaltom sa niekedy spájajú aj niektoré ďalšie novšie princípy, ako napr spoločný osud .

Podobnosť

Je ľudskou prirodzenosťou zoskupovať podobné veci. V gestalte sú podobné položky vizuálne zoskupené, bez ohľadu na ich vzájomnú blízkosť. Môže byť zoskupený podľa farby, tvaru alebo veľkosti. Podobnosť možno použiť na spojenie prvkov, ktoré nemôžu byť blízko pri sebe. druhý do druhého v dizajne.

príklad gestaltového princípu podobnosti

Štvorce sú tu rovnako rovnomerne rozmiestnené a majú rovnakú veľkosť, automaticky ich však zoskupujeme podľa farieb, aj keď neexistuje žiadny rým ani dôvod na ich umiestnenie.

Samozrejme, veci môžete zmeniť, ak chcete, aby vyčnievali z davu. Preto sú tlačidlá s výzvou na akciu často navrhnuté v inej farbe ako na zvyšku stránky, takže vyniknú a upozorňujú návštevníka na požadovanú akciu.

V dizajne UX použitie podobnosti objasňuje návštevníkom, ktoré prvky sú rovnaké. Napríklad v zozname funkcií, ktorý používa opakujúce sa dizajnové prvky (napríklad ikona doplnená 3-4 riadkami textu), by zásada podobnosti uľahčila skenovanie. Naopak, zámena dizajnových prvkov za prvky, ktoré chcete zvýrazniť, ich zvýrazní a dá im väčší význam vo vnímaní návštevníkom.

Dokonca aj tak jednoduché veci, ako je zabezpečenie toho, aby odkazy v rozložení boli formátované rovnako, sú založené na princíp podobnosti spôsobom, akým vaši návštevníci vnímajú organizáciu a štruktúru vášho webu.

Pokračovanie

The zákon kontinuity predpokladá, že ľudské oko bude pri sledovaní čiar sledovať najplynulejšiu cestu bez ohľadu na to, ako boli tieto čiary skutočne nakreslené.

príklad gestaltového princípu kontinuity

Oko má tendenciu chcieť sledovať priamku z jedného konca tohto obrázka na druhý a zakrivenú čiaru zhora nadol, aj keď čiary v strede menia farbu.

Toto pokračovanie môže byť cenným nástrojom, ak je cieľom viesť zrak návštevníka určitým smerom. Budú postupovať po najjednoduchšej ceste na stránke, takže sa uistite, že najdôležitejšie časti, ktoré by mali vidieť, spadajú do tejto cesty.

Pretože oko prirodzene sleduje čiaru, umiestnenie prvkov série na čiaru pritiahne pozornosť od jedného prvku k druhému. Jedným z príkladov sú vodorovné posúvače, ako aj zoznamy súvisiacich produktov na stránkach, ako je Amazon.

Zatvára sa

Uzavretie je to jeden z najlepších princípov Gestalt a ten, ktorého som sa už dotkol na začiatku tohto dielu. Ide o myšlienku, že váš mozog vyplní chýbajúce časti dizajnu alebo obrázka, aby vytvoril jeden celok.

V najjednoduchšej podobe umožňuje princíp zatvárania vášmu oku sledovať na konci niečo ako bodkovanú čiaru. Zložitejšie aplikácie sa však často vyskytujú v logách, ako je napríklad Svetový fond na ochranu prírody. Veľké kúsky obrysu pandy chýbajú, ale váš mozog nemá problémy s vyplnením chýbajúcich častí a videním celého zvieraťa.

logo svetového fondu na ochranu prírody je príkladom gestaltského princípu zatvorenia

Princíp uzáveru gestaltu je nádherne ilustrovaný na logu pandy Svetového fondu na ochranu prírody. Mozog dotvára biele tvary, aj keď nie sú presne definované.

Uzáver sa veľmi často používa v dizajne loga. Medzi ďalšie príklady patrí napríklad americká sieť, NBC, Sun Microsystems alebo dokonca Adobe.

Ďalším veľmi dôležitým príkladom ukončenia práce v UX a Návrh používateľského rozhrania je, keď sa zobrazí čiastočný obrázok, ktorý mizne z obrazovky používateľa, aby mu ukázal, že pri potiahnutí prstom doľava alebo doprava je toho viac, čo nájdete. Bez čiastočného obrázka, to znamená, že ak sa zobrazia iba úplné obrázky, mozog okamžite neinterpretuje, že by ich bolo možné vidieť viac, a preto je pravdepodobnosť, že používateľ bude rolovať, menej pravdepodobná (pretože uzávierka je už zrejmá).

Blízkosť

Blízkosť odkazuje na to, ako blízko sú si prvky navzájom. Najsilnejšie vzťahy v blízkosti sú medzi prekrývajúcimi sa predmetmi, ale jednoduché zoskupenie objektov v jednej oblasti môže mať tiež silný vplyv v blízkosti.

Opak je samozrejme tiež pravdou. Ak vložíte priestor medzi prvky, môžete pridať oddelenie, aj keď sú ich ďalšie vlastnosti rovnaké.

Vezmime si túto skupinu kruhov, napríklad:

gestaltový princíp blízkosti ilustrovaný skupinami kruhov

Jedinou vecou, ​​ktorá odlišuje skupinu vľavo od skupín vpravo, je blízkosť liniek. A napriek tomu váš mozog interpretuje obraz vpravo ako tri odlišné skupiny.

príklad gestaltového princípu blízkosti v akcii ovplyvňujúcej ux

PDF z USPS Napríklad tam, kde UX ubližuje gestaltový princíp blízkosti. Pretože štítky polí sú bližšie k poliam pod nimi, ľudia sa mylne domnievajú, že to je miesto, kde informácie platia pre „c“. y 'd' Informácie sa však majú poskytovať v poliach nad textovými štítkami.

V dizajne UX sa blízkosť najčastejšie používa na zoskupenie určitých vecí používateľmi bez použitia prvkov, ako sú tvrdé hrany. Po zblížení podobných vecí s priestorom medzi každou skupinou divák okamžite rozpozná organizáciu a štruktúru, ktorú chcú vnímať.

Obrázok na pozadí

The princíp postava / zem je to podobné ako záverečný princíp, pretože využíva výhody spôsobu, akým mozog spracováva negatívny priestor. Pravdepodobne ste už videli príklady tohto princípu, ktoré sa vznášali v mémoch sociálnych médií alebo ako súčasť log (ako už bolo spomenuté logo FedEx).

Váš mozog bude rozlišovať medzi objektmi, o ktorých si myslí, že sú v popredí obrázka (postava alebo ohnisko) a pozadím (oblasť, kde figúry spočívajú). Zaujímavé je, keď popredie a pozadie skutočne obsahujú dva rôzne obrázky, napríklad tento:

príklad vzťahu figúra-zem, ktorý vytvára dizajnové prvky a princípy

Niektorí ľudia okamžite uvidia strom a vtáky, keď uvidia logo Pittsburgh Zoo & PPG Aquarium, zatiaľ čo iní uvidia gorilu a leva, ako na seba pozerajú.

skvelý príklad gestaltového princípu figúrkovej základne

Ďalším skvelým príkladom princípu figúra / zem gestalt.

Jednoduchší príklad je možné vidieť na tomto obrázku, ktorý obojstranne vytvára medzi nimi svietnik alebo vázu:

jednoduchý príklad princípu figúra-zem, princíp gestaltového dizajnu

V tejto slávnej ilúzii vyvinutej dánskym psychológom Edgarom Rubinom sa divákovi obvykle predstavia dve interpretácie tvarov: dve tváre alebo váza. Je to ďalší vynikajúci príklad princípu figúra / zem.

Váš mozog bude všeobecne interpretovať najväčšiu plochu obrazu ako zem a najmenšiu ako postavu. Ako je znázornené na obrázku vyššie, môžete vidieť, že svetlejšie a tmavšie farby môžu mať vplyv na to, ako vyzerá postava a ako vyzerá zem.

Princíp číslo / zem môže byť veľmi užitočný, keď produktových dizajnérov chcete zvýrazniť kontaktný bod, najmä keď je aktívny alebo sa používa, napríklad keď sa zobrazí modálne okno a zvyšok webu ustúpi do pozadia, alebo keď kliknete na vyhľadávací panel a zvýši sa kontrast medzi ním a zvyšok stránky.

Symetria a poriadok

Zákon symetrie a poriadku je tiež známy ako stručnosť , nemecké slovo pre „dobrú postavu“. Tento princíp hovorí, že váš mozog bude vnímať nejednoznačné tvary najjednoduchším možným spôsobom. Napríklad monochromatická verzia olympijského loga vyzerá skôr ako séria prekrývajúcich sa kruhov, než ako skupina zakrivených čiar.

Ďalší z princípov návrhu Gestalt, princíp Pragnanz, je znázornený logom olympiády

Tu je ďalší dobrý príklad princípu gestaltového dizajnu “ stručnosť „:

komplexný príklad pragnanzovho princípu, ďalší gestaltský princíp

Váš mozog bude interpretovať obraz vľavo ako obdĺžnik, kruh a trojuholník, aj keď sú obrysy každého z nich neúplné, pretože majú jednoduchšie tvary ako celkový obraz.

Spoločný osud

Zatiaľ čo spoločný osud Nebol pôvodne zahrnutý do teórie gestaltu, odvtedy sa pridáva. V dizajne UX nemožno prehliadnuť jeho užitočnosť. Tento princíp hovorí, že ľudia budú zoskupovať veci, ktoré smerujú alebo sa pohybujú rovnakým smerom.

V prírode to vidíme na veciach, ako sú kŕdle vtákov alebo kŕdle rýb. Skladajú sa zo súboru jednotlivých prvkov, ale pretože sa zjavne pohybujú ako jeden celok, náš mozog ich zoskupí a považuje za jediný stimul.

stádo vtákov ilustruje princíp spoločného osudu

Kŕdeľ vtákov sa považuje za jednu jednotku, keď letí rovnakým smerom, a preto má spoločný cieľ. (podľa Martin Adams v Unsplash )

To je v UX veľmi užitočné, pretože v modernom dizajne prevládajú animované efekty. Upozorňujeme, že aby sa tento princíp mohol využívať, položky sa v skutočnosti nemusia pohybovať, musia však dať Tlač pohybu.

Princípy Gestalt v dizajne UX

Rovnako ako v prípade iných psychologických princípov, aj naučenie sa začleniť Gestaltove princípy vizuálneho vnímania do vašich dizajnérskych prác môže výrazne zlepšiť užívateľskú skúsenosť. Pochopenie fungovania ľudského mozgu a následné využitie prirodzených tendencií človeka vytvára pružnejšiu interakciu, vďaka ktorej sa používateľ na webovej stránke bude cítiť pohodlne, aj keď je to jeho prvá návšteva.

Princípy Gestalt sú pomerne ľahko zabudovateľné do takmer každého dizajnu a môžu rýchlo povýšiť dizajn, ktorý sa javí ako náhodný alebo ako boj o pozornosť používateľa, na ten, ktorý ponúka plynulú a prirodzenú interakciu, ktorá vedie používateľov k akcii, po ktorej túžia.

Dizajnové pracovné postupy pre vývojárov: poskytovanie lepších UX / UI v čase a forme

Životný Štýl

Dizajnové pracovné postupy pre vývojárov: poskytovanie lepších UX / UI v čase a forme
Ako si založiť firemný účet na Instagrame

Ako si založiť firemný účet na Instagrame

Uverejnenie

Populárne Príspevky
iOS 9 Betas a WatchOS 2 pre vývojárov
iOS 9 Betas a WatchOS 2 pre vývojárov
Preexponovanie vs. podexponovanie: Ako správne exponovať fotografie z iPhonu
Preexponovanie vs. podexponovanie: Ako správne exponovať fotografie z iPhonu
Argentínska vývojárka Gabriela Mancini získala štipendium Third ApeeScape
Argentínska vývojárka Gabriela Mancini získala štipendium Third ApeeScape
Prihlásenie jedným kliknutím pomocou Blockchainu: Výukový program MetaMask
Prihlásenie jedným kliknutím pomocou Blockchainu: Výukový program MetaMask
Think Business - Ako zvýšiť hodnotu vášho návrhára
Think Business - Ako zvýšiť hodnotu vášho návrhára
 
Conquer String Search pomocou Aho-Corasickovho algoritmu
Conquer String Search pomocou Aho-Corasickovho algoritmu
10 najlepších kruhových svetiel na selfie pre iPhone a ako ich používať
10 najlepších kruhových svetiel na selfie pre iPhone a ako ich používať
Nepretržité nasadzovanie a kontrola verzií pomocou Bitbucket
Nepretržité nasadzovanie a kontrola verzií pomocou Bitbucket
Ako posunúť fotografiu jedla na iPhone na vyššiu úroveň
Ako posunúť fotografiu jedla na iPhone na vyššiu úroveň
Ako zostaviť robota na analýzu sentimentu e-mailov: Výukový program NLP
Ako zostaviť robota na analýzu sentimentu e-mailov: Výukový program NLP
Kategórie
Webové Klientske RozhranieInováciaInžiniersky ManažmentRast TržiebDizajn UxBack-EndBudúcnosť PráceNástroje A Výukové ProgramyStreľbaInvestori A Financovanie

© 2023 | Všetky Práva Vyhradené

socialgekon.com