品牌視覺與風格設定

概述

品牌視覺是網站給人的整體感覺。字體、顏色、文字大小、密度、圓角和淺深色模式看起來像小細節，但它們會一起影響訪客是否覺得網站清楚、可信與符合您的品牌。

這些設定會套用到全站。您不需要逐頁重設字體或品牌色；設定一次後，網站各頁的模組會使用同一套方向。

在哪裡設定？

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

請一次只改一到兩個項目，再觀察整體效果。若同時換字體、顏色、間距和大量圖片，很難判斷是哪一個改動讓網站看起來不對。

字體與字級

排版不只是挑一款好看的字。您可以分別設定不同語言使用的字體，並調整 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. 完成後從「發布」更新公開網站。

小技巧

• 沒有品牌指南時，先選一個品牌主色、一組字體方向、一種密度和一種圓角，不要同時使用很多風格。
• 用真實手機查看，不只看桌面螢幕；小字和低對比在手機上更容易出問題。
• 想要有質感，不需要加更多顏色；留白、一致性和清楚的層級通常更重要。

相關文件