4 ting hver designer skal vide om whitespace
Whitespace (eller "negative space") er et tomt mellemrum mellem og omkring objekter på en side. Elementer af whitespace i grafiske brugergrænseflader er:
- Margener, paddings og rynker
- Rum omkring billeder og grafiske objekter
- Linjeafstand og brevafstand i tekstindhold
Selvom nogle mennesker måske overvejer whitespace et spild af værdifulde skærmboder, er det et vigtigt element i et design. Faktisk er whitespace lige så vigtigt som indholdet. Som Jan Tschichold sagde:
Whitespace skal betragtes som et aktivt element, ikke en passiv baggrund
Alle gode brugergrænseflader inkorporerer korrekte whitespace værdier i alle sideelementer fra top til bund. Hvidrummet på en side kan være lige så vigtigt som det rum, der er besat af brugergrænseelementer, fordi tekst, knapper, logoer og andre objekter har plads til at trække vejret.
I denne artikel finder du, hvordan du bruger whitespace i dine designs for at give det en ren og præcis følelse:
1. Forbedre tekstlæsbarhed
Whitespace er i stand til at gøre læsningen meget lettere ved at reducere mængden af tekstbesøgende se alle på én gang. Manglen på hvide pladser (rotete side) gør ikke brugerne lyst til at læse indholdet. På den anden side har korrekt brugt whitespace vist sig at øge tekstforståelsen op til 20%, som påpeget af Dmitry Fadeyev .
To vigtige ting, du skal huske på, når du optimerer dit tekstindhold, er punktmargener og linjeafstand (mellemrummet mellem hver linje i din tekst). Sidstnævnte kan drastisk forbedre læsbarheden af en teksttekst. Generelt er jo større afstanden, jo bedre oplevelse brugeren vil have under læsning (selvom for meget linieafstand kan gøre linjerne afbrudt).
2. Afklare forhold
Hele layoutet stammer fra summen af dets dele og indholdsforhold er defineret af omgivende hvide rum. Nærhedsloven fastslår, at objekter nær hinanden ligner hinanden. Hvidrummet fungerer som en visuel cue i dette tilfælde. Se på billedet nedenfor:
Gestaltloven dikterer, at objekter i nærhed vil fremstå som en "enhed"; det hvide rum fungerer som en visuel cue.
Næsten alle, der ser dette billede, bemærker to grupper af cirkler, snarere end blot 12 cirkler. Cirklerne er alle identiske, og den eneste forskel mellem dem er mængden af hvide rum, der adskiller dem.
Det er muligt at gruppere elementer sammen ved at reducere mellemrummet mellem dem og øge mellemrummet mellem dem og andre elementer på siden.
For brugergrænseflader betyder det, at objekter i umiddelbar nærhed vil fremstå som en "enhed". I forbindelse med webformularer er det f.eks. En god idé at placere etiketter tæt på de relevante felter for at oprette et objekt. Når etiketter placeres tættere på felterne gør dette forholdet mellem dem meget klart for brugerne.
Oplysninger kommunikeres langt tydeligere, når etiketter placeres tættere på de felter, de vedrører.
3. Tiltrækning opmærksomhed
Designere kan bruge whitespace til at kommunikere, hvad der er vigtigst ved et overblik. Der er et forhold mellem en afstand og opmærksomhed; større afstand styrker opmærksomhed. Manglen på andre elementer vil kun gøre eksisterende elementer skiller sig ud mere. Det er muligt at bruge et hvide rum til din fordel - at trække vandrende øjne på bestemte sider. Ekstra polstring omkring et bestemt segment af indhold tvinger brugerens opmærksomhed på dette område, simpelthen fordi der ikke er noget andet på skærmen for at henlede opmærksomheden. Således jo mere whitespace omkring et objekt, jo mere øjet er trukket til det.
4. Opret visuelt hierarki
Når whitespace bruges korrekt, tillader det en side at skabe en generel strøm og balance, som igen hjælper med at kommunikere formålet med designet. Whitespace kan understøtte det overordnede hierarki. Det producerer enten symmetri eller asymmetri.
Symmetri skaber hukommelse og harmoni:
Mailchimp, som du kan se, er en stor fortaler for hvidt rum i deres design. Når besøgende scanner hjemmesiden, trækker "Sign Up Free" -knappen deres opmærksomhed næsten øjeblikkeligt. Ved hjælp af symmetri er det muligt at skabe et afbalanceret layout med lige vigtige højre og venstre dele.
Mens asymmetri gør opmærksomheden:
Asymmetri er fantastisk til at give opmærksomhed til et bestemt område af siden.
Når et element bruger asymmetrisk rum, står det ud for andre omgivende elementer.
Konklusion
Whitespace er ikke et spildt rum, det er et kraftfuldt designværktøj. Det kan være lige så vigtigt som det rum, der er optaget af billeder, tekst eller andre brugergrænseflader objekt, fordi selv tomt rum tjener et formål og understøtter den visuelle integritet af et layout.
Selv om det virker som et simpelt emne, kan whitespace være svært at mestre, fordi anvendelsen af whitespace er både kunst og videnskab. Sandelig forstå, hvor meget hvide rum der skal bruges til at skabe et godt layout kræver øvelse.