【功能更新】網站色系、字型、圓角怎麼選才好看？秒站網頁外觀設定升級解析

第一次架網站的人，幾乎都會在同一個地方卡住——不是內容、不是程式、不是功能，而是這三件事：「到底該選什麼顏色？」「字型要用哪一套？」「角要圓一點還是方一點？」

這些問題表面上是視覺決定，背後其實是品牌決定。顏色定了，你的網站就有了更多的張力；字型定了，調性就出來了；圓角定了，整體感就確立了。但問題是，許多架站後台把這些決定做成了「下拉選單」——你只看得到「主色 1」「標題字型」「圓角等級 3」這種文字，點下去之前完全不知道會長什麼樣。

這次秒站把網頁外觀的整個設定區翻新了一輪，讓每一個選擇都「看得見」。你不再需要猜、不再需要試、不再需要「點了又後悔」——從選擇到預覽，每一步都在畫面上給你即時回應。

這次網頁外觀升級的五個重點

• 新增「自訂」色彩卡：8 張預設色系之外多了一張漸層圓點卡，點開才展開主色副色輸入框
• 主色副色即時預覽：輸入框左側有色塊預覽，邊打字邊變色，不用儲存就看得到結果
• 預覽到滿意再儲存：色彩改動從即時寫入改為「預覽 → 確認 → 儲存」三段式流程
• 視覺化卡片選擇器：背景色、字型、圓角三個欄位從文字下拉升級為視覺化預設卡
• 欄位順序重新排列：先決定大的（色彩、背景），再微調小的（字型、圓角）

接下來我們一段一段講每個改動背後的設計思考。

一、色彩面板的新成員：第 9 張「自訂」卡

升級前，秒站色彩面板是這樣的：上方 8 張預設色卡（例如海洋藍、森林綠、日暮橘等），下方永遠顯示著一組「主色 / 副色」的 hex 輸入框。

這個設計有一個隱藏的問題：大部分客戶只想選一張預設卡就好，但畫面上那組永遠顯示的 hex 輸入框，會讓人以為「這是必填的」或「我是不是該去改它？」。有些客戶甚至會打開一組亂碼 hex 覆蓋掉預設色卡的設定，網站結果變得很奇怪。

新設計：進階選項「藏起來」，需要才展開

這次我們加了第 9 張色卡——「自訂」（以漸層圓點作為視覺示意）。邏輯變成：

• 預設狀態：只看到 9 張預設色卡，hex 輸入框不顯示，畫面乾淨
• 點預設卡：直接選用那組預設配色，不需要再做任何事
• 點「自訂」卡：下方展開主色 / 副色輸入框，進入進階模式
• 再點回預設卡：輸入框收起，回到簡潔狀態

這個設計在 UX 上有一個專有名詞叫「漸進式揭露」(progressive disclosure)：把進階選項藏到使用者主動要求時才顯示，讓大多數只需要簡單選擇的客戶畫面乾淨；需要深度客製的進階使用者，只要點一下就能進入。

我們觀察到，秒站絕大部分客戶都是用預設色卡。那少數要自訂的客戶——通常是有品牌 CIS 規範、需要精確配色的——點一下自訂卡就能進入，不會因為「永遠看得到的 hex 欄位」而分心。兩邊的體驗同時變好。

二、輸入 hex 時，左邊有色塊即時變色

這是一個很小、但用過之後回不去的細節。

在自訂色彩輸入框左側，我們加了一個小色塊。你輸入的 hex 值每改一個字元，這個色塊就即時變色。輸入「F」，色塊是暗紅；補上「F7F50」，變成珊瑚橘——你還沒按任何按鈕，眼睛就已經知道結果了。

這個設計有兩個延伸好處：

• 自動補 #：你輸入「FF7F50」系統會自動幫你補上「#」，不用自己打
• 整個預覽區同步：同時間，預覽區的按鈕、連結、重點文字也會即時變色。你不只看到那個 hex 對應的顏色，還看到它套用在實際網站元素上的樣子

這是我們在這次升級裡最想強調的一件事：所有視覺決定，都應該在決定的當下就看得到結果。不是「點了才知道」、不是「存了才知道」、不是「上線了才知道」——是邊改邊看，心中的猶豫可以在幾秒內就被解決掉。

三、從「點了就存」到「預覽到滿意再存」

這是這次升級裡比較深的一個改動——色彩設定的儲存邏輯從「即時寫入」改為「預覽待確認」。

升級前的流程是這樣的：你點了一張預設色卡，系統立刻發 AJAX 請求寫入資料庫，網站立刻變成那個顏色。乍看很方便——手起刀落，即改即用——但實際上對客戶的心理負擔不小。因為一旦點下去就存了，如果你只是「想試試看」，後悔想回頭就得找原本的顏色記在哪裡，再點一次改回去。

新流程：讓您有考慮的空間

• 第一段｜點色卡或按套用：只更新預覽區，把這個選擇加入「待儲存清單」
• 第二段｜繼續試其他色：可以反覆切換、比較、觀察，都不會真的寫入
• 第三段｜點右下角「儲存變更」：才真正把所有 pending 變動一次送出 AJAX、寫入資料庫

這個邏輯的好處是：你可以同時調整色彩、字型、圓角、背景，全部都先在預覽區試試看，滿意了再一次儲存。不會發生「改到一半被系統自動存下，結果頁面突然變得很奇怪」的狀況。

更重要的是，這個新的儲存邏輯跟上一篇文章講到的「右下角浮動儲存按鈕」是同一套——秒站後台所有設定，現在都統一採用「預覽 → 確認 → 儲存」的三段式節奏。你不需要記住「這個欄位是即時存、那個欄位是要按儲存」——通通一致，一個儲存按鈕管全場。

四、視覺化卡片選擇器：從文字變視覺

色彩只是網站外觀的第一層。往下還有「背景色」「字型」「圓角」三個關鍵選項，這些過去在後台都是文字下拉選單。這次我們把這三個欄位全部升級為視覺化卡片。

欄位	升級前	升級後
背景色	文字下拉：「純白」「淺灰」「深灰」…	視覺卡片，直接顯示實際色塊預覽
圓角	文字下拉：「無圓角」「中等圓角」「大圓角」…	SVG 方形示意不同圓度，一看就懂
字型	文字下拉：「思源黑體」「思源宋體」…	實際字型樣本「黑 Aa / 宋 Aa」，看得到真正的字型外觀

這個改動聽起來很小，但實際使用過的客戶都有同一個反應：「原來思源宋跟思源黑長這樣喔？」——我們過去收到許多客戶回報，說他們很想選字型，但秒站沒有選擇。

現在不會再發生這種事了，而且我們還馬上讓你看到「黑 Aa / 宋 Aa」的實際字樣，選擇不再是猜測。

背景色的變化更明顯。過去看到「淺灰」這個詞，每個人腦中想的淺灰程度都不一樣；現在直接顯示色塊，你對比兩張卡就知道哪一張比較接近你想要的網站氣質。

圓角的 SVG 示意同樣實用。很多人對「大圓角」的想像是溫暖親切的，但沒實際看過，不容易知道「大」到什麼程度會變成「太圓」。現在有 SVG 方形直接示意，一秒判斷。（自訂的不會跟著動喔，不用等它，直接存檔到前台看最快！）

註：圓角調整上限為：50px，超過這個就不會好看了！

五、欄位順序：先決定大的，再調小的

這次升級還調整了「網站外觀」分頁裡的欄位排序。新順序是：

網站色彩 → 網頁背景色 → 字型 → 導圓角

這個順序不是隨便排的。背後的邏輯是：從影響大的決定開始，往下微調細節。

• 色彩最先：網站的主副色定義了整個品牌的調性與情緒，是所有視覺決定的基礎
• 背景色次之：決定了內容出現時的「紙張」是什麼顏色，影響整體亮度與閱讀感
• 字型第三：在色彩與背景確定後，選擇字型可以參考前兩者的氛圍（穩重配襯線，活潑配無襯線）
• 圓角最後：結構性的微調，取決於整體是要俐落（小圓角）還是親切（大圓角）

這個順序跟許多品牌識別的設計流程一致——先定色調（品牌色系），再定字型系統，最後處理細節元素。把後台的欄位排列對應到真實的設計流程，讓不熟悉設計的客戶也能照著順序走，自然就能做出有一致性的選擇。

六、其他細節：每個選擇都有一個預設

除了上面五個大改動，還有幾個小細節想分享：

• 「預設」標記：純白背景色現在會標上「（預設）」，讓你知道這是系統原廠值
• Hero 區底色自動調整：首頁 Hero section 的底色不再固定，而是自動跟著你選的網頁背景色略深 4%，整體色調更協調

這些細節的共同思路是：減少錯誤選擇的可能性，讓客戶做的每一個決定，都有更高機率是好的決定。進階選項不是不能有，但要藏在該藏的地方；預設值不只是存在，還要明確告訴客戶「這個是預設」；協調性不該讓客戶自己配，而是系統主動幫你把相關的色彩調到和諧。

延伸閱讀

• 儲存按鈕為什麼要搬到右下角？秒站後台 UX 升級的五個小細節——同一批升級的另一半，關於浮動儲存按鈕、Toast 通知、離開防呆
• 秒站 SEO 優勢完整解析——視覺之外，秒站在 SEO 的底層架構也是從一開始就被認真規劃
• 秒站三個方案的差異——標準、專業、輕電商，哪一個最適合你現在的階段

重點整理

我完全不會配色，要怎麼選秒站的預設色卡？

我們的建議是：先想你的品牌想傳達什麼情緒，再從預設色卡中選接近的那一張。例如專業、理性、可信賴可以選藍色系；溫暖、親切、食品餐飲可以選橘紅色系；自然、健康、永續可以選綠色系；高級、精緻、極簡可以選黑白灰系。秒站的每張預設色卡都經過設計師調色，主副色已經配好，不會出現色彩衝突。如果你對顏色沒有特別偏好，直接選第一張（品牌主色為藍色）通常是最不會出錯的選擇。

字型選思源黑好，還是思源宋好？

思源黑體（Noto Sans TC）屬於無襯線字型，筆畫乾淨俐落，適合現代感、科技感、活潑型的品牌——例如 SaaS 工具、新創品牌、電商、部落格。思源宋體（Noto Serif TC）屬於襯線字型，筆畫有粗細變化，適合傳統感、文化感、精緻型的品牌——例如手作品牌、文創、法律會計、精品消費。秒站後台現在可以看到「黑 Aa / 宋 Aa」的實際字樣，建議你實際切換看一次，眼睛會告訴你哪個比較像你的品牌。

圓角選哪個最安全？

沒有絕對的「安全選擇」，但有幾個判斷方向。如果你的品牌走專業、嚴謹、信賴感（金融、法律、B2B），選「無圓角」或「小圓角」會比較對調性。如果走溫暖、親切、消費導向（食品、生活、手作），中到大圓角會更柔和。最不會出錯的選擇是「小圓角」或「中等圓角」——這兩個在絕大多數品牌類型裡都能放，不會太銳利也不會太可愛。

「自訂」色如果我亂填一個 hex，網站會不會壞掉？

不會壞掉，但視覺上可能會很奇怪。這也是為什麼我們把「自訂」這個選項預設收起來——大部分客戶不需要自訂，用預設色卡即可。如果你有品牌 CIS 規範要精確套用，自訂是很好用的功能；但如果你只是想「換個顏色看看」，建議從預設色卡中選，不要自己打 hex。另外，秒站的預覽區會在你輸入 hex 的同時即時顯示效果，如果你發現「這個顏色套在按鈕上很難讀」，可以立刻改，不需要先存再看。

我改了色彩、字型、圓角，不按儲存，離開頁面會怎樣？

瀏覽器會跳出一個對話框提醒你「有未儲存變動，確定要離開嗎？」。這是我們在這次升級中同時做的「離開頁面防呆」機制，結合右下角的浮動儲存按鈕、Toast 通知、瀏覽器原生對話框，三層防線保護你的改動不會因為意外關掉分頁而消失。關於這個機制的完整說明，可以參考 秒站後台 UX 升級的五個小細節 這篇文章。

這次升級會不會影響我已經設定好的色彩、字型？

不會。這次升級只改了後台「選擇介面」的呈現方式，你原本儲存的主色、副色、字型、圓角等設定值完全不變。升級完成後，你打開網站設定看到的會是新的視覺化選擇器，但目前選中的選項就是你原本已經設定好的那一個，不需要重新選一次。前台網站的外觀也不會有任何變化——後台只是「選的方式變好看」，選出來的結果和之前完全一樣。