品牌視覺與風格設定
概述
品牌視覺是網站予人的整體感覺。字體、顏色、文字大小、密度、圓角和淺深色模式看似細微之處,實則共同影響訪客對網站的清晰度、可信度及品牌契合度的觀感。
這些設定將會全站套用。您無需逐一頁面重設字體或品牌顏色;設定一次後,網站各頁的模組將沿用同一套設計方向。
在哪裡設定?
請前往編輯器的「設定」→「設計」。調整時,您可同時預覽電腦、平板及手機版面的效果。
建議一次只修改一至兩項設定,再觀察整體效果。若同時變更字體、顏色、間距及大量圖片,將難以判斷是哪個改動造成網站觀感不協調。
字體與字級
排版不僅是挑選一款悅目的字體。您可為不同語言分別設定專屬字體,並調整 H1、H2、H3 及內文的字級。
各語言分別設定字體
「設計」介面會優先顯示您網站內容語言最可能用到的字體欄位;展開「多語系字體」選項後,您便能為英文、繁體中文、簡體中文、日文及韓文獨立設定字體。
目前每種語言約可選用以下數量的精選字體:
| 語言 | |--------------|--------------| | 英文 | 170 款 | | 繁體中文 | 60 款 | | 簡體中文 | 30 款 | | 日文 | 70 款 | | 韓文 | 40 款 |
各語言的字體選單會根據字型支援範圍進行篩選,因此您無需擔心將僅支援英文的字體誤套用到中文內容。系統提供的字體清單或會隨更新而調整;目前不支援上傳自訂字體檔。
若您的網站同時包含中文與英文內容,請務必分別檢視兩種文字在標題、按鈕及內文中的呈現效果。選字原則應為「清晰度優先於獨特性」:品牌名稱或主標題可帶有特色,但長篇內文則必須確保在手機上亦能輕鬆閱讀。
調整字級
您可以分別調整 H1、H2、H3 及內文的字級,每種文字類型均提供 9 個尺寸層級。H1 作為每頁最重要的主標題,H2 與 H3 用於段落層級劃分,內文則為一般說明文字。
切勿將所有文字尺寸調大。清晰的標題層級有助訪客快速掃讀內容,同時亦能協助輔助工具理解頁面結構。
品牌色、文字色與外觀模式
Kanorio 的全站色彩設定集中於以下三項:
| 設定 | |--------------|--------------| | 品牌主色 | 按鈕、重點、連結及部分背景所使用的主要顏色;淺色及深色模式各有獨立的顏色設定。 | 品牌文字色 | 顯示於品牌主色背景上的文字或圖示顏色;系統可自動判斷黑白對比,亦可分別手動覆寫。 | 外觀模式 | 決定公開網站是跟隨訪客裝置的系統設定,或固定採用淺色或深色外觀。
現時沒有獨立的全站次要色或背景色選項;請善用品牌主色、模組圖片及內容層級來建立視覺焦點。
選擇品牌主色
品牌色選擇器提供 24 組預設配搭,涵蓋經典鮮豔色、莫蘭迪色系,以及大地/中性色。每組配搭均包含適合淺色及深色模式的顏色組合。
若您的品牌已有既定的色彩規範,您亦可透過取色器或手動輸入 Hex、RGB 或 HSL 色碼進行設定。選擇器會保留您最近使用的顏色,方便您回溯先前嘗試過的組合。調整淺色模式顏色後,系統亦會輔助生成適合深色模式的起始建議;請務必切換兩種模式以檢查最終效果。
檢查品牌文字色與對比
當按鈕或區塊採用品牌色作為背景時,文字必須具備足夠的對比度才能清晰顯示。系統預設會自動選擇黑色或白色文字,並顯示對比度提示;若品牌規範要求使用特定文字顏色,您亦可自行調整。
切勿僅依賴顏色傳達重要資訊,例如僅將錯誤訊息標示為紅色。請同時結合清晰的文字、圖示或位置說明,確保色覺差異的訪客亦能理解內容。
選擇外觀模式
| 選項 |
|---|
| 跟隨系統 |
| 固定淺色 |
| 固定深色 |
選擇「跟隨系統」前,請務必同時檢查淺色與深色兩種模式。若您的 Logo、照片或品牌色在深色背景下顯得不夠清晰,可考慮改為固定淺色,或重新調整深色模式下的品牌顏色設定。
模組密度
密度用於控制模組之間預留的空間,即內容的緊密度。Kanorio 提供兩種全站選項:
| 密度 |
|---|
| 標準 |
| 緊湊 |
請務必在手機預覽中檢查:過於緊湊的設定可能導致按鈕與段落難以閱讀,而過於寬鬆則會增加訪客的滑動頁面時間。
圓角
圓角設定用於調整按鈕、卡片及圖片邊緣的方正或圓潤程度。此設定亦會全站套用。
| 圓角 |
|---|
| 俐落 |
| 一般 |
| 柔和 |
選擇時,請確保與您的 Logo、產品風格及照片氛圍保持一致,無需為每個模組採用不同風格。
網站小圖示(Favicon)
網站小圖示是顯示於瀏覽器分頁及書籤旁邊的小圖案。此設定不在「設計」分頁進行;請前往「管理網站」→「一般」進行調整。
您可以保留系統根據 Logo 自動生成的圖示,或上傳自訂圖示。由於網站小圖示尺寸極小,請避免加入過多文字或過於精細的線條。
發布前檢查
- 切換淺色與深色預覽,檢查 Logo、按鈕及文字的對比度。
- 切換手機預覽,檢查標題是否過長、按鈕是否易於點擊。
- 確認同一類型的按鈕、卡片與標題均採用一致的風格。
- 完成後,點擊「發布」以更新公開網站。
小貼士
- 若缺乏品牌指南,請先選定一個品牌主色、一套字體風格、一種密度及一種圓角設定,避免同時採用過多風格。
- 請使用真實手機進行檢視,而非僅依賴桌面螢幕;細小字體與低對比度在手機上更容易出現問題。
- 追求質感無需增加更多顏色;留白、一致性及清晰的層級結構通常更為重要。
常見問題
可以。品牌色是全站設定,任何改動都會影響所有使用該設定的按鈕、連結及視覺元素。改動後,請務必檢查所有頁面,特別留意文字對比度及圖片上按鈕的顯示效果。
目前不支援此功能。請從平台提供的字體中選擇,這些字體已根據語言支援範圍進行篩選;您仍可為英文、繁體中文、簡體中文、日文及韓文分別設定專屬字體。
深色或淺色模式本身並不會直接影響搜尋排名。真正關鍵的是內容的可讀性、頁面是否具備正確的標題與描述,以及公開網站能否正常載入。
目前這些設定是全站共用的。若您希望特定頁面呈現不同重點,請透過該頁的圖片、文案及模組編排來創造差異。
它是指顯示於品牌色背景上的文字或圖示顏色。系統預設會選擇易於閱讀的黑色或白色;若您的品牌規範有此要求,亦可自行覆寫並檢查對比度提示。