Footer 中文叫「頁尾」或「頁腳」，是網頁最底部的區塊，通常放聯絡資訊、網站導覽連結、社群連結和版權聲明。訪客找不到資訊時常會直接滑到最底下，所以設計網站時別忽略這一塊。
頁尾該放哪些元素？怎麼整理才不雜亂又好看？以下整理 15 個頁尾設計技巧，每個都附網站範例截圖。
更新紀錄
- 2026-10-16：開頭補上 Footer 的意思，標題改為 H2，文字改成台灣用語，對比、點擊尺寸與連結底線依 W3C WCAG 2.2 補充說明。範例截圖為原文發表當時的畫面，網站現況可能已改版。
- 2023-01-17：內容更新。
- 2014-10-23：首次發布。
Footer 是什麼？頁尾要放什麼？
Footer（頁尾）是每一頁共用的底部區塊。常見內容：
- 公司名稱、電話、Email、地址
- 主要頁面的導覽連結，例如關於我們、服務、聯絡我們
- 社群連結與 LINE 官方帳號
- 隱私權政策、版權聲明
- 電子報訂閱或諮詢按鈕等行動呼籲
15 個頁尾設計技巧
1. 保持設計簡單
頁尾常常要塞進大量資訊，設計越簡單越好。先列出哪些元素真的需要出現在頁尾、為什麼要放，再留足夠的空白、有目的地分組。
頁尾大小通常跟網站頁數和資訊量有關。Agra-Culture 的頁尾用了顏色、圖示和文字，整體仍然簡單，每個連結都好點，綠色背景裡的農場插圖是低調的細節。
2. 連結到公司資訊
頁尾最重要的兩個連結是「關於我們」和「聯絡我們」。訪客想知道這家公司是誰、怎麼聯絡，放在頁尾讓人一滑到底就找得到。
有些人弄丟名片，會回到網站找聯絡人，團隊介紹和聯絡方式也適合放在這裡。Heckford 的頁尾就放了公司介紹、社群網站和作品相關連結。
3. 放上基本聯絡資訊
完整的聯絡頁面一定要有，頁尾再放一次主要電話、Email 和地址也很實用。手機上點電話能直接撥號、點 Email 能開信件、點地址能開地圖，會更方便。
Root Studio 的頁尾字很大，把聯絡資訊整理成一個簡單的清單，想談合作的人一眼就看到。
4. 把連結分類整理
把聯絡方式、服務、社群網站和熱門內容分成幾欄，每欄加一個小標題，訪客比較容易找到下一步要去的地方。
SugarSync 的頁尾用「Product」「Company」「Learn More」「Connect with us」分欄，內容一目了然。
5. 加上版權聲明
版權聲明通常放在頁尾最底下一行，內容是年份和版權所有者，也可以只放 © 符號加名稱。部分內容由第三方製作時，可以分開標示。
Adventure.com 把版權聲明放在畫面最下方，用低對比的顏色，不搶其他連結的風頭。
6. 放一個行動呼籲
訪客滑到頁尾時，給他一件可以做的事，例如訂閱電子報、追蹤社群或加 LINE。頁尾也有轉換的機會，別浪費。
Collabogive 在頁尾放了訂閱電子報的區塊，很顯眼，又跟整體版面融合。
7. 加一點圖形元素
加入 Logo 或小圖示，可以讓頁尾不那麼單調，例如社群連結直接用各平台的圖示，電話、地址旁邊加小圖示。空間有限，別放太多；圖示要有替代文字，讓螢幕閱讀器也讀得懂。
Kikk Festival 在頁尾用合作夥伴 Logo 和聯絡資訊，每個圖示大小適中，容易辨識。
8. 注意對比和可讀性
頁尾文字通常比較小，文字和背景的對比就更重要。字體選簡單的無襯線字體、中等字重；依 WCAG 2.2 對比（最低），一般文字和背景的對比至少要 4.5:1。
P53 的頁尾用最傳統也最好讀的黑白組合。
9. 跟整站風格一致
頁尾要看起來是網站的一部分，顏色、樣式和圖形元素都跟整站一致，別突然加一個格格不入的框。最好在設計初期就一起規劃，不要最後才補。
Swiths Interactive Group 的網站主視覺是一張擺滿物品的桌子，頁尾很簡單，跟整體畫面融為一體。
10. 字可以小，但別太小
頁尾文字可以比內文小一點，圖示要小到還認得出來。連結要大到容易點，依 WCAG 2.2 目標尺寸（最低），可點擊的目標至少 24 x 24 CSS 像素，或彼此之間留足夠間距。
Curious Space 的頁尾文字稍小、字重較輕，仍然清楚可讀。
11. 多留一點空間
頁尾空間小，間距更重要。元素之間留足夠的空白，看起來不擁擠，手機上也比較不會點錯。頁尾的間距不必和內文完全一樣。
Sailing Collective 在元素之間留了足夠的水平和垂直間距，再依類型和能不能點擊分組。
12. 別放太多東西
小標題、圖示和照片都能用，但剛好和太多只差一點點。每放一個元素，問自己為什麼要放；答案只有「好看」，就再想一下。
Master & Dynamic 的頁尾只用簡單的圖示和文字，很好瀏覽。
13. 排出層次
頁尾裡的元素也有輕重：聯絡資訊、行動呼籲或網站地圖最重要，要最顯眼；版權聲明這類標準資訊放最小。
Griflan Design 的頁尾依序引導訪客：先寄 Email，再打電話，最後到社群找他們。
14. 考慮加一層子頁尾
資訊很多時，可以在頁尾下面再加一層子頁尾，放社群連結、免責聲明、隱私權政策，讓主頁尾不那麼擠。
Smart Passive Income 的頁尾分成好幾層：行動呼籲、網站連結、社群連結，最後是免責聲明和隱私權政策。
15. 連結樣式要乾淨，也要認得出來
原文建議頁尾連結不要加底線，讓畫面更乾淨。拿掉底線時要注意：依 WCAG 2.2 色彩的使用，不能只靠顏色區分連結和一般文字；頁尾連結多半整區都是連結、排列方式本身就看得出來，比較沒問題，夾在一段文字裡的連結還是保留底線比較好。
Baxter of California 的頁尾連結很多，用簡單的無底線連結，看起來不雜亂。
總結
頁尾會告訴訪客這家公司是誰、網站能做什麼、下一步去哪裡，也看得出設計者對細節和小空間的處理能力。把基本資訊、設計元素和好不好用一起考慮，就能用最小的空間發揮最多作用。
參考資料：Design Shack〈15 Tips for Creating a Great Website Footer〉。範例截圖為原文發表當時的畫面。查證日期 2026-10-16。
