4 saker varje designer borde veta om whitespace
Whitespace (eller "negativt utrymme") är ett tomt utrymme mellan och runt objekt på en sida. Element av blankutrymme i grafiska användargränssnitt är:
- Margener, paddlar och rännor
- Rymden runt bilder och grafiska objekt
- Linjeavstånd och brevavstånd inom textinnehåll
Även om vissa människor kan överväga whitespace ett slöseri med värdefullt skärmlandskap, är det ett viktigt element i en design. Faktum är att blankutrymme är lika viktigt som innehållet. Som Jan Tschichold sa:
Whitespace ska betraktas som ett aktivt element, inte en passiv bakgrund
Alla bra användargränssnitt innehåller rätt whitespace-värden i alla sidelement från topp till botten. Vitrymmet på en sida kan vara lika viktigt som det utrymme som används av användargränssnitt eftersom text, knappar, logotyper och andra föremål behöver andas.
I den här artikeln hittar du hur du använder whitespace i dina mönster för att ge den en ren, renderad känsla:
1. Förbättra textläsbarheten
Whitespace kan göra läsning mycket enklare genom att minska mängden textbesök ser allt på en gång. Bristen på blankutrymme (rörig sida) gör inte användarna vill läsa innehållet. Å andra sidan har korrekt använt blankutrymme bevisats öka textförståelsen upp till 20%, vilket påpekats av Dmitry Fadeyev .
Två viktiga saker att tänka på när du optimerar ditt textinnehåll är styckemarginaler och linjeavstånd (mellanslag mellan varje rad i din text). Den senare kan drastiskt förbättra läsbarheten hos en texttext. Generellt desto större är avståndet, desto bättre upplevelse kommer användaren att ha när du läser (även om för mycket linjeavstånd kan göra linjerna urkopplade).
2. Förtydliga förhållanden
Hela layouten härrör från summan av dess delar och innehållsförhållanden definieras av omgivande vittomrymden. I lagen om närhet anges att föremål som ligger nära varandra liknar varandra. Vita rymden fungerar som en visuell signal i detta fall. Ta en titt på bilden nedan:
Gestaltens lagar dikterar att objekt i närhet kommer att framstå som en "enhet"; det vita utrymmet fungerar som en visuell signal.
Nästan alla som ser denna bild märker två grupper av cirklar, snarare än bara 12 cirklar. Cirklarna är alla identiska och den enda skillnaden mellan dem är mängden av blankutrymme som skiljer dem.
Det är möjligt att gruppera objekt tillsammans genom att minska utrymmet mellan dem och öka utrymmet mellan dem och andra element på sidan.
För användargränssnitt betyder det att objekt i närheten kommer att visas som en "enhet". Till exempel, i samband med webbformulär, är det en bra idé att placera etiketter nära de relevanta fälten för att skapa ett objekt. När etiketterna placeras närmare fälten gör detta förhållandet mycket tydligt för användarna.
Informationen kommuniceras mycket tydligare när etiketterna placeras närmare de fält de berör.
3. Att locka uppmärksamhet
Designers kan använda whitespace för att kommunicera vad som är viktigast vid en blick. Det finns ett förhållande mellan avstånd och uppmärksamhet; större avstånd tvingar uppmärksamhet. Bristen på andra element kommer bara att göra de befintliga elementen tydligare. Det är möjligt att använda en blankutrymme till din fördel - att rita ögon på vissa sidelement. Extra vadderar kring ett visst innehållssegment tvingar användarnas uppmärksamhet på området bara för att det inte finns något annat på skärmen för att dra uppmärksamhet. Ju mer blankt runt ett objekt desto mer är ögat dras till det.
4. Skapa visuell hierarki
När blankutrymme används på rätt sätt tillåter det en sida att skapa ett generellt flöde och balans, som i sin tur hjälper till att kommunicera syftet med designen. Whitespace kan stödja den övergripande hierarkin. Det ger antingen symmetri eller asymmetri.
Symmetri skapar minne och harmoni:
Mailchimp, som du kan se, är en stor förespråkare för vitt utrymme i sina mönster. När besökare skannar hemsidan drar sig "Sign Up Free" -knappen uppmärksamhet nästan omedelbart. Med symmetri är det möjligt att skapa en balanserad layout med lika viktiga högra och vänstra delar.
Medan asymmetri uppmärksammar:
Asymmetri är utmärkt för att uppmärksamma ett visst område på sidan.
När ett element använder asymmetriskt utrymme, står det ut mot andra omgivande element.
Slutsats
Whitespace är inte ett slösat utrymme, det är ett kraftfullt designverktyg. Det kan vara lika viktigt som det utrymme som upptas av bildspråk, text eller andra användargränssnitt objekt eftersom även tomt utrymme tjänar ett syfte och stöder den visuella integriteten i en layout.
Även om det verkar som ett enkelt ämne, kan rymden vara svår att behärska, eftersom tillämpningen av blankutrymme är både konst och vetenskap. Att verkligen förstå hur mycket vitt utrymme ska användas för att skapa en bra layout kräver övning.