A Szerzőről

Jon egy vizuális tervező, sok évvel azelőtt, hogy a leap interakció tervezés. Van egy diplomás Ember-Számítógép Interakció a DePaul …Több aboutJon↬

az észlelési folyamat lehetővé teszi számunkra, hogy a világot a látás, a szag, a hang, az íz és az érintés érzékein keresztül érzékeljük. Különösen a vizuális rendszerünk hatalmas mennyiségű információt dolgoz fel a környezetében. Ahelyett, hogy külön érzékelnénk az elemeket, az agyunk mintákat, tárgyakat és alakzatokat szervez olyan egész formákba, amelyeket megérthetünk.

a vizuális észlelés gestalt csoportosítási elvei ezt a szervezetet olyan alapelvekként írják le, amelyek elmagyarázzák, hogyan érzékeljük és szervezzük ezt a hatalmas mennyiségű vizuális ingert. A gestalt elvek-hasonlóság, közelség, Bezárás, alak-föld, folytonosság és közös sors — a tervezők által használt népszerű eszköz az információk vizuális rendezésére. Vizuális tervezőként, most pedig interakció tervezőként rendszeresen alkalmazom ezeket az elveket, hogy kapcsolatokat és különbségeket teremtsek a terveim elemei között. Ha megérted, hogyan működnek ezek az elvek, és hogyan használhatod őket a terveidben, az erősebb és vonzóbb munkát eredményez.

készen állsz a tervek javítására? Kezdjük a hasonlóság feltárásával.

hasonlóság

a hasonlóság gestalt elve azt mondja, hogy a hasonló elemeket jobban összefüggőnek tekintik, mint az eltérő elemeket. A hasonlóság segít megszervezni az objektumokat azáltal, hogy egy csoporton belül más objektumokhoz kapcsolódnak, és hatással lehet a szín, a méret, az alak és a tájolás tulajdonságaira.

A színek használata a kapcsolatok hozzárendeléséhez

a hasonlóságot különösen befolyásolja a szín. Az alábbi példában figyelje meg, hogy a színes alakzatok milyen erős hatással vannak egy csoportosítás vagy kapcsolat hozzárendelésére, még akkor is, ha különböző alakzatokat tartalmaznak.

a méret használata kapcsolatok hozzárendeléséhez

a méret egy másik hasznos eszköz, amelyet hasonlóság létrehozásához használhatunk. Az alábbi példában a méretbeli hasonlóság miatt a nagyobb formák kiemelkednek és csoportot alkotnak, annak ellenére, hogy az összes alak ugyanaz.

A Forma Rendelni Kapcsolatok

a Forma hasznos egyesülés által hasonlóság, de ez a leggyengébb egyesülés hatása, amikor képest szín, méret. Az itt látható példában az alak azt eredményezi, hogy az elemeket körök és négyzetek oszlopaként értelmezzük, szemben a váltakozó körök és négyzetek soraival.

a tájékozódás segítségével hozzárendelhet kapcsolatokat

a tájékozódás a hasonlóság alapján is csoportosítható. Ha ebben a csoportban néhány négyzetet 45 fokkal elforgatunk, külön csoportot készítünk, amelyet összefüggőnek tekintünk. Szinte úgy tűnik, hogy hasonló irányba mozognak, mint a körülöttük lévő formák. Ez valójában érinti a közös sors gestalt elvét, egy elvet, amelybe egy jövőbeli cikkben fogunk bejutni. De nyugodtan ugorj előre, és Google (miután elolvasta ezt a cikket, természetesen!). Ez egy lenyűgöző elv, amely gyakran történik körülötted.

tovább a Color

mint korábban említettük, a hasonlóságot különösen befolyásolja a szín, és felülírhat más attribútumokat. Például felülbírálhatjuk az alak hasonlóságának példáját szín hozzáadásával. Most a piros-fehér alakzatok váltakozó sorait érzékeljük, szemben a körök és négyzetek oszlopaival. Próbáld meg. Próbálja meg, hogy az oszlopok körök, négyzetek. Lehetséges, de elég nehéz most, nem igaz?

továbbá a szín felülírhatja a méretet. Amikor színt adunk a méretbeli hasonlóság példájához, két csoportot hozunk létre egymástól elkülönítve. Most a nagy vörös négyzeteket egy csoportként, az egyetlen nagy fehér négyzetet pedig különálló, független (és magányos) csoportként érzékeljük.

Ez a két példa szemlélteti, hogy milyen erős szín lehet az elemek közötti kapcsolatok hozzárendelésében. Próbálja meg a színt a munkájában, hogy megkülönböztesse az elemeket, és meg fog lepődni, hogy mennyivel erősebb a csoportosítás.

hasonlóság a gyakorlatban

tervezéskor használhatjuk a hasonlóságot a szervezet és egyesületek közvetítésére azáltal, hogy megmutatjuk, mely elemek kapcsolódnak egymáshoz, vagy nem kapcsolódnak egymáshoz. Például a szalon alábbi oldalán látható két szakasz relatív méretük szerint van csoportosítva. Egyértelműen két különálló csoportot érzékelünk, a bal felső történetekkel, a jobb oldalon pedig a legolvasottabb. Annak ellenére, hogy mindkét szakasz ugyanazt a funkciót jeleníti meg-a cikkek olvasása – a méret szerinti csoportosítás nagyobb figyelmet szentel a bal oldali csoportosításnak, amely lehetővé teszi a szalon számára, hogy a figyelmet a legfontosabb történetekre irányítsa.

ezzel szemben az Amazon példájában a méretkülönbségek hiánya nem tulajdonít különösebb jelentőséget egyetlen szakasznak sem. Ennek ellenére a hasonlóság még mindig hasonló méretű és alakú ismétlések használatával érhető el, ami a tételek sorainak észlelését eredményezi.

hasonló színhasználat

tudjuk, hogy a szín a hasonlóság erős mutatója, segít megszervezni és érthetővé tenni a tartalmat. Ebben a példában a Cars.com, a hasonló színhasználat segít különbséget tenni a címsor, a test másolása és a szöveg összekapcsolása között. (Teljes közzététel: dolgozom Cars.com mint interakció tervező.) Az egyes elemek különböző színeinek felhasználásával elvárjuk, hogy hasonlóan működjenek, a kék link szöveg esetében pedig hasonlóan viselkedjenek.

Proximity

a gestalt proximity elve azt mondja, hogy az egymáshoz közelebb álló elemeket jobban összefüggőnek tekintik, mint az egymástól távolabb lévő elemeket. A hasonlósághoz hasonlóan a közelség segít megszervezni az objektumokat más tárgyakhoz való viszonyuk alapján. A közelség a legerősebb alapelv az objektumok összefüggésének jelzésére, segítve az információk gyorsabb és hatékonyabb megértését és megszervezését.

az alábbi körök példái azt mutatják, hogy a közelség hogyan használható fel az objektumok összekapcsolásának érzékelésére. Ahogy itt látjuk, a körök szétszóródnak, nem mutatnak kapcsolatot, mindegyik különálló tárgynak tekinthető.

azonban, ha a köröket egymáshoz közeli térbeli közelségbe húzzák, akkor egy relációhoz vannak rendelve, és azokat már nem tekintik különálló objektumoknak.

fehér tér

a fehér tér felbecsülhetetlen eszköz a közelség megteremtéséhez. Ugyanazt csoport körökben, hozzátéve, üres segít nekünk, másképp látjuk a dolgokat. Most, a bal oldalon, a formák közelsége arra készteti bennünket, hogy a két csoportot oszlopként érzékeljük, mindegyik saját csoportja. A jobb oldalon a formák közelsége arra készteti bennünket, hogy a két csoportot sorként érzékeljük, ismét mindegyik saját csoportja. Használjon fehér helyet a terveiben, hogy megerősítse a csoportosításokat, valamint megkülönböztesse őket más elemektől.

a közelség ereje

a közelség elég erős ahhoz, hogy legyőzze a variáció más elemeit. Figyelje meg, hogy a közelség még akkor is nyer, ha más attribútumok, például a szín és az alak is hozzáadásra kerülnek. Próbáld ki, ahogy lehet, a szín és az alak itt nem győzi le a közelséget, és minden egyes csoportosítás még mindig különálló elemként van felfogva.

közelség a gyakorlatban

amikor információkat szervezünk a terveinkben, használhatjuk a közelséget az elemek közötti kapcsolatok létrehozásához, hogy segítsük a bemutatott információk megértését. Például, ha ezeket a képeket az Apple Store-ból közeli közelségbe csoportosítjuk, kapcsolatot rendelünk az egész csoporthoz. Úgy érzékeljük őket, hogy kapcsolatban állnak, és elvárjuk, hogy a tartalom hasonló legyen.

azonban, amikor eltávolítjuk a középső oszlopot, hirtelen két különálló csoportot érzékelünk, és elvárjuk a különböző tartalmakat közöttük.

közelség és hasonlóság kombinálása

a közelség szerinti csoportosítás kombinálható a hasonlósággal is, hogy erősebb kapcsolatokat hozzon létre. Az Amazon példáján látható, hogy a közelség és a méretbeli hasonlóság alapján történő csoportosítás két különálló csoportot érzékel, és nagyobb hangsúlyt helyez a bal csoportra.

közelség és hierarchia

a közelség kiválóan alkalmas hierarchikus elemek szervezésére. Ebben a példában a láda & hordó, opciók vannak csoportosítva közös címsorok, kapcsolatok létrehozása, ami szkennelés és információkeresés sokkal könnyebb.

amikor a címsorok eltávolításra kerülnek, és az opciók közelség nélkül vannak csoportosítva, elveszítjük a létrehozott kapcsolatokat, és sokkal nehezebb lesz gyorsan beolvasni és megtalálni a kívánt információkat. Próbáld ki magad. Nézze meg, milyen gyorsan találhat kávés bögréket a csoportosításban a címsorokkal szemben a címsorok nélküli csoportosítással. Egy kicsit nehezebb gyorsan ráugrani, nem igaz?

következtetés

a hasonlóság és a közelség használatának megértése, hogy befolyásolja a munka elemei közötti kapcsolatokat, segít létrehozni olyan terveket, amelyek lehetővé teszik a könnyebb szervezést és javítják a munka használhatóságát. Használja a hasonlóságot és a közelséget, hogy mind kapcsolatokat, mind különbségeket hozzon létre a tervek elemei között. Kísérletezzen a fehér tér, a szín, a méret, az alak és a tájékozódás elemek és keverjük össze mindkét elvet együtt, hogy készítsen nagyon erős és vonzó kapcsolatok.

a sorozat következő részében megvizsgáljuk a lezárást és a számfejtést, és megvizsgáljuk, hogy ez a két gestalt-elv hogyan használ pozitív és negatív teret az egyszerű, mégis erőteljes kapcsolatok létrehozásához.

forrás és jó olvasmány

• Gestalt principles on Scholarpedia.
• “organization in Perceptual Forms”: Text of Max Wertheimer ‘ s seminal paper from 1923.
• Universal Principles of Design Revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design, by William Lidwell, Kritina Holden and Jill Butler. – Rockport Pub, 2010.
• információs vizualizáció: észlelés a tervezéshez, Colin Ware. – Elsevier, 2012.

• tervezési elvek: Vizuális érzékelés és elvei Gestalt
• összekötő és elválasztó elemek révén kontraszt és hasonlóság
• kompozíciós egyensúly, szimmetria és aszimmetria
• hogyan lehet javítani az e-mail munkafolyamat moduláris kialakítás
• javítása felhasználói élmény valós idejű funkciók

(ml, da, og, jb, il)