Valkoiset tilat parantavat sivustoa, kun ne erottavat sisällön selvästi, asettavat tiedot tärkeysjärjestykseen ja antavat jokaisen toiminnan hengittää. Nämä eivät välttämättä ole valkoisia alueita: termi viittaa mihin tahansa tyhjään tilaan, riippumatta sen väristä.No annosteltu, se helpottaa lukemista ja ohjaa silmää.Vähän annosteltuna se voi päinvastoin antaa vaikutelman tyhjyydestä tai pakottaa sinut selaamaan tarpeettomasti.
Oikea menetelmä on aloittaa sisällön prioriteetista, sitten soveltaa johdonmukaista väliasteikkoa tekstien, karttojen, kuvien, osioiden ja painikkeiden välillä.Tavoitteena ei ole "lisätä tyhjyyttä", vaan tehdä sivusta helpommin ymmärrettävä.
Vaikuttaako sivustosi kiireiseltä vai vaikealta navigoida?
Ulkopuolisen näkymän avulla voit tunnistaa tuuletettavat alueet poistamatta hyödyllistä tietoa.
Mitä me kutsumme web-suunnittelussa "valkoiseksi tilaksi"?
Valkoinen tila eli negatiivinen tila on elementin ympärille vapaaksi jätetty alue Se voi olla valkoinen, laivastonsininen, beige tai ottaa paikan taustavärin Se on olemassa kahdessa toisiaan täydentävässä muodossa.
Mikroavaruus
Se erottaa tekstin rivit, sen sanamuodon kuvakkeen, kartan reunojen sisällön tai lomakkeen kaksi kenttää.Nämä pienet poikkeamat vaikuttavat suoraan luettavuuteen.
Macrospace
Se erottaa suuret ryhmät: bannerin ja tuotevalikoiman, kaksi osaa tai argumentin ja sen toimintakehotuksen Se jäsentää sivun yleisen rytmin.
Miksi valkoiset tilat parantavat sivustoa?
Ne antavat kävijälle vertailuarvot Edellisestä osiosta eristetty, mutta sen esittelemää kappaletta lähellä oleva otsikko ymmärretään välittömästi uuden lohkon alkuna.Avaruuden ympäröimä nappi tulee ulos ilman tarvetta tehdä siitä jättimäistä.
- Lukeminen: riveillä, kappaleilla ja luetteloilla on helpompi navigoida.
- Hierarkia: tärkeä sisältö erotetaan toissijaisesta tiedosta.
- Ymmärtäminen: linkitetyt elementit näkyvät lähellä, eri aiheet erotetaan toisistaan.
- Mobiilimukavuus: kosketusvyöhykkeet ovat vähemmän tiukkoja ja napsautusvirheet vähenevät.
- Käsitys: säännöllinen kokoonpano vaikuttaa yleensä hallitummalta ja ammattimaisemmalta.
Kolme konkreettista esimerkkiä valkoisen tilan käytöstä
Nämä kaavamaiset demonstraatiot osoittavat, kuinka välistys muuttaa sivun käsitystä, muuttamatta sen sisältöä.Ne eivät edusta todellisia asiakasprojekteja.
Esimerkki 1: tuotearkki, joka on helpompi navigoida
Otsikko, hinta, uutiset ja osake kilpailevat keskenään.
Aiheeseen liittyvät elementit pysyvät lähellä, kun taas painike hyötyy selkeästä hengityksestä.
Esimerkki 2: Parempia erillisiä sivun osia
Ryhmät näyttävät kuuluvan samaan lohkoon ja hierarkia hämärtyy.
Osioväli on suurempi kuin sisäinen tila: rakenne on heti ymmärrettävä.
Esimerkki 3: paranna mukavuutta mobiilissa
Sisältö melkein koskettaa reunoja ja toiminta sulautuu tekstiin.
Sivumarginaalit, intervallit ja painikealue tekevät reitistä ilmeisemmän.
Miten käyttää valkoista tilaa 7 vaiheessa?
- Luokittele tiedot. Päätä, mitä vierailijan tulee nähdä, ymmärtää ja sitten tehdä.
- Ryhmittele, mikä menee yhteen. Hinta ja osta - painikkeen pitäisi näyttää kuuluvan samaan joukkoon; palautusehdot voivat muodostaa toissijaisen lohkon.
- Erilliset eri ryhmät. Käytä suurempaa tilaa kahden osion välillä kuin otsikon ja sen tekstin välissä.
- Valitse yksinkertainen asteikko. Esimerkiksi 8, 16, 24, 32, 48 ja 64 pikseliä lähtökohtina, teemaan ja typografiaan mukautumiseksi.
- Hoida komponenttien sisäpuoli. Kortin on säilytettävä säännöllinen marginaali reunojensa, otsikon, kuvansa ja painikkeensa välissä.
- Ohjaa pystyrytmiä. Vaihtoehtoiset kompaktit sekvenssit ja terävät hengitykset sen sijaan, että käyttäisit samaa suurta tilaa kaikkialla.
- Testaa oikeilla näytöillä. Tarkista koko sivu tietokoneessa ja puhelimessa, ei vain eristetty osio editorissa.
Mitä tiloja tulisi tarjota sivutyypin mukaan?
| Sivu | Tuuleta ensisijaisesti | Valppauspiste |
|---|---|---|
| Koti | Lupaus, visuaalinen, edut ja valinnat | Vältä liian korkeita osioita ja viivästytä tuotteiden pääsyä |
| Kokoelma | Otsikko, suodattimet, ruudukko - ja tuotekortit | Pidä tarpeeksi näkyviä tuotteita pakkaamatta kortteja |
| Tuotearkki | Galleria, hinnat, muunnelmat, osto ja jälleenvakuutus | Pidä ratkaisevat tiedot lähellä painiketta |
| Kori | Tuotteet, yhteensä, toimitus ja validointi | Älä siirrä pääpainiketta pois toisiolohkoilla |
| Artikla | Kappaleet, otsikot, luettelot ja visuaaliset | Rajoita pitkien tekstirivien leveyttä |
Miten hallita valkoinen tila mobiili?
Mobiilin ei pitäisi olla yksinkertainen pakattu versio tietokoneesta Leveys puuttuu, mutta korkeus pysyy käytettävissä: lohkot kulkevat yleensä sarakkeen yli ja niiden pystyvälisyydestä tulee olennainen.
- Vähennä sivumarginaaleja kiinnittämättä tekstiä näytön reunoihin.
- Vähennä erittäin suuria koristetiloja, jotka tarpeettomasti pidentävät sivua.
- Säilytä selkeä ero painikkeiden, kenttien ja kosketuslinkkien välillä.
- Muunna suuret pöydät helposti luettaviksi pystykorteiksi.
- Tarkista pitkät nimikkeet, sillä ne ottavat nopeasti useita rivejä.
Ensisijainen on reitin jatkuvuus Oppaamme omistettu mobiilikokemus Shopifyssa yksityiskohdat muut hyödylliset tarkastukset.
Yleisimmät välistysvirheet
Liian vähän tilaa
- Reunoihin kiinnitetyt tekstit
- Kortteja ja nappeja vaikea erottaa
- Osiot ilman näkyvää rikkoutumista
- Jälleenvakuutustiedot kasaantuivat
Liikaa tilaa
- Suuret tyhjät alueet ilman aikomusta
- Etätietoja
- Liiallinen vieritys
- Keskeneräinen sivutulostus
Minkä palvelun minun pitäisi valita välistyksen parantaminen?
Nopea diagnoosi
Valitse se ilmainen mini-audit jos haluat ensin havaita tärkeimmät näkyvät ongelmat ja määrittää prioriteetin.
Olemassa oleva kauppa tarkistettava
La tee uudelleensuunnittelusta sopii, kun välistys on osa suurempaa rakenne, kuva - tai polkukysymystä.
Uusi projekti
La shopify myymälän luominen mahdollistaa hierarkian ja välistysjärjestelmän integroinnin suunnittelun avulla.
Sivusto Shopifyn ulkopuolella
Katso showcase- tai muu verkkoprojekti palvelusta ammattimaisen verkkosivuston luominen.
Laajuus, määräaika ja hinta riippuvat palvelusta ja kyseisistä sivuista SiteQuiVend esittelee palvelusivuillaan julkaistut kaavat ja vahvistaa asianmukaiset puitteet ennen aloittamista.
Tarvitsetko selkeämmän asettelun?
Esitä sivustosi ja parannettavat sivut, jotka on ohjattava sopivaan palveluun.
Tarkistuslista valkoisten välilyöntien tarkistamiseen
- Jokaisella osalla on tunnistettavissa oleva tavoite.
- Aiheeseen liittyvät elementit ryhmitellään visuaalisesti yhteen.
- Erillisissä osissa on vahvempi erotus.
- Korttien sisäiset marginaalit ovat säännölliset.
- Kappaleet eivät muodosta liian tiheitä lohkoja.
- Pääpainikkeessa on hengitysvyöhyke.
- Sivureunat pysyvät mukavina mobiilissa.
- Mikään suuri tyhjiö ei leikkaa tietoja toiminnastaan.
- Sivu pysyy rytmikkäänä koko pituudeltaan.
- Renderöinti tarkastettiin 375 pikselin levyiseksi.
Verkkosivuston valkoisen tilan FAQ
Pitääkö valkoisen tilan olla valkoinen?
Ei Tämä on tyhjä alue sisällön ympärillä tai välillä. Se voi käyttää mitä tahansa visuaalisen identiteetin mukaista taustaväriä.
Kahlaavatko valkoiset tilat tilaa?
Ne käyttävät pinta-alaa, mutta tarjoavat vertailuarvoja.Ne muuttuvat ongelmallisiksi vain, kun ne siirtyvät pois toisiinsa liittyvistä elementeistä tai pidentävät sivua ilman hyötyä.
Mitä marginaalia minun pitäisi käyttää kahden osion välillä?
Universaalia arvoa ei ole.Typografiaan ja teemaan sovitettu johdonmukainen asteikko on tärkeämpi kuin yksittäinen luku.Osiot välisen tilan on oltava suurempi kuin se, joka yhdistää otsikon tekstiinsä.
Pitäisikö laittaa enemmän tai vähemmän tilaa mobiiliin?
Sivumarginaalit ovat yleensä pienempiä, kun taas pystyvälistyksen tulee pysyä riittävänä erottamaan sisältö ja helpottamaan kosketusvuorovaikutuksia.
Mistä tietää, onko sivu liian ilmava?
Jos vierailijan on vieritettävä paljon linkittääkseen tietoja painikkeeseensa, jos siihen liittyvät lohkot näyttävät riippumattomilta tai jos tyhjillä alueilla ei ole toimintoa, väli on todennäköisesti liiallinen.
Kuinka lähettää sivu pois poistamatta sisältöä?
Ryhmätiedot teeman mukaan, lyhentä kappaleet, käytä luetteloita, luo johdonmukaisia kortteja ja paljasta toissijaisia tietoja harmonikoissa, kun se pysyy luonnollisena.
Parantavatko valkoiset tilat automaattisesti myyntiä?
Ei. Ne voivat tehdä matkasta selkeämmän, mutta myynti riippuu myös tarjonnasta, liikenteestä, hinnoista, luottamuksesta, sisällöstä ja ostokokemuksesta.
Voimmeko parantaa vain Shopify-teeman välistystä?
Kyllä kohdennetuille säädöille, mutta laajempi uudelleensuunnittelu on parempi, jos rakenne, sivumallit tai polku ovat myös ongelmallisia.
Luo tilaa parempaan opastukseen
Hyvä välistys tekee rakenteesta itsestään selvän kiinnittämättä huomiota itseensä.Aloita ryhmittelemällä siihen liittyvä sisältö, erottele vaiheet selkeästi matkan varrella ja käytä säännöllistä asteikkoa.Tarkistuta sitten kaikki tietokoneella ja mobiililla.
Jos sivu pysyy ladattuna näistä säädöistä huolimatta, ongelma voi olla tietojen hierarkiassa tai volyymissa.SiteQuiVend voi auttaa sinua määrittämään, tarvitaanko kohdennettua korjausta, Shopify-uudelleensuunnittelua tai uudelleensuunnittelua.
