Zlepšit Své Návrhy S Principy Uzavření A Obrázek-Zem (2. Část)

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↬

přemýšleli jste někdy, jak prvky se spojily k vytvoření úspěšné vzory? Není náhodou, že přesvědčivý design prostě funguje., Většina těchto návrhů má společné použití principů seskupení gestalt k organizaci informací, které nám pomáhají porozumět vztahům a rozdílům mezi prvky. Jako designéři můžeme tyto principy využít k vytvoření vlastní poutavé a úspěšné práce.

začněme Gestaltovým principem uzavření.

uzavření

podle univerzálních principů designu tento princip uvádí, že máme tendenci vnímat soubor jednotlivých prvků jako jediný, rozpoznatelný vzor, spíše než více, jednotlivé části., Použití uzávěru účinně snižuje složitost snížením prvků na nejmenší možné části potřebné k dokončení objektu. Poskytneme-li dostatek informací, vyplníme chybějící části a vytvoříme celek. Toho je dosaženo použitím pozitivního a negativního prostoru.

v níže uvedeném příkladu naše mysli dokončují čáry tak, aby vytvořily kruh, i když tvar neexistuje. Pozitivní a negativní prostor se kombinují a vytvářejí naše vnímání kruhu.,

Uzavření mohou být použity, aby se nám vnímat objekty nebo vzory pomocí nejmenší množství informace. Naše mysl je tak dychtivá vyplnit chybějící informace, že to lze udělat s velmi málo prvky. Pokud však neposkytneme dostatek informací k dokončení vzoru, nemůžeme objekt vnímat a uzavření selže, takže kruh se v našich myslích mnohem obtížněji formuje. Podívejte se a zjistěte, zda ji můžete dokončit ve své mysli. Je to mnohem obtížnější, že?, Nemůžeme to teď dát dohromady s řídkým množstvím poskytnutých informací.

Vytvoření Efektivních Uzavření

výše uvedené příklady jsou velmi jednoduché ilustrace toho, jak vnímáme vzory forma uzavření. Ve skutečnosti existuje mnoho vizuálních prvků, které můžeme použít k vytvoření efektivního uzavření:

• pozitivní a negativní prostor. Jak již bylo zmíněno dříve, pozitivní a negativní prostor se spojí v uzavření a vytvoří celek., Toho lze dosáhnout hledáním skrytých forem v negativním prostoru designu nebo uvnitř typu. Kromě toho odstranění prvků z popředí může vytvořit zajímavé negativní tvary a tím zjednodušit design.
• kontrast. Klíčem k vytvoření uzavření je vytvoření silného kontrastu mezi prvky popředí a pozadím. Jako vždy, černá a bílá vytváří nejlepší kontrast, ale můžete také experimentovat s doplňkovými barvami pro silný kontrast.
• barva., Barva nejen přidává život designu, ale také může být použita k posílení vztahů, zejména pokud používáte abstraktní tvary k reprezentaci forem.

všechny uzávěry používají mnoho, ne-li všechny výše uvedené vizuální prvky. Použití těchto a experimentování s redukcí vašich návrhů vám pomůže objevit nové formy. Podívejme se nyní na uzavření v reálném světě a uvidíme, jak se to všechno spojí.

Uzavření V Praxi

Pomocí uzavření můžeme snížit prvky předávat vizuální informace, což snižuje složitost a dělat návrhy poutavější., Jedním z běžnějších použití Uzavření je návrh firemních log, právě proto, že uzavření může zjednodušit design, který rychle zprostředkuje identitu značky.

níže je uvedeno slavné logo, které známe jako NBC peacock. Při porovnávání aktuálního loga (vpravo) se starým logem můžete vidět, že nejsou divoce odlišné. Ale snížením prvků a prací s negativním prostorem se současné logo stává mnohem zjednodušenějším a elegantnějším., Uzavření je úspěšně dosaženo pomocí pevně seskupených, pozitivních tvarů jako peří, přičemž naše vnímání pavího těla vzniká použitím negativního bílého prostoru uprostřed.

Další dobře uznávané logo, které úspěšně využívá uzavření, je od společnosti FedEx., V tomto logu je uzavření dosaženo negativním bílým prostorem pomocí částí velkých písmen E a malých písmen x k vytvoření známé šipky vpřed. Návrhář experimentoval s mnoha vzory, případně tahání dopisy blíž a blíž, až viděl na šipku tvoří mezi e a x. To ukazuje, že experimentování s snížení své návrhy, a hledají mezery v mezi, může přinést fantastické výsledky. Pro příběh za vytvořením loga, podívejte se na skvělý článek Matthew May v Fast Company. Vidíte šipku v logu?, Odteď ti to nikdy neunikne!

výše uvedené příklady jsou známá loga, která používají uzavření poněkud zřejmými způsoby. Existují však méně slavná loga, která používají uzavření jemněji. Například Houzz zaměstnává více koncepčně. Na první pohled se zelené, černé a bílé tvary mohou podobat polici, části budovy nebo vzoru stěn, což naznačuje, o čem je web., Bližší pohled však odhaluje i něco jiného. Touha naší mysli vyplnit mezery a úplné vzory nám umožňuje kombinovat jednotlivé tvary do celku a vytvářet velká písmena H v trojrozměrném prostoru.

zatímco uzavření je skvělé pro vytváření zajímavých log, může fungovat i jinými způsoby., Webové stránky mohou také použít pozitivní a negativní prostor při navrhování svých rozhraní k efektivnímu uzavření. Níže logo Uncrate používá pozitivní prostor proti černému negativnímu pozadí k vytvoření písmen svého loga a vytvoření značky webu. To je také dobrý příklad figurální půdy, do které se brzy dostaneme.

Použití Uzavření Při Vytváření Ikony

Ikony jsou užitečné, když potřebujeme předat zprávu nebo posílit koncept v malém prostoru. Musí být jednoduché a svlékl se do svých základních prvků, které pomáhají lidem rychle pochopit jejich význam. Uzavření funguje dobře při vytváření ikon, využívající pozitivní a negativní prostor ke snížení složitosti, a zároveň navrhuje tvary nebo objekty, které vnímáme jako celek, jako v těchto příkladech z webových stránek projektu podstatného jména.,

Abstraktní Uzavření

Uzavření můžete získat poměrně abstraktní a stále nám umožňují podobě rozpoznatelné vzory. Jedno z mých oblíbených použití Uzavření je v Google doodle., Google používá uzavření často ve svých čmáranicích, spoléhat se na naši vlastní potřebu vyplnit chybějící informace k vytvoření celého objektu. Google čmáranice závisí na naší obeznámenosti s logem Google, který nám umožňuje číst obrázek níže, přestože obsahuje velmi abstraktní tvary. Zde barva pomáhá posílit vztah mezi každým písmenem loga Google.,

Jak můžete vidět, pomocí pozitivní a negativní prostor kreativně a snižování prvky v naší vzory, můžeme vytvořit některé opravdu zajímavé vzory s uzávěrem. Můžeme využít potřeby vyplnit chybějící části, abychom snížili složitost a zjednodušili naše návrhy., Dále se podíváme na to, jak můžeme použít pozitivní a negativní prostor k vytvoření dobrých vztahů mezi postavou a zemí.

obrázek-Ground

jaký je princip obrázku-ground? Podle univerzálních principů designu je postava stav, ve kterém vnímáme prvky jako objekty zaostření nebo pozadí. Stejně jako uzavření, figurální půda funguje pomocí pozitivního a negativního prostoru. Figura-ground existuje prakticky ve všem, co vizuálně vnímáme, ať už je to scéna, kompozice, web, logo nebo ikona.,

obrázek-země je stabilní, když jsou objekty odlišitelné od pozadí a pozadí nemá žádný zájem. Stabilní postava-ground poskytuje nastavení pro objekty a umožňuje nám soustředit pozornost tam, kde ji chceme. Například vnímáme obrázek níže jako kruh na pozadí. Kruh je středem pozornosti a drží naši pozornost, zatímco pozadí je málo zajímavé. Tento příklad vykazuje silnou stabilitu postavy-země, protože postava má tvar a je vnímána jako přední, zatímco pozadí je beztvaré a pokračuje za postavou v další hloubce.,

Když postava-země není stabilní, jako v příkladu níže, percepční nejednoznačnost je zaveden a vztahy mezi prvky je nejasný. V této záměrně zjednodušené příklad, číslo a země jsou reverzibilní, což nás střídavě vidět jednu položku a pak na druhou, jako na obrázku a pak na zem.

Nicméně, nejednoznačnost není nutně špatná věc., Tento nedostatek stability lze využít k našemu prospěchu při navrhování. Cíleně destabilizovat obrázek-pozemní vztah může zavést neshody nebo napětí, přidání vzrušení a zájem, aby naše návrhy. Jeden z mých oblíbených používá tohoto napětí na obrázku-země je v Podsvětí plakát série Simon C. Page. Tady, stránka záměrně destabilizuje postavu a půdu, postavit princip proti sobě jako postava a pozemní boj o naši pozornost, podobně jako hrdina a darebák v bitvě plakátů proti sobě.,

Vytvořit Dobrou Postavu-Zem Vztahy

Existuje mnoho vizuálních prvků, které můžeme použít k posílení obrázek-pozemní vztah na naše návrhy. Použití těchto prvků nám může pomoci zaměřit pozornost tam, kde ji chceme, pomáhat při zapamatovatelnosti webové stránky nebo jiného designu:

• kontrast., Bílá nebo černá, spárovaná s barvou, jak je vidět na zločineckých plakátech podsvětí, vytváří velmi silný kontrast. Stejně tak doplňkové barvy jsou vynikající pro vytváření kontrastu. Pokud jsou čisté barvy příliš intenzivní, změňte hodnotu (jak tmavá nebo světlá je barva) a vytvořte účinnější kontrast.
• barva. Teplé barvy, jako jsou žluté, pomeranče a červené, jsou vnímány jako blížící se a mohou být použity k posílení postavy. Studené barvy, jako jsou fialové, modré a zelené, jsou vnímány jako ustupující a mohou být použity k posílení země.
• velikost., Když velký prvek vyplní většinu země, bude vnímán jako postava. Naopak, malý prvek ve velké zemi bude vnímán jako postava.
• pozice. Prvky umístěné v nižších oblastech budou vnímány jako obrázek, zatímco prvky umístěné v horních oblastech budou vnímány jako země. To hraje naše vnímání vzdálenosti, jako vnímáme objekty umístěné v dolní oblasti, které mají být blíže k nám, a objekty umístěné v horní oblasti, které mají být dál.
• Focus., Prvky, které jsou zaostřené, budou vnímány jako postava, zatímco prvky, které jsou zaostřené, rozmazané, vybledlé nebo tónované, budou vnímány jako země.

většina dobrých vztahů mezi postavou a zemí je vytvořena kombinací mnoha z těchto vizuálních prvků. Dále se podívejme na některé příklady v reálném světě a uvidíme, jak tyto prvky spolupracují na vytvoření úspěšné postavy.,

Obrázek-Země V Praxi

příklad obrázek-země v Podsvětí plakát série výše ukazuje princip v nestabilním stavu, kde postavu a pozemní bitva navzájem pozornost. Nestabilní postava-země funguje dobře, když je málo prvků a design je jednoduchý. Nemusí to však být nutně požadované použití principu při navrhování webových stránek, i když to závisí na obsahu a kontextu webu. Webové stránky musí předávat složité informace a být stále jasné a použitelné., Se stabilní postavou můžeme vést pozornost tam, kde ji chceme, a vyhnout se jakékoli nejednoznačnosti zprávy, kterou se snažíme komunikovat.

podívejte se na níže uvedený příklad z webových stránek Apple Music. S největší pravděpodobností je vaše oko přitahováno k obrazu smartphonu, který spolu s kopií vlevo od něj jsou prvky obrázku. Zatímco pozadí začíná bojovat o naši pozornost, prvky postavy jsou vylepšeny pomocí více vizuálních prvků. Za prvé, postava je posílena prostřednictvím velké kopie a velké velikosti smartphonu., Umístění smartphonu ve spodní části obrazovky také pomáhá při posunu postavy dopředu. Obrázek je dále vylepšen tónováním animace videa na pozadí, což způsobuje, že půda ustupuje. Konečně, kontrast mezi jasnou obrazovkou a tmavým pozadím poskytuje dobré oddělení mezi postavou a zemí.

V dalším příkladu z webových stránek Naya je velikost obrázku nejsilnějším vizuálním prvkem používaným k vytvoření dobré postavy. Zde vnímáme ženu (a její velmi velký klobouk!) jako postava, když vyplňuje většinu země. Kromě toho, použití chladné barvy v pozadí, stejně jako chytré použití překrývajících se prvků, pomáhá pomáhat pozadí ustupovat. Konečně, stejně jako příklad Apple Music, existuje dobrý kontrast oddělující popředí od pozadí.,

konečně, vynikající kontrast mezi postavou a zemí je síla webové stránky R/M Design School. Zde nabídka vykazuje silný kontrast, pomocí jasné barvy a černé oddělit postavu od země. Kromě toho se teplá barva používá k posílení vnímání postavy, která k nám přichází. Nechcete jen oslovit a chytit ty červené dlaždice!,

Závěr

Pochopení toho, jak používat uzavření a obrázek-země vám pomůže vybudovat pevné vztahy a rozdíly mezi prvky v vaše návrhy.,

• Podívejte se na negativní prostor, stejně jako pozitivní prostor k objevování zajímavých forem;
• pohrajte si s odstraněním prvků v popředí a použijte negativní prostor tvořit tvary místo;
• Konečně, mix vizuální prvky, jako je kontrast, barva, velikost, pozice a zaměřit se vytvořit stabilní a nestabilní číslo-pozemní vztahů.

Nyní, když víte, jak používat tyto dva principy ve své práci, jděte a vytvořte si vlastní poutavé a úspěšné návrhy!,

ve třetí a poslední části této série se zaměříme na principy pokračování a společného osudu, které zahrnují pohyb, implikovaný i animovaný, k vytvoření vztahů.

zdroje a dobré čtení

• „Gestalt principy“ na Scholarpedia.
• 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.,
• vizualizace informací: vnímání pro design Colin Ware. Elsevier, 2012.

• Principy Designu: 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

(ml, da, og, jb, il)