設計與品牌

調整全站風格：顏色、字體、形狀、按鈕與動態

用五組全站設定建立一致的視覺語言，確認自動儲存後，再以桌機與手機預覽檢查真正的呈現結果。

約 7 分鐘最後複驗：2026-09-03負責維護：Growth Team · Module Enablement

教學影片更新中

這支影片正在依最新介面重新錄製與複驗。下方圖文步驟仍可正常使用；影片通過操作重播、繁中字幕與逐字稿驗證後才會恢復。

完成後你會得到

你能用預設組合安全地調整全站設計 token，分辨配色、背景、字體、形狀、按鈕與動態各自控制的範圍，並在發佈前完成桌機與手機檢查。

開始前準備

你是網站擁有者或共同管理者，並已進入該網站的視覺編輯器。
先切到一個內容完整的頁面；全站設定會套用所有頁面，不只目前畫布。
變更會自動寫入草稿。要讓訪客看到結果，檢查完成後仍要按「發佈」。
先保存品牌色碼與字體規範，才能判斷預設組合是否符合品牌，而不是只憑當下感覺。

操作步驟

先定全站色盤，再加背景質感

按編輯器左側的「全站顏色」。配色組合會同時更新主色、強調色、頁面背景與深色區塊，讓文字對比與品牌色保持一致。

先選一組接近品牌的色盤；教學示範「雜誌古銅」。接著才選背景質感；教學示範「顆粒」。背景質感會從目前色盤衍生，不是另一套獨立顏色。

若只想改一個區塊的背景，應選取該區塊後使用「背景」，不要改全站顏色。

視覺編輯器左側的全站顏色按鈕，以紅框標示 — 從左側按「全站顏色」，打開配色組合與背景質感。開啟原尺寸圖片。

配色組合中的雜誌古銅卡片，以紅框標示 — 先選色盤；一個動作同步更新主色、強調色、背景與深色區塊。開啟原尺寸圖片。

背景質感中的顆粒卡片，以紅框標示 — 背景質感跟著目前色盤衍生；這裡選「顆粒」。開啟原尺寸圖片。

完成結果：整個編輯畫布換成同一套品牌色與背景氛圍，文字仍維持可讀對比。

用字體組合一起處理標題與內文

按「全站字體」。每張卡片都用自己的字體顯示「Aa 安庭」與內文範例，先比較中文標題，再確認正文是否適合長時間閱讀。

教學示範「現代明體編輯」：中文標題保留明體性格，正文回到清楚的無襯線字，拉丁展示字另有搭配。

字體組合會套用全站的標題、正文、導覽與按鈕。不要只看首頁大標，還要在手機預覽檢查換行與字級密度。

視覺編輯器左側的全站字體按鈕，以紅框標示 — 按「全站字體」，卡片會直接呈現中文標題與正文樣貌。開啟原尺寸圖片。

字體組合中的現代明體編輯卡片，以紅框標示 — 用卡片上的中文與正文範例判斷，再按「現代明體編輯」。開啟原尺寸圖片。

完成結果：全站標題與正文改用同一組經過搭配的字體角色。

分開選卡片形狀與按鈕收尾

按左側的「全站形狀」。打開的「全站形狀與動態」面板中，形狀控制卡片表面、圓角、區塊留白與按鈕圓角；按鈕樣式則控制填色、線框、陰影或底線等收尾。

教學先選「輪廓線框」，讓卡片改成透明細框與微圓角；再選「文字底線」，讓主要按鈕變成無框文字底線。兩條軸可自由搭配。

如果按鈕看起來不協調，先確認是圓角問題還是收尾問題；不要反覆更換整個形狀預設。

視覺編輯器左側的全站形狀按鈕，以紅框標示 — 按「全站形狀」，打開全站形狀與動態面板。開啟原尺寸圖片。

形狀與圓角中的輪廓線框卡片，以紅框標示 — 形狀處理卡片表面與圓角；這裡選「輪廓線框」。開啟原尺寸圖片。

按鈕樣式中的文字底線卡片，以紅框標示 — 按鈕收尾是獨立設定；這裡選「文字底線」。開啟原尺寸圖片。

完成結果：卡片與容器採用輪廓線框，主要按鈕採用文字底線，兩者仍共享一致的圓角規則。

選動態後，等自動儲存完成

動態效果控制內容進場的速度、位移、縮放與模糊。教學示範「電影感」，適合影像與品牌敘事；資訊密集網站應選較短或靜態的效果。

系統會尊重訪客的減少動態偏好。即使選了電影感，要求減少動態的裝置仍不會強迫播放。

每次選擇都先更新草稿並觸發自動儲存。等上方出現「已儲存」再離開；這不等於已發佈。

動態效果中的電影感卡片，以紅框標示 — 動態卡片會直接播放示意；這裡選「電影感」。開啟原尺寸圖片。

編輯器工具列顯示已儲存，以綠框標示 — 看到「已儲存」才代表這組設定已安全寫入草稿。開啟原尺寸圖片。

完成結果：動態預設寫入草稿，工具列顯示「已儲存」。

用桌機與手機預覽做發佈前檢查

按「編輯中」切換成預覽，先檢查桌機畫布。確認導覽、標題、正文、卡片與主要按鈕使用同一套風格，而且文字對比清楚。

再按手機圖示。手機預覽會在獨立裝置畫布載入，檢查導覽是否可用、長標題是否過度換行、按鈕是否容易點，以及區塊留白是否過大。

預覽只代表草稿呈現正確。完成檢查後回到編輯模式，按「發佈」才會更新公開網站。

編輯器上方的編輯中按鈕，以紅框標示 — 按「編輯中」切到預覽，移除編輯控制的干擾。開啟原尺寸圖片。

桌機預覽中的首頁主標題，以綠框標示 — 先從首頁主標題確認桌機色盤與字體，再掃描卡片和按鈕是否一致。開啟原尺寸圖片。

編輯器上方的手機裝置按鈕，以紅框標示 — 按手機圖示，切換到窄版裝置畫布。開啟原尺寸圖片。

手機預覽畫布，以綠框標示 — 最後檢查手機導覽、換行、按鈕點擊範圍與區塊留白。開啟原尺寸圖片。

完成結果：同一份草稿在桌機與手機預覽都可讀、可操作，並呈現一致的全站設計 token。

常見問題

只想改一個區塊，結果整站都變了: 全站顏色、字體、形狀、按鈕與動態都會改設計 token。要只改一段，先點畫布上的區塊，再用區塊工具列的「背景」或欄位設定。
選了字體，但中文看起來差異不大: 同時看字體卡片的「Aa 安庭」與內文範例；有些組合只讓拉丁展示字變化。需要明顯中文性格時，選含中文個性字的組合，再用手機預覽檢查正文。
按鈕樣式不符合預期: 形狀預設控制按鈕圓角，按鈕樣式控制填色、線框、陰影或底線。先判斷是哪一條軸，再調整對應項目。
已儲存，但公開網站仍是舊風格: 「已儲存」只代表草稿已同步。完成桌機與手機預覽後，還要按「發佈」；若剛發佈，公開頁快取可能需要短暫更新。
動態太強或訪客看不到動態: 改選平緩或靜態預設。系統也會尊重裝置的減少動態偏好，因此部分訪客不播放進場效果是預期行為。

這篇如何保持正確

負責人: Growth Team · Module Enablement
複驗節奏: 最後複驗 2026-09-03；下次應於 2026-10-12 前完成
驗證依據與邊界: 本文依 7 個程式或介面來源重播核對。內容說明安庭產品當下可操作流程；第三方平台、法規與價格請回到各自最新官方頁，本文不取代帳務、法律或資安專業判斷。

發現介面或步驟不同？請從關於安庭與聯絡方式回報，我們會重新驗證。