O Autorovi

Jon byl vizuální návrhář pro mnoho let, před provedením skok k designu interakce. Má magisterský titul v oboru Interakce Člověk-Počítač od DePaul …Více aboutJon↬

percepční proces nám umožňuje vnímat svět skrze naše smysly zrak, čich, zvuk, chuť a dotek. Zejména náš vizuální systém zpracovává obrovské množství informací ve svém prostředí. Spíše než vnímat prvky samostatně, náš mozek organizuje vzory, objekty a tvary do celých forem, kterým můžeme porozumět.

gestalt seskupení principy vizuálního vnímání popsat tuto organizaci jako soubor principů, které vysvětlují, jak vnímáme a organizovat toto obrovské množství vizuálních podnětů. Principy gestalt-podobnost — blízkost, uzavření, figura, kontinuita a společný osud-jsou oblíbeným nástrojem používaným designéry pro vizuální uspořádání informací. Jako vizuální designér, a nyní návrhář interakcí, tyto zásady pravidelně aplikuji na vytváření vztahů a rozdílů mezi prvky v mých návrzích. Pochopení toho, jak tyto principy fungují a jak je používat ve svých návrzích, vytváří silnější a poutavější práci.

jste připraveni vylepšit své návrhy? Začněme kopáním do podobnosti.

Podobnost

gestalt principu podobnosti říká, že prvky, které jsou podobné jsou vnímány být více příbuzné, než prvky, které jsou odlišné. Podobnost nám pomáhá organizovat objekty podle jejich příbuznosti s jinými objekty ve skupině a může být ovlivněna atributy barvy, velikosti, tvaru a orientace.

použití barvy k přiřazení vztahů

podobnost je zvláště ovlivněna barvou. V níže uvedeném příkladu si všimněte, jak mají barevné tvary silný účinek při přiřazování seskupení nebo relace, i když jsou zahrnuty různé tvary.

použití velikosti pro přiřazení vztahů

velikost je dalším užitečným nástrojem, který můžeme použít při vytváření podobnosti. V níže uvedeném příkladu podobnost ve velikosti způsobuje, že větší tvary vyniknou a vytvoří skupinu, i když všechny tvary jsou stejné.

Použití Tvaru Přiřadit Vztahy

Tvar je užitečné při seskupování podle podobnosti, ale má nejslabší seskupení efekt, když ve srovnání s barvy a velikosti. V příkladu, který je zde vidět, tvar způsobuje, že interpretujeme prvky jako sloupce kruhů a čtverců, na rozdíl od řad střídavých kruhů a čtverců.

pomocí orientace k přiřazení vztahů

orientaci lze také použít ke seskupení podle podobnosti. Otočením některých čtverců v této skupině o 45 stupňů se vytvoří samostatné seskupení, které je vnímáno jako příbuzné. Téměř se zdá, že se pohybují společně podobným směrem ve srovnání s tvary kolem nich. To se vlastně dotýká gestaltova principu společného osudu, principu, do kterého se dostaneme v budoucím článku. Ale neváhejte skočit dopředu a Google to (po přečtení tohoto článku, samozřejmě!). Je to fascinující princip, který se často děje všude kolem vás.

Barvy

Jak již bylo zmíněno, podobnost je zejména ovlivněna barva a může vyřadit další atributy. Příklad podobnosti ve tvaru můžeme například přepsat přidáním barvy. Nyní vnímáme střídavé řady červených a bílých tvarů na rozdíl od sloupců kruhů a čtverců. Zkus to. Zkuste vidět sloupce kruhů a čtverců. Možná, ale teď je to docela těžké, že?

kromě toho může barva přepsat velikost. Když přidáme barvu k příkladu podobnosti ve velikosti, vytvoříme dvě seskupení oddělená od sebe. Nyní vnímáme velké červené čtverce jako jednu skupinu a jeden velký bílý čtverec jako samostatnou, nesouvisející (a osamělou) skupinu.

tyto dva příklady ilustrují, jak silná může být barva při přiřazování vztahů mezi prvky. Zkuste ve své práci použít barvu k rozlišení prvků a budete ohromeni tím, jak silnější jsou vaše seskupení.

Podobnost V Praxi

Když jsme navrhování můžeme použít podobnost zprostředkovat organizace a sdružení tím, že ukazuje, které prvky spolu souvisí, nebo nesouvisí, jeden druhému. Například dvě části zobrazené na níže uvedeném webu salonu jsou seskupeny podle jejich relativních velikostí. Jasně vnímáme dvě oddělené skupiny, s hlavními příběhy vlevo a nejčtenější vpravo. Přestože obě sekce poskytují stejnou funkci-zobrazování článků ke čtení-seskupení podle velikosti přiřadí levému seskupení více význačnosti, což umožňuje Salonu vést pozornost k jejich nejlepším příběhům.

V kontrastu, nedostatek velikosti rozdílů v tomto příkladu z Amazon není přiřadit žádný konkrétní význam některého oddílu. Navzdory tomu je podobnost stále dosažena použitím opakování podobné velikosti a tvaru, což způsobuje, že vnímáme řady položek.

Podobné Barvy Použití

víme, že barva je silným ukazatelem podobnosti, pomáhá organizovat a vytvářet obsah pochopitelné. V tomto příkladu z Cars.com, podobné použití barev nám pomáhá rozlišovat mezi nadpisem, kopií těla a textem odkazu. (Úplné zveřejnění: pracuji na Cars.com jako návrhář interakcí.) Použitím odlišných barev pro každý z těchto prvků očekáváme, že budou fungovat podobně a v případě textu modrého odkazu se budou chovat podobně.

Přiblížení

gestalt principu blízkosti říká, že prvky, které jsou blíže k sobě jsou vnímány být více příbuzné, než prvky, které jsou dál od sebe. Stejně jako u podobnosti nám blízkost pomáhá organizovat objekty podle jejich příbuznosti s jinými objekty. Blízkost je nejsilnějším principem pro indikaci příbuznosti objektů, což nám pomáhá rychleji a efektivněji porozumět a organizovat informace.

příklady kruhů níže ukazují, jak může být blízkost použita, aby nám pomohla vnímat objekty jako příbuzné. Jak zde vidíme, kruhy jsou rozloženy, nevykazují žádný vztah, přičemž každý je vnímán jako samostatný objekt.

když jsou však kruhy vtaženy do těsné blízkosti sebe, je jim přiřazena relace a již nejsou vnímány jako samostatné objekty.

White Space

White space je neocenitelný nástroj pro vytváření blízkosti. Užívání stejné skupiny kruhů a přidání mezery nám pomáhá vnímat věci jinak. Nyní, vlevo, blízkost tvarů způsobuje, že vnímáme obě skupiny jako sloupce, z nichž každá má svou vlastní skupinu. Na pravé straně blízkost tvarů způsobuje, že vnímáme obě skupiny jako řádky, opět každá vlastní skupina. Použijte bílé místo ve svých návrzích k posílení seskupení a k jejich odlišení od ostatních prvků.

síla blízkosti

blízkost je dostatečně silná, aby přemohla ostatní prvky variace. Všimněte si, jak blízkost stále vyhrává, i když jsou přidány další atributy, jako je barva a tvar. Zkuste, jak by mohli, barva a tvar zde nepřemohou blízkost a každé seskupení je stále vnímáno jako samostatný prvek.

Blízkost V Praxi

Když jsme organizační informace v našich vzorů, můžeme použít takových památek, jak vytvořit vztahy mezi prvky k pomoci v pochopení prezentovaných informací. Například seskupením těchto obrázků z Apple Store dohromady v těsné blízkosti přiřadíme vztah k celé skupině. Vnímáme je jako příbuzné a očekáváme, že obsah bude podobný.

Když však odstraníme středový sloupec, najednou vnímáme dvě oddělené skupiny a mezi nimi očekáváme odlišný obsah.

kombinace blízkosti a podobnosti

Seskupení podle blízkosti lze také kombinovat s podobností pro vytvoření silnějších vztahů. Při pohledu na tento příklad z Amazonu, seskupení podle blízkosti a podobnosti ve velikosti způsobuje, že vnímáme dvě samostatná seskupení a přiřazuje větší význam levé skupině.

blízkost a hierarchie

blízkost je vynikající pro organizaci hierarchických prvků. V tomto příkladu z Crate & Barrel jsou volby seskupeny do společných nadpisů, což vytváří vztahy, což usnadňuje skenování a vyhledávání informací.

Když nadpisy jsou odstraněny a možnosti jsou seskupeny bez takových památek, ztratíme vztahy, které byly vytvořeny a to se stává mnohem obtížnější, aby se rychle skenovat a najít informace, které chtěl. Zkuste to sami. Jděte do toho a uvidíte, jak rychle najdete hrnky na kávu v seskupení s nadpisy versus seskupení bez nadpisů. Je trochu těžší na to rychle skočit, že?

Závěr

Pochopení toho, jak používat podobnost a blízkost vliv na vztahy mezi prvky ve vaší práci vám pomůže vytvářet návrhy, které umožní snadnější organizaci a zlepšit použitelnost vaší práce. Použijte podobnost a blízkost k vytvoření vztahů i rozdílů mezi prvky ve vašich návrzích. Experimentujte s využitím bílého prostoru, barvy, velikosti, tvaru a orientace prvků a smíchejte oba principy dohromady, abyste vytvořili velmi silné a poutavé vztahy.

V další části této série, se podíváme na uzavření a obrázek-zemi, a prozkoumat, jak se tyto dva gestalt principy použití pozitivní a negativní prostor k vytvoření jednoduché, ale silné vztahy.

zdroje a dobré čtení

• Gestalt principy na Scholarpedia.
• „zákony organizace v percepčních formách“: Text klíčové knihy Maxe Wertheimera z roku 1923.
• Univerzální Principy Designu Revidované a aktualizované: 125 způsobů jak zvýšit použitelnost, ovlivňují vnímání, zvýšení odvolání, učinit lepší rozhodnutí o návrhu, a učit se prostřednictvím designu, William Lidwell, Kritina Holden, Jill Butler. Rockport Pub, 2010.
• informace vizualizace: vnímání pro Design, Colin Ware. Elsevier, 2012.

• principy návrhu: Vizuální Vnímání A Principy Gestalt
• Spojující A Oddělující Prvky, Prostřednictvím Kontrastu A Podobnosti
• Kompoziční Vyváženost, Symetrie A Asymetrie
• Jak Zlepšit Své E-mailové Workflow S Modulární Design
• Zlepšení Uživatelské Zkušenosti S Real-Time Funkce

(ml, da, og, jb, il)