despre autor

Jon a fost designer vizual mulți ani înainte de a face saltul către designul interacțiunii. El are o diplomă de master în interacțiunea om-calculator de la DePaul …mai multe desprejon … mai multe desprejon …

procesul perceptiv ne permite să percepem lumea prin simțurile noastre de vedere, miros, sunet, gust și atingere. În special, sistemul nostru vizual procesează cantități mari de informații în mediul său. În loc să perceapă elemente separat, creierul nostru organizează modele, obiecte și forme în forme întregi pe care le putem înțelege.

principiile de grupare gestalt ale percepției vizuale descriu această organizație ca un set de principii care explică modul în care percepem și organizăm această cantitate imensă de stimuli vizuali. Principiile gestalt — similitudine, proximitate, închidere, sol, continuitate și soartă comună-sunt un instrument popular folosit de designeri pentru organizarea vizuală a informațiilor. Ca designer vizual și acum designer de interacțiune, aplic aceste principii în mod regulat pentru a crea relații și diferențe între elementele din desenele mele. Înțelegerea modului în care funcționează aceste principii și cum să le folosiți în desenele dvs. produce o muncă mai puternică și mai captivantă.

sunteți gata să vă îmbunătățiți desenele? Să începem prin a săpa în similitudine.

similitudine

principiul gestalt al similitudinii spune că elementele care sunt similare sunt percepute a fi mai înrudite decât elementele care sunt diferite. Similitudinea ne ajută să organizăm obiectele prin relația lor cu alte obiecte din cadrul unui grup și pot fi afectate de atributele culorii, dimensiunii, formei și orientării.

utilizarea culorii pentru a atribui relații

similitudinea este afectată în special de culoare. În exemplul de mai jos, observați cum formele colorate au un efect puternic în atribuirea unei grupări sau relații, chiar și atunci când sunt incluse diferite forme.

utilizarea dimensiunii pentru a atribui relații

dimensiunea este un alt instrument util pe care îl putem folosi în crearea asemănării. În exemplul de mai jos, similitudinea în dimensiune face ca formele mai mari să iasă în evidență și să formeze un grup, chiar dacă toate formele sunt aceleași.

utilizarea formei pentru a atribui relații

forma este utilă în Gruparea după similitudine, dar are cel mai slab efect de grupare în comparație cu culoarea și dimensiunea. În exemplul văzut aici, forma ne determină să interpretăm elementele ca coloane de cercuri și pătrate, spre deosebire de rânduri de cercuri și pătrate alternante.

utilizarea orientării pentru a atribui relații

orientarea poate fi utilizată și pentru a grupa după similitudine. Prin rotirea unor pătrate din acest grup cu 45 de grade, se face o grupare separată care este percepută ca fiind legată. Aproape că par să se miște împreună într-o direcție similară în comparație cu formele din jurul lor. Acest lucru atinge de fapt principiul gestalt al destinului comun, un principiu pe care îl vom intra într-un articol viitor. Dar nu ezitați să sari înainte și Google-l (după ce ați citit acest articol, desigur!). Este un principiu fascinant care se întâmplă frecvent în jurul tău.

mai multe despre culoare

după cum am menționat mai devreme, similitudinea este afectată în special de culoare și poate suprascrie alte atribute. De exemplu, putem suprascrie exemplul de similitudine în formă adăugând culoare. Acum percepem rânduri alternante de forme roșii și albe, spre deosebire de coloane de cercuri și pătrate. Încearcă. Încercați să vedeți coloanele de cercuri și pătrate. Posibil, dar destul de greu acum, nu-i așa?

În plus, culoarea poate înlocui dimensiunea. Când adăugăm culoare exemplului de similitudine în dimensiune, creăm două grupări separate una de cealaltă. Acum percepem pătratele roșii mari ca un singur grup și pătratul alb mare ca un grup separat, fără legătură (și singur).

aceste două exemple ilustrează cât de puternică poate fi culoarea în atribuirea relațiilor dintre elemente. Încercați să utilizați culoarea în munca dvs. pentru a diferenția elementele și veți fi uimiți de cât de puternice sunt grupările dvs.

similitudine în practică

când proiectăm, putem folosi similitudinea pentru a transmite organizarea și asociațiile arătând care elemente sunt legate sau nu între ele. De exemplu, cele două secțiuni prezentate pe site-ul salonului de mai jos sunt grupate după dimensiunile lor relative. Percepem în mod clar două grupuri separate, cu povești de top în stânga și cele mai citite în dreapta. Chiar dacă ambele secțiuni oferă aceeași funcție-afișarea articolelor de citit-Gruparea după mărime atribuie mai multă importanță grupării din stânga, ceea ce permite Salonului să ghideze atenția asupra poveștilor lor de top.

în schimb, lipsa diferențelor de dimensiune din acest exemplu de la Amazon nu acordă nicio importanță deosebită niciunei secțiuni. În ciuda acestui fapt, similitudinea este încă realizată prin utilizarea repetării de dimensiuni și forme similare, determinându-ne să percepem rânduri de articole.

utilizare similară a culorilor

știm că culoarea este un indicator puternic al asemănării, ajutând la organizarea și înțelegerea conținutului. În acest exemplu din Cars.com, utilizarea similară a culorilor ne ajută să diferențiem între ceea ce este un titlu, o copie a corpului și un text de legătură. (Dezvăluire completă: lucrez la Cars.com ca designer de interacțiune.) Folosind culori distincte pentru fiecare dintre aceste elemente, ne așteptăm ca acestea să funcționeze în mod similar și, în cazul textului linkului Albastru, să se comporte în mod similar.

proximitate

principiul gestalt al proximității spune că elementele care sunt mai apropiate sunt percepute a fi mai legate decât elementele care sunt mai îndepărtate. Ca și în cazul asemănării, proximitatea ne ajută să organizăm obiectele prin relația lor cu alte obiecte. Proximitatea este cel mai puternic principiu pentru indicarea relativității obiectelor, ajutându-ne să înțelegem și să organizăm informațiile mai rapid și mai eficient.

exemplele de cercuri de mai jos arată cum proximitatea poate fi folosită pentru a ne ajuta să percepem obiectele ca fiind legate. După cum vedem aici, cercurile sunt răspândite, fără a prezenta nicio relație, fiecare fiind perceput ca un obiect separat.

cu toate acestea, atunci când cercurile sunt trase în proximitate spațială una de cealaltă, li se atribuie o relație și nu mai sunt percepute ca obiecte separate.

spațiu alb

spațiu alb este un instrument neprețuit pentru crearea de proximitate. Luând același grup de cercuri și adăugând spațiu alb ne ajută să percepem lucrurile diferit. Acum, în stânga, apropierea formelor ne face să percepem cele două grupuri ca coloane, fiecare grup propriu. În dreapta, apropierea formelor ne determină să percepem cele două grupuri ca rânduri, din nou fiecare grup propriu. Utilizați spațiu alb în desenele dvs. pentru a consolida grupările, precum și pentru a le diferenția de alte elemente.

puterea proximității

proximitatea este suficient de puternică pentru a învinge alte elemente de variație. Observați cum proximitatea încă câștigă chiar și atunci când se adaugă alte atribute, cum ar fi culoarea și forma. Încercați așa cum s-ar putea, culoarea și forma nu depășesc apropierea aici și fiecare grupare este încă percepută ca un element separat.

proximitate în practică

când organizăm informații în proiectele noastre, putem folosi proximitatea pentru a crea relații între elemente pentru a ajuta la înțelegerea informațiilor prezentate. De exemplu, grupând aceste imagini din Apple Store împreună în imediata apropiere, atribuim o relație întregului grup. Le percepem ca fiind legate și ne așteptăm ca conținutul să fie similar.

cu toate acestea, atunci când eliminăm coloana centrală, percepem brusc două grupuri separate și avem așteptări de conținut diferit între ele.

combinarea proximitate și similitudine

gruparea de proximitate poate fi, de asemenea, combinate cu similitudine pentru a crea relații mai puternice. Văzut în acest exemplu de la Amazon, Gruparea după proximitate și similitudine în dimensiune ne determină să percepem două grupări separate și atribuie mai multă proeminență grupului stâng.

proximitate și ierarhie

proximitatea este excelent pentru organizarea elementelor ierarhice. În acest exemplu din Crate & Barrel, opțiunile sunt grupate împreună sub titluri comune, creând relații, ceea ce facilitează scanarea și găsirea informațiilor.

când titlurile sunt eliminate și opțiunile sunt grupate fără proximitate, pierdem relațiile care au fost create și devine mult mai dificil să scanăm rapid și să găsim informațiile dorite. Încearcă-l singur. Mergeți mai departe și a vedea cât de repede puteți găsi cani de cafea în gruparea cu titluri față de gruparea fără titluri. Un pic mai dificil să sari rapid la ea, nu-i așa?

concluzie

înțelegerea modului de utilizare a similarității și a proximității pentru a afecta relațiile dintre elementele din munca dvs. vă va ajuta să creați modele care să permită o organizare mai ușoară și să îmbunătățească gradul de utilizare a muncii dvs. Folosiți similitudinea și apropierea pentru a crea atât relații, cât și diferențe între elementele din desenele dvs. Experimentați cu utilizarea spațiului alb, culoarea, dimensiunea, forma și orientarea elementelor și amestecați ambele principii împreună pentru a produce relații foarte puternice și captivante.

în următoarea parte a acestei serii, ne vom uita la închidere și la sol și vom explora modul în care aceste două principii gestalt folosesc spațiul pozitiv și negativ pentru a crea relații simple, dar puternice.

resurse și bune Citește

• principiile Gestalt pe Scholarpedia.
• „legile organizării în forme perceptuale”: textul lucrării seminale a lui Max Wertheimer din 1923.principiile universale ale designului revizuite și actualizate: 125 de moduri de a spori gradul de utilizare, de a influența percepția, de a crește atractivitatea, de a lua decizii mai bune de proiectare și de a preda prin design, de William Lidwell, Kritina Holden și Jill Butler. Rockport Pub, 2010.
• vizualizarea informațiilor: percepția pentru Design, de Colin Ware. Elsevier, 2012.

• principii de proiectare: Percepția vizuală și principiile Gestalt
• conectarea și separarea elementelor prin Contrast și similitudine
• echilibru compozițional, simetrie și asimetrie
• Cum de a îmbunătăți fluxul de lucru de e-mail cu design Modular
• îmbunătățirea experienței utilizatorului cu caracteristici în timp Real

(ml, da, og, jb, il)