Hvite områder forbedrer et nettsted når de tydelig skiller innhold, prioriterer informasjon og lar hver handling puste. Dette er ikke nødvendigvis hvite områder: begrepet refererer til ethvert tomt rom, uavhengig av fargen Godt dosert, det gjør lesingen enklere og leder øyet Dårlig dosert, det kan tvert imot gi inntrykk av tomhet eller tvinge deg til å bla unødvendig.
Riktig metode er å ta utgangspunkt i innholdets prioritet og deretter anvende en konsistent avstandsskala mellom tekster, kart, bilder, utsnitt og knapper Målet er ikke å "legge til tomhet", men å gjøre siden lettere å forstå.
Virker siden din opptatt eller vanskelig å navigere?
En utvendig visning lar deg identifisere områder som skal ventileres uten å fjerne nyttig informasjon.
Hva kaller vi "white space" i webdesign?
Hvitt rom, eller negativt rom, er området som er fritt rundt et element. Det kan være hvitt, marineblått, beige eller ta bakgrunnsfargen på stedet. Det finnes i to komplementære former.
Mikrorom
Den skiller linjene i en tekst, et ikon for ordlyden, innholdet i kantene på et kart eller to felt i en form. Disse små avvikene påvirker lesbarheten direkte.
Makrorom
Den skiller store grupper: et banner og et utvalg produkter, to seksjoner eller et argument og dets oppfordring til handling. Den strukturerer den generelle rytmen til siden.
Hvorfor forbedrer hvite områder et nettsted?
De gir den besøkende benchmarks En tittel isolert fra forrige avsnitt, men nær avsnittet den introduserer, forstås umiddelbart som starten på en ny blokk. En knapp omgitt av plass kommer ut uten at det er nødvendig å gjøre den gigantisk.
- Lesing: linjer, avsnitt og lister er lettere å navigere.
- Hierarki: viktig innhold skilles fra sekundærinformasjon.
- Forståelse: de koblede elementene vises tett, de forskjellige fagene er atskilt.
- Mobil komfort: berøringssoner er mindre stramme og klikkfeil reduseres.
- Oppfatning: en vanlig komposisjon virker generelt mer kontrollert og profesjonell.
Tre konkrete eksempler på bruk av white space
Disse skjematiske demonstrasjonene viser hvordan avstand endrer oppfatningen av en side, uten å endre innholdet. De representerer ikke reelle kundeprosjekter.
Eksempel 1: et produktark som er lettere å navigere
Tittel, pris, nyheter og lager konkurrerer med hverandre.
Relaterte elementer holder seg tett, mens knappen drar nytte av klar pust.
Eksempel 2: Bedre separate deler av en side
Gruppene ser ut til å tilhøre samme blokk og hierarkiet blir uskarpt.
Mellomrommet mellom seksjoner er større enn det indre rommet: strukturen er umiddelbart forståelig.
Eksempel 3: forbedre komforten på mobilen
Innhold berører nesten kantene og handling smelter sammen med tekst.
Sidemarginer, intervaller og knappområde gjør ruten mer åpenbar.
Hvordan bruke white space i 7 trinn?
- Klassifiser informasjonen. Bestem hva den besøkende skal se, forstå og deretter gjøre.
- Grupper det som hører sammen. Pris- og kjøpsknappen skal se ut til å tilhøre samme sett; returbetingelser kan danne en sekundær blokk.
- Skille ulike grupper. Bruk et større mellomrom mellom to seksjoner enn mellom en tittel og teksten.
- Velg en enkel skala. For eksempel 8, 16, 24, 32, 48 og 64 piksler som utgangspunkt, for å tilpasse seg tema og typografi.
- Ta vare på innsiden av komponentene. Et kort må opprettholde en regelmessig margin mellom kantene, tittelen, bildet og knappen.
- Kontroller den vertikale rytmen. Alternative kompakte sekvenser og skarpe åndedrag i stedet for å bruke den samme store plassen overalt.
- Test på ekte skjermer. Sjekk hele siden på datamaskin og telefon, ikke bare en isolert del i editoren.
Hvilke mellomrom bør oppgis avhengig av type side?
| Side | Å bli ventilert som en prioritet | Punkt for årvåkenhet |
|---|---|---|
| Home | Løfte, visuelle, fordeler og utvalg | Unngå seksjoner som er for høye og forsinker tilgangen til produkter |
| Samling | Tittel, filtre, rutenett og produktkort | Hold nok synlige produkter uten å pakke kortene |
| Produktblad | Galleri, priser, varianter, kjøp og gjenforsikring | Hold avgjørende informasjon nær knappen |
| Kurv | Produkter, total, levering og validering | Ikke flytt hovedknappen bort med sekundære blokker |
| Artikkel | Avsnitt, overskrifter, lister og bilder | Begrens bredden på lange tekstlinjer |
Hvordan administrere white space på mobil?
Mobilen skal ikke være en enkel komprimert versjon av datamaskinen Bredden mangler, men høyden forblir tilgjengelig: blokkene passerer vanligvis over en kolonne og deres vertikale avstand blir avgjørende.
- Reduser sidemarger uten å feste tekst til kantene på skjermen.
- Reduser svært store dekorative rom som unødvendig forlenger siden.
- Opprettholde et klart skille mellom knapper, felt og berøringskoblinger.
- Forvandle store bord til lettleste vertikale kort.
- Sjekk lange titler, da de raskt tar opp flere linjer.
Prioriteten er rutens kontinuitet Vår guide dedikert til mobilopplevelsen på Shopify detaljer andre nyttige sjekker.
Vanligste avstandsfeil
For lite plass
- Tekster festet seg til kantene
- Kort og knapper vanskelig å skille
- Seksjoner uten synlig pause
- Gjenforsikringsinformasjon hopet seg opp
For mye plass
- Store tomme områder uten intensjon
- Fjernrelatert informasjon
- Overdreven rulling
- Uferdig sideutskrift
Hvilken tjeneste bør du velge for å forbedre avstanden?
En rask diagnose
Velg det gratis mini-revisjon hvis du først vil oppdage de viktigste synlige problemene og bestemme prioritet.
En eksisterende butikk som skal gjennomgås
La shopify redesign egnet når avstand er en del av et større struktur-, bilde- eller banespørsmål.
Et nytt prosjekt
La shopify butikkoppretting lar hierarki og avstandssystem integreres ved design.
Et nettsted utenfor Shopify
For et utstillingsvindu eller et annet nettprosjekt, se tjenesten til opprettelse av profesjonell nettside.
Omfang, frist og pris avhenger av tjenesten og de aktuelle sidene SiteQuiVend presenterer formlene som er publisert på sine tjenestesider og bekrefter det passende rammeverket før oppstart.
Trenger du klarere layout?
Presenter nettstedet ditt og sidene som skal forbedres for å bli rettet mot riktig tjeneste.
Sjekkliste for kontroll av hvite mellomrom
- Hver seksjon har et identifiserbart mål.
- Beslektede elementer er visuelt gruppert sammen.
- Separate seksjoner har sterkere separasjon.
- De interne margene på kortene er vanlige.
- Avsnitt danner ikke for tette blokker.
- Hovedknappen har pustesone.
- Sidemarginene forblir komfortable på mobil.
- Ingen store tomrom kutter informasjon fra handlingen.
- Siden forblir rytmisk over hele lengden.
- Gjengivelsen ble kontrollert til 375 piksler bred.
Website white space FAQ
Må et hvitt rom være hvitt?
Nei Dette er et tomt område rundt eller mellom innhold Den kan bruke hvilken som helst bakgrunnsfarge som samsvarer med den visuelle identiteten.
Kaster hvite mellomrom bort plass?
De bruker overflateareal, men gir benchmarks De blir først problematiske når de beveger seg bort fra relaterte elementer eller forlenger siden uten nytte.
Hvilken margin bør jeg bruke mellom to seksjoner?
Det finnes ingen universell verdi En konsistent skala, tilpasset typografi og tema, er viktigere enn et isolert tall Mellomrommet mellom avsnittene må være større enn det som knytter en tittel til teksten.
Skal vi legge mer eller mindre plass på mobil?
Sidemargene er generelt mindre, mens vertikal avstand bør forbli tilstrekkelig til å skille innhold og lette taktile interaksjoner.
Hvordan vet du om en side er for luftig?
Hvis den besøkende må rulle mye for å koble informasjon til knappen sin, hvis tilknyttede blokker vises uavhengige, eller hvis tomme områder ikke har noen funksjon, er avstanden sannsynligvis overdreven.
Hvordan lufte ut en side uten å slette innhold?
Grupper informasjon etter tema, forkorte avsnitt, bruke lister, lage konsistente kort, og avsløre sekundær informasjon i trekkspill når det forblir naturlig.
Forbedrer hvite mellomrom automatisk salget?
Nei De kan gjøre reisen klarere, men salget avhenger også av tilbud, trafikk, priser, tillit, innhold og handleopplevelse.
Kan vi bare forbedre avstanden til et Shopify-tema?
Ja for målrettede justeringer, men en bredere overhaling er å foretrekke hvis strukturen, sidemaler eller bane også er problematisk.
Skap plass til bedre veiledning
God avstand gjør strukturen åpenbar uten å trekke oppmerksomhet til seg selv Start med å gruppere relatert innhold, skille trinnene tydelig underveis, og bruk en vanlig skala Sjekk deretter alt på datamaskin og mobil.
Hvis siden forblir lastet til tross for disse justeringene, kan problemet være med hierarkiet eller volumet av informasjon. SiteQuiVend kan hjelpe deg med å finne ut om målrettet korrigering, Shopify-redesign eller redesign er nødvendig.
