Pomocí způsobu lidé procesu vizuální informace v Web Design

Návrh webových stránek a uživatelských rozhraní se v posledních letech stal jednodušší. Existuje tolik nástrojů, které můžete použít, což je zbytečné začít od nuly při vývoji uživatelských rozhraní (podívejte se na naši novou kompilaci UI). Ale nejsem tady, abych se dohadoval o smrti webdesignu.

Místo toho, co budu dělat, se pokusím vysvětlit základní koncepty založené na psychologii za množstvím vizuálních návrhářských nástrojů (od nejzákladnějších sad CSS až po nejpokročilejší prémiová témata). Nebudete je používat, ale také jim rozumíte. Jsem přesvědčen, že to také usnadní úpravu stávajících s úspěchem.

Podívejme se, jak lidská mysl a tělo pracuje, pokud jde o zpracování vizuálních informací a jak jsou tyto znalosti interpretovány do návrhu webu..

Principy organizace vnímání

Podle Gestalt psychologie, celek je jiný než součet jeho částí. Stoupenci této myšlenkové školy tvrdí, že existuje několik zásad o tom, jak lidská mysl seskupuje objekty. Nejedná se o pouhé teorie, ale o skutečné praktické skutečnosti o organizaci vizuálních skupin.

Níže najdete některé zákony a populárnější a dobře známá použití těchto principů. Můžete dokonce najít nové nápady pro svůj další design.

Zákon podobnosti

První zásada to říká malé objekty, které jsou podobné, jsou vnímány jako skupina, namísto více instancí stejného malého objektu. Podobnost může být založena na tvaru, barvě, stínování nebo jiné kvalitě. Tento princip je základem vzorování stejně jako mnoho geometrických a minimalistických návrhů log.

Tento obrázek například zobrazuje jako kruhové logo místo samostatných trojúhelníků. Trojúhelníkový tvar ve spodní části orla nás nutí myslet si, že tvar je také součástí obrazu.

Pravděpodobně jste tento zákon využili i nevědomky při tvorbě několika, krabice s obsahem ve stejné velikosti pro vaše webové stránky. Pokud chcete ukázat, že některé prvky obsahu mají stejný význam nebo sdílí podobné informace, vytvořit specifický tvar právě pro tento účel. Tímto způsobem váš uživatel okamžitě spojí daný tvar s určitou oblastí informací.

Zákon blízkosti

Podle tohoto zákona objekty, které jsou blíže navzájem považovány za stejné skupiny. Stejné čtverce, když jsou vykreslovány vedle sebe v těsné, pravidelné blízkosti, vytvářejí pocit seskupení.

Tento princip byl ve velké míře využíván na webu v poslední době, zejména při práci obsahových smyček, např. blogy a internetové obchody.

Okamžitě můžete seskupit název, zobrazený obrázek, metadata a výňatek i bez okrajů nebo pozadí. Můžete být schopni očistit nepotřebné čáry a barvy od svého návrhu, aby byl více minimalistický, ale přesto plně srozumitelný.

Pro vaše pohodlí cituji Wikipedii, která uvádí:

Zákon dobré formy

Tento zákon také známý jako zákon Pragnanz nebo Good Gestalt, uvádí, že máme sklon seskupovat objekty dohromady, pokud jsou tvoří vzor, ​​který je jednoduchý, pravidelný a řádný. Naše mysl se snaží oddělit složité a vjemně obtížné formy do mnoha skupin jednoduše pochopitelných tvarů; toto vedení k důležitosti stručnosti.

To je také jeden z možných důvodů úspěchu design založený na mřížce a toto dělalo stůl a rám-založený (naštěstí věci temného věku designu) struktury webu tak populární.

Pokud budete mít tento princip na paměti, pravděpodobně nebudete mít za následek vytvoření webové stránky plné složitých tvarů obsahových bloků, které by byly propojeny s jinými zákony. Přesto můžete seskupte své objekty dohromady zajímavým způsobem, např. ve tvaru diamantu nebo draka, protože ty jsou stále vnímány jako řádné a stručné tvary.

Teorie barev, vnímání a použití

Barevné vidění a vnímání barvy je subjektivní na základě jak mozky diváků reagují světelných vln odráží barevné objekty nebo tvary. Pravidlem je, že různí lidé, i bez jakéhokoliv zrakového postižení, vidí stejný objekt v jiné barvě (můžete si vzpomenout na šaty).

Vlastnosti barev

Stále existují tři objektivní vlastnosti barvy; odstín, hodnota a intenzita.

Odstín je název barvy označený barevným kolečkem nebo duhou. Existuje šest (nebo dvanáct, podle toho, s kým mluvíte) základní odstíny: červená, oranžová, žlutá, zelená, modrá a fialová.

Žlutá, modrá a červená jsou hlavní, oranžová, zelená a fialová sekundární odstíny; také, tam jsou terciární odstíny, které jsou přímými směsmi dvou primárních a sekundárních odstínů (např. žlutá zelená nebo červená fialová).

Hodnota je světlost nebo temnota barvy, označovaná jako vysoká cena pro světlé barvy nebo nízká hodnota pro tmavé barvy.

Intenzita Odkazuje na jas nebo jas barvy; to znamená, že barva se stejným odstínem a stejnou hodnotou může být stále ztlumena nebo zesvětlena změnou intenzity a vytvořením různých barevných výstupů.

Nejvyšší intenzita každé barvy je barevný odstín, který se zobrazuje na barevném kole (viz níže), zatímco nejnižší je barva šedá.

Barevné kontrasty

S odkazem na výše uvedené zákony podobnosti, mysli vnímatelů vytvářejí skupiny malých objektů, které vidí na základě podobných a odlišných vlastností - často barev.

Když vyberete svou barevnou paletu pro své webové stránky, zejména pokud se rozhodnete pro minimalistický přístup nebo pokud navrhnete oblast s těžkým obsahem textu, např. blogy nebo reklamy, měli byste být si vědom různých barevných kontrastů které vám mohou pomoci najít správné hodnoty barev pro nejlepší výsledek.

Podle Johannesa Ittena existuje 7 barevných kontrastů, i když zmíním jen 3.

1. Kontrast barevného odstínu

Žlutá, červená a modrá při plné intenzitě jsou přímé a živé kontrasty. Sekundární odstíny dělají pro méně ostrý rozdíl, ale ještě pracovat, stejně jako terciární odstíny dělají, ačkoli žádný produkovat jak úžasné výsledky jako u primárních odstínů.

2. Doplňkový kontrast

Dvě barvy jsou v komplementárním kontrastu, pokud při smíchání vytvoří neutrální šedou barvu. Ty se také nazývají podivné páry. Jsou-li přilehlé, zvyšují živost a intenzitu, zatímco se navzájem smíchají. Každá barva má jednu a pouze jednu komplementární; na barevném kole jsou dvojice diagonálně naproti sobě.

3. Kontrast světla a tmy

Pokud chcete experimentovat s jednobarevnou webovou stránkou, pomocí různých hodnot stejného odstínu může přinést úžasné výsledky. Často používáte v minimalistickém designu webu, můžete také vytvořit skvělé výsledky založené na světle-tmavý kontrast, pokud chcete poskytnout možnosti barev motivu k vašemu uživateli. Tento kontrast se používá také pro design ve stupních šedi.

Pokud chcete sledovat zbývající 4 barevné kontrasty, můžete je najít zde.

Vytváření palet a kontrola kontrastů

Vědět, že teorie je skvělá, interpretovat vaše myšlenky je úplně jiná věc. Neměli byste se však bát, web poskytuje velkou podporu pro vaše potřeby barevného žonglování. Existuje mnoho nástrojů, které vám pomohou vytvořit vlastní barevné vzory založené na pravidlech barevného kontrastu, např. Paletton nebo Adobe Kuler.

Pro webové účely si možná budete chtít zkontrolovat kontrasty, které jste zvolili pro použití na webu webAIM, na stránkách Jonathan Snook nebo si stáhněte instanci analyzátoru barevného kontrastu od skupiny The Paciello Group zde.

Závěr

Když začnete pracovat s novým tématem nebo začnete upravovat ty stávající, zkuste si představit principy vnímání, abyste mohli organizovat svůj obsah, a nezapomeňte zvážit pravidla barev, když dáváte vašemu návrhu konečnou podobu a odstín.

Poznámka redaktora: Tento příspěvek je napsán pro Hongkiat.com by Marton Fekete. Marton je maďarský vývojář stránek, který byl nedávno závislý na WordPressu. Je redesignový nadšenec a spisovatel na volné noze, který rád hraje RPG ve svém volném čase.