不是所有的網站設計的底部都是一樣的，不管是在內容還是在樣式上。雖然底部設計可能不是網站設計過程中的主要部分，但是一個在視覺上很棒的底部可以幫助用戶找到相關的信息，不管是為了聯系你，還是為了更好地與網站進行互動。下面我們將介紹一些技巧，幫助你設計一個實用的，漂亮的底部。

一個大的底部可以幫助你組織信息和作為導航的一個有效的輔助，它可以使用戶對內容和信息的定位更加容易。

大版塊底部的訣竅在于內容的組織。一旦你知道底部設計應該幫助用戶做什么，設計一個你可以引以為傲的底部就更容易了。讓我們深入一些頁腳設計技巧。

1.設定目標



在你真正設計一個大的網站底部之前，先決定用戶應該如何使用它，或者說它存在的目的是什么。一個好的頁腳設計不是把所有你不知道該怎么處理的欄目鏈接和信息整體堆積的地方（盡管太多網站使用這種方式）。

一個好的底部設計有一個明確的目的指向，就像設計的每一個部分一樣。

常見底部的使用包括：

· 站點地圖以及最主要的頁面鏈接列表；

· 聯系方式或其他需要提交的表單信息；

· 帶有預覽和社交賬戶鏈接的社交媒體中心；

· 號召行動短語；

· 顯示你的位置的地圖（對于企業或餐廳來說會比較重要一些）；

· 相關內容（博客）

2.響應性



使用基于列的風格樣式，以便你的底部可以輕松地折疊并以響應形式進行排版。隨著現階段底部大小和空間的增加，這一點變得越來越重要。

雖然單欄類型的底部在桌面辦公設備上看起來視覺效果不錯，但在移動設備上可能會變得一團糟。不要忘記注意這個網站設計元素的響應外觀、感覺和互動效果。

除非……你正在采取另一種方法，一個單一元素的超大底部。這可以是一個很符合流行的選擇，一個大的交互動作或呼吁行動，就像上面的Hustle Panda案例。在這種情況下，內容區域太大，單個列選項可以很好地折疊轉換成不同的大小（只需確保文本和CTAs仍然足夠大，可以輕松閱讀）。

3.包括用戶期望的信息



大多數用戶希望在網站底部中找到某些類型的信息。包括用戶期望的位置信息可以使設計更容易使用。

不過，并非所有這些元素都需要在每個網站底部中出現，下面是一些用戶將通過滾動到頁面底部尋找到的常見內容：

· 站點地圖或擴展導航

· 聯系人信息、地址或地圖

· 社交媒體的鏈接或元素

· 電子郵件或傳真信息

· 搜索

· 任務或信息

· 相關推薦

· 新聞，最近的新聞文章或事件列表

還有一些很小的元素可以很容易地放置在底部中。并非所有的用戶都在尋找這些元素，但它們通常是網站底部可能出現的內容。

· 版權信息

· 鏈接條款或隱私政策

· 專業的聯系方式或組織信息


4.組織鏈接



具有大量內容或不同類型信息的網站應考慮使用大版塊的底部，并將鏈接分組為資源類別。通過組織鏈接，你可以幫助用戶找到與他們最相關的站點的一部分。

對于大型項目來說，這是一種非常常見的技術，對用戶非常有幫助。網上零售商在底部的信息組織方面做得可能會更好一些。

在上面Home Depot的網站設計中，底部包括多層次的分層信息。第一排包括流行的類別（這是“你找到了你想要的一切嗎？”“在線零售”，然后是客戶服務的鏈接組（基于用戶需要做什么）、資源、關于公司的信息和對行動的調用。最后，早末尾包括與公司其他品牌的鏈接、版權信息、條款和協議鏈接。

5.延續主題和品牌調性



位于底部的微內容不要將他們當成時候考慮的信息（這是一個常見的問題）。

這個內容的主題和風格應該共同反映網頁設計的其余部分的基調。包括在項目的其余部分中使用的相同的顏色方案、設計元素和獨特的主題。用戶不必在底部上猜測或思考網絡上的位置。

以上的Emma案例中，有一個臉部動作的呼吁，同意了和其他網站設計一樣的友好態度：“向你的新營銷團隊問好。”基調很輕，元素之間有足夠的空間（視覺上強調光的感覺）和快樂。吸引用戶，讓公司感覺像你認識的人。、

6、空間感



小文本和緊湊的空間可能是所有設計最值得注意的問題了。確保元素有足夠的空間，這樣信息就很容易被掃描和點擊。

適用于空間、可讀性和瀏覽的原則也適用于底部（底部越大，這些元素就越重要）。

記住，如果它的作用并不是很好的話，那就不如不放（你可以使用分析信息和點擊路徑了解什么工作以及什么不工作。底部中的哪些鏈接實際上被點擊了？）。

7.保持距離



為了充分使用超大版塊的底部設計，確保它可以從上面的內容中脫穎而出。雖然底部看起來應該是整個設計的一部分，但它也應該包含足夠的對比度，以便用戶理解這是頁面的底部，其中鍵入了（和預期的）信息。

幫助建立這種對比的一種常見技巧是將頁腳放在一個容器元素中，例如一個有色的區塊中——這是與背景的其他顏色不同的顏色（例如，如果網站設計的背景大多是淺的，那么頁腳可能包含在黑暗背景中）。

這個額外的對比是一個視覺線索，這一部分的設計是不同的。它使用戶暫停并考慮屏幕上的信息。對比度的變化可以是一個強大的視覺線索，在設計中確立位置感，以及可用性工具。

總結

但是頁腳是什么時候太大？

在研究這篇文章時，我們參考了很多很棒的底部設計。當我開始沿著這個思路規劃的時候，意外的發現更多的設計師正在創造比我想象中更大的（甚至是超大）底部。但有一種類型的底部是我覺得并不友好的——滾動底部。

雖然頁腳是一個組織大量信息的好地方，但作為一個用戶，我想一目了然。所以在設計你的設計時也要記住這一點。