Skip to main content

Dizaino kryptis

Žingsnis Dizaino kryptis leidžia peržiūrėti, patobulinti ir užbaigti jūsų temos vizualinį dizainą prieš Theme Builder sugeneruojant visą temą.

Apžvalga​

Užbaigus Discovery Interview, Theme Builder pateikia jūsų dizaino kryptį su darbalaukio ir mobiliosios peržiūros atvaizdavimu. Tai leidžia tiksliai pamatyti, kaip jūsų dizainas atrodys skirtinguose įrenginiuose prieš įsipareigojant temai.

Dizaino krypties komponentai​

1. Spalvų paletė​

Jūsų temos spalvų schema, įskaitant:

  • Pagrindinė spalva — pagrindinė prekės ženklo spalva, naudojama mygtukams, nuorodoms ir akcentams
  • Antrinė spalva — papildoma spalva įvairovei
  • Akcentinė spalva — paryškinimo spalva svarbiems elementams
  • Neutralios spalvos — pilki ir balti atspalviai fonams ir tekstui
  • Teksto spalva — pagrindinė teksto spalva skaitomumui

2. Tipografija​

Šriftų pasirinkimai:

  • Antraščių šriftas — naudojamas puslapių pavadinimams ir sekcijų antraštėms
  • Pagrindinio teksto šriftas — naudojamas pastraipų tekstui ir turiniui
  • Šriftų dydžiai — prisitaikantys dydžiai skirtingiems ekrano dydžiams
  • Eilučių aukštis — tarpai tarp eilučių skaitomumui
  • Šriftų svoriai — pusjuodžiai, įprasti ir šviesūs variantai

3. Išdėstymas ir tarpai​

  • Konteinerio plotis — maksimalus turinio plotis
  • Vidinės paraštės ir paraštės — tarpai aplink elementus
  • Tinklelio sistema — stulpelių išdėstymas prisitaikančiam dizainui
  • Komponentų tarpai — atstumas tarp UI elementų

4. Vizualiniai elementai​

  • Mygtukų stiliai — pirminių, antrinių ir tretinių mygtukų dizainai
  • Kortelių dizainai — turinio blokų išdėstymai
  • Piktogramos — piktogramų stilius ir dydžiai
  • Rėmeliai ir šešėliai — subtilus vizualinis gylis
  • Užvedimo efektai — interaktyvių būsenų stilizavimas

Peržiūros atvaizdavimas​

Darbalaukio peržiūra​

Darbalaukio peržiūra rodo jūsų dizainą visu pločiu (paprastai 1200px arba platesniu):

  • Pilnas navigacijos meniu
  • Visas išdėstymas su visais stulpeliais
  • Didelė tipografija ir tarpai
  • Visi vizualiniai elementai visu dydžiu

Mobilioji peržiūra​

Mobilioji peržiūra rodo jūsų dizainą mobiliojo pločio formatu (paprastai 375px):

  • Prisitaikanti navigacija (hamburgerio meniu)
  • Vieno stulpelio išdėstymas
  • Pakoreguota tipografija ir tarpai
  • Lietimui patogūs mygtukų dydžiai

Prisitaikantys lūžio taškai​

Theme Builder atvaizduoja peržiūras šiuose lūžio taškuose:

ĮrenginysPlotisPeržiūra
Mobilusis375pxVertikalios padėties telefonas
Planšetė768pxHorizontalios padėties planšetė
Darbalaukis1200pxViso pločio darbalaukis
Didelis darbalaukis1920pxItin platus ekranas

Dizaino tobulinimas​

Koregavimų atlikimas​

Galite patobulinti savo dizaino kryptį:

  1. Koreguodami spalvas — pakeiskite bet kurią paletės spalvą
  2. Keisdami šriftus — pasirinkite kitus šriftus
  3. Modifikuodami tarpus — koreguokite vidines paraštes ir paraštes
  4. Atnaujindami išdėstymą — keiskite konteinerių pločius ir tinklelio stulpelius
  5. Tinkindami elementus — modifikuokite mygtukų stilius, kortelių dizainus ir kt.

Peržiūros atnaujinimai​

Pakeitimai atsispindi realiuoju laiku:

  • Darbalaukio peržiūra atsinaujina iš karto
  • Mobilioji peržiūra atsinaujina iš karto
  • Visi prisitaikantys lūžio taškai atnaujinami
  • Galite perjungti peržiūras, kad patikrintumėte pakeitimus

Palyginimo rodinys​

Palyginkite savo dizaino kryptį su:

  • Pirminiu dizainu — pamatykite, kas pasikeitė
  • Konkurentų dizainais — palyginkite su įkvėpimo svetainėmis
  • Ankstesnėmis versijomis — grįžkite prie ankstesnių dizaino krypčių

Dizaino krypties patvirtinimas​

Kai būsite patenkinti savo dizainu:

  1. Peržiūrėkite abi peržiūras — patikrinkite, ar darbalaukio ir mobilioji versijos atrodo gerai
  2. Patikrinkite visas spalvas — užtikrinkite kontrastą ir prieinamumą
  3. Išbandykite tipografiją — patikrinkite skaitomumą visais dydžiais
  4. Patvirtinkite išdėstymą — patikrinkite tarpus ir lygiavimą
  5. Patvirtinkite dizainą — pereikite prie temos generavimo

Kiti veiksmai​

Patvirtinus dizaino kryptį:

  1. Theme Builder sugeneruoja visą jūsų temą
  2. Tema įdiegiama jūsų WordPress svetainėje
  3. Galite toliau tinkinti naudodami WordPress tinkintuvą
  4. Pereikite prie Svetingumo meniu arba kitų funkcijų

Geriausios praktikos​

  • Testuokite realiuose įrenginiuose — jei įmanoma, naudokite tikrus telefonus ir planšetes
  • Patikrinkite skaitomumą — užtikrinkite, kad tekstas būtų skaitomas visais dydžiais
  • Patikrinkite kontrastą — naudokite Paletės kontrasto patikrinimą prieinamumui
  • Atsižvelkite į našumą — optimizuokite vaizdus ir šriftus greičiui
  • Planuokite turinį — užtikrinkite, kad išdėstymas veiktų su jūsų tikruoju turiniu

Trikčių šalinimas​

Peržiūra neatsinaujina​

  • Atnaujinkite puslapį
  • Išvalykite naršyklės talpyklą
  • Išbandykite kitą naršyklę
  • Patikrinkite interneto ryšį

Spalvos atrodo skirtingai​

  • Patikrinkite monitoriaus spalvų nustatymus
  • Išbandykite skirtinguose įrenginiuose
  • Patikrinkite spalvų kontrastą naudodami prieinamumo įrankius
  • Apsvarstykite daltonizmo simuliatorius

Tipografijos problemos​

  • Patikrinkite, ar šriftų failai įkeliami
  • Patikrinkite šrifto dydį skirtinguose lūžio taškuose
  • Išbandykite su tikru turiniu
  • Atsižvelkite į eilutės ilgį skaitomumui