Hvide mellemrum forbedrer et websted, når de tydeligt adskiller indhold, prioriterer information og lader hver handling ånde. Disse er ikke nødvendigvis hvide områder: udtrykket refererer til ethvert tomt rum, uanset dets farve. Godt doseret, det gør læsningen lettere og styrer øjet. Dårligt doseret kan det tværtimod give indtryk af tomhed eller tvinge dig til at rulle unødigt.
Den korrekte metode er at tage udgangspunkt i prioriteringen af indholdet og derefter anvende en ensartet afstandsskala mellem tekster, kort, billeder, sektioner og knapper. Målet er ikke at "tilføje tomhed", men at gøre siden lettere at forstå.
Virker dit websted travlt eller svært at navigere?
En visning udefra giver dig mulighed for at identificere områder, der skal ventileres, uden at fjerne nyttige oplysninger.
Hvad kalder vi "white space" i webdesign?
White space, eller negativt rum, er det område, der er efterladt frit omkring et element. Det kan være hvidt, marineblåt, beige eller tage baggrundsfarven på webstedet. Det findes i to komplementære former.
Microspace
Den adskiller linjerne i en tekst, et ikon for dens ordlyd, indholdet af kanterne på et kort eller to felter i en form. Disse små afvigelser påvirker direkte læsbarheden.
Macrospace
Det adskiller store grupper: et banner og et udvalg af produkter, to sektioner eller et argument og dets opfordring til handling. Det strukturerer sidens generelle rytme.
Hvorfor forbedrer hvide mellemrum et websted?
De giver den besøgende benchmarks. En titel isoleret fra det foregående afsnit, men tæt på det afsnit, den introducerer, forstås straks som starten på en ny blok. En knap omgivet af plads kommer ud uden behov for at gøre det gigantisk.
- Læsning: linjer, afsnit og lister er nemmere at navigere i.
- Hierarki: vigtigt indhold adskilles fra sekundær information.
- Forståelse: de sammenkædede elementer vises tæt, de forskellige emner er adskilt.
- Mobil komfort: berøringszoner er mindre stramme, og klikfejl falder.
- Perception: en almindelig komposition virker generelt mere kontrolleret og professionel.
Tre konkrete eksempler på brug af white space
Disse skematiske demonstrationer viser, hvordan afstand ændrer opfattelsen af en side, uden at ændre dens indhold. De repræsenterer ikke rigtige kundeprojekter.
Eksempel 1: et produktark, der er nemmere at navigere i
Titel, pris, nyheder og aktier konkurrerer med hinanden.
Relaterede elementer forbliver tæt på, mens knappen nyder godt af klar vejrtrækning.
Eksempel 2: Bedre separate sektioner af en side
Grupperne synes at tilhøre den samme blok, og hierarkiet bliver sløret.
Mellemrummet mellem sektioner er større end det indre rum: strukturen er umiddelbart forståelig.
Eksempel 3: forbedre komforten på mobilen
Indhold rører næsten kanterne, og handling blandes med tekst.
Sidemargener, intervaller og knapområde gør ruten mere oplagt.
Hvordan bruger man hvid plads i 7 trin?
- Klassificer oplysningerne. Beslut hvad den besøgende skal se, forstå og derefter gøre.
- Gruppér det, der hænger sammen. Pris- og købsknappen skal se ud til at tilhøre samme sæt; returbetingelser kan danne en sekundær blok.
- Adskil forskellige grupper. Brug et større mellemrum mellem to afsnit end mellem en titel og dens tekst.
- Vælg en simpel skala. For eksempel 8, 16, 24, 32, 48 og 64 pixels som udgangspunkt for at tilpasse sig temaet og typografien.
- Pas på indersiden af komponenterne. Et kort skal opretholde en regelmæssig margin mellem dets kanter, dets titel, dets billede og dets knap.
- Styr den lodrette rytme. Skift kompakte sekvenser og skarpe vejrtrækninger i stedet for at anvende det samme store rum overalt.
- Test på rigtige skærme. Tjek hele siden på computer og telefon, ikke kun et isoleret afsnit i editoren.
Hvilke mellemrum skal angives afhængigt af sidetypen?
| Page | At blive ventileret som en prioritet | Vagtsomhedspunkt |
|---|---|---|
| Home | Løfte, visuelt, fordele og udvalg | Undgå sektioner, der er for høje og forsinke adgangen til produkter |
| Collection | Titel, filtre, gitter og produktkort | Opbevar nok synlige produkter uden at pakke kortene |
| Produktblad | Galleri, priser, varianter, køb og genforsikring | Hold afgørende oplysninger tæt på knappen |
| Kurv | Produkter, total, levering og validering | Flyt ikke hovedknappen væk med sekundære blokke |
| Artikel | Afsnit, overskrifter, lister og billeder | Begræns bredden af lange tekstlinjer |
Hvordan administrerer man hvidt rum på mobilen?
Mobilen bør ikke være en simpel komprimeret version af computeren. Bredden mangler, men højden forbliver tilgængelig: Blokkene passerer generelt over en kolonne, og deres lodrette afstand bliver afgørende.
- Reducer sidemargener uden at klæbe tekst til skærmens kanter.
- Reducer meget store dekorative rum, der unødigt forlænger siden.
- Oprethold en klar adskillelse mellem knapper, felter og berøringslinks.
- Omdanne store borde til letlæselige lodrette kort.
- Tjek lange titler, da de hurtigt fylder flere linjer.
Prioriteten er kontinuiteten i ruten. Vores guide dedikeret til mobiloplevelsen på Shopify detaljer andre nyttige kontroller.
Mest almindelige afstandsfejl
For lidt plads
- Tekster, der sidder fast på kanterne
- Kort og knapper svære at skelne
- Sektioner uden synlig pause
- Genforsikringsoplysninger hobede sig op
For meget plads
- Store tomme områder uden hensigt
- Fjernrelaterede oplysninger
- Overdreven rulning
- Ufærdig sideudskrivning
Hvilken service skal du vælge for at forbedre afstanden?
En hurtig diagnose
Vælg det gratis mini-audit hvis du først vil se de vigtigste synlige problemer og bestemme prioritet.
En eksisterende butik, der skal gennemgås
La shopify redesign velegnet, når afstand er en del af et større struktur-, billed- eller stiproblem.
Et nyt projekt
La shopify butik oprettelse tillader hierarki og afstandssystem at blive integreret ved design.
Et websted uden for Shopify
For et udstillingsvindue eller et andet webprojekt, se tjenesten for oprettelse af professionel hjemmeside.
Omfanget, fristen og prisen afhænger af tjenesten og de berørte sider. SiteQuiVend præsenterer de formler, der er offentliggjort på sine servicesider, og bekræfter de relevante rammer, inden de starter.
Brug for klarere layout?
Præsenter dit websted og de sider, der skal forbedres, for at blive rettet mod den relevante service.
Tjekliste til kontrol af hvide mellemrum
- Hvert afsnit har et identificerbart mål.
- Relaterede elementer er visuelt grupperet sammen.
- Separate sektioner har stærkere adskillelse.
- Kortenes interne marginer er regelmæssige.
- Afsnit danner ikke for tætte blokke.
- Hovedknappen har åndedrætszone.
- Sidemarginerne forbliver komfortable på mobilen.
- Intet stort tomrum skærer information fra dets handling.
- Siden forbliver rytmisk over hele sin længde.
- Gengivelse blev kontrolleret ved 375 pixels bred.
Website white space FAQ
Skal et hvidt mellemrum være hvidt?
Nej. Dette er et tomt område omkring eller mellem indhold. Det kan bruge enhver baggrundsfarve, der er i overensstemmelse med den visuelle identitet.
Spildte hvide rum plads?
De bruger overfladeareal, men giver benchmarks. De bliver først problematiske, når de bevæger sig væk fra relaterede elementer eller forlænger siden uden fordele.
Hvilken margen skal jeg bruge mellem to sektioner?
Der er ingen universel værdi. En konsekvent skala, tilpasset typografi og tema, er vigtigere end et isoleret tal. Mellemrummet mellem afsnit skal være større end det, der knytter en titel til dens tekst.
Skal vi lægge mere eller mindre plads på mobilen?
Sidemargener er generelt mindre, mens lodret afstand bør forblive tilstrækkelig til at adskille indhold og lette taktile interaktioner.
Hvordan ved man om en side er for luftig?
Hvis den besøgende skal rulle meget for at knytte oplysninger til sin knap, hvis tilknyttede blokke virker uafhængige, eller hvis tomme områder ikke har nogen funktion, er afstanden sandsynligvis for stor.
Hvordan lufter man en side uden at slette indhold?
Gruppér oplysninger efter tema, afkort afsnit, brug lister, opret ensartede kort, og afslør sekundær information i harmonikaer, når det forbliver naturligt.
Forbedrer hvide mellemrum automatisk salget?
Nej. De kan gøre rejsen klarere, men salget afhænger også af udbud, trafik, priser, tillid, indhold og shoppingoplevelse.
Kan vi kun forbedre afstanden mellem et Shopify-tema?
Ja til målrettede justeringer, men en bredere overhaling er at foretrække, hvis strukturen, sideskabelonerne eller stien også er problematiske.
Skab plads til bedre vejledning
God afstand gør strukturen indlysende uden at gøre opmærksom på sig selv. Start med at gruppere relateret indhold, adskil trinene tydeligt undervejs, og anvend en almindelig skala. Kontroller derefter alt på computer og mobil.
Hvis siden forbliver indlæst på trods af disse justeringer, kan problemet være med hierarkiet eller mængden af oplysninger. SiteQuiVend kan hjælpe dig med at afgøre, om der er behov for målrettet rettelse, Shopify-redesign eller redesign.
