Web dizaina principi, kas tiešām svarīgi
Lielākā daļa web dizaina padomu ir vai nu gaumes jautājums, vai tendence. Neliels principu kopums tomēr ir noturīgs, jo tas izriet no tā, kā cilvēki lapas lasa un skenē.
Šis ceļvedis aptver šos principus un to, kā pārbaudīt, vai lapa tos ievēro.
Vizuālā hierarhija#
Svarīgākais atsevišķais princips. Apmeklētājs lapu nelasa — viņš to skenē, un hierarhija izlemj, ko viņš ierauga.
- Katrā lapā ir viens vissvarīgākais elements. Ja to ir trīs, nav neviena.
- Izmērs, svars, krāsa un telpa rada secību — lieto tos kopā, ne atsevišķi.
- Virsrakstiem jābūt lasāmiem bez lasīšanas: skenē un saņem satura kopsavilkumu.
- Galvenajai darbībai jābūt vizuāli spēcīgākajam elementam.
- Sekundārajām darbībām jābūt redzamām, bet vājākām.
- Tests: paskaties uz lapu trīs sekundes un aizver acis. Ko atceries?
Ja katrs elements ir izcelts, neviens nav izcelts. Uzsvars strādā tikai kontrastā.
Lasāmība#
Teksts joprojām ir lielākā daļa katras mājaslapas. Šie skaitļi ir praktiski, ne teorētiski.
| Elements | Praktisks ieteikums | Kāpēc |
|---|---|---|
| Pamatteksta izmērs | Vismaz 16 pikseļi | Mazāks nogurdina un mobilajā tālummaina |
| Rindas garums | 45 līdz 75 rakstzīmes | Garāks zaudē vietu rindas beigās |
| Rindstarpa | 1,5 reizes pamattekstā | Blīvu tekstu grūtāk skenēt |
| Kontrasts | Vismaz 4,5:1 pamattekstam | Pieejamības minimums |
| Rindkopas garums | Trīs līdz četras rindas | Garas rindkopas izlaiž |
| Fontu skaits | Viens vai divi | Vairāk lauž konsekvenci |
Telpa un konsekvence#
Divi principi, kas atšķir profesionālu lapu no amatieriskas vairāk nekā jebkura cita detaļa.
- Telpa nav tukšums, bet grupēšana. Saistīto tuvāk, nesaistīto tālāk.
- Lieto vienotu atstarpju skalu — piemēram, 4, 8, 16, 24, 32 — nevis nejaušus skaitļus.
- Viens un tas pats elements katrā lapā jāizskatās un jāuzvedas vienādi.
- Pogām, saitēm un formu laukiem vajag vienu vizuālo valodu.
- Neizgudro katrai lapai jaunu izkārtojumu; atkārto veidnes.
- Ierobežo krāsu paleti: viena akcenta krāsa, viena neitrāla skala, stāvokļu krāsas.
- Konsekvence samazina mācīšanos — apmeklētājam nav katra lapa jāsaprot no jauna.
Atgriezeniskā saite un stāvokļi#
Visbiežāk aizmirstā dizaina daļa un biežākais lietotāju neapmierinātības avots.
| Stāvoklis | Ko dizainēt |
|---|---|
| Uzvirzīšana un fokuss | Redzama izmaiņa, arī ar tastatūru |
| Ielāde | Parādi, ka kaut kas notiek, un ko gaidīt |
| Kļūda | Paskaidro, kas nogāja greizi un ko darīt |
| Panākums | Apstiprini, ka darbība izdevās |
| Tukšs skats | Paskaidro, kāpēc te nekā nav un ko darīt |
| Atspējots | Parādi, kāpēc atspējots, ne tikai pelēku pogu |
Tukšie skati un kļūdu paziņojumi tiek dizainēti gandrīz vienmēr pēdējie vai vispār ne. Tieši tos lietotājs redz vissmagākajā brīdī.
Biežāk uzdotie jautājumi
Vai dizainam jāseko tendencēm?
Nē, un tendenču ievērošana ir viens no ātrākajiem veidiem, kā lapa noveco. Tendence pēc trim gadiem ir atpazīstama no sava laika; hierarhija, lasāmība un konsekvence nenoveco. Lieto tendences tikai tad, ja tās risina īstu problēmu, nevis lai izskatītos moderni.
Cik krāsas drīkst lietot?
Viena akcenta krāsa, viena neitrāla skala un stāvokļu krāsas — tas aptver gandrīz jebkuru uzņēmuma vietni. Ierobežojums nav estētisks noteikums, bet praktisks: šaura palete padara hierarhiju lasāmu, jo akcenta krāsa saglabā nozīmi. Ja akcentu ir četri, neviens neko nenozīmē.
Vai dizains ietekmē konversiju?
Jā, bet ne tā, kā parasti domā. Skaistums ietekmē maz; skaidrība ietekmē daudz. Lielākās ietekmes izmaiņas parasti ir teksts, hierarhija un formu vienkāršošana, nevis krāsu palete. Tāpēc ir vērts testēt saturu un izkārtojumu pirms vizuālas pārtaisīšanas.
Vai mobilais dizains ir pirmais?
Vairumā gadījumu jā, jo mobilais ir stingrāks ierobežojums un liek sakārtot prioritātes. Ja sāc no datora, viss ietilpst un hierarhija paliek neizdarīta. Izņēmums ir rīki un iekšējās sistēmas, ko lieto galvenokārt uz lielā ekrāna.
web dizaina principivizuālā hierarhijalasāmība tīmeklītipogrāfijalietotāja pieredzedizaina noteikumi
