Dizaina sistēma mājaslapai: kad un kā
Dizaina sistēma ir vienošanās par to, kā lietas izskatās un uzvedas, kopā ar komponentiem, kas šo vienošanos īsteno. Mazai lapai tā ir lieka. Augošai lapai tās trūkums ir dārgs.
Šis ceļvedis skaidro, kad tā atmaksājas, ko tā ietver un kā sākt bez mēnešiem ilga projekta.
Kad tā ir vajadzīga#
Dizaina sistēma risina konsekvences un atkārtojamības problēmu. Ja to nav, nav arī problēmas.
| Situācija | Vai vajag sistēmu? |
|---|---|
| Piecu lapu uzņēmuma vietne | Nē — pietiek ar stila vadlīnijām |
| Augoša lapa, jaunas lapas katru mēnesi | Jā, vieglā formā |
| Vairāki cilvēki dizainē vai izstrādā | Jā |
| Vairāki produkti vai vietnes ar vienu zīmolu | Jā, noteikti |
| Lapa, ko atjaunina reizi gadā | Nē |
| Lietotne ar daudzām formām un stāvokļiem | Jā |
Biežākā kļūda ir uzbūvēt pilnu dizaina sistēmu piecu lapu vietnei. Tas ir mēnesis darba, ko neviens nelietos.
Ko tā ietver#
Pa slāņiem, no noturīgākā uz mainīgāko.
- Marķieri: krāsas, atstarpes, tipogrāfija, rādiusi, ēnas — kā nosaukumi, nevis vērtības kodā.
- Tipogrāfijas skala: ierobežots izmēru un svaru kopums.
- Atstarpju skala: viena sistēma, piemēram, četru reizinājumi.
- Bāzes komponenti: poga, saite, formas lauks, apzīmējums, paziņojums.
- Saliktie komponenti: kartīte, tabula, navigācija, modālais logs.
- Šabloni: kā komponentus lieto kopā tipiskās situācijās.
- Satura noteikumi: tonis, pogu formulējumi, kļūdu paziņojumu stils.
- Dokumentācija: kad ko lietot, nevis tikai kā tas izskatās.
Visvērtīgākā daļa ir «kad ko lietot». Komponentu galerija bez noteikumiem neuztur konsekvenci.
Kā sākt mazā mērogā#
Viegla sistēma, ko var uzcelt nedēļā un kas sedz lielāko daļu ieguvuma.
- Ieraksti esošās krāsas vienā failā kā CSS mainīgos un izdzēs dublikātus.
- Nosaki atstarpju skalu un aizvieto ar to nejaušās vērtības.
- Ierobežo tipogrāfiju līdz pieciem sešiem izmēriem.
- Apvieno pogas vienā komponentā ar visiem stāvokļiem.
- Apvieno formu laukus kopā ar apzīmējumiem un kļūdu paziņojumiem.
- Dokumentē to vienā lapā ar piemēriem — īstā lapā, ne atsevišķā rīkā.
- Pievieno jaunus komponentus tikai tad, kad tas pats šablons atkārtojas trešo reizi.
Kā to uzturēt dzīvu#
Lielākā daļa dizaina sistēmu nemirst no būvēšanas, bet no uzturēšanas trūkuma.
| Risks | Kas notiek | Pretpasākums |
|---|---|---|
| Neviens neatbild | Sistēma atšķiras no īstās lapas | Vārdā nosaukts īpašnieks |
| Uzkrājas izņēmumi | Katra lapa iegūst savu variantu | Izņēmums prasa pamatojumu |
| Dokumentācija noveco | Neviens tai neuzticas | Dokumentācija no īstā koda |
| Pārāk daudz komponentu | Neviens neatrod pareizo | Noteikums: trešā atkārtošanās |
| Dizains un kods atšķiras | Divas patiesības | Kopīgi marķieri abās pusēs |
| Sistēma pārāk stingra | Cilvēki iet apkārt | Atļauj pamatotus izņēmumus |
Biežāk uzdotie jautājumi
Vai mazam uzņēmumam vajag dizaina sistēmu?
Pilnā apjomā nē. Bet pat mazai lapai ir vērts vienoties par krāsām, atstarpēm un tipogrāfiju vienā failā — tas ir stundas darbs un novērš gadu gaitā radušos jucekli. Sauc to par stila vadlīnijām un nebūvē komponentu galeriju, ko neviens neatvērs.
Cik ilgi aizņem dizaina sistēmas būvēšana?
Vieglā versija — marķieri, tipogrāfija, atstarpes, pogas, formas — aizņem nedēļu. Pilna sistēma ar dokumentāciju un visiem komponentiem aizņem mēnešus un prasa pastāvīgu uzturēšanu. Sāc ar vieglo un audzē to tikai tad, kad rodas īsta vajadzība.
Vai jālieto gatava komponentu bibliotēka?
Bieži jā, īpaši lietotnēm. Gatava bibliotēka atrisina pieejamību un stāvokļus, ko pašam ir apnicīgi izdarīt pareizi. Pielāgo tās marķierus savam zīmolam, nevis būvē visu no nulles. No nulles ir vērts būvēt tad, ja zīmols ir daļa no atšķirības vai vajadzības ir neparastas.
Kam jābūt dizaina sistēmas īpašniekam?
Vienam vārdā nosauktam cilvēkam, ne komandai. Bez īpašnieka sistēma atšķiras no īstās lapas apmēram pusgada laikā un kļūst par dokumentu, kam neviens neuzticas. Īpašniekam nav jādara viss pašam, bet jālemj, kas tiek pievienots un kas ir izņēmums.
dizaina sistēmakomponentu bibliotēkastila vadlīnijascss mainīgiedizaina marķieridizaina konsekvence
