Beli prostori izboljšajo spletno mesto, ko jasno ločijo vsebino, dajo prednost informacijam in pustijo vsakemu dejanju dihati. To niso nujno bela območja: izraz se nanaša na vsak prazen prostor, ne glede na njegovo barvo.Dobro odmerjen, olajša branje in vodi oko. Slabo odmerjen, lahko nasprotno daje vtis praznine ali vas prisili, da se po nepotrebnem pomikate.
Pravilna metoda je, da začnete s prioriteto vsebine in nato uporabite dosledno lestvico razmika med besedili, zemljevidi, slikami, odseki in gumbi.Cilj ni "dodati praznino", ampak narediti stran lažje razumljivo.
Ali se zdi vaše spletno mesto zasedeno ali težko krmariti?
Zunanji pogled vam omogoča, da prepoznate območja, ki jih je treba prezračevati, ne da bi odstranili koristne informacije.
Kako imenujemo "beli prostor" v spletnem oblikovanju?
Beli prostor ali negativni prostor je območje, ki ostane prosto okoli elementa.Lahko je bela, mornarsko modra, bež ali ima barvo ozadja mesta. Obstaja v dveh komplementarnih oblikah.
Mikroprostor
Ločuje vrstice besedila, ikono njegovega besedila, vsebino robov zemljevida ali dveh polj obrazca.Ta majhna odstopanja neposredno vplivajo na berljivost.
Makroprostor
Ločuje velike skupine: banner in izbor izdelkov, dva razdelka ali argument in njegov poziv k dejanju Strukturira splošni ritem strani.
Zakaj beli prostori izboljšajo spletno mesto?
Obiskovalcu dajo merila uspešnosti.Naslov, ki je izoliran od prejšnjega razdelka, vendar blizu odstavka, ki ga uvaja, se takoj razume kot začetek novega bloka.Gumb, obdan s prostorom, pride ven, ne da bi ga bilo treba narediti velikanskega.
- Branje: po vrsticah, odstavkih in seznamih je lažje krmariti.
- Hierarhija: pomembna vsebina se razlikuje od sekundarnih informacij.
- Razumevanje: povezani elementi so videti blizu, različni subjekti so ločeni.
- Mobilno udobje: območja dotika so manj tesna in napake klikov se zmanjšajo.
- Zaznavanje: redna sestava se na splošno zdi bolj nadzorovana in profesionalna.
Trije konkretni primeri uporabe belega prostora
Te shematske predstavitve prikazujejo, kako razmik spremeni dojemanje strani, ne da bi spremenil njeno vsebino. Ne predstavljajo resničnih projektov strank.
Primer 1: list izdelka, po katerem je lažje krmariti
Naslov, cena, novice in delnice tekmujejo med seboj.
Sorodni elementi ostanejo blizu, medtem ko gumb koristi od jasnega dihanja.
Primer 2: Bolje ločite razdelke strani
Zdi se, da skupine pripadajo istemu bloku in hierarhija postane zamegljena.
Prostor med odseki je večji od notranjega prostora: struktura je takoj razumljiva.
Primer 3: izboljšajte udobje na mobilnem telefonu
Vsebina se skoraj dotika robov in dejanje se zlije z besedilom.
Stranski robovi, intervali in območje gumbov naredijo pot bolj očitno.
Kako uporabljati bel prostor v 7 korakih?
- Razvrstite podatke. Odločite se, kaj naj obiskovalec vidi, razume in nato naredi.
- Skupinsko, kar gre skupaj. Zdi se, da gumb za ceno in nakup pripada istemu nizu; pogoji vračila lahko tvorijo sekundarni blok.
- Ločite različne skupine. Med dvema razdelkoma uporabite večji prostor kot med naslovom in njegovim besedilom.
- Izberite preprosto lestvico. Na primer 8, 16, 24, 32, 48 in 64 slikovnih pik kot izhodišča za prilagoditev temi in tipografiji.
- Poskrbite za notranjost komponent. Kartica mora ohraniti pravilen rob med robovi, naslovom, sliko in gumbom.
- Nadzorujte navpični ritem. Izmenično kompaktna zaporedja in ostre vdihe, namesto da bi povsod uporabili enako velik prostor.
- Test na resničnih zaslonih. Preverite celotno stran v računalniku in telefonu, ne le izoliran razdelek v urejevalniku.
Katere prostore je treba zagotoviti glede na vrsto strani?
| Stran | Prednostno prezračevati | Točka budnosti |
|---|---|---|
| Home | Obljuba, vizualni, prednosti in izbire | Izogibajte se razdelkom, ki so previsoki, in odložite dostop do izdelkov |
| Zbirka | Naslov, filtri, mreža in kartice izdelkov | Ohranite dovolj vidnih izdelkov brez pakiranja kartic |
| List izdelka | Galerija, cene, variante, nakup in pozavarovanje | Odločne informacije hranite blizu gumba |
| Košarica | Izdelki, skupaj, dostava in validacija | Glavnega gumba ne odmaknite s sekundarnimi bloki |
| Člen | Odstavki, naslovi, seznami in vizualni elementi | Omejite širino dolgih vrstic besedila |
Kako upravljati prazen prostor na mobilniku?
Mobilnik ne sme biti preprosta stisnjena različica računalnika Širina manjka, vendar višina ostaja na voljo: bloki običajno prehajajo čez stolpec in njihov navpični razmik postane bistven.
- Zmanjšajte stranske robove, ne da bi besedilo prilepili na robove zaslona.
- Zmanjšajte zelo velike dekorativne prostore, ki po nepotrebnem podaljšujejo stran.
- Ohranite jasno ločitev med gumbi, polji in povezavami na dotik.
- Preoblikujte velike tabele v lahko berljive navpične kartice.
- Preverite dolge naslove, saj hitro zavzamejo več vrstic.
Prioriteta je kontinuiteta poti Naš vodnik posvečen mobilna izkušnja na Shopify podrobnosti drugi uporabni pregledi.
Najpogostejše napake razmika
Premalo prostora
- Besedila, prilepljena na robove
- Kartice in gumbe je težko razlikovati
- Odseki brez vidnega preloma
- Podatki o pozavarovanju so se nabrali
Preveč prostora
- Velike prazne površine brez namena
- Informacije, povezane z daljinskim upravljalnikom
- Prekomerno drsenje
- Nedokončano tiskanje strani
Katero storitev morate izbrati za izboljšanje razmika?
Hitra diagnoza
Izberi ga brezplačna mini revizija če želite najprej opaziti glavne vidne težave in določiti prednost.
Obstoječa trgovina, ki jo je treba pregledati
La shopify redesign primerno, kadar je razmik del večje težave s strukturo, sliko ali potjo.
Nov projekt
La shopify store ustvarjanje omogoča načrtno integracijo hierarhije in sistema razmika.
Spletno mesto zunaj Shopify
Za predstavitev ali drug spletni projekt se posvetujte s službo izdelava profesionalne spletne strani.
Obseg, rok in cena so odvisni od storitve in zadevnih strani SiteQuiVend predstavlja formule, objavljene na njegovih servisnih straneh, in pred začetkom potrjuje ustrezen okvir.
Potrebujete jasnejšo postavitev?
Predstavite svoje spletno mesto in strani za izboljšave, da bodo usmerjene v ustrezno storitev.
Kontrolni seznam za preverjanje belih presledkov
- Vsak razdelek ima določljiv cilj.
- Sorodni elementi so vizualno združeni.
- Ločeni odseki imajo močnejšo ločitev.
- Notranji robovi kart so pravilni.
- Odstavki ne tvorijo pregostih blokov.
- Glavni gumb ima območje dihanja.
- Stranski robovi ostanejo udobni na mobilnih napravah.
- Nobena velika praznina ne odreže informacij iz svojega delovanja.
- Stran ostaja ritmična po vsej dolžini.
- Upodabljanje je bilo preverjeno pri širini 375 slikovnih pik.
Spletna stran beli prostor FAQ
Ali mora biti bel prostor bel?
Ne. To je prazno območje okoli ali med vsebino. Uporablja lahko katero koli barvo ozadja, ki je skladna z vizualno identiteto.
Ali beli prostori zapravljajo prostor?
Uporabljajo površino, vendar zagotavljajo merila uspešnosti. Problematični postanejo šele, ko se odmaknejo od povezanih elementov ali stran podaljšajo brez koristi.
Kakšno rezervo naj uporabim med dvema razdelkoma?
Univerzalne vrednosti ni.Skladna lestvica, prilagojena tipografiji in temi, je pomembnejša od izolirane številke.Prostor med razdelki mora biti večji od tistega, ki povezuje naslov z njegovim besedilom.
Ali naj na mobilnik postavimo več ali manj prostora?
Stranski robovi so na splošno manjši, medtem ko mora navpični razmik ostati zadosten za ločevanje vsebine in olajšanje taktilnih interakcij.
Kako veš, če je stran preveč zračna?
Če se mora obiskovalec veliko pomikati, da poveže informacije s svojim gumbom, če so povezani bloki videti neodvisni ali če prazna območja nimajo funkcije, je razmik verjetno prevelik.
Kako predvajati stran brez brisanja vsebine?
Združite informacije po temah, skrajšajte odstavke, uporabite sezname, ustvarite dosledne kartice in razkrijte sekundarne informacije v harmonikah, ko ostanejo naravne.
Ali beli prostori samodejno izboljšajo prodajo?
Ne. Potovanje lahko naredijo jasnejše, vendar je prodaja odvisna tudi od ponudbe, prometa, cen, zaupanja, vsebine in nakupovalne izkušnje.
Ali lahko le izboljšamo razmik teme Shopify?
Da za ciljne prilagoditve, vendar je boljša širša prenova, če so problematični tudi struktura, predloge strani ali pot.
Ustvarite prostor za boljše vodenje
Dober razmik naredi strukturo očitno, ne da bi pritegnil pozornost nase.Začnite z združevanjem povezane vsebine, jasno ločite korake na poti in uporabite običajno lestvico. Nato preverite vse na računalniku in mobilnem telefonu.
Če stran kljub tem prilagoditvam ostane naložena, je težava morda v hierarhiji ali obsegu informacij. SiteQuiVend vam lahko pomaga ugotoviti, ali je potreben ciljni popravek, preoblikovanje Shopify ali preoblikovanje.
