Vita utrymmen förbättrar en webbplats när de tydligt separerar innehåll, prioriterar information och låter varje åtgärd andas. Dessa är inte nödvändigtvis vita områden: termen syftar på alla tomma utrymmen, oavsett dess färg.Väl doserad, det gör läsningen lättare och vägleder ögat Dåligt doserat kan det tvärtom ge intryck av tomhet eller tvinga dig att rulla i onödan.
Den korrekta metoden är att utgå från innehållets prioritet, sedan tillämpa en konsekvent avståndsskala mellan texter, kartor, bilder, avsnitt och knappar Målet är inte att "lägga till tomhet", utan att göra sidan lättare att förstå.
Verkar din webbplats upptagen eller svår att navigera?
En vy utifrån låter dig identifiera områden som ska ventileras utan att ta bort användbar information.
Vad kallar vi "white space" inom webbdesign?
Vitrymd, eller negativt utrymme, är det område som lämnas fritt runt ett element.Det kan vara vitt, marinblått, beige eller ta bakgrundsfärgen på platsen.Det finns i två kompletterande former.
Mikrorymd
Den separerar raderna i en text, en ikon för dess ordalydelse, innehållet i kanterna på en karta eller två fält i en form. Dessa små avvikelser påverkar direkt läsbarheten.
Makrorymd
Det separerar stora grupper: en banner och ett urval av produkter, två avsnitt eller ett argument och dess uppmaning till handling. Det strukturerar sidans allmänna rytm.
Varför förbättrar vita utrymmen en webbplats?
De ger besökaren riktmärken En titel isolerad från föregående avsnitt men nära stycket den introducerar förstås omedelbart som början på ett nytt block. En knapp omgiven av utrymme kommer ut utan att behöva göra det gigantiskt.
- Läser: rader, stycken och listor är lättare att navigera.
- Hierarki: viktigt innehåll särskiljs från sekundär information.
- Förståelse: de länkade elementen verkar nära, de olika ämnena är åtskilda.
- Mobil komfort: touch-zoner är mindre snäva och klickfel minskar.
- Uppfattning: en vanlig komposition verkar generellt mer kontrollerad och professionell.
Tre konkreta exempel på användningen av vitt utrymme
Dessa schematiska demonstrationer visar hur avstånd ändrar uppfattningen av en sida, utan att ändra dess innehåll. De representerar inte riktiga kundprojekt.
Exempel 1: ett produktblad som är lättare att navigera
Titel, pris, nyheter och aktier konkurrerar med varandra.
Relaterade element håller sig nära, medan knappen drar nytta av tydlig andning.
Exempel 2: Bättre separata avsnitt på en sida
Grupperna verkar tillhöra samma block och hierarkin blir suddig.
Utrymmet mellan sektionerna är större än det inre utrymmet: strukturen är omedelbart förståelig.
Exempel 3: förbättra komforten på mobilen
Innehållet berör nästan kanterna och handlingen smälter in i text.
Sidomarginaler, intervaller och knapparea gör rutten mer självklar.
Hur använder man blanksteg i 7 steg?
- Klassificera informationen. Bestäm vad besökaren ska se, förstå och sedan göra.
- Gruppera vad som hör ihop. Pris- och köpknappen bör se ut att tillhöra samma uppsättning; returvillkor kan utgöra ett sekundärt block.
- Separera olika grupper. Använd ett större mellanrum mellan två avsnitt än mellan en titel och dess text.
- Välj en enkel skala. Till exempel 8, 16, 24, 32, 48 och 64 pixlar som utgångspunkter, för att anpassa sig till temat och typografin.
- Ta hand om insidan av komponenterna. Ett kort måste hålla en regelbunden marginal mellan dess kanter, dess titel, dess bild och dess knapp.
- Styr den vertikala rytmen. Alternativa kompakta sekvenser och skarpa andetag istället för att applicera samma stora utrymme överallt.
- Testa på riktiga skärmar. Kontrollera hela sidan på dator och telefon, inte bara en isolerad sektion i redigeraren.
Vilka utrymmen ska tillhandahållas beroende på typ av sida?
| Sida | Att ventileras som en prioritet | Vaksamhetspunkt |
|---|---|---|
| Hem | Löfte, visuellt, fördelar och urval | Undvik avsnitt som är för höga och fördröja tillgången till produkter |
| Samling | Titel, filter, rutnät och produktkort | Håll tillräckligt med synliga produkter utan att packa korten |
| Produktblad | Galleri, priser, varianter, köp och återförsäkring | Håll avgörande information nära knappen |
| Korg | Produkter, totalt, leverans och validering | Flytta inte bort huvudknappen med sekundära block |
| Artikel | Stycken, rubriker, listor och bilder | Begränsa bredden på långa textrader |
Hur hanterar man vitt utrymme på mobilen?
Mobilen ska inte vara en enkel komprimerad version av datorn Bredden saknas, men höjden förblir tillgänglig: blocken passerar i allmänhet över en kolumn och deras vertikala avstånd blir väsentligt.
- Minska sidomarginalerna utan att klistra text i skärmens kanter.
- Minska mycket stora dekorativa utrymmen som förlänger sidan i onödan.
- Upprätthålla en tydlig åtskillnad mellan knappar, fält och peklänkar.
- Förvandla stora bord till lättlästa vertikala kort.
- Kolla långa titlar, eftersom de snabbt tar upp flera rader.
Prioriteten är kontinuiteten i rutten. Vår guide tillägnad den mobila upplevelsen på Shopify detaljer andra användbara kontroller.
Vanligaste avståndsfel
För lite utrymme
- Texter fastnade i kanterna
- Kort och knappar svåra att skilja
- Sektioner utan synligt brott
- Återförsäkringsinformation hopade sig
För mycket utrymme
- Stora tomma områden utan avsikt
- Fjärrrelaterad information
- Verdriven rullning
- Oavslutade sidutskrifter
Vilken tjänst ska jag välja för att förbättra avståndet?
En snabb diagnos
Välj det gratis minirevision om du först vill upptäcka de viktigaste synliga frågorna och bestämma prioritet.
En befintlig butik som ska granskas
La shopify redesign lämplig när avstånd är en del av en större struktur, bild eller väg fråga.
Ett nytt projekt
La shopify butiksskapande tillåter hierarki och avståndssystem att integreras genom design.
En sida utanför Shopify
För en showcase eller annat webbprojekt, konsultera tjänsten för skapande av professionell webbplats.
Omfattning, tidsfrist och pris beror på tjänsten och de berörda sidorna SiteQuiVend presenterar formlerna som publiceras på sina tjänstesidor och bekräftar lämpligt ramverk innan start.
Behöver du tydligare layout?
Presentera din webbplats och sidorna för att förbättra för att riktas mot lämplig tjänst.
Checklista för kontroll av vita utrymmen
- Varje avsnitt har ett identifierbart mål.
- Relaterade element är visuellt grupperade tillsammans.
- Separata sektioner har starkare separation.
- Kortens inre marginaler är regelbundna.
- Stycken bildar inte för täta block.
- Huvudknappen har andningszon.
- Sidomarginalerna förblir bekväma på mobilen.
- Inget stort tomrum skär bort information från dess handling.
- Sidan förblir rytmisk över hela sin längd.
- Återgivningen kontrollerades till 375 pixlar bred.
Webbplats white space FAQ
Måste ett vitt utrymme vara vitt?
Nej. Detta är ett tomt område runt eller mellan innehåll. Det kan använda vilken bakgrundsfärg som helst som överensstämmer med den visuella identiteten.
Slösar vita utrymmen utrymme?
De använder yta, men ger riktmärken. De blir bara problematiska när de går bort från relaterade element eller förlänger sidan utan nytta.
Vilken marginal ska jag använda mellan två sektioner?
Det finns inget universellt värde En konsekvent skala, anpassad till typografi och tema, är viktigare än ett isolerat tal.Mellanrummet mellan avsnitten måste vara större än det som länkar en titel till dess text.
Ska vi lägga mer eller mindre plats på mobilen?
Sidomarginalerna är i allmänhet mindre, medan vertikalt avstånd bör förbli tillräckligt för att separera innehåll och underlätta taktila interaktioner.
Hur vet man om en sida är för luftig?
Om besökaren måste bläddra mycket för att länka information till sin knapp, om associerade block verkar oberoende eller om tomma områden inte har någon funktion, är avståndet förmodligen överdrivet.
Hur man sänder ut en sida utan att ta bort innehåll?
Gruppera information efter tema, förkorta stycken, använd listor, skapa konsekventa kort och avslöja sekundär information i dragspel när det förblir naturligt.
Förbättrar vita utrymmen automatiskt försäljningen?
Nej De kan göra resan tydligare, men försäljningen beror också på utbud, trafik, priser, förtroende, innehåll och shoppingupplevelse.
Kan vi bara förbättra avståndet för ett Shopify-tema?
Ja för riktade justeringar, men en bredare omdesign är att föredra om strukturen, sidmallarna eller sökvägen också är problematiska.
Skapa utrymme för att bättre vägleda
Bra avstånd gör strukturen självklar utan att dra uppmärksamhet till sig själv Börja med att gruppera relaterat innehåll, separera tydligt stegen längs vägen och tillämpa en vanlig skala.Kontrollera sedan allt på dator och mobil.
Om sidan förblir laddad trots dessa justeringar kan problemet vara med hierarkin eller volymen av information. SiteQuiVend kan hjälpa dig att avgöra om riktad korrigering, Shopify-omdesign eller omdesign behövs.
