品牌視覺與風格設定

概述

品牌視覺是網站予人的整體感覺。字體、顏色、字級、密度、圓角及淺色與深色模式看似細微之處，實則共同影響訪客對網站的清晰度、可信度及品牌契合度。

這些設定將套用於整個網站。您無需逐頁重設字體或品牌顏色；設定一次後，網站各頁的模組將沿用同一套設計方向。

在哪裡設定？

開啟編輯器的「設定」→「設計」。調整時，您可同時使用電腦、平板及手機預覽效果。

請一次僅調整一至兩項，再觀察整體效果。若同時變更字體、顏色、間距及大量圖片，將難以判斷是哪個改動導致網站觀感不協調。

字體與字級

排版不僅是挑選一款悅目的字體。您可以分別設定不同語言所使用的字體，並調整 H1、H2、H3 及內文的字級。

各語言分別設定字體

「設計」頁面會先根據您網站的內容語言，顯示最可能需要的字體欄位；展開「多語系字體」後，更能分別設定英文、繁體中文、簡體中文、日文及韓文。

目前每個語言可選的精選字體數量約為：

各語言的選單會根據字型支援範圍進行篩選，因此毋須擔心將僅支援英文的字體套用到中文內容。系統提供的字體清單或會隨更新而調整；目前不支援上傳您自訂的字體檔案。

若您的網站同時包含中文與英文，請分別檢視兩種文字在標題、按鈕及內文中的效果。選字的原則是「清晰優先於個性」：品牌名稱或主標題可帶有特色，但長篇內文則需確保在手機上易於閱讀。

調整字級

您可分別調整 H1、H2、H3 及內文的字級，每種文字提供 9 個尺寸層級。H1 是每頁最重要的主標題，H2 與 H3 用於段落層級，內文則是一般說明文字。

切勿將所有文字調大。清晰的標題層級有助訪客掃讀內容，亦能協助輔助工具理解頁面結構。

品牌色、文字色與外觀模式

Kanorio 的全站色彩設定集中於以下三項：

目前沒有獨立的全站次要色或背景色欄位；請善用品牌主色、模組圖片及內容層級來建立視覺重點。

選擇品牌主色

品牌色選擇器提供 24 組預設配搭，分為經典鮮豔色、莫蘭迪色系，以及大地／中性色。每組均包含適合淺色與深色模式的配對顏色。

若品牌已有色彩規範，您亦可使用取色器或手動輸入 Hex、RGB 或 HSL 色碼。選擇器會保留最近使用的顏色，方便您回溯先前嘗試過的組合。調整淺色模式顏色後，系統亦會協助生成適合深色模式的起始建議；請務必切換兩種模式以檢查最終效果。

檢查品牌文字色與對比

當按鈕或區塊使用品牌色作為背景時，文字必須有足夠的對比度才能清晰顯示。系統預設會自動選擇黑色或白色文字，並顯示對比提示；若品牌規範要求特定文字顏色，亦可自行調整。

切勿僅依賴顏色傳達重要資訊，例如僅將錯誤訊息標示為紅色。請同時輔以清晰文字、圖示或位置說明，確保色覺差異的訪客亦能理解。

選擇外觀模式

選擇「跟隨系統」前，必須同時檢查兩種模式。若您的 Logo、相片或品牌色在深色背景上顯示不清，可考慮改為固定淺色，或重新調整深色模式下的品牌色。

模組密度

密度用以控制模組之間預留的空間，即內容的緊密度。Kanorio 提供兩種全站選項：

請務必在手機預覽中檢查：過於緊湊可能導致按鈕與段落難以閱讀，過於寬鬆則會迫使訪客需要滑動更長的距離。

圓角

圓角用於控制按鈕、卡片及圖片邊緣的方正或圓潤程度。此設定亦會全站套用。

選擇時請確保與您的 Logo、產品風格及相片氣氛保持一致，無需為每個模組採用不同風格。

網站小圖示（Favicon）

網站小圖示是顯示於瀏覽器分頁及書籤旁的小圖案。此設定不在「設計」分頁進行；請開啟「管理網站」→「一般」進行調整。

您可以保留系統根據 Logo 自動生成的圖示，或上傳自訂圖示。由於小圖示尺寸極小，請避免置入過多文字或過於精細的線條。

發佈前檢查

1. 切換淺色與深色預覽，檢查 Logo、按鈕及文字的對比度。
2. 切換手機預覽，檢查標題是否過長、按鈕是否易於點選。
3. 檢查同一類型的按鈕、卡片與標題是否採用一致的風格。
4. 完成後，從「發佈」更新公開網站。

小貼士

• 若缺乏品牌指南，請先選定一個品牌主色、一套字體風格、一種密度及一種圓角，避免同時使用過多風格。
• 請使用真實手機進行檢視，而非僅依賴桌面螢幕；細小字體與低對比在手機上更容易出現問題。
• 追求質感不代表需要增加更多顏色；留白、一致性及清晰的層級結構通常更為重要。

相關文件

• 全站設定與管理
• 設計頁首與頁尾
• 圖片與媒體素材
• 草稿、儲存與發佈