Skip to main content

Dizaina sistēmas estētika prasmes

Dizaina sistēmas estētikas prasmes ir ceļvedisks pieeju, kas palīdz jums uzlabot vietnes vizuālo identitāti. Tas palīdz jums veikt vienotus lēmumus par tipografiju, krāsām, atstarpēm un motora tokeniem, kas definē jūsu dizaina sistēmu.

Kas ir Dizaina Sistēmas Estētika?​

Dizaina sistēmas estētika ir struktūru prasme, kas apņem:

  • Tipografiju: Fontu familijas, izmērus, svīru un rindas augstumu
  • Krāsu: Primāras, sekundāras, akcenta un neitrā palīdas
  • Atstarpes: Paddinga, margīna un atstarpes skali
  • Borders (Svarīgi: šajā kontekstā tas nozīmē vizuālas elementu apmeklēšanu): Radiusa un platuma tokeni
  • Šaduvas: Elevācijas un dziļuma tokeni
  • Motora (Motion): Animācijas un pārejas

Šos lēmumus ir saglabāti jūsu tēmas theme.json failā, izveidojot kohesīvu vizuālu sistēmu.

Kāpēc lietot Dizaina Sistēmas Estētiku?​

Kohesība (Consistency)​

Dizaina sistēma nodrošina:

  • Visas tekstas izmanto vienu tipografijas skalu
  • Krās tiek izmantotas kohesīvi visā vietnē
  • Atstarpes seko paredzamu pamatu
  • Animācijas sajūtas ir vienotas

Efektivitāte (Efficiency)​

Neveikt dizaina lēmumus pa lapām, bet:

  • Definējiet tokenus reizi
  • Lietojiet tos visur
  • Atjauninājiet globāli mainot vienu vērtību

Fleksibilitāte (Flexibility)​

Jūs varat:

  • Ātri pielāgot savu visu dizainas sistēmu
  • Eksperimentēt ar dažādām estētikām
  • Uzturēt zīmola kohesiju, t 발전ojoties

Dizaina Sistēmas Estētikas prasmes izslēgšana​

Manāla aktivizācija (Manual Activation)​

Jūs varat sākt prasmi jebkurā laikā:

"Palīdziet man uzlabot manu dizainas sistēmu"

vai

"Ļaujiet mums uzlabot manas vietnes estētiku"

vai

"Vadīt mani caur dizaina sistēmas lēmumiem"

Automātiskās ierosinājumi (Automatic Suggestions)​

Agenti var ierosināt lietot prasmi, kad jūs:

  • Lūdziet dizaina izmaiņas
  • Pieprasīt "modernu" vai "profesionālu" redizainu
  • Vēlēties uzlabot vizuālo kohesiju
  • Jāt gatavojieties vietnes lansēšanai

Dizaina sistēmas estētika procesa​

1. Tipografija​

Agentis jautā par jūsu fontu izvēles:

Kas ir jūsu iepriekšminētais tipografiskais stils?
- Serif (tradicionāls, elegants)
- Sans-serif (modernais, tīrs)
- Monospace (tehniskais, fokusēts uz kodu)

Jums virsraksta fontam:
- Vai vēlaties atšķirīgu virsraksta fontu vai izmantot to pašu kā slapta teksta?
- Priekšroka: bolda, eleganta, spēlētīga, minimāla?

Jums slapta teksta fontam:
- Lasāmība ir svarīga. Vai vēlaties:
  - Lielāku, platāku tekstu
  - Kompaktu, efektīvu tekstu
  - Standart izmēru tekstu

Pēc tam agentis definē:

  • Virsraksta fontas: Primārs fonts virsrakstiem un sarakstiem
  • Slapta teksta fontas: Fonts paragrafiem un slaptai tekstam
  • Monospace fontas: Fontas kodam un tehniskiem saturiem
  • Izmēru skale: Iepriekš noteikti izmēri (mazā, pamats, liela, XL, etc.)
  • Svarības skale: Fontu svars (regula, medium, bolda, etc.)
  • Līnijas augstums: Atstarpes starp līnijām lasāmības nodrošināšanai

2. Krāsu palete​

Izveidojiet jūsu krāsu paleti.

Primārs krāsas (jūsu zīmbrands krāsa):
- Aktuālā: [parāda esošo krāsu]
- Mainīt uz: [krāsu izvēlne vai hex kodu]

Sekundāras krāsas (atbalsta krāsa):
- Aktuālā: [parāda esošo krāsu]
- Mainīt uz: [krāsu izvēlne vai hex kodu]

Akcenta krāsa (izsvarsēšana un CTA):
- Aktuālā: [parāda esošo krāsu]
- Mainīt uz: [krāsu izvēlne vai hex kodu]

Neitralās paletes (grīnu tekstam, robežām, fonam):
- Lielais: [krāsa]
- Vidējais: [krāsa]
- Tumšais: [krāsa]

Agentis izveido pilnu paleti, kas ietver:

  • Primāras, sekundāras un akcenta krasas
  • Neitralās grīnas (liela, vidējais, tumšais)
  • Semantiskās krasas (veiksmi, brīdinājums, kļūda)
  • Hover un aktīvo stāvokli

3. Atstarpes​

Kuri, cik atvīrības laika vēlaties?

Atraukuma skāles prioritāte:

  • Kompakts (svarīgi, efektīvi izveidoti layouti)
  • Normāls (izjūta atstarpe)
  • Laiks (dzelzs tvaiku)

Tas ietekmē:

  • Paddingu iekšpusē pogās un kartēs
  • Margines starp sadaļām
  • Tvaiku starp grīda elementiem

Agent definē atraukuma tokenus:

  • Pamatojums (parasti 4px vai 8px)
  • Skala: xs, sm, md, lg, xl, 2xl
  • Konkrētās vērtības paddingam, margīnām, tvaikam

4. Sturi un Šaduvi​

Vizualā dziļums un definīcija:

Atraukuma radiatora prioritāte:
- Asmīgs (bez zaudējumiem)
- Subtilais (mazi atraukums)
- Zaļš (vidējs atraukums)
- Lielisks (liels atraukums)

Šaduva dziļums:
- Platā (bez šaduviem)
- Subtilais (liesmas šaduvi)
- Izplūstīgs (spēcīgi šaduvi)

Agent izveido:

  • Atraukuma radiatora tokenus (pogām, kartēm, ievadiem)
  • Šaduva tokenus augšcelšanās līmeņiem
  • Atraukuma platumu tokenus

5. Kinetika un Animācija​

Kā jums vajadzētu sajūt, kad tas ir interaktīvs?

Animācijas prioritāte:
- Minimālā (bez animāciju)
- Subtilais (mīkri pārejas)
- Spēlētspēļu (pamanāmi animācijas)

Konkrētās animācijas:
- Lapa pārejas: izgaisma, slēgšana vai nekāda?
- Pogas pārvietošana: skali, krāsas mainīšanās vai abas?
- Uzlabojuma stāvokļi: spīners, skeletskārs vai progresbaras?

Agent definē:

  • Pārejas laiki (ātruks, normāls, lēns)
  • Easing funkcijas (ease-in, ease-out, ease-in-out)
  • Animācijas keyframes par biežām interakcijām

Dizaina sistēmas estētikas pielietošana​

Automātiska pielietošana​

Pēc tam, kad pabeidzat savu prasmes, agent:

  1. Atjauninā jūsu tēmas theme.json ar visiem tokenus
  2. Pielietoa dizaina sistēmu uz jūsu aktīvo tēmu
  3. Regenerē blokiem stili, lai atbilstu jaunajai sistēmai
  4. Activēja atjaunināto tēmu

Manāla pielietošana​

Jūs varat arī rediģēt theme.json tieši:

Redzamāšana Jums Dizainam sistēmas​

Jautāt agentu​

"Parādiet man dizainam sistēmu"

vai

"Kas ir mani pašreizējie dizaina tokeni?"

Agentas parādīs jūsu tipografiju, krāsas, atstarpes un citus tokenus.

Skatīt theme.json​

Atveriet fail /wp-content/themes/[theme-name]/theme.json teksta redaktō, lai redzētu neapstrādātus tokenu definīcijas.

Dizainam sistēmas uppilde​

Ātra uppilde​

Jautājiet agentam par konkrētām izmaiņām:

"Izveido galveno krāsu tumšāku"

vai

"Palielināt atstarpes skaliem par 20%"

vai

"Izveidot saraksta fontu virsrakstiem serifu"

Pilna redizajnēšana​

Atjaunināt Dizainam sistēmas estētikas (Design System Aesthetics) prasmi:

"Ļaujiet man redizajnēt visu manu dizainam sistēmu"

Tas atrodas jums visiem lēmumiem, sākot no jūsu pašreznajām vērtībām.

Daļējas uppilde​

Atjaunināt konkrētus aspektus:

"Tikai atjaunināt krāsu palīdu, atstāt visu citu"

Dizainam sistēmas labākās prakse​

Konsistentsība​

  • Izmantojiet vienā un tādas pašas tokenus visur
  • Neveido vienreiz lietotās krasas vai izmērus
  • Pievienojieties tokeniem, neaizmirstiet iekodēt vērtības tieši koda

Nosaukumi​

Izmantojiet skaidrus, semantiskus nosaukumus:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Skalētība​

Dokumentējiet savu dizaina sistēmu:

  • Kura ir iedarbījuši konkrētus krāsas?
  • Kad izmantot katru tokeni?
  • Izņemumi un robežsituācijas.

Parasti dizaina sistēmas modeļi​

Modern Minimalistiskais​

  • Sans-serif tipografija (Inter, Helvetica).
  • Atkarīga krāsu palīdzība (2–3 krāsas).
  • Lielais atstarpes (generous spacing).
  • Meklēji (subtle shadows).
  • Lieliski un ātri animācijas.

Sirds un draudzīga​

  • Sistēma, kas kombinē serif un sans-serif tipografiju.
  • Varmas krāsu palīdzība (oranges, varmu grēnu).
  • Aru apkurties (rounded corners).
  • Meklēji.
  • Spēlētspēļu animācijas.

Profesionālā korporatīva​

  • Skaidra sans-serif tipografija (Roboto, Open Sans).
  • Neitralna palīdzība ar akcenta krāsu.
  • Strukturēta atstarpes.
  • Minimaliskie mekļi.
  • Meklēji pārejas.

Kreatīva un draudzīga​

  • Atšķirīga tipografija.
  • Varmas krāsu palīdzība.
  • Pārskatītas atstarpes.
  • Spēcīgi mekļi.
  • Pazīstamas animācijas.

Kļūdu likums (Troubleshooting)​

Mans dizaina sistēmas izmaiņas neparādās

  • Izsniegt brauzera kešu (clear your browser cache).
  • Atjaunināt vietni, ja izmantojat statisku generatoru.
  • Pārbaudīt, vai theme.json ir pareiz JSON formātā.
  • Apstiprināt, ka tēma ir aktīva (verify the theme is active).

Krāsas skatās atšķirīgi dažādās lapās

  • Pārbaudīt konfliktus CSS pluginos.
  • Apstiprināt, ka visas lapas izmanto vienu un to pašu tēmu.
  • Izsniegt jebkuru kešu (caching) pluginu.

Es vēlējos atgriezties iepriekšējai dizaina sistēmai

  • Jautāt agentam: "Parādiet man manu dizaina sistēmas vēsturi" ("Show me my design system history").
  • Manuāli rediģēt theme.json iepriekšējām vērtībām.
  • Atjaunināt savu pakāpumu ar dažādiem izvēles.

Nākamie soļi (Next Steps)​

Pēc dizaina sistēmas definēšanas:

  1. Pārskatiet savu vietni: Apmeklējiet savu vietni, lai redzētu jauno dizainu
  2. Uzlabojiet vēl: Veiciet pielāgojumus izmantojot savas prasmes atkal
  3. Izveidi šablonus: Izveido personalizētas bloku šablonus izmantojot savus dizaina tokenus
  4. Dokumentējiet: Piesaisti savu dizaina sistēmu komandas biedriem