Brīvā vieta un atstarpes: slepenā sastāvdaļa aiz tīra, profesionāla mājaslapas dizaina
Kad lielākā daļa iesācēju sāk veidot savu mājaslapu, viņi koncentrējas uz to, ko pievienot - krāsas, attēlus, fontus, logotipus, ikonas, pogas, apmales. Bet dažas no labākajām un profesionālāk izskatošajām mājaslapām patiesībā koncentrējas uz pretējo: uz to, ko atstāt ārā.
Dizainā ir teiciens:
"Brīvā vieta ir tas, kas liek visam pārējam strādāt."
Un tā ir taisnība. Brīvā vieta - saukta arī par atstarpēm, elpošanas telpu vai negatīvo telpu - ir viens no vienkāršākajiem un jaudīgākajiem rīkiem tīmekļa dizainā. Tā uzlabo lasāmību, skaidrību, vizuālo hierarhiju un vispārējo lietotāja pieredzi. Tā palīdz Taviem apmeklētājiem justies mierīgiem, nevis nomāktiem. Tā padara Tavu vēstījumu spēcīgāku un izkārtojumu apzinātāku.
Mozello mēs esam vērojuši tūkstošiem cilvēku, kas veido mājaslapu saviem mazajiem uzņēmumiem, izmantojot mūsu mājaslapu veidotāju. Lielākā atšķirība starp iesācēja izskata lapu un noslīpētu, modernu lapu nav izsmalcinātas animācijas vai dārga pielāgota grafika. Tās ir atstarpes.
Tiklīdz Tu saproti, kā pareizi izmantot telpu, viss Tavā mājaslapā uzreiz izskatās labāk - pat ja Tu neko citu nemaini.
Šis raksts iemācīs Tev tieši to, kā izmantot brīvo vietu kā dizainerim:
- kas tā ir
- kā tā strādā
- biežākās kļūdas, no kurām izvairīties
- praktiski piemēri
- vienkārši noteikumi, ko vari ievērot jebkurā lapā
- kā Mozello šabloni jau palīdz Tev pareizi tikt galā ar atstarpēm
Ķersimies pie lietas.
Kas ir brīvā vieta (un kāpēc tā ir tik svarīga)?
Brīvā vieta ir vienkārši "tukšā" telpa ap elementiem:
- ap Tavu tekstu
- starp rindkopām
- starp sadaļām
- ap attēliem
- pogu iekšpusē
- starp izvēlnes punktiem
- gar Tavas lapas malām
Brīvajai vietai nav jābūt baltai. Tā var būt jebkurā krāsā - kamēr vien tajā vietā nekas nav novietots.
Brīvā vieta dara TRĪS svarīgas lietas:
1. Tā padara Tavu saturu vieglāk lasāmu.
Saspiests teksts vai cieši sapakots saturs nogurdina acis. Dāsna brīvā vieta palīdz apmeklētājiem lasīt raiti un ērti.
2. Tā pievērš uzmanību lietām, kas ir svarīgas.
Atstarpes rada fokusu.
Kad kaut kam apkārt ir telpa, tas šķiet svarīgāks.
Tāpēc:
- lieliem virsrakstiem nepieciešama telpa
- pogas strādā labāk, kad tās nav saspiestas
- produktu attēliem jāelpo
3. Tā padara Tavu lapu modernu un profesionālu.
Gandrīz visas modernās, augstākās klases mājaslapas izmanto daudz brīvās vietas. Tā rada:
- mieru
- līdzsvaru
- skaidrību
- pārliecību
- uzticību
Kad iesācēji samazina pārblīvējumu un palielina atstarpes, viņu mājaslapa uzreiz izskatās izsmalcinātāka.
Brīvā vieta nav izšķērdēta vieta - tā ir funkcionāls dizains
Daudzi mazo uzņēmumu īpašnieki jūtas nervozi, kad redz "pārāk daudz" tukšas telpas. Viņi uztraucas, ka:
- tā izskatās nepabeigta
- tā izšķērdē ekrāna laukumu
- tā slēpj informāciju
- tā padara lapu "pārāk vienkāršu"
Bet lūk, patiesība:
Brīvā vieta palielina Tava satura efektivitāti.
Tā nav tukša - tā ir aktīva.
Tā palīdz vadīt apmeklētāja acis.
Tā novērš apjukumu.
Tā uzlabo izpratni.
Tā stiprina Tavu vēstījumu.
Domā par brīvo vietu kā par pauzēm sarunā. Bez pauzēm viss šķiet steidzīgs un nomācošs.
Divi brīvās vietas veidi, kas Tev jāzina
Ir divu veidu brīvā vieta, kas strādā kopā, lai izveidotu tīru, viegli lasāmu izkārtojumu:
1. Mikro brīvā vieta
Mazas atstarpes starp:
- burtiem
- teksta rindām
- rindkopām
- ikonām un etiķetēm
- pogām un to tekstu
- formas laukiem
Mikro brīvā vieta ietekmē lasāmību.
Labs piemērs:
- ērtas rindstarpas
- īsas rindkopu atstarpes
- pietiekams iekšējais atstatums pogās
Slikts piemērs:
- teksta rindas saspiestas kopā
- rindkopas, kas pieskaras viena otrai
- pogas ar sīku tekstu milzīgu apmaļu iekšpusē
2. Makro brīvā vieta
Lielas atstarpes starp:
- sadaļām
- satura blokiem
- attēliem un tekstu
- lapas malām un Tavu saturu
Makro brīvā vieta ietekmē izkārtojumu un struktūru.
Labs piemērs:
Sadaļas skaidri atdalītas ar dāsnu elpošanas telpu.
Slikts piemērs:
Viss sabīdīts kopā bez skaidra atdalījuma starp saturu.
Kā efektīvi izmantot brīvo vietu savā mājaslapā
1. Izmanto dāsnas atstarpes starp sadaļām
Katrai atsevišķai sadaļai Tavā lapā (galvenā, funkcijas, atsauksmes, kontakti utt.) nepieciešams skaidrs atdalījums.
Labs noteikums:
Izmanto vairāk telpas, nekā šķiet ērti.
Lielākā daļa cilvēku nenovērtē, cik daudz atstarpju izmanto mūsdienu dizains.
Kad sadaļas elpo, apmeklētāji var vieglāk pārskatīt un ātrāk atrast informāciju.
2. Padari savus teksta blokus mazākus un vieglāk lasāmus
Garas rindkopas ir nomācošas.
Īsas rindkopas ar atstarpēm ir aicinošas.
Labs piemērs:
2-4 īsi teikumi → telpa → nākamā doma.
Slikts piemērs:
12 teikumi vienā milzīgā teksta blokā.
Kad Tu veido mājaslapu, atceries: cilvēki pārskata. Atstarpes palīdz viņiem pārskatīt, neapmaldoties.
3. Pievieno telpu ap virsrakstiem
Virsraksti vada Tavus apmeklētājus. Ja tie ir saspiesti, tie zaudē ietekmi.
Katram virsrakstam vajadzētu būt:
- telpai virs, lai atdalītu to no iepriekšējā satura
- telpai zem, lai savienotu to ar saturu, ko tas ievada
Tas rada dabisku ritmu.
4. Dod saviem attēliem vietu elpot
Attēliem nepieciešama dāsna telpa ap tiem, lai tie nešķistu iespiesti izkārtojumā. Ja attēls ir svarīgs, dod tam vēl vairāk telpas, lai tas izceltos.
5. Izmanto ārējās atstarpes elementu atdalīšanai un iekšējo atstatumu elementu iekšpusē
Iekšējais atstatums = telpa kaut kā iekšpusē (piemēram, pogas vai satura kastes iekšpusē).
Pogas bez iekšējā atstatuma izskatās lētas.
Pogas ar pietiekamu iekšējo atstatumu šķiet augstākās klases.
Labs piemērs:
Poga ar horizontālu UN vertikālu telpu iekšpusē.
Slikts piemērs:
Pogas teksts cieši saspiests pie malām.
Ārējā atstarpe = telpa ārpus elementa.
Tas ir tas, kas rada atdalījumu starp rindkopām, attēliem un sadaļām.
Mājaslapu veidotājs, piemēram, Mozello, lielāko daļu no tā apstrādā automātiski, taču ir noderīgi saprast šo principu.
Biežākās atstarpju kļūdas, ko iesācēji pieļauj
Kļūda #1: Katras vietas aizpildīšana ar kaut ko
Šī ir visbiežākā kļūda.
Iesācēji baidās no brīvās vietas, tāpēc viņi:
- pievieno apmales
- pievieno kastes
- pievieno ikonas
- pievieno rakstus
- pievieno vairāk teksta
- pievieno nevajadzīgus attēlus
Šis pārblīvējums kaitē skaidrībai un lasāmībai.
Kļūda #2: Teksta rindas pārāk tuvu viena otrai
Ciešas rindstarpas rada teksta sienu.
Atstarpēm vajadzētu palīdzēt acij viegli plūst no vienas rindas uz nākamo.
Kļūda #3: Pārblīvētas galvenās sadaļas
Tavai sākumlapas galvenajai sadaļai vajadzētu šķist atvērtai un mierīgai.
Slikts piemērs:
Logotips + izvēlne + virsraksts + apakšvirsraksts + attēls + poga + ikonas + apmales + fona attēls.
Labs piemērs:
Tīrs virsraksts + īss apakšvirsraksts + poga + varbūt viens attēls.
Kļūda #4: Nav elpošanas telpas ap pogām
Kad pogas ir saspiestas starp elementiem, apmeklētāji tās nepamana. Un, ja viņi tās nepamana, viņi neklikšķinās.
Vieta = uzmanība.
Kļūda #5: Saturs, kas pieskaras ekrāna malām
Kad teksts vai attēli aiziet līdz pašām malām, viss šķiet saspiests.
Labas atstarpes gar kreiso un labo malu padara Tavu izkārtojumu stabilu.
Kā Mozello palīdz Tev pareizi tikt galā ar atstarpēm bez piepūles
Mozello šabloni ir veidoti ar iebūvētām līdzsvarotām atstarpēm. Tas nozīmē, ka Tev nav jāsaprot sarežģīti izkārtojuma noteikumi, lai iegūtu profesionālu, tīru izskatu.
Mozello dod Tev:
- iepriekš izveidotas atstarpju skalas
- vizuālu atdalījumu starp sadaļām
- tīrus mobilo atstarpju noteikumus
- maziem uzņēmumiem draudzīgus izkārtojumus, kas veidoti skaidrībai
- pareizu teksta iekšējo atstatumu un ārējās atstarpes
- konsekventas atstarpes visā lapā
Ja Tu esi iesācējs, kas izmanto mājaslapu veidotāju maziem uzņēmumiem, tas ir neticami noderīgi, jo ietaupa stundas izkārtojuma darba. Tev nav manuāli jāpielāgo atstarpes - Tava lapa jau seko mūsdienu dizaina standartiem.
Protams, ja vēlies vēl vairāk pielāgot vai regulēt atstarpes, Mozello dod Tev arī šo elastību.
Kāpēc atstarpes palīdz apmeklētājiem konvertēties
Atstarpes ne tikai padara Tavu lapu skaistu - tās arī uzlabo veiktspēju.
Labas atstarpes noved pie:
- vairāk pogu klikšķu
- ilgāka lasīšanas laika
- labākas pārskatīšanas
- mazākas neapmierinātības
- lielākas uzticības
- labākas mobilās pieredzes
Kad Tu veido mājaslapu, lai attīstītu savu biznesu, skaidrība ir viss. Cilvēki rīkojas, kad viņi saprot, ko viņiem vajadzētu darīt. Brīvā vieta palīdz viņiem to ātrāk ieraudzīt.
Pēdējais atstarpju kontrolsaraksts pirms lapas publicēšanas
Pirms savas mājaslapas palaišanas pārskati šo ātro sarakstu:
- Vai manām sadaļām ir skaidras atstarpes starp tām?
- Vai manas rindkopas ir sadalītas mazos, viegli lasāmos gabalos?
- Vai manam virsrakstam ir telpa virs un zem tā?
- Vai manai pogai ir elpošanas telpa ap to?
- Vai mani attēli nepieskaras tekstam vai malām?
- Vai man ir pietiekamas atstarpes mobilajā ierīcē?
- Vai es izvairījos no pārblīvējuma un nevajadzīgiem elementiem?
- Vai lapa šķiet mierīga, nevis aizņemta?
Ja Tu vari teikt "jā" uz šiem, Tavas atstarpes ir spēcīgas.
Secinājums: Brīvā vieta ir viens no vienkāršākajiem veidiem, kā uzreiz uzlabot savas mājaslapas izskatu
Tev nav vajadzīgas padziļinātas dizaina prasmes, lai labi izmantotu brīvo vietu. Tev vienkārši jāsaprot, ka brīva vieta ir jaudīga. Tā rada skaidrību, fokusu un komfortu.
Kad Tu veido mājaslapu, izmantojot mājaslapu veidotāju maziem uzņēmumiem, piemēram, Mozello, atstarpes kļūst par vienu no Taviem labākajiem draugiem. Izmanto tās dāsni. Ļauj savam saturam elpot. Ļauj savam vēstījumam izcelties, necīnoties par vietu.
Tavi apmeklētāji Tev pateiksies ar savu uzmanību, savu uzticību un savu rīcību.
Vairāk rakstu šajā sērijā
- Kas ir labs tīmekļa dizains un kāpēc tas ir svarīgi
- Kā izvēlēties krāsas savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kā izmantot brīvo vietu tīmekļa dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā radīt vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvus aicinājumus rīkoties
- Kā organizēt savu mājaslapu kā dizainerim
- Kā izveidot skaidru mājaslapas navigāciju
Lejupielādē mūsu bezmaksas Labākās tīmekļa dizaina prakses kontrolsarakstu, kas palīdzēs Tev soli pa solim izvērtēt savu mājaslapu.