跳至主要内容

設計方向

設計方向步驟讓您可以在 Theme Builder 生成完整主題之前，審閱、完善並確定您主題的視覺設計。

概覽​

完成「探索訪談 (Discovery Interview)」後，Theme Builder 會以桌面和行動裝置預覽渲染的方式呈現您的設計方向。這讓您可以在確定主題之前，清楚地看到您的設計在不同裝置上的實際樣貌。

設計方向組成元素​

1. 色彩配置 (Color Palette)​

您的主題配色方案，包括：

  • 主要顏色 (Primary color) — 用於按鈕、連結和強調色等主要品牌色
  • 次要顏色 (Secondary color) — 用於增加變化感的輔助顏色
  • 強調色 (Accent color) — 用於突出重要元素的亮色
  • 中性色 (Neutral colors) — 用於背景和文字的灰色和白色
  • 文字顏色 (Text color) — 用於提高可讀性的主要文字顏色

2. 字體排版 (Typography)​

用於以下元素的字體選擇：

  • 標題字體 (Heading font) — 用於頁面標題和區塊標題
  • 內文字體 (Body font) — 用於段落文字和內容
  • 字體大小 (Font sizes) — 針對不同螢幕尺寸的響應式大小調整
  • 行高 (Line height) — 增加行間距，提高可讀性
  • 字重 (Font weights) — 粗體、常規和淡色等變化

3. 版面與間距 (Layout and Spacing)​

  • 容器寬度 (Container width) — 內容的最大寬度
  • 內邊距和外邊距 (Padding and margins) — 元素周圍的間距
  • 網格系統 (Grid system) — 用於響應式設計的欄位佈局
  • 組件間距 (Component spacing) — UI 元素之間的距離

4. 視覺元素 (Visual Elements)​

  • 按鈕樣式 (Button styles) — 主要、次要和輔助按鈕的設計
  • 卡片設計 (Card designs) — 內容區塊的佈局
  • 圖示 (Icons) — 圖示的樣式和大小
  • 邊框和陰影 (Borders and shadows) — 營造細微視覺深度的效果
  • 懸停效果 (Hover effects) — 互動狀態的樣式設計

預覽渲染 (Preview Rendering)​

桌面預覽 (Desktop Preview)​

桌面預覽會以全寬度（通常為 1200px 或更寬）顯示您的設計：

  • 完整的導航選單
  • 包含所有欄位的完整佈局
  • 大字體和充足的間距
  • 所有視覺元素都以全尺寸呈現

行動裝置預覽 (Mobile Preview)​

行動裝置預覽會以行動裝置寬度（通常為 375px）顯示您的設計：

  • 響應式導航（漢堡選單）
  • 單欄式佈局
  • 調整後的字體和間距
  • 適合觸控的按鈕尺寸

響應式斷點 (Responsive Breakpoints)​

Theme Builder 會在以下斷點渲染預覽：

裝置寬度預覽
行動裝置375px縱向手機
平板電腦768px橫向平板電腦
桌面1200px全寬度桌面
大型桌面1920px超寬螢幕

完善您的設計​

進行調整​

您可以通过以下方式完善您的設計方向：

  1. 調整顏色 — 更改配色方案中的任何顏色
  2. 更改字體 — 選擇不同的字體
  3. 修改間距 — 調整內邊距和外邊距
  4. 更新佈局 — 更改容器寬度和網格欄位
  5. 客製化元素 — 修改按鈕樣式、卡片設計等

預覽更新​

更改會即時反映：

  • 桌面預覽會立即更新
  • 行動裝置預覽會立即更新
  • 所有響應式斷點都會更新
  • 您可以切換預覽來驗證更改

比較視圖 (Comparison View)​

您可以將您的設計方向與以下內容進行比較：

  • 原始設計 (Original design) — 查看哪些地方發生了變化
  • 競爭對手設計 (Competitor designs) — 與參考網站進行比較
  • 先前版本 (Previous versions) — 恢復到較早的設計方向

設計方向批准​

一旦您對設計感到滿意：

  1. 審閱兩個預覽 — 確認桌面和行動裝置的樣貌都良好
  2. 檢查所有顏色 — 確保對比度和無障礙性
  3. 測試字體排版 — 驗證所有尺寸下的可讀性
  4. 確認佈局 — 檢查間距和對齊
  5. 批准設計 — 繼續進行主題生成

後續步驟​

批准設計方向後：

  1. Theme Builder 會生成您完整的主題
  2. 主題會安裝到您的 WordPress 網站上
  3. 您可以使用 WordPress customizer 進行進一步客製化
  4. 繼續前往 Hospitality Menus 或其他功能

最佳實踐​

  • 在真實裝置上測試 — 如果可能，請使用實際的手機和平板電腦
  • 檢查可讀性 — 確保所有尺寸下的文字都是易讀的
  • 驗證對比度 — 使用 Validate Palette Contrast 來檢查無障礙性
  • 考慮效能 — 針對速度優化圖片和字體
  • 規劃內容 — 確保佈局能適應您實際的內容

故障排除 (Troubleshooting)​

預覽未更新​

  • 刷新頁面
  • 清除瀏覽器快取
  • 嘗試使用不同的瀏覽器
  • 檢查網路連線

顏色看起來不同​

  • 檢查螢幕的顏色設定
  • 嘗試在不同的裝置上查看
  • 使用無障礙工具驗證顏色對比度
  • 考慮使用色盲模擬器

字體排版問題​

  • 驗證字體檔案是否正在載入
  • 檢查不同斷點下的字體大小
  • 使用實際內容進行測試
  • 考慮行長度以提高可讀性

相關文件​