頁尾入門: 設計模式及使用時機

摘要： 幾乎在每一個網站的底部都可以看到頁尾這個元件，根據網站內容的不同會有很多形式。無論使用哪種表現形式，它們的存在都至關重要（而且通常被低估了）。 頁尾基礎 作為UX專家們，我們傾向於將時間和精力用在首頁上方的內容部分。因為全域性導航，搜尋以及高優先級別的內容都在 頁面上方 ，並且使用者...

幾乎在每一個網站的底部都可以看到頁尾這個元件，根據網站內容的不同會有很多形式。無論使用哪種表現形式，它們的存在都至關重要（而且通常被低估了）。

頁尾基礎

作為UX專家們，我們傾向於將時間和精力用在首頁上方的內容部分。因為全域性導航，搜尋以及高優先級別的內容都在 頁面上方 ，並且使用者更喜歡將 大量時間花費在頁面頂部 。因此，出現在網頁底部的頁尾會縮短使用者體驗時間和資源預算。然而，你還是應該關注頁尾，因為它們可以極大地增強使用者的體驗。

定義：一個網站的 頁尾（footer） 是位於每個網頁底部的一個區域，在主要內容的下方。

術語“頁尾”來自印刷領域，是在文件的所有頁面上看到的統一設計元素。然而，正如我們20年前所解釋的那樣， 印刷設計和網頁設計之間的區別 意味著，像頁尾這樣的設計元素，當它們從印刷品移植到線上產品時，會改變它們的含義（在這種情況下是通過變得可操作來實現改變的）。

過去的網站頁尾要麼是資訊很少的小型實用程式區域，要麼是帶有一大堆雜七雜八連結的大型傾銷場所。在視覺上，它們通常包含難以 辨認 的 極小文字 。今天，頁尾已經很成熟了，現在已經成為人們在網站上完成各種任務的重要參考點。

人們使用頁尾

雖然頁尾的關注度不如頁面頂部，但它們仍然可以得到相當多的使用。這些是頁尾最常見的兩個使用場景：

1. 使用者掃描和閱讀網頁的時候要麼沒有找到他們想要的，要麼需要獲得更多的資訊。他們滾動頁面到底部並使用頁尾：

   第二次被說服的機會

   例如，使用者可能在閱讀完所有細節後決定不想註冊銀行賬戶，但她仍對銀行機構留下深刻印象，並希望成為一名客戶。頁尾是提醒或教導潛在客戶有關公司其他產品的好機會。

   難以找到內容的最後手段

   有時候使用者會轉到頁尾以獲取沒有出現在全域性導航中的額外資訊。例如，那些對申請電商公司職位（一個與典型點商務客戶不同的任務）感興趣的使用者可能會去頁尾查詢相關資訊。

2. 使用者 有意滾動 到頁尾去查詢他們希望在那裡出現的內容，比如聯絡資訊，公司詳細資訊，社交媒體帖子或連結，甚至是去發現一些網站上新的或者相關的內容。一些使用者甚至使用頁尾進行導航：當他們已經滾動到頁尾的時候，由於頁尾就在那裡，他們就近使用頁尾而不是再滾動回頂部的全域性導航。

在這兩種情況下，無論頁尾中的內容是什麼，該頁尾都應該是一致的，可預測的，並且易於發現的。在確定要提供哪種型別的頁尾以及在頁尾中提供哪些內容時，請考慮這些用例，網站的目標以及頁尾的目標。

雖然滿足這些使用者場景可能不是網站絕對優先考慮的目標，但設計一個好的頁尾仍然是值得努力的，因為頁尾具有特別絕妙的可用性特徵：它們永遠不會妨礙那些滿足他們在頁面上更高需求的使用者。因此，除了可能延遲頁面下載或渲染的過度臃腫的頁尾之外，頁尾對使用者體驗來說是錦上添花。它可以起到幫助的作用，但是它不會損害到使用者體驗。

頁尾元素

網站設計師出於各種原因為其頁尾選擇了許多不同型別的內容。頁尾元素可以根據業務和使用者目標進行組合。以下是一些最常見的頁尾元件，示例和推薦使用它們的情景：

• 實用連結
• 門墊式導航
• 輔助任務連結
• 網站地圖
• 評價或獎勵
• 機構內品牌
• 客戶參與 (郵箱訂閱以及社交媒體)

實用連結

大多數網站的頁尾至少包括一個 實用工具導航 ，指向：

• 聯絡資訊：公司地址，電話號碼以及線上聊天連結
• 客戶服務資訊
• 隱私條款
• 使用條款

雖然許多站點的實用工具導航位於其站點的最頂層區域，但頁尾是使用者搜尋這些特定專案時會檢視的地方。使用者通常會直接訪問頁尾以查詢聯絡資訊或找到獲得客戶支援的方法。無論您是否在頁面頂部設有這些實用工具連結，請始終將它們包含在頁尾中。（頁面頂部的實用工具區域仍應用於類似工具的實用程式，例如搜尋，登入/帳戶資訊和語言選擇。）

適用:所有網站

門墊式導航

就像人們家中的門墊一樣，門墊式導航是你到達網站時看到的第一件事，也是你離開時看到的最後一件事。也就是說，它同時包含在頁面的頂部和底部。因此，頁尾可以包括全域性導航。當頁面很長時（例如許多現代移動設計的情景）該元件是非常有用的，因為它允許使用者快速移動到站點的不同位置而無需滾動返回以到達主導航。

適用：頁面很長的時候，尤其是在頁面底部無法使用全域性導航的情況下。

輔助任務

頁尾可以包含指向使用者感興趣的輔助任務的連結。輔助任務的一些示例包括：

• 應聘職位
• 內容建立者任務
• 獲取 投資者資訊
• 查詢產品或服務的文件或規範
• 訪問媒體工具包或其他 PR資訊
• 查詢附屬公司

這些輔助任務通常不會在全域性導航或者實用工具導航裡面出現。這種型別的頁尾內容在具有不同使用者旅程的多個使用者組的站點上很常見。

適用:幫助使用者查詢可能與網站主要目標無直接關係的輔助內容

例如，Dwell雜誌的網站展示了雜誌主題之外的類別，包括關於，Dwell雜誌，專業人士和商家。這些可能使其次要使用者群感興趣：媒體和設計專業人士，商家，投資者和廣告商（以及潛在員工）。

網站地圖

網站地圖樣式的頁尾元件展示了全域性導航和沒有在全域性導航中出現的其他重要頁面的組合。與門墊式導航不同，它公開了主要類別的較低級別子類別。它有助於：

• 公開在全域性導航級別下不明顯的基礎主題
• 提高對網站主要內容的認識
• 提醒使用者公司所提供的產品或服務

網站地圖頁尾元件不是要包括完整的網站地圖，除非該站點具有很少的頁面（大約25個頁面或更少）。超過25個頁面的話，頁尾可能會變得笨拙且難以使用。（或者，您可以在單獨的頁面上提供功能齊全的網站地圖，並在頁尾中連結到該頁面，這是使用者希望找到此類連結的位置。）

適用：具有多級資訊或子域的大型站點

評價或獎勵

我們的許多研究參與者都表示有動力根據該網站獲得的獎項和推薦信選擇一個網站。在 建立權威和信譽 時，突出頁尾中的榮譽可能是一個很好的策略。然而，顯示太多的推薦和獎勵也可能給客戶帶來一個危險訊號，給人的印象是公司因為不成熟或不穩定需要通過展示推薦來弱化它。解決方案是將此內容新增到頁尾。

針對你的使用者執行 可用性測試 和 A/B測試 來決定這種策略是否合適你的頁尾，以及使用評價的合適數量。

適用：初創公司或品牌知名度較低的公司

機構內部品牌

有些公司規模龐大，他們擁有或主持其他幾十家公司。有些使用 通用導航 將這些子公司與母公司聯絡起來。在頁尾中包含子公司和品牌列表也會有所幫助，以加強對屬於組織投資組合範圍的其他品牌或公司的認識，並且還可以幫助使用者輕鬆找到他們。

適用：擁有許多子公司或合作品牌的大型跨國組織

客戶參與

使用者通常會直接訪問頁尾以查詢優惠券和促銷資訊，或者只是瞭解公司的銷售和產品釋出情況。 因此，頁尾可以包括允許客戶與公司保持聯絡的資訊，如社交媒體連結（或者至少是公司社交媒體帳戶的連結）和 郵件列表註冊 提示。

在頁尾中包含嵌入式社交媒體Feed小部件之前，請考慮公司在每個社交媒體網站上釋出的頻率。 不太活躍的社交媒體帳戶可能無法保證嵌入式社交媒體訂閱源，但仍可能從連結到社交帳戶中受益。

適用：所有使用社交媒體連結型別的網站; 如果使用嵌入式社交媒體Feed小部件，則重點關注視覺或美學（藝術，美容，生活方式品牌或創意空間）

頁尾的差異

無限滾動&迷你頁尾

許多電子商務網站，娛樂網站和其他鼓勵瀏覽的網站選擇使用 無限滾動 以保證使用者始終在頁面上。內容不斷載入，因此每頁都沒有一致的底部，也就沒有頁尾部分。但是，頁尾中的內容（通常是實用工具導航連結）應該在右欄中顯示為“迷你頁尾”，或者在一個更大，帶有擴充套件功能的全域性導航中顯示。

為了使頁尾有用，它需要出現在網站的所有頁面上。有些網站嘗試對靜態長度頁面和動態長度頁面使用相同的頁尾。然而，當用戶試圖在具有無限滾動的網站上使用這些頁尾時，它經常變成令人沮喪的打地鼠遊戲，使用者試圖在連結再次消失之前儘快點選連結。相反，如果你打算使用無限滾動，請考慮在右側欄放置一個迷你頁尾，並確保使用者在滾動頁面時固定住並與主要內容保持同時出現。

適用：使用無限滾動的頁面

上下文頁尾

雖然傳統上頁尾在許多頁面會保持一致，但有時根據頁面上顯示的資訊不同自定義頁尾會很有幫助。 特別是對於具有多個受眾的網站，上下文頁尾可以顯示未進入全域性導航，但對於某些使用者可能仍然至關重要的內容。

例如，Medium.com的首頁沒有頁尾；頁面使用無限滾動顯示文章列表。（頁面有一個如前所述的放置在右側欄的迷你頁尾。）但是，在特定文章的頁面上，Medium顯示基於任務的頁尾，該頁尾根據檢視者是否是訂閱者而變化。

適用：具有不同使用者角色的網站（例如“內容建立者”與“內容消費者”或“會員”與“非會員”）

常見頁尾陷阱（和解決方案）

自20世紀90年代以來，頁尾已經走過了漫長的道路，但直到今天，它們仍然存在常見的設計陷阱：

• 超過兩個級別的資訊層次結構

  特別是對於大型網站來說，包括整個網站地圖不是你的頁尾解決方案。頁尾是一個專用的不動產，應該只用於可被發現的重要資訊。正如我的母親恰如其分地說的那樣，“如果一切都很重要，那等於什麼都不重要。”

  • 解決方案： 考慮重新設定內容的優先順序，並僅顯示資訊結構中第一級和第二級類別的連結，而不是整個站點。如果單個較低級別的頁面足夠重要，可以設定頁尾中的特定連結，但不必顯示資訊層次結構的所有級別以使其可被發現。

• 頁尾中不清晰的連結名稱(例如 公司資訊 或 幫助 以及 聯絡我們 )

  許多頁尾上臭名昭著的 資源連結 是過去頁尾的不幸殘餘之一。

  • 解決方案： 團隊應該努力遵守常規的，明確的術語。如果團隊不確定哪個術語更合適，那麼 卡片 或可用性測試可以幫助闡明可能使使用者感到困惑的術語。

• 不清晰的結構或資訊層級

  頁尾有時可能是孤立連結的“傾倒場”，也就是說，似乎與全域性導航或次要任務無關的連結。如果頁尾沒有組織模式，使用者要麼進行 徹底的稽核 ，要麼花很少時間檢視頁尾。

  • 解決方案： 通過使用視覺層次結構的分組或其他視覺設計模式（例如，粗體高階頁面連結和正常粗細的低階頁面連結），清楚地傳達頁尾中專案的資訊層次結構

• 隱藏或難以辨認的頁尾

  有時，公司為頁尾連結選擇使用較小的字型，以便容納所有連結或使連結更少分散注意力。更糟糕的是，一些網站可能會使用動畫或手風琴功能來完全隱藏頁尾以達到美觀目的。雖然頁尾不是主要導航，但人們仍然使用它並依賴它，所以不要試圖隱藏它。

解決方案：使用清晰的字型大小和字型顏色（具有良好的 對比度 ）並避免使用裝飾字型。最重要的是，不要隱藏或摺疊頁尾，人們希望它的存在。

總結

頁尾是使用者丟失時所去的地方。如果我們想留下 持久的良好印象 ，不要忽視頁面的底部的至關重要性。畢竟，即使是介面中最平凡，最實用的部分也會對使用者的體驗產生最大的影響。

（編譯完）

英文原文： https://www.nngroup.com/articles/footers/

原文作者： Therese Fessenden

原文譯者： Twitter / Linkedin /微博

以上譯文僅代表原作者觀點。如需轉載請遵循 CC版權協議 正確標明出處。