Az ember használata az embereket vizuális információk feldolgozása a Web Designban

A webhelyek és a felhasználói felületek tervezése az utóbbi néhány évben könnyebbé vált. Olyan sok eszköz áll rendelkezésre, amellyel használhatatlanná teheti, hogy a felhasználói felület fejlesztése során semmiképpen sem kezdjen a semmiből (nézze meg a friss felhasználói felület összeállítását). De nem vagyok itt, hogy vitatkozzam a webdesign haláláról.

Ehelyett megpróbálom megmagyarázni az alapvető, pszichológiai alapú fogalmakat a vizuális tervezési eszközök sokasága mögött (a legalapvetőbb CSS-készletektől a legfejlettebb prémium témákig). Nem csak fogod használni őket, hanem megérteni is őket. Biztos vagyok benne, hogy ez is megkönnyíti a már meglévők módosítását is.

Nézzük meg, hogyan működik az emberi elme és a test, amikor a vizuális információk feldolgozásáról van szó, és hogyan értelmezik ezt a tudást a web tervezésében.

Az érzékelési szervezet alapelvei

Gestalt pszichológiája szerint, az egész más, mint a részeinek összege. E gondolatiskola követői azt állítják, hogy van néhány alapelv az emberi elme csoportjainak objektumairól. Ezek nem csupán elméletek, gondolatok, hanem a vizuális csoportok szervezésével kapcsolatos tényleges gyakorlati tények.

Az alábbiakban néhány törvényt és ezen elvek népszerűbb és legismertebb felhasználásait találja. Lehet, hogy még néhány új ötletet is találhat a következő tervezése során.

A hasonlóság törvénye

Az első elv azt mondja ki hasonló objektumok, mint egy csoport, ugyanazon kis objektum több példánya helyett. A hasonlóság alakja, színe, árnyékolása vagy más minőség alapján történhet. Ez az elv az alapja mintázat valamint sok geometriai és minimalista logó.

Például ez a kép kör alakú logóként jelenik meg a különálló háromszögek helyett. A sas alsó részén lévő háromszög alakú forma azt gondolja, hogy az alakzat is része a képnek.

Valószínűleg ezt a törvényt is tudatlanul kihasználta néhány létrehozásakor, azonos méretű tartalmi dobozok webhelyére. Ha azt szeretné bizonyítani, hogy bizonyos tartalmi elemek ugyanolyan fontosak, vagy hasonló információkkal rendelkeznek, hozzon létre egy speciális alakot erre a célra. Így a felhasználó azonnal hozzárendeli az adott alakot egy adott információs területhez.

A közelség törvénye

E törvény szerint a közelebb lévő objektumok egymásnak azonos csoportba tartoznak. Ugyanazok a négyzetek, amikor egymás mellett, közeli, közeli közelségben helyezkednek el, csoportosítási érzést hoznak létre.

Ezt az elvet az interneten az utóbbi időben nagymértékben hasznosították, különösen amikor dolgoztunk tartalomhurkok, például. blogokon és webáruházakon.

A címet, a megjelenített képet, a metaadatokat és a kivonatot azonnal összeállíthatja akár határok vagy hátterek nélkül is. Lehet, hogy le tudja tisztítani a felesleges vonalakat és színeket a designról, hogy minimalista legyen, mégis teljesen érthető.

Az Ön kényelméért Wikipédiát is idézem, amely kimondja:

Jó formanyomtatvány

Ezt a törvényt Pragnanz vagy Jó Gestalt törvényeként is ismerték, amely szerint az objektumokat együttesen csoportosítjuk, ha igen egy egyszerű, szabályos és rendezett minta. Az elménk megpróbálja elválasztani a bonyolult és perceptuálisan nehéz formákat egyszerűen érthető formák sok csoportjához; ez vezet a a tömörség fontossága.

Ez is az egyik lehetséges oka a siker sikerének rácsalapú tervezés és ez olyan népszerűvé tette az asztali és a keretalapú (szerencsés dolgokat a design sötét korszakaiban).

Ha szem előtt tartja ezt az elvet, akkor valószínűleg nem fog olyan webhelyet létrehozni, amely tele van olyan összetett formájú tartalmi blokkokkal, amelyek a fent említett törvények révén szem előtt tartanák. Mégis, tudod csoportosítsa érdekes módon az objektumokat, például. gyémánt- vagy kite-alakban, mivel ezek még mindig rendezett és tömör formáknak tekinthetők.

Színelmélet, észlelés és használat

A színkép és a színérzékelés nagyrészt szubjektív alapján hogyan reagálnak a nézők agyai a színes hullámok tükröződnek a színes tárgyak vagy formák. A szabály az, hogy a különböző emberek, akár látássérültek nélkül, ugyanazt az objektumot látják különböző színben (emlékezhet a ruhára).

Színes tulajdonságok

A szín három objektív tulajdonsága van; színárnyalat, érték és intenzitás.

Színárnyalat a színe a színes kerékre vagy szivárványra felcímkézett neve. Hat (vagy tizenkét, attól függően, hogy kinek beszélsz) alapvető árnyalatok: piros, narancs, sárga, zöld, kék és lila.

Sárga, kék és piros elsődleges, narancs, zöld és lila másodlagos színárnyalatok; is, vannak harmadlagos árnyalatok, amelyek két elsődleges és másodlagos színárnyalat közvetlen keverékei (például sárga zöld vagy vörös lila).

Érték a szín fényessége vagy sötétsége magas érték világos színek vagy Alacsony érték sötét színekhez.

Intenzitás utal a fényesség vagy homályosság színes; ez azt jelenti, hogy az azonos színárnyalatú és azonos értékű színek még intenzívebbek vagy világosabbak lehetnek az intenzitás megváltoztatásával és különböző színkimenetek létrehozásával.

Az egyes színek legmagasabb intenzitása a színkeréken megjelenő színárnyalat (lásd alább), míg a legalacsonyabb a szürke szín.

Szín kontrasztok

A fentiekben említett hasonlósági törvényekre hivatkozva az érzékelők elméje olyan kis objektumok csoportjait hozza létre, amelyeket hasonló és különböző tulajdonságok alapján néznek - gyakran színek.

Amikor a színpalettát választotta webhelyére, különösen akkor, ha minimalista megközelítést szeretne, vagy ha szöveges tartalmú területet tervez, pl. blogok vagy hirdetések vegye figyelembe a különböző szín kontrasztokat amelyek segítenek megtalálni a megfelelő színértékeket a legjobb eredmény eléréséhez.

Johannes Itten szerint 7 szín kontraszt van, bár csak 3-at említek.

1. A színárnyalat kontrasztja

Sárga, piros és kék teljes intenzitású közvetlen és élénk kontrasztok. A másodlagos színárnyalatok kevésbé éles megkülönböztetést tesznek lehetővé, de még mindig működnek, ugyanúgy, mint a harmadlagos színárnyalatok, bár egyik sem félelmetes eredmények, mint az elsődleges árnyalatoknál.

2. Kiegészítő kontraszt

Két szín egymással ellentétes kontrasztban van, ha összekeverik őket, egy semleges szürkeet hoznak létre. Ezeket is hívják furcsa párok. Ha szomszédosak, fokozzák az élességet és az intenzitást, miközben összekeverik egymást, és törlik egymást. Minden színnek van egy és csak egy kiegészítője; a színkeréken a párok átlósan egymással szemben vannak.

3. Világos-sötét kontraszt

Ha egyszínű weboldallal szeretne kísérletezni, azonos színárnyalat különböző értékeit használva félelmetes eredményeket hozhat. A minimalista webdesignban gyakran használnak nagyszerű eredményeket a világos-sötét kontraszt alapján, ha témaválasztási lehetőségeket kíván biztosítani a felhasználónak. Ezt a kontrasztot a szürkeárnyalatos kialakításhoz is használják.

Ha szeretné folytatni a fennmaradó 4 szín kontrasztot, itt találja meg őket.

Paletták létrehozása és kontrasztok ellenőrzése

Az elmélet ismerete nagy, az ötleted értelmezése egy másik dolog. Nem kell aggódnia, de a web nagy segítséget nyújt a színkeverő igényeinek. Számos olyan eszköz áll rendelkezésre, amelyek segítenek a szín kontraszt szabályokon alapuló egyedi színminták létrehozásában, pl. Paletton vagy az Adobe Kuler.

Webes célokra érdemes ellenőrizni a kontrasztokat, amelyeket a webAIM-en választottál, a Jonathan Snook webhelyén, vagy töltsd le a Color Contrast Analyzer példányát a The Paciello Group-tól itt.

Következtetés

Amikor új témával kezdsz dolgozni, vagy elkezdsz módosítani a meglévőket, próbáld meg gondolni az észlelés elveit, hogy megszervezd a tartalmat, és ne felejtsd el figyelembe venni a színszabályokat, amikor a tervezési végső formát és színt adják.

Szerkesztő megjegyzése: Ez a vendég hozzászólás a (z) Hongkiat.com címre íródott Fekete Marton. Marton egy magyar oldalfejlesztő, aki a közelmúltban a WordPress-hez csatlakozott. Ő egy újratervezett rajongó és szabadúszó tartalomíró, aki szabadidejében szereti az RPG-ket.