Whitespace (eller "negativ plass") er en tom plass mellom og rundt objekter på en side. Elementer av hvite rom i grafiske brukergrensesnitt er:

  • Marginer, paddings og takrenner
  • Rommet rundt bilder og grafiske objekter
  • Linjeavstand og brevavstand innenfor tekstinnhold

Selv om noen mennesker kan vurdere whitespace bortkastet verdifull skjerm eiendom, er det et viktig element i et design. Faktisk er hvite plass like viktig som innholdet. Som Jan Tschichold sa:

Whitespace skal betraktes som et aktivt element, ikke en passiv bakgrunn

Alle gode brukergrensesnitt innlemmer riktige hvite plassverdier i alle sideelementer fra topp til bunn. Hviteplassen på en side kan være like viktig som plassen opptatt av brukergrensesnittelementer fordi tekst, knapper, logoer og andre objekter trenger plass til å puste.

I denne artikkelen finner du hvordan du bruker hvitt plass i designene dine for å gi den en ren, ryddig følelse:

1. Forbedre tekstlesbarhet

Whitespace er i stand til å gjøre lesing mye lettere ved å redusere mengden av tekst besøkende se alt på en gang. Mangelen på hvitt plass (rotete side) gjør ikke brukerne lyst til å lese innholdet. På den annen side har det blitt bevist at ordentlig forståelse av tekstforståelse har økt opp til 20%, slik det fremgår av Dmitry Fadeyev .

To viktige ting å huske på når du optimaliserer tekstinnholdet, er marginer og linjeavstand (mellomrom mellom hver linje i teksten). Sistnevnte kan drastisk forbedre lesbarheten til en teksttekst. Generelt er jo større avstanden, desto bedre opplevelse brukeren vil ha mens du leser (selv om for mye linjeavstand kan gjøre linjene frakoblet).

2. Klarerende forhold

Hele oppsettet kommer fra summen av delene og innholdsforholdene er definert av omkringliggende hvite rom. Næringsloven fastslår at objekter i nærheten av hverandre ser like ut. Hvite rom fungerer som en visuell kø i dette tilfellet. Ta en titt på bildet nedenfor:

1

Gestaltloven dikterer at gjenstander i umiddelbar nærhet vil fremstå som en "enhet"; den hvite plassen virker som en visuell stikkontakt.

Nesten alle som ser dette bildet merker to grupper av sirkler, i stedet for bare 12 sirkler. Sirklene er alle identiske, og den eneste forskjellen mellom dem er mengden av hvitt plass som skiller dem.

Det er mulig å gruppere elementer sammen ved å redusere mellomromet mellom dem og øke mellomrommet mellom dem og andre elementer på siden.

For brukergrensesnitt betyr dette at objekter i umiddelbar nærhet vil vises som en "enhet". For eksempel, i forbindelse med webskjemaer, er det en god ide å plassere etiketter nær relevante felt for å opprette et objekt. Når etiketter plasseres nærmere feltene, gjør dette forholdet mellom dem mye klart for brukerne.

2

Informasjon kommuniseres langt tydeligere når etiketter blir plassert nærmere de feltene de har tilknytning til.

3. Tiltrekke oppmerksomhet

Designere kan bruke whitespace til å kommunisere det viktigste med et blikk. Det er et forhold mellom avstand og oppmerksomhet; større avstand styrker oppmerksomheten. Mangelen på andre elementer vil bare gjøre at eksisterende elementer skiller seg ut mer. Det er mulig å bruke et hvitt rom for din fordel - å trekke vandrende øyne på bestemte siderelementer. Ekstra polstring rundt et bestemt segment av innholdet tvinger brukerens oppmerksomhet på området bare fordi det ikke er noe annet på skjermen for å trekke oppmerksomheten. Dermed er jo mer hvite rom rundt et objekt, jo mer blir øynene trukket til det.

3

4. Opprett visuelt hierarki

Når whitespace brukes riktig, tillater det en side å skape en generell strøm og balanse, som igjen bidrar til å formidle hensikten med designet. Whitespace kan støtte det overordnede hierarkiet. Det produserer enten symmetri eller asymmetri.

Symmetri skaper minne og harmoni:

4

Mailchimp, som du ser, er en stor fortaler for hvitt rom i deres design. Når besøkende skanner hjemmesiden, trekker «Sign Up Free» -knappen sin oppmerksomhet nesten umiddelbart. Ved hjelp av symmetri er det mulig å lage en balansert layout med like viktige høyre og venstre deler.

Mens asymmetri trekker oppmerksomhet:

5

Asymmetri er flott for å gi oppmerksomhet til et bestemt område på siden.

6

Når et element bruker asymmetrisk plass, står det ut mot andre omkringliggende elementer.

Konklusjon

Whitespace er ikke et bortkastet rom, det er et kraftig designverktøy. Det kan være like viktig som plass okkupert av bilder, tekst eller andre brukergrensesnitt objekt fordi enda tomt rom tjener en hensikt og støtter den visuelle integriteten til et layout.

Selv om det virker som et enkelt tema, kan hvite rom være vanskelig å mestre fordi applikasjonen av hvitt plass er både kunst og vitenskap. Å forstå virkelig hvor mye hvite plass som skal brukes til å lage en god layout krever øvelse.