i denne første artikkelen Vil vi Ta En Titt På Hvordan prinsippene om likhet og nærhet arbeid, Og Se på virkelige eksempler for å illustrere dem i bruk, Slik at du Kan Begynne å bruke dem i din egen design.

perseptuelle prosessen gjør oss i stand til å oppfatte verden gjennom våre sanser av syn, lukt, lyd, smak og berøring. Spesielt behandler vårt visuelle system store mengder informasjon i sitt miljø. I stedet for å oppfatte elementer separat, organiserer hjernen mønstre, objekter og former i hele former som vi kan forstå.gestalt gruppering prinsipper for visuell persepsjon beskriver denne organisasjonen som et sett av prinsipper som forklarer hvordan vi oppfatter og organisere denne enorme mengden av visuelle stimuli. Gestaltprinsippene-likhet — nærhet, lukning, figur-bakken, videreføring og felles skjebne — er et populært verktøy som brukes av designere for visuelt å organisere informasjon. Som visuell designer, og nå interaksjonsdesigner, bruker jeg disse prinsippene regelmessig for å skape relasjoner og forskjeller mellom elementer i designene mine. Å forstå hvordan disse prinsippene fungerer, og hvordan du bruker dem i designene dine, gir sterkere og mer engasjerende arbeid.

er du klar til å forbedre designene dine? La oss begynne med å grave inn i likhet.

Likhet

gestaltprinsippet om likhet sier at elementer som ligner oppfattes å være mer relaterte enn elementer som er forskjellige. Likhet hjelper oss med å organisere objekter etter deres tilknytning til andre objekter i en gruppe og kan påvirkes av egenskapene til farge, størrelse, form og orientering.

Bruk Av Farge For Å Tilordne Relasjoner

Likhet påvirkes spesielt av farge. I eksemplet nedenfor kan du legge merke til hvordan de fargede figurene har en sterk effekt når du tilordner en gruppering eller relasjon, selv når ulike figurer er inkludert.

Bruke Størrelse Til Å Tildele Relasjoner

Størrelse Er et annet nyttig verktøy vi kan bruke til å skape likhet. I eksemplet nedenfor fører likhet i størrelse til at de større figurene skiller seg ut og danner en gruppe, selv om alle figurene er de samme.

Bruke Form Til Å Tilordne Relasjoner

Form er nyttig i gruppering etter likhet, men Den har den svakeste grupperingseffekten sammenlignet med farge og størrelse. I eksemplet som er sett her, får form oss til å tolke elementer som kolonner av sirkler og firkanter, i motsetning til rader med vekslende sirkler og firkanter.

Bruke Orientering For Å Tildele Relasjoner

Orientering kan også brukes til å gruppere etter likhet. Ved å dreie noen av rutene i denne gruppen med 45 grader, blir det laget en egen gruppering som oppfattes som relatert. De ser nesten ut til å bevege seg sammen i en lignende retning i forhold til figurene rundt dem. Dette berører faktisk gestaltprinsippet om felles skjebne, et prinsipp vi kommer inn i en fremtidig artikkel. Men gjerne hoppe videre Og Google det (etter at du har lest denne artikkelen, selvfølgelig!). Det er et fascinerende prinsipp som skjer ofte rundt deg.

Mer Om Farge

som nevnt tidligere, er likhet spesielt påvirket av farge og kan overstyre andre attributter. For eksempel kan vi overstyre eksemplet på likhet i form ved å legge til farge. Nå oppfatter vi vekslende rader med røde og hvite former i motsetning til kolonner av sirkler og firkanter. Gi det et forsøk. Prøv å se kolonnene av sirkler og firkanter. Mulig, men ganske tøft nå, er det ikke?

i Tillegg kan farge overstyre størrelsen. Når vi legger til farge i eksempelet på likhet i størrelse, lager vi to grupperinger skilt fra hverandre. Nå oppfatter vi de store røde firkantene som en gruppe og den enkle store hvite firkanten som en egen, ikke-relatert (og ensom) gruppe.

disse to eksemplene illustrerer hvor kraftig farge kan være i å tildele relasjoner mellom elementer. Prøv å bruke farge i arbeidet ditt for å skille elementer, og du vil bli overrasket over hvor mye sterkere grupperingene dine er.

Likhet i Praksis

når vi designer, kan vi bruke likhet til å formidle organisasjon og foreninger ved å vise hvilke elementer som er relatert, eller ikke relatert, til hverandre. For eksempel er de to seksjonene som vises på Salons nettsted nedenfor gruppert etter deres relative størrelser. Vi oppfatter tydelig to separate grupper, med topphistorier til venstre og mest leste til høyre. Selv om begge seksjonene har samme funksjon — viser artikler å lese — gruppering etter størrelse tildeler mer salience til venstre gruppering, som lar Salon å veilede oppmerksomhet til sine topphistorier.

i motsetning til dette gir mangelen på størrelsesforskjeller i Dette eksemplet Fra Amazon ingen spesiell betydning for noen del. Til tross for dette oppnås likhet fortsatt ved bruk av repetisjon av tilsvarende størrelse og form, noe som får oss til å oppleve rader med elementer.

Lignende Fargebruk

vi vet at farge er en sterk indikator på likhet, bidrar til å organisere og gjøre innholdet forståelig. I dette eksemplet fra Cars.com, lignende fargebruk hjelper oss med å skille mellom hva som er en overskrift, kroppskopi og koblingstekst. (Full avsløring: jeg jobber på Cars.com som interaksjonsdesigner.) Ved å bruke forskjellige farger for hvert av disse elementene, forventer vi at de skal fungere på samme måte, og når det gjelder den blå lenketeksten, skal de oppføre seg på samme måte.

Nærhet

gestaltprinsippet om nærhet sier at elementer som er nærmere sammen oppfattes å være mer relaterte enn elementer som er lengre fra hverandre. Som med likhet, hjelper nærhet oss med å organisere objekter ved deres tilknytning til andre objekter. Nærhet er det sterkeste prinsippet for å indikere relatedness av objekter, hjelper oss å forstå og organisere informasjon raskere og mer effektivt.eksemplene på sirkler nedenfor viser hvordan nærhet kan brukes til å hjelpe oss med å oppleve objekter som relaterte. Som vi ser her, er sirklene spredt ut, viser ingen relasjon, med hver oppfattes som et eget objekt.

men når sirklene trekkes i nær avstand til hverandre, blir de tildelt en relasjon og oppfattes ikke lenger som separate objekter.

Mellomrom er et uvurderlig verktøy for å skape nærhet. Å ta samme gruppe sirkler og legge til mellomrom hjelper oss med å oppleve ting annerledes. Nå, til venstre, får nærheten til figurene oss til å oppleve de to gruppene som kolonner, hver sin egen gruppe. Til høyre får nærhet av figurene oss til å oppleve de to gruppene som rader, igjen hver sin egen gruppe. Bruk hvitt mellomrom i designene dine for å styrke grupperinger, samt å skille dem fra andre elementer.

Nærhetens Kraft

Nærhet er sterk nok til å overmanne andre elementer av variasjon. Legg merke til hvordan nærhet fortsatt vinner ut selv når andre attributter, for eksempel farge og form, legges til. Prøv som de kan, farge og form ikke overmanne nærhet her, og hver gruppering oppfattes fortsatt som et eget element.

Nærhet i Praksis

når vi organiserer informasjon i våre design, kan vi bruke nærhet til å skape relasjoner mellom elementer for å hjelpe til med å forstå informasjonen som presenteres. For eksempel, ved å gruppere disse bildene Fra Apple Store sammen i nærheten, tilordner vi et forhold til hele gruppen. Vi oppfatter dem som relaterte og forventer at innholdet skal være lik.

Men når vi fjerner senterkolonnen, oppfatter vi plutselig to separate grupper og har en forventning om forskjellig innhold mellom dem.

Kombinere Nærhet og Likhet

Gruppering av nærhet kan også kombineres med likhet for å skape sterkere relasjoner. Sett i dette eksemplet Fra Amazon, gruppering av nærhet og likhet i størrelse får oss til å oppleve to separate grupperinger og tildeler mer fremtredende til venstre gruppe.

Nærhet og Hierarki

Nærhet er utmerket for å organisere hierarkiske elementer. I dette eksemplet fra Crate & Barrel, er alternativene gruppert sammen under vanlige overskrifter, skape relasjoner, noe som gjør skanning og finne informasjon mye enklere.

når overskriftene fjernes og alternativene grupperes uten nærhet, mister vi relasjonene som ble opprettet, og det blir mye vanskeligere å raskt skanne og finne ønsket informasjon. Prøv det selv. Gå videre og se hvor raskt du kan finne kaffekopper i gruppering med overskrifter versus gruppering uten overskrifter. Litt vanskeligere å raskt hoppe til det, er det ikke?

Konklusjon

Å Forstå hvordan du bruker likhet og nærhet til å påvirke forholdet mellom elementer i arbeidet ditt, vil hjelpe deg med å lage design som gjør det enklere å organisere og forbedre brukbarheten av arbeidet ditt. Bruk likhet og nærhet til å skape både relasjoner og forskjeller mellom elementer i designene dine. Eksperimenter med bruk av hvitt rom, farge, størrelse, form og orientering av elementer og bland begge prinsippene sammen for å produsere svært sterke og engasjerende relasjoner.I neste del av denne serien vil vi se på nedleggelse og figur-bakken, og utforske hvordan disse to gestaltprinsippene bruker positiv og negativ plass til å skape enkle, men kraftige relasjoner.

Ressurser og God Leser

• Gestalt prinsipper På Scholarpedia.
• «Organisasjonslover i Perseptuelle Former»: Tekst Av Max Wertheimers banebrytende papir fra 1923.Universal Principles Of Design Revidert og oppdatert: 125 måter å forbedre brukervennlighet, påvirke oppfatning, øke appell, ta bedre designbeslutninger og lære gjennom design, Av William Lidwell, Kritina Holden og Jill Butler. Rockport Pub, 2010.
• Informasjon Visualisering: Perception For Design, Av Colin Ware. Elsevier, 2012.

• Design Prinsipper: Sammenkobling Og Separering Av Elementer gjennom Kontrast og Likhet
• Komposisjonsbalanse, Symmetri og Asymmetri
• Hvordan Forbedre Din E-Arbeidsflyt Med Modulær Design
• Forbedre Brukeropplevelsen med Sanntidsfunksjoner

(ml, da, og, jb, il)