網站頁尾系統
目的
網站頁尾系統提供了一個設計網站底部錨點的方法論。它作為使用者找不到所需內容時的安全網、SEO 關鍵連結的目錄，以及強制性法律、品牌和社交資訊的容器。一個精心設計的頁尾在不造成認知負擔的情況下，為頁面體驗提供收尾感。
使用案例
- 為多頁面網站設計全域頁尾。
- 將複雜的網站地圖組織成可管理的導航區塊。
- 標準化工具連結（條款、隱私權、版權）的放置位置。
- 將全域行動呼籲（電子報、聯絡我們）整合到頁尾。
- 為多欄位連結列表建立響應式策略。
何時不應使用
- 單頁微型網站： 只需簡單的「版權所有」一行字即可。
- 具有底部頁籤的漸進式網頁應用程式 (PWA)： 持續存在於底部的應用程式式導航取代了傳統頁尾的需求。
- 僅轉換為目標的登陸頁面： 頁尾可能會提供「漏洞」或干擾，將使用者帶離主要行動呼籲（儘管通常仍需要一個包含法律連結的最小化頁尾）。
輸入
- 資訊架構 (IA)： 未包含在主要頁首中的所有連結。
- 法律與合規要求： 隱私權政策、服務條款等。
- 品牌識別： 標誌、社交媒體個人資料和公司使命宣言。
- 全域行動： 次要轉換目標，例如電子報註冊。
- 裝置斷點： 用於響應式欄位堆疊的網格系統定義。
輸出
- 頁尾結構圖： 區域（身份區、連結區、工具區、行動區）的視覺或結構定義。
- 連結層級結構： 分類後的次要導航群組。
- 響應式藍圖： 欄位在行動裝置上堆疊或收合的規則。
- 無障礙地標： 語意標籤（
<footer>、<nav>）和標籤。
工作流程
1. 分類頁尾內容
將內容劃分為邏輯區域：
- 身份區： 標誌、描述和社交圖示。
- 導航區： 按主題（產品、公司、資源）分組的連結群組。
- 行動區： 電子報註冊或主要聯絡資訊。
- 工具區： 版權、法律連結和語言選擇器。
2. 選擇結構模式
根據網站複雜度選擇模式：
- 瘦頁尾： 適用於最小化網站的單行佈局。
- 胖頁尾（網站地圖）： 適用於企業/電子商務的多欄位佈局。
- 行動導向頁尾： 專注於連結列表前的大型行動呼籲。
3. 建立視覺層級
將視覺層級系統應用於頁尾：
- 為連結群組使用粗體標題。
- 確保文字大小可讀，但略小於正文（例如 14px）。
- 在頁尾背景和連結顏色之間建立高對比度。
4. 定義行動裝置適應
規劃從桌機到行動裝置的過渡：
- 堆疊： 多欄位佈局應堆疊成單欄。
- 手風琴模式： 對於非常「胖」的頁尾，考慮在行動裝置上將連結群組折疊成手風琴，以減少頁面長度。
- 觸控目標： 確保所有連結易於點擊。符合 WCAG 2.2 SC 2.5.8（目標尺寸最小值）——互動式目標至少 24x24px，相鄰連結之間有足夠間距；主要觸控目標建議 44px 以上。
5. 添加語意與無障礙層級
- 用
<footer>標籤包裹該區段。 - 為連結群組使用
<nav>元素，並帶有唯一的aria-label（例如「頁尾資源」）。 - 確保對比度符合 WCAG AA（4.5:1）。
決策規則
- 網站地圖規則： 如果網站有超過 15 個頁面，請使用多欄位「胖頁尾」以協助瀏覽。
- 外部連結： 社交媒體和外部資源應在新分頁中開啟（
target="_blank"），以讓使用者留在您的網站上。 - 版權放置： 始終將版權和法律連結放在最底部（「子頁尾」）。
- 行動呼籲優先權： 如果頁尾包含電子報註冊，它應是頁尾中最視覺突出的元素。
限制條件
- 無障礙性： 必須可通過鍵盤 Tab 鍵順序到達。所有連結必須有可見的焦點狀態，且不得被固定頁首或 Cookie 橫幅遮擋（WCAG 2.2 SC 2.4.11 焦點不被遮擋）。
- 響應式： 欄位不得溢出或變得太窄（最小寬度）。
- 合法性： 必須包含當地法規要求的強制性連結（GDPR、CCPA 等）。
常見失敗模式
- 連結過載： 包含網站上的每個頁面，形成使用者忽略的文字牆。
- 對比度不足： 在深色背景上使用淺灰色文字，未達無障礙標準。
- 「死胡同」： 頁尾太小或缺失，導致滾動到底部的使用者無處可去。
- 非標準分組： 混合不相關的連結（例如在「產品」下放「職涯」）。
驗證標準
- 頁尾使用語意化的
<footer>和<nav>標籤。 - 連結群組有清晰、描述性的標題。
- 行動裝置檢視正確堆疊欄位，並維持觸控目標。
- 頁尾所有文字的對比度符合 WCAG AA（4.5:1）。
- 法律連結和版權資訊正確存在且放置恰當。
- 社交連結使用可識別的圖示，並附有無障礙文字標籤。