1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. 網站設計規範怎麼建立？配色、字型、按鈕與頁面範本

Sharing AI 架站平台教學

網站設計規範怎麼建立？配色、字型、按鈕與頁面範本

作者：JamXu更新日期：2026-10-21

網站設計規範是什麼？和品牌手冊、設計系統差在哪裡

網站剛上線時，畫面通常很整齊；半年後再看，常會發現同一個網站裡有四種藍色、三種按鈕圓角、標題有時置中有時靠左。原因不是誰做錯了，而是每次新增頁面的人，都只能憑印象或複製上一頁來決定樣式。網站設計規範的用途，就是把這些「每次都要重新決定的事」先決定好，並寫成大家都查得到的文件。

很多人會把設計規範和品牌識別手冊、設計系統混為一談。三者確實相關，但服務的對象與詳細程度不同。下表整理三者的差異，方便你判斷自己現在需要的是哪一種：

如果你的品牌色、標誌和字型都還沒整理好，建議先完成架站前要準備哪些品牌素材裡的素材準備，再回來把它們轉成網站規範；本文不再重複素材檔案格式與授權的細節。

什麼時候該建立設計規範？五個常見的訊號

設計規範不一定要在第一天就寫完，但出現下列任何一種情況，就代表網站已經開始「各做各的」，越晚整理，要修的頁面就越多：

• 同一個網站裡，按鈕出現兩種以上的顏色或圓角，訪客分不清哪一顆才是主要按鈕
• 新增頁面時，負責的人要先翻好幾頁舊頁面，才知道標題該用多大的字
• 換了一位同事或外包廠商，新做的頁面明顯和舊頁面風格不同
• 想統一修改一個顏色時，發現它散落在幾十個區塊裡，只能一頁一頁改

小網站也適用，只是規範可以很精簡。一個 5 到 10 頁的形象網站，可能一頁 A4 就寫得完：幾個顏色、三層字級、兩種按鈕、三個頁面範本。重點不是篇幅，而是讓下一個人不需要問你，就能做出風格一致的頁面。

第一步：先盤點現有網站，用了哪些樣式

最務實的起點是現有網站：先找出實際出現過的樣式，再決定保留、合併或淘汰，也順便知道之後有多少頁面要回頭修正。

1. 列出網站的主要頁型：首頁、服務頁、關於我們、文章頁、聯絡頁、活動頁等，每種頁型挑一到兩頁當樣本
2. 用電腦和手機分別截圖，貼在同一份文件或簡報裡，方便並排比較
3. 逐項記錄出現過的顏色色碼、標題與內文的字級、按鈕的樣式與文字、區塊之間的距離
4. 把相近但不同的樣式標出來，例如兩種非常接近的藍色、三種只差幾個像素的標題大小
5. 和負責人討論每一組相近樣式要合併成哪一個，寫下決定與理由

盤點時可以用一張簡單的表格記錄，欄位建議如下。表格不必一次填滿，先從最常出現的顏色和按鈕開始：

盤點最常見的結論是：樣式的數量太多，而不是太少。設計規範的第一個成果，往往是把「五種藍色」減成「一種主色加一種深色」，而不是增加新的設計。

配色：從品牌色延伸出網站色票，並用「角色」命名

品牌手冊通常只給一到三個品牌色，但網站需要的顏色更多：文字、背景、邊框、連結、成功與錯誤訊息都要有固定的顏色。網站色票的做法，是以品牌色為核心，延伸出一組依用途分工的顏色。

用角色命名，而不是用顏色命名

替顏色命名時，建議寫「它負責什麼」，而不是「它是什麼顏色」。例如「主色」「強調色」「內文文字」「頁面背景」，而不是「天空藍」「橘子色」。這樣做的好處是：哪天品牌調整色調，只要更換主色的色碼，規範中所有寫著「使用主色」的地方都不必改字。

每個角色都寫明色碼與一句用途，例如「主色 #1F5FAE：主要按鈕、文中連結；不要用於大面積背景」（色碼為示意）。

每一組文字與背景都要檢查對比

配色定好之後，要逐一檢查「哪個顏色的字，會放在哪個顏色的底上」。依 W3C 的網頁內容無障礙指引（WCAG）2.1，一般文字與背景的對比至少要 4.5:1，大型文字（約 18pt，或 14pt 粗體）至少 3:1。台灣的網站無障礙規範也以 WCAG 2.1 為基礎，所以這個標準同樣適用於國內網站。

除了文字，按鈕外框、表單欄位邊線、勾選框這類「讓人辨認元件與狀態」的視覺元素，WCAG 2.1 的非文字對比要求也是至少 3:1。很多網站的淺灰色輸入框外框，在白色背景上幾乎看不見，訪客找不到要填寫的位置，這也是規範要一併處理的地方。

建議在規範裡直接列出「允許的組合」並註明對比數值，例如「白底可用內文文字、主色」「主色底只用白色文字」，之後照表選擇即可。

不要只靠顏色傳達訊息

錯誤訊息只把欄位外框變紅、必填欄位只用紅色星號、連結只靠顏色和內文區分，對色覺辨識有困難的訪客都不容易察覺。規範裡可以寫一條簡單的原則：凡是用顏色表示狀態的地方，都要再加上文字、圖示或底線其中一種，例如錯誤欄位下方加一行說明文字、文中連結保留底線。

字型：選定字型家族，並寫好備用字型與載入方式

字型規範要回答三個問題：用哪一套字型、沒載入時用什麼替代、檔案怎麼載入。

中文網站通常以一套無襯線字型為主

多數企業網站會選擇一套中文無襯線字型作為標題與內文的主要字型，英文與數字再搭配一套風格相近的字型。字型數量越少，畫面越一致，載入也越輕；一般建議全站不超過兩套字型家族，需要變化時改用粗細或大小，而不是再加一套字型。

規範中也要寫明「備用字型」的順序，也就是在主要字型還沒載入或無法使用時，依序改用哪些系統字型。例如在主要字型之後，接上常見的系統中文字型，再以通用的無襯線字型結尾。這樣即使字型載入失敗，畫面仍會維持接近的風格。

字型的授權要另外確認：電腦上裝得到的字型，不一定可以嵌入網站使用。Google Fonts 的字型都採開放原始碼授權、可以免費商用，是許多網站的選擇；其他商用字型則要確認授權範圍是否包含網頁嵌入。授權的檢查方式在品牌素材清單的字型一節有說明。

中文字型檔案大，載入方式會影響速度與版面

中文字型包含上萬個字元，檔案往往比英文字型大很多。Google 的 web.dev 在網頁字型最佳做法中說明，字型可以透過子集化只保留網頁用得到的字元，並用 unicode-range 讓瀏覽器只下載需要的部分；字型的顯示策略（font-display）則會影響文字出現的速度與版面穩定度。

同一份文件也提醒，網頁字型與備用字型占用的空間不同時，字型替換會造成版面位移，影響核心網頁指標中的 CLS。所以規範裡挑選備用字型時，可以挑字寬、行高和主要字型接近的系統字型，並在上線前用手機實際看一次字型載入前後的畫面。

字級與行距：建立一張字級階層表

字級規範的目標，是讓每一層標題一眼就看得出層級，而且不同頁面同一層的標題大小一致。做法是先決定內文大小，再往上推出各層標題，往下定出說明文字。

表格中的數值只是示意，實際大小要依字型與版面寬度調整。真正重要的是兩件事：一是相鄰兩層的大小差距要明顯，如果 H2 和 H3 只差兩個像素，讀者就分不出層級；二是手機版的標題要另外設定，直接沿用電腦版的大字，手機上一個標題可能占掉半個畫面。

行高、段距與每行長度

中文內文的行高通常要比英文寬鬆一些，閱讀起來才不會擁擠。WCAG 2.1 的文字間距準則要求：當使用者把行高調到字級的 1.5 倍、段落後間距調到 2 倍、字距調到 0.12 倍、詞距調到 0.16 倍時，內容不能因此被截斷或重疊。這條準則的重點是「調整後不能壞掉」，但它提供的數字，也很適合當作內文行高與段距的起點。

電腦版內文若橫跨整個螢幕，換行時容易跳錯行，所以規範中也寫明「內文區塊的最大寬度」。

放大到 200% 也要能閱讀

WCAG 2.1 的「調整文字大小」準則要求，文字放大到 200% 時，內容和功能不能因此遺失。把重要文字做成圖片、把標題框死在固定高度的色塊裡，是放大後最容易出問題的兩種做法。規範中可以註明：標語、價格、聯絡資訊一律用文字，不做在圖片裡。

間距與版面：用一組固定的間距刻度

間距是最容易被忽略、也最容易讓網站看起來「怪怪的」的部分。同樣的區塊，上下距離忽大忽小，讀者雖然說不出哪裡不對，卻會覺得頁面不夠整齊。解決方法是定一組間距刻度，所有距離只能從刻度中挑選。

原則和字級相同：關係越近的元素距離越小，關係越遠的距離越大。標題和它下面的段落要靠近，和上一個段落要拉開，讀者才看得出這個標題屬於哪一段。按鈕和按鈕之間不要隔太遠，兩個大區塊之間則不要擠在一起。

內容區塊的最大寬度、手機版的左右邊距，以及卡片一列放幾張，也一併寫進規範。

按鈕：定好種類、狀態與尺寸

按鈕是網站上最常被「自由發揮」的元件。設計規範中的按鈕，不是指某一顆按鈕的文案或位置，而是全站按鈕的樣式家族：有幾種按鈕、各用在什麼情境、每種狀態長什麼樣子。按鈕文案的寫法與擺放位置，可以參考網站 CTA 怎麼設計，本節專注在樣式的統一。

三種按鈕通常就夠用

規則很簡單：同一個畫面中，主要按鈕原則上只出現一顆。如果每個按鈕都用實心主色，訪客反而不知道哪一個最重要。按鈕的圓角、高度、左右留白與文字大小，也要在三種按鈕之間保持一致。

每一種按鈕都要定義五種狀態

按鈕不只有「平常的樣子」。滑鼠移上去、用鍵盤選到、按下、無法使用時，都應該有明確的變化，訪客才知道自己的操作有沒有被接收。

焦點狀態最常被省略。有些網站為了美觀，用 CSS 把瀏覽器預設的焦點外框拿掉，卻沒有提供替代樣式，結果用鍵盤操作的人完全不知道自己選到哪裡。WCAG 2.1 的「焦點可見」準則要求鍵盤操作時必須看得到焦點位置，規範中要明確畫出焦點樣式。

按鈕的尺寸：手機上要好按

手機上的按鈕與連結，要大到手指按得準。WCAG 2.2 的目標尺寸準則以 24×24 CSS 像素為最低要求（AA，按鈕間距足夠時有例外），44×44 像素則是加強等級（AAA）。規範中可以直接寫「按鈕高度不低於 44px」，並規定相鄰按鈕之間的最小間距，避免誤觸。

連結、表單欄位與卡片：其他常用元件的規範

除了按鈕，網站上還有幾種元件會反覆出現。把它們的樣式一起寫進規範，新頁面才會和舊頁面看起來是同一個網站。

文中連結

段落中的連結建議使用主色並保留底線，讓讀者不必靠顏色就能認出它是連結。造訪過的連結要不要換色、滑過時是否加粗底線，也在規範中定好。連結文字要說明點進去會看到什麼，避免整頁都是「點此」「這裡」。

表單欄位

表單是訪客與你聯絡的入口，規範要定義：欄位標籤放在欄位上方還是左側、必填欄位怎麼標示、提示文字的顏色、輸入時的焦點樣式，以及錯誤訊息的位置與寫法。欄位標籤要一直看得到，不要只用欄位裡的灰色提示字代替，因為訪客一開始輸入，提示字就消失了。表單本身的欄位設計與通知設定，可以參考網站表單怎麼設計。

卡片、標籤與圖示

服務列表、文章列表、案例列表常用卡片呈現。規範要寫明卡片的圖片比例、標題字級、摘要的長度上限、圓角與陰影，以及整張卡片可點擊還是只有按鈕可點擊。標籤（例如文章分類）定好顏色與大小；圖示則統一一種風格，線條圖示與實心圖示不要混用，大小也固定幾種。

圖片

圖片規範包括各區塊的比例、上傳尺寸與檔案大小，以及照片與插圖的視覺風格；技術規格可以直接引用網站圖片尺寸怎麼抓的規格表，風格則挑幾張「符合」與「不符合」的範例圖並排說明，比文字描述更容易理解。

頁面範本：把常用頁型的區塊順序定下來

顏色、字型、按鈕是「零件」的規範，頁面範本則是「組裝方式」的規範。企業網站的頁面雖然多，但頁型通常只有幾種：服務頁、文章頁、案例頁、活動頁、分店頁。替每一種頁型定好區塊順序，新增頁面時就是「選範本、換內容」，而不是從空白頁開始排版。

範本的意義在於「固定順序、保留彈性」：區塊的順序與樣式固定，內容則依每一頁的需要填寫。範本太死板會讓每一頁長得一模一樣、內容卻不夠深入，所以範本只規定必備的區塊，允許在中間加入該頁特有的段落。

首頁通常獨一無二，不需要做成範本，但它的區塊樣式同樣要遵守規範；首頁該放哪些段落，可以參考公司網站首頁要放什麼。頁型的分類方式則和網站架構有關，規劃選單與頁面層級時可以一併考慮，詳見網站頁面架構與選單怎麼規劃。

把規範寫成文件：目錄、格式與版本紀錄

一份共用的雲端文件或簡報就足夠，不需要專門工具；重點是每一項都有「範例圖」與「一句規則」，而不只是色碼和數字。

建議的目錄如下，可以依網站規模刪減：

1. 前言：規範的適用範圍、負責人、最後更新日期
2. 色票：每個角色的色碼、用途、允許的文字與背景組合
3. 字型與字級：字型家族、備用字型、字級階層表、行高與段距
4. 間距與版面：間距刻度、內容寬度、手機版邊距
5. 元件：按鈕種類與狀態、連結、表單欄位、卡片、標籤、圖示
6. 圖片：比例與尺寸表、視覺風格範例、替代文字規則
7. 頁面範本：各頁型的區塊順序與範本名稱
8. 後台對照：每一項規範在後台的哪裡設定
9. 版本紀錄：每次修改的日期、內容與原因

最後一項「版本紀錄」很重要。規範一定會改，例如品牌換色、新增一種按鈕；每次修改都記下日期與原因，之後看到舊頁面和規範不同時，才能判斷是「還沒更新」還是「做錯了」。

在 Sharing AI 落地（一）：顏色設定與全站 CSS

規範寫好之後，下一步是讓它在後台「變成預設值」，而不是靠每個人記得。以 Sharing AI 架站平台為例，和設計規範有關的設定分散在幾個地方，下表整理各項規範對應的後台位置：

選單與頁面的顏色設定，是不需要寫程式就能套用規範的第一步：把色票中的主色、內文文字與頁面背景填進去，存檔後到前台檢查文字與背景的對比是否符合規範中的組合。「反應顏色」實際影響哪些元素，建議設定後在電腦與手機前台各點一次確認，並把結果記在規範的後台對照表中。

全站 CSS：用 CSS 變數集中管理色票

如果團隊中有人熟悉 CSS，可以在「全站CSS」欄位把色票寫成 CSS 自訂屬性（也常被稱為 CSS 變數）。依 MDN 與 W3C 規格的說明，自訂屬性是由作者定義、可以在整份文件中重複使用的值，以兩個連字號開頭命名，再用 var() 函式取用。例如在根元素定義 --color-primary，按鈕和連結都寫成 var(--color-primary)，之後要換主色時只改一行。

這種寫法正好對應前面「用角色命名」的原則：變數名稱寫角色（主色、內文文字），變數的值才是色碼。不過全站 CSS 會影響每一個頁面，寫錯一行可能讓整站版面跑掉，所以不熟悉 CSS 時建議維持預設。修改前先複製一份原本的內容保存，改完後用幾個代表性頁面在電腦與手機上檢查，再通知團隊。

在 Sharing AI 落地（二）：頁面範本與同步區塊

頁面範本和同步區塊，能讓規範中的頁型與共用內容直接變成後台可選用的項目。

把頁型存成「我的範本」

1. 依規範的頁型表，先做出一頁標準的服務頁（或文章頁、案例頁），區塊順序與樣式完全照規範
2. 在這一頁的編輯畫面按右上角「存成頁面範本」，範本名稱寫清楚頁型，例如「服務頁｜標準版」
3. 之後在「頁面管理 → 新增頁面」選擇頁面模板時，切到「我的範本」分頁，就能看到自己存的範本
4. 選用範本建立新頁面後，只替換文字與圖片，不調整區塊樣式
5. 在規範文件的「頁面範本」一節，寫下每個範本名稱對應的頁型與使用時機

範本存好之後，建議指定一位負責人：規範更新時，由負責人先更新範本，再通知其他人。否則大家仍會從舊範本建立新頁面，規範與實際頁面又會慢慢分岔。

用同步區塊統一全站共用的內容

有些內容會出現在很多頁面，例如文末的諮詢按鈕區、服務頁底部的聯絡資訊、統一的注意事項。把它們做成同步區塊，之後只要修改一次，所有套用的頁面與文章都會一起更新，也確保它們的樣式永遠一致。建立、套用與更新同步區塊的完整步驟，在網站 CTA 怎麼設計的同步區塊一節有詳細說明。

同步區塊只適合「每一頁都完全相同」的內容；需要依頁面調整的文字，放在範本中各自修改。後台的「異動記錄」可以查看誰在什麼時候修改了哪筆資料，共用內容被改動時可從這裡追查。

規範怎麼維護？負責人、更新時機與新元件的審核

規範最常見的結局，是寫完後再也沒人打開；要持續有效，需要明確的維護分工。

新增元件的規則尤其重要。當有人覺得「現有的按鈕不夠用，想做一種新的」，先問能不能用現有的元件解決；真的需要新增時，由負責人確認樣式後寫進規範，再開始使用。這樣規範會隨著網站成長，但不會失控。

新同事或外包廠商加入時，把規範與範本清單一起交給對方，先試作一頁再大量製作；上線前的整體檢查可搭配網站上線前檢查清單。

建立設計規範常見的錯誤與改法

這些錯誤的共通點是規範和後台操作脫節：找不到對應的設定或範本，大家就會回到「複製上一頁」的老習慣。

網站設計規範檢查清單與下一步

最後把全文整理成一張清單，建立或檢查設計規範時可以逐項確認：

• 已盤點現有網站的顏色、字級、按鈕與間距，並決定要合併或淘汰的樣式
• 色票以角色命名，每個顏色都寫明用途，並列出符合對比要求的文字與背景組合
• 用顏色表示狀態的地方，都另外搭配文字、圖示或底線
• 字型家族不超過兩套，寫明備用字型、授權來源與後台設定位置
• 字級階層表分電腦版與手機版，相鄰層級差距明顯，並與網頁標題標籤一致
• 按鈕分為主要、次要、文字三種，五種狀態都有定義，焦點樣式清楚可見
• 常用頁型已存成頁面範本，全站共用內容做成同步區塊
• 規範有負責人與版本紀錄，並排定定期抽查

如果你還沒有任何規範，不必一次寫完。建議從最常用的三件事開始：主色與內文文字的色碼、三層標題的字級、主要按鈕的樣式，寫成一頁文件，再把最常新增的頁型存成一個範本。一週之內就能看到新頁面變得整齊。

想了解 Sharing AI 後台其他功能的操作方式，可以參考Sharing AI 架站平台教學；若想先了解平台能做什麼、有哪些方案，請看Sharing AI 架站平台介紹。如果你希望有團隊協助整理品牌網站的設計規範與頁面範本，也歡迎與我們聯絡討論。