Skip to main content

Дизайны чиглэл

Дизайны чиглэл алхам нь Theme Builder бүрэн theme үүсгэхээс өмнө таны theme-ийн харагдах дизайныг хянах, сайжруулах, эцэслэх боломжийг олгоно.

Тойм​

Discovery Interview-г дуусгасны дараа Theme Builder таны дизайны чиглэлийг desktop болон mobile preview rendering-тэйгээр харуулна. Ингэснээр theme-д баталгаажуулахаас өмнө таны дизайн өөр өөр төхөөрөмж дээр яг хэрхэн харагдахыг харах боломжтой.

Дизайны чиглэлийн бүрэлдэхүүн хэсгүүд​

1. Өнгийн палитр​

Таны theme-ийн өнгөний схем, үүнд:

  • Үндсэн өнгө — товч, холбоос, тодруулгад ашиглагдах гол брэндийн өнгө
  • Хоёрдогч өнгө — олон янз байдлыг бий болгох нэмэлт өнгө
  • Өргөлт өнгө — чухал элементүүдийг тодруулах өнгө
  • Саармаг өнгөнүүд — дэвсгэр болон текстэд зориулсан саарал, цагаан өнгөнүүд
  • Текстийн өнгө — уншихад хялбар байдлыг хангах үндсэн текстийн өнгө

2. Типограф​

Дараахад зориулсан фонтын сонголтууд:

  • Гарчгийн фонт — хуудасны гарчиг болон хэсгийн гарчигт ашиглагдана
  • Үндсэн текстийн фонт — догол мөрийн текст болон агуулгад ашиглагдана
  • Фонтын хэмжээ — өөр өөр дэлгэцийн хэмжээнд тохирох responsive хэмжээ
  • Мөрийн өндөр — уншихад хялбар байлгах мөр хоорондын зай
  • Фонтын жин — бүдүүн, ердийн, нарийн хувилбарууд

3. Байрлал ба зай​

  • Контейнерийн өргөн — агуулгын хамгийн их өргөн
  • Дотоод зай ба захын зай — элементүүдийн эргэн тойрон дахь зай
  • Сүлжээний систем — responsive дизайнд зориулсан баганын байрлал
  • Бүрэлдэхүүн хэсгийн зай — UI элементүүдийн хоорондын зай

4. Дүрслэлийн элементүүд​

  • Товчны загварууд — үндсэн, хоёрдогч, гуравдагч товчны дизайн
  • Картын дизайн — агуулгын блокуудын байрлал
  • Дүрснүүд — дүрсний хэв маяг ба хэмжээ
  • Хүрээ ба сүүдэр — нарийн дүрслэлийн гүн
  • Hover эффектүүд — харилцан үйлчлэлийн төлөвийн загварчлал

Урьдчилан харах дүрслэл​

Desktop урьдчилан харах​

Desktop урьдчилан харах нь таны дизайныг бүрэн өргөнөөр (ихэвчлэн 1200px эсвэл түүнээс өргөн) харуулна:

  • Бүрэн navigation цэс
  • Бүх баганатай бүрэн байрлал
  • Том типограф ба зай
  • Бүх дүрслэлийн элементүүд бүрэн хэмжээгээр

Mobile урьдчилан харах​

Mobile урьдчилан харах нь таны дизайныг mobile өргөнөөр (ихэвчлэн 375px) харуулна:

  • Responsive navigation (hamburger цэс)
  • Нэг баганатай байрлал
  • Тохируулсан типограф ба зай
  • Дарахад тохиромжтой товчны хэмжээ

Responsive таслах цэгүүд​

Theme Builder дараах таслах цэгүүд дээр урьдчилан харалтыг дүрсэлнэ:

ТөхөөрөмжӨргөнУрьдчилан харах
Mobile375pxБосоо утас
Tablet768pxХэвтээ tablet
Desktop1200pxБүрэн өргөн desktop
Large Desktop1920pxХэт өргөн дэлгэц

Дизайнаа сайжруулах​

Тохируулга хийх​

Та дизайны чиглэлээ дараах байдлаар сайжруулж болно:

  1. Өнгө тохируулах — палитр дахь дурын өнгийг өөрчлөх
  2. Фонт солих — өөр typeface сонгох
  3. Зай өөрчлөх — дотоод зай ба захын зайг тохируулах
  4. Байрлалыг шинэчлэх — контейнерийн өргөн болон сүлжээний багануудыг өөрчлөх
  5. Элементүүдийг өөрчлөх — товчны загвар, картын дизайн гэх мэтийг өөрчлөх

Урьдчилан харах шинэчлэлтүүд​

Өөрчлөлтүүд бодит хугацаанд тусгагдана:

  • Desktop урьдчилан харах шууд шинэчлэгдэнэ
  • Mobile урьдчилан харах шууд шинэчлэгдэнэ
  • Бүх responsive таслах цэгүүд шинэчлэгдэнэ
  • Та өөрчлөлтийг шалгахын тулд урьдчилан харалтуудын хооронд шилжиж болно

Харьцуулалтын харагдац​

Дизайны чиглэлээ дараахтай харьцуулна уу:

  • Анхны дизайн — юу өөрчлөгдсөнийг харах
  • Өрсөлдөгчийн дизайнууд — санаа авсан сайтуудтай харьцуулах
  • Өмнөх хувилбарууд — өмнөх дизайны чиглэлүүд рүү буцаах

Дизайны чиглэлийг батлах​

Дизайндаа сэтгэл хангалуун болсны дараа:

  1. Хоёр урьдчилан харалтыг хоёуланг нь шалгах — desktop болон mobile дээр сайн харагдаж буйг баталгаажуулах
  2. Бүх өнгийг шалгах — ялгарал ба хүртээмжийг хангах
  3. Типографыг турших — бүх хэмжээнд уншихад хялбар эсэхийг баталгаажуулах
  4. Байрлалыг баталгаажуулах — зай ба зэрэгцүүлэлтийг шалгах
  5. Дизайныг батлах — theme үүсгэлт рүү үргэлжлүүлэх

Дараагийн алхмууд​

Дизайны чиглэлээ баталсны дараа:

  1. Theme Builder таны бүрэн theme-ийг үүсгэнэ
  2. Theme таны WordPress сайтад суулгагдана
  3. Та WordPress customizer ашиглан цаашид өөрчлөх боломжтой
  4. Зочлох үйлчилгээний цэсүүд эсвэл бусад боломжууд руу үргэлжлүүлнэ үү

Шилдэг туршлагууд​

  • Бодит төхөөрөмж дээр турших — боломжтой бол жинхэнэ утас болон tablet ашиглах
  • Уншихад хялбар байдлыг шалгах — текст бүх хэмжээнд уншихад хялбар эсэхийг хангах
  • Ялгарлыг баталгаажуулах — хүртээмжийн хувьд Палитрын ялгарлыг шалгах-ыг ашиглах
  • Гүйцэтгэлийг харгалзах — хурдны хувьд зураг болон фонтуудыг оновчлох
  • Агуулгад төлөвлөх — байрлал таны бодит агуулгатай нийцэж буйг хангах

Алдаа засах​

Урьдчилан харах шинэчлэгдэхгүй байна​

  • Хуудсыг дахин ачаалах
  • Browser cache цэвэрлэх
  • Өөр browser турших
  • Интернэт холболтыг шалгах

Өнгөнүүд өөр харагдаж байна​

  • Дэлгэцийн өнгөний тохиргоог шалгах
  • Өөр төхөөрөмж дээр турших
  • Хүртээмжийн хэрэгслүүдээр өнгөний ялгарлыг баталгаажуулах
  • Өнгөний сохролын симуляторуудыг харгалзах

Типографын асуудлууд​

  • Фонтын файлууд ачаалж буйг баталгаажуулах
  • Өөр өөр таслах цэгүүд дээр фонтын хэмжээг шалгах
  • Бодит агуулгатай турших
  • Уншихад хялбар байхын тулд мөрийн уртыг харгалзах