Skip to main content

Arah Reka Bentuk

Langkah Arah Reka Bentuk membolehkan anda menyemak, memperhalusi, dan memuktamadkan reka bentuk visual tema anda sebelum Theme Builder menjana tema yang lengkap.

Gambaran Keseluruhan​

Selepas melengkapkan Temu Bual Penemuan (Discovery Interview), Theme Builder akan memaparkan arah reka bentuk anda dengan paparan pratonton desktop dan mudah alih. Ini membolehkan anda melihat dengan tepat bagaimana reka bentuk anda akan kelihatan pada peranti yang berbeza sebelum anda membuat komitmen terhadap tema tersebut.

Komponen Arah Reka Bentuk​

1. Palet Warna​

Skema warna tema anda, termasuk:

  • Warna Utama (Primary color) — warna jenama utama yang digunakan untuk butang, pautan, dan aksen
  • Warna Sekunder (Secondary color) — warna pelengkap untuk variasi
  • Warna Aksen (Accent color) — warna sorotan untuk elemen penting
  • Warna Neutral — warna kelabu dan putih untuk latar belakang dan teks
  • Warna Teks — warna teks utama untuk kebolehbacaan

2. Tipografi​

Pemilihan fon untuk:

  • Fon Tajuk (Heading font) — digunakan untuk tajuk halaman dan tajuk bahagian
  • Fon Badan (Body font) — digunakan untuk teks perenggan dan kandungan
  • Saiz Fon (Font sizes) — saiz responsif untuk saiz skrin yang berbeza
  • Ketinggian Baris (Line height) — jarak antara baris untuk kebolehbacaan
  • Berat Fon (Font weights) — variasi tebal, biasa, dan ringan

3. Susun Atur dan Jarak (Layout and Spacing)​

  • Lebar Kontena (Container width) — lebar maksimum untuk kandungan
  • Padding dan Margin — jarak di sekeliling elemen
  • Sistem Grid (Grid system) — susun atur lajur untuk reka bentuk responsif
  • Jarak Komponen (Component spacing) — jarak antara elemen UI

4. Elemen Visual​

  • Gaya Butang (Button styles) — reka bentuk butang utama, sekunder, dan tersier
  • Reka Bentuk Kad (Card designs) — susun atur untuk blok kandungan
  • Ikon (Icons) — gaya dan saiz ikon
  • Sempadan dan Bayangan (Borders and shadows) — kedalaman visual yang halus
  • Kesan Hover (Hover effects) — gaya keadaan interaktif

Paparan Pratonton (Preview Rendering)​

Pratonton Desktop​

Pratonton desktop menunjukkan reka bentuk anda pada lebar penuh (biasanya 1200px atau lebih lebar):

  • Menu navigasi penuh
  • Susun atur lengkap dengan semua lajur
  • Tipografi dan jarak yang besar
  • Semua elemen visual pada saiz penuh

Pratonton Mudah Alih​

Pratonton mudah alih menunjukkan reka bentuk anda pada lebar mudah alih (biasanya 375px):

  • Navigasi responsif (menu hamburger)
  • Susun atur satu lajur
  • Tipografi dan jarak yang disesuaikan
  • Saiz butang mesra sentuhan

Titik Henti Responsif (Responsive Breakpoints)​

Theme Builder memaparkan pratonton pada titik henti ini:

PerantiLebarPratonton
Mudah Alih375pxTelefon potret
Tablet768pxTablet landskap
Desktop1200pxDesktop lebar penuh
Desktop Besar1920pxPaparan ultra-lebar

Memperhalusi Reka Bentuk Anda​

Membuat Penyesuaian​

Anda boleh memperhalusi arah reka bentuk anda dengan:

  1. Menyesuaikan warna — ubah mana-mana warna dalam palet
  2. Mengubah fon — pilih jenis fon yang berbeza
  3. Mengubah jarak — laraskan padding dan margin
  4. Mengemaskini susun atur — ubah lebar kontena dan lajur grid
  5. Menyesuaikan elemen — ubah gaya butang, reka bentuk kad, dsb.

Kemas Kini Pratonton​

Perubahan dipantulkan secara masa nyata:

  • Pratonton desktop dikemas kini serta-merta
  • Pratonton mudah alih dikemas kini serta-merta
  • Semua titik henti responsif dikemas kini
  • Anda boleh bertukar antara pratonton untuk mengesahkan perubahan

Paparan Perbandingan​

Bandingkan arah reka bentuk anda dengan:

  • Reka Bentuk Asal — lihat apa yang telah berubah
  • Reka Bentuk Pesaing — bandingkan dengan laman inspirasi
  • Versi Sebelumnya — kembali ke arah reka bentuk yang lebih awal

Kelulusan Arah Reka Bentuk​

Setelah anda berpuas hati dengan reka bentuk anda:

  1. Semak kedua-dua pratonton — sahkan desktop dan mudah alih kelihatan bagus
  2. Periksa semua warna — pastikan kontras dan kebolehaksesan
  3. Uji tipografi — sahkan kebolehbacaan pada semua saiz
  4. Sahkan susun atur — periksa jarak dan penjajaran
  5. Luluskan reka bentuk — teruskan ke penjanaan tema

Langkah Seterusnya​

Selepas meluluskan arah reka bentuk anda:

  1. Theme Builder menjana tema lengkap anda
  2. Tema dipasang pada laman WordPress anda
  3. Anda boleh menyesuaikan lagi menggunakan customizer WordPress
  4. Teruskan ke Hospitality Menus atau ciri lain

Amalan Terbaik​

  • Uji pada peranti sebenar — gunakan telefon dan tablet sebenar jika boleh
  • Periksa kebolehbacaan — pastikan teks boleh dibaca pada semua saiz
  • Sahkan kontras — gunakan Validate Palette Contrast untuk kebolehaksesan
  • Pertimbangkan prestasi — optimumkan imej dan fon untuk kelajuan
  • Rancang untuk kandungan — pastikan susun atur berfungsi dengan kandungan sebenar anda

Penyelesaian Masalah (Troubleshooting)​

Pratonton Tidak Dikemas Kini​

  • Segarkan halaman
  • Kosongkan cache pelayar
  • Cuba pelayar yang berbeza
  • Periksa sambungan internet

Warna Kelihatan Berbeza​

  • Periksa tetapan warna monitor
  • Cuba pada peranti yang berbeza
  • Sahkan kontras warna dengan alat kebolehaksesan
  • Pertimbangkan simulator buta warna

Isu Tipografi​

  • Sahkan fail fon dimuatkan
  • Periksa saiz fon pada titik henti yang berbeza
  • Uji dengan kandungan sebenar
  • Pertimbangkan panjang baris untuk kebolehbacaan

Dokumentasi Berkaitan​