Brīvā vieta un atstarpes: slepenā sastāvdaļa aiz tīra, profesionāla mājaslapas dizaina
Kad iesācēji sāk veidot mājaslapu, viņi parasti koncentrējas uz to, ko pievienot: krāsām, attēliem, fontiem, logotipiem, ikonām, pogām un apmalēm. Taču dažas no profesionālākajām un veiksmīgākajām mājaslapām koncentrējas uz pretējo: ko atstāt ārpus dizaina.
Dizainā mēdz teikt:
"Brīvā vieta ir tas, kas ļauj visam pārējam strādāt."
Un tā ir taisnība. Brīvā vieta, ko dēvē arī par negatīvo vietu vai vienkārši atstarpēm, ir viens no vienkāršākajiem un iedarbīgākajiem mājaslapas dizaina rīkiem.
Tā uzlabo lasāmību, skaidrību, vizuālo hierarhiju un kopējo lietotāja pieredzi. Tā palīdz apmeklētājiem justies mierīgi un nepārslogo viņus ar informāciju. Brīvā vieta arī palīdz izcelt galveno vēstījumu un padara izkārtojumu pārdomātāku.
Mozello esam vērojuši, kā tūkstošiem cilvēku veido savu mazo uzņēmumu mājaslapas.
Lielāko atšķirību starp iesācēja veidotu un profesionāli nostrādātu mājaslapu parasti nerada sarežģītas animācijas vai dārga grafika. To rada pārdomāti izmantota brīvā vieta.
Kad saproti, kā pareizi izmantot brīvo vietu, viss mājaslapā uzreiz izskatās labāk, pat ja neko citu nemaini.
Šajā rakstā uzzināsi, kā izmantot brīvo vietu līdzīgi kā profesionāls dizainers:
- kas ir brīvā vieta;
- kā tā darbojas;
- no kādām biežākajām kļūdām izvairīties;
- praktiskus brīvās vietas izmantošanas piemērus;
- vienkāršus noteikumus, kurus vari izmantot jebkurā lapā;
- kā Mozello veidnes jau palīdz nodrošināt pārdomātas atstarpes.
Ķersimies klāt.
Kas ir brīvā vieta un kāpēc tā ir tik svarīga?
Brīvā vieta ir tukšais laukums ap mājaslapas elementiem, piemēram:
- ap tekstu
- starp rindkopām
- starp sadaļām
- ap attēliem
- pogu iekšpusē
- starp izvēlnes punktiem
- gar mājaslapas malām
Brīvajai vietai nav obligāti jābūt baltai. Tā var būt jebkurā krāsā, ja vien tajā nav izvietots saturs vai citi elementi.
Brīvā vieta pilda trīs svarīgas funkcijas.
1. Tā atvieglo satura lasīšanu
Saspiests teksts un pārāk cieši izvietots saturs nogurdina acis. Pietiekami plašas atstarpes palīdz apmeklētājiem lasīt raitāk un uztvert saturu vieglāk.
2. Tā pievērš uzmanību svarīgākajam
Atstarpes palīdz izcelt svarīgo. Ja elementam apkārt ir vairāk brīvas vietas, tas piesaista uzmanību un šķiet nozīmīgāks.
Tāpēc:
- lieliem virsrakstiem nepieciešams pietiekami daudz vietas;
- pogas ir pamanāmākas, ja tās nav iespiestas starp citiem elementiem;
- produktu attēliem vajadzīga vieta, lai tie varētu izcelties.
3. Tā piešķir mājaslapai modernu un profesionālu izskatu
Gandrīz visās mūsdienīgās un profesionālās mājaslapās tiek izmantots daudz brīvās vietas. Tā rada:
- mieru
- līdzsvaru
- skaidrību
- pārliecību
- uzticību
Samazinot pārblīvējumu un palielinot atstarpes, arī iesācēja veidota mājaslapa uzreiz izskatās pārdomātāka un profesionālāka.
Brīvā vieta nav izšķērdēta vieta: tā ir funkcionāla dizaina sastāvdaļa
Daudzi mazo uzņēmumu īpašnieki jūtas nedroši, ieraugot "pārāk daudz" tukšas vietas. Viņi uztraucas, ka:
- mājaslapa izskatīsies nepabeigta
- tiks izšķērdēta ekrāna platība
- informācija paliks nepamanīta
- mājaslapa izskatīsies "pārāk vienkārša"
Taču patiesībā ir tieši pretēji.
Brīvā vieta padara tavu saturu efektīvāku.
Tā nav vienkārši tukšums. Brīvā vieta pilda konkrētu uzdevumu:
- vada apmeklētāja skatienu
- palīdz izvairīties no apjukuma
- atvieglo satura uztveri
- pastiprina tavu vēstījumu
Uztver brīvo vietu kā pauzes sarunā. Bez pauzēm viss šķiet sasteigts un nomācošs.
Divi brīvās vietas veidi, kas tev jāzina
Ir divi brīvās vietas veidi, kas kopā palīdz izveidot tīru un viegli pārskatāmu izkārtojumu.
1. Mikrolīmeņa brīvā vieta
Tās ir nelielas atstarpes:
- starp burtiem
- starp teksta rindām
- starp rindkopām
- starp ikonām un to apzīmējumiem
- starp pogas malām un tekstu
- starp veidlapas laukiem
Mikrolīmeņa brīvā vieta galvenokārt ietekmē satura lasāmību.
Labs piemērs:
- ērtas rindstarpas
- vienmērīgas atstarpes starp rindkopām
- pietiekama iekšējā atstarpe pogās
Slikts piemērs:
- pārāk cieši saspiestas teksta rindas;
- rindkopas, kas saplūst cita ar citu;
- sīks teksts pogās ar nesamērīgi lielu iekšējo atstarpi.
2. Makrolīmeņa brīvā vieta
Tās ir lielākas atstarpes:
- starp sadaļām
- starp satura blokiem
- starp attēliem un tekstu
- starp mājaslapas malām un saturu
Makrolīmeņa brīvā vieta ietekmē kopējo izkārtojumu un satura struktūru.
Labs piemērs:
Sadaļas ir skaidri nodalītas ar pietiekami daudz brīvas vietas.
Slikts piemērs:
Viss ir sabīdīts kopā, un starp satura daļām nav skaidra nodalījuma.
Kā efektīvi izmantot brīvo vietu savā mājaslapā
1. Izmanto pietiekami plašas atstarpes starp sadaļām
Katrai mājaslapas sadaļai, piemēram, galvenajai sadaļai, funkciju aprakstam, atsauksmēm un kontaktinformācijai, jābūt skaidri nodalītai no pārējā satura.
Labs noteikums:
Izmanto nedaudz vairāk brīvās vietas, nekā sākumā šķiet nepieciešams.
Daudzi nenovērtē, cik plašas atstarpes tiek izmantotas mūsdienīgā mājaslapas dizainā.
Ja sadaļām ir pietiekami daudz brīvās vietas, apmeklētāji var vieglāk pārskatīt saturu un ātrāk atrast nepieciešamo informāciju.
2. Sadali tekstu īsākos un vieglāk lasāmos blokos
Garas rindkopas var šķist nogurdinošas. Īsas rindkopas ar pietiekamām atstarpēm ir daudz vieglāk uztveramas.
Labs piemērs:
Divi līdz četri īsi teikumi, pēc tam atstarpe un nākamā doma.
Slikts piemērs:
Divpadsmit teikumi vienā lielā teksta blokā.
Veidojot mājaslapu, atceries, ka cilvēki saturu vispirms pārskata, nevis izlasa vārdu pa vārdam. Atstarpes palīdz viņiem vieglāk orientēties un nepazaudēt domu.
3. Atstāj pietiekami daudz vietas ap virsrakstiem
Virsraksti palīdz apmeklētājiem orientēties saturā. Ja tie ir saspiesti starp citiem elementiem, tie zaudē savu ietekmi.
Katram virsrakstam nepieciešams:
- pietiekami daudz vietas virs tā, lai atdalītu to no iepriekšējā satura;
- pietiekami daudz vietas zem tā, lai saglabātu saikni ar saturu, kuru tas ievada.
Šādi izkārtojumā veidojas dabisks ritms.
4. Atstāj attēliem vietu, lai tie varētu izcelties
Attēliem nepieciešams pietiekami daudz brīvās vietas, lai tie nešķistu iespiesti starp citiem elementiem. Ja attēls ir īpaši svarīgs, atstāj tam vēl vairāk vietas, lai tas piesaistītu uzmanību.
5. Izmanto ārējās atstarpes starp elementiem un iekšējās atstarpes elementos
Iekšējā atstarpe ir brīvā vieta elementa iekšpusē, piemēram, starp pogas tekstu un tās malām vai satura bloka iekšpusē.
Pogas bez pietiekamas iekšējās atstarpes izskatās saspiestas un nepārdomātas. Pogas ar pietiekamu iekšējo atstarpi izskatās kvalitatīvāk un ir ērtāk lietojamas.
Labs piemērs:
Pogai ir pietiekami daudz vietas ap tekstu gan horizontāli, gan vertikāli.
Slikts piemērs:
Pogas teksts ir cieši piespiests tās malām.
Ārējā atstarpe ir brīvā vieta ārpus elementa. Tā veido skaidru nodalījumu starp rindkopām, attēliem un sadaļām.
Tāds mājaslapu veidotājs kā Mozello lielu daļu šo atstarpju nodrošina automātiski, tomēr ir noderīgi saprast, kā šis princips darbojas.
Biežākās atstarpju kļūdas, ko pieļauj iesācēji
Kļūda Nr. 1: katras brīvās vietas aizpildīšana
Šī ir viena no biežākajām iesācēju kļūdām.
Bažījoties par brīvo vietu, mājaslapas veidotāji mēdz pievienot:
- apmales
- ierāmētus satura blokus
- ikonas
- dekoratīvus rakstus
- vairāk teksta
- nevajadzīgus attēlus
Šāds pārblīvējums mazina satura skaidrību un apgrūtina lasīšanu.
Kļūda Nr. 2: pārāk mazas rindstarpas
Pārāk cieši izvietotas teksta rindas rada grūti lasāmu teksta sienu.
Pietiekamām rindstarpām jāpalīdz skatienam viegli pāriet no vienas rindas uz nākamo.
Kļūda Nr. 3: pārblīvēta sākumlapas galvenā sadaļa
Sākumlapas galvenajai sadaļai vajadzētu izskatīties atvērtai, mierīgai un viegli uztveramai.
Slikts piemērs:
Logotips + izvēlne + virsraksts + apakšvirsraksts + attēls + poga + ikonas + apmales + fona attēls.
Labs piemērs:
Skaidrs virsraksts + īss apakšvirsraksts + viena poga + iespējams, viens attēls.
Kļūda Nr. 4: pārāk maz brīvās vietas ap pogām
Ja pogas ir iespiestas starp citiem elementiem, apmeklētāji tās var nepamanīt. Ja pogu nepamana, uz tās arī neuzklikšķina.
Vairāk brīvās vietas nozīmē vairāk uzmanības.
Kļūda Nr. 5: saturs atrodas pārāk tuvu ekrāna malām
Ja teksts vai attēli sniedzas līdz pašām ekrāna malām, viss izkārtojums šķiet saspiests.
Pietiekamas atstarpes no kreisās un labās malas padara izkārtojumu līdzsvarotu un sakārtotu.
Kā Mozello palīdz viegli izveidot līdzsvarotas atstarpes
Mozello dizaina veidnēs jau ir iestrādātas līdzsvarotas atstarpes. Tas nozīmē, ka tev nav jāpārzina sarežģīti izkārtojuma noteikumi, lai mājaslapa izskatītos tīra un profesionāla.
Mozello nodrošina:
- iepriekš izveidotu atstarpju sistēmu;
- skaidru vizuālo nodalījumu starp sadaļām;
- mobilajām ierīcēm pielāgotas atstarpes;
- maziem uzņēmumiem piemērotus izkārtojumus, kuros galvenā uzmanība pievērsta skaidrībai;
- līdzsvarotas iekšējās un ārējās atstarpes ap tekstu;
- vienmērīgas atstarpes visā mājaslapā.
Ja pirmo reizi veido mājaslapu savam uzņēmumam, šīs iespējas ir īpaši noderīgas, jo ļauj ietaupīt daudz laika. Tev nav katra atstarpe jāpielāgo manuāli. Mājaslapa jau atbilst mūsdienu dizaina pamatprincipiem.
Ja tomēr vēlies atstarpes pielāgot precīzāk, Mozello sniedz arī šādu iespēju.
Kā atstarpes mudina apmeklētājus rīkoties
Atstarpes ne tikai uzlabo mājaslapas izskatu. Tās palīdz arī sasniegt labākus rezultātus.
Pareizi veidotas atstarpes palīdz:
- palielināt klikšķu skaitu uz pogām
- ilgāk noturēt apmeklētāju uzmanību
- padarīt saturu vieglāk pārskatāmu
- mazināt apmeklētāju neapmierinātību
- vairot uzticību
- uzlabot lietošanas pieredzi mobilajās ierīcēs
Veidojot mājaslapu sava biznesa attīstīšanai, skaidrībai ir izšķiroša nozīme. Cilvēki rīkojas, ja saprot, ko darīt tālāk. Brīvā vieta palīdz viņiem ātrāk pamanīt nākamo soli.
Atstarpju kontrolsaraksts pirms mājaslapas publicēšanas
Pirms mājaslapas publicēšanas pārbaudi:
- Vai starp sadaļām ir pietiekami plašas un skaidri pamanāmas atstarpes?
- Vai rindkopas ir sadalītas īsos, viegli lasāmos blokos?
- Vai virs un zem virsrakstiem ir pietiekami daudz brīvās vietas?
- Vai ap pogām ir pietiekami daudz brīvās vietas?
- Vai attēli nav piespiesti tekstam vai mājaslapas malām?
- Vai atstarpes ir pietiekamas arī mobilajās ierīcēs?
- Vai mājaslapā nav pārblīvējuma un nevajadzīgu elementu?
- Vai kopējais izkārtojums šķiet mierīgs, nevis pārblīvēts?
Ja uz visiem jautājumiem vari atbildēt apstiprinoši, atstarpes ir izveidotas pareizi.
Secinājums: brīvā vieta ir vienkāršs veids, kā uzlabot mājaslapas izskatu
Lai pareizi izmantotu brīvo vietu, nav vajadzīgas padziļinātas dizaina zināšanas. Svarīgi ir saprast, cik liela ietekme tai ir uz kopējo rezultātu. Brīvā vieta rada skaidrību, palīdz izcelt svarīgāko un padara mājaslapu patīkamāku lietošanā.
Droši izmanto pietiekami daudz brīvās vietas. Ļauj saturam elpot un vēstījumam izcelties, nekonkurējot ar citiem elementiem par vietu.
Apmeklētāji to novērtēs ar lielāku uzmanību, uzticību un gatavību rīkoties.
Vairāk rakstu šajā sērijā
- Kas ir labs dizains un kāpēc tas ir svarīgi
- Kā izveidot efektīvu krāsu paleti savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kas ir brīvā vieta un kā to izmantot mājaslapas dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā izveidot vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvas aicinājuma uz rīcību (CTA) pogas
- Kā izveidot pārdomātu mājaslapas izkārtojumu
- Kā izveidot skaidru un ērtu mājaslapas izvēlni
Lejupielādē mūsu bezmaksas Efektīva mājaslapas dizaina kontrolsarakstu (PDF), kas palīdzēs tev soli pa solim izvērtēt savu mājaslapu.