調出高級感：用配色、字體、形狀與動態四組設定換掉整站風格
在編輯器的樣式面板整組替換配色與字體，理解四組設定各自負責什麼，並避免把網站調得雜亂。
約 10 分鐘最後複驗：2026-08-01
調出高級感：配色、字體、形狀與動態四組設定
完成後你會得到
整站的顏色、字體、圓角與動態統一成一套風格，換的時候一次到位，不需要逐段調整。
開始前準備
- 你已經有一個網站，並且大致改完文字內容。
- 先改內容再調風格，比較容易判斷風格對不對 —— 用範例文案看配色，判斷會失準。
操作步驟
1
打開樣式設定
編輯器裡有一組全站樣式設定，分成「全站顏色」「全站字體」「全站形狀與動態」三塊。這裡改的東西不屬於任何一個段落，是整個網站一起變。
/site/edit/{{tenantId}}
完成結果： 看到配色組合、字體組合、形狀與動態三組可選項。
2
先選配色組合
配色是一整組搭配好的顏色，不是單選一個主色。每一組都已經確保文字與底色的對比度足夠，不會出現看不清楚的字。
形象官網想要高級感，優先考慮低彩度、對比強的組合：接近黑白的極簡組、深色系的沉穩組、帶暖灰的編輯風組。彩度越高越活潑，也越難撐出高級感。
不要為了配合公司 logo 的顏色去硬挑一組。品牌色可以只出現在 logo 與少數重點，整站底色維持中性通常更有質感。
完成結果： 整個網站的顏色即時換成新的一組，包含深色區塊與按鈕。
3
再選字體組合
字體組合同時決定標題與內文的字體、大小與行距。中文網站要特別注意：不是每一組字體換了之後中文都會跟著變 —— 有些組合只換了英文字，中文長相其實一樣。
面板上每組字體都有中文字樣可以直接比對。想讓中文真的換一個氣質，挑那些中文字樣明顯不同的組合：明體有骨架、偏古典；圓體親切；楷體溫潤。
完成結果： 標題與內文的中文長相依你的選擇改變。
4
最後調形狀與動態
形狀決定圓角與卡片的質感：直角銳利、微圓中性、大圓親切。按鈕樣式與背景質感也在這一區。
動態決定段落進場的速度。慢一點的動態有電影感、適合形象官網；快的適合活潑品牌；工具型網站可以完全關掉。
四組設定要當成一套來看。極簡黑白配大圓角配彈跳動畫，三個方向互相打架，會比不調還糟。
完成結果： 圓角、按鈕與捲動時的進場動畫符合你要的調性。
5
整站捲一遍再定案
換完之後把每一頁都捲一遍，特別看深色區塊、按鈕與頁尾。這幾個地方最容易在換色後變得不協調。
也切到手機尺寸看一次。標題在桌機上好看，在手機上可能會太大或斷行怪異。
完成結果： 桌機與手機兩種尺寸下，整站風格一致且文字都清楚可讀。
常見問題
- 換了字體，中文看起來完全沒變
- 有些字體組合只更換了英文字體，中文沿用系統的通用字體。挑選時直接比對面板上的中文字樣，選中文長相明顯不同的那幾組。
- 換配色後某些字看不清楚
- 每組配色都經過對比度檢查，正常情況不會發生。若出現這種狀況，通常是某個段落被單獨設定過顏色；把該段落的顏色設定改回跟隨全站即可。
- 調完覺得比原本的模板還醜
- 先把四組設定改回模板原本的組合，然後一次只換一組、看一次結果。四組同時換很難判斷是哪一組出問題。