超實用的網頁頁腳設計小技巧

雖然網頁頁腳的設計在整個頁面設計中並不是最引人矚目的部分，在需求中的優先級也不高，也不是整個網站設計的核心，可是它依然是整個網站不可或缺的部分。

一個好的網站頁腳可以讓用戶找到有用的信息，更好地互動感。一旦明確了頁腳須要幫用戶實現什麼目標，接下來的事情就不難了。下面分享7個技巧。

1.肯定一個明確的目標

在爲網站設計一個大型頁腳的時候，先要明確用戶在實際情況下如何使用它。儘管有許多網站將頁腳看成收納不知道怎麼處理的連接和信息的地方，可是實際上頁腳的功能並非垃圾箱。

和網站其餘部分同樣，設計優良的頁腳是有着明確的設計目標的：

提供網站地圖，以及最受歡迎的頁面/連接

提供聯繫方式，或者提交訂閱的表單

提供社交媒體賬號連接和信息

提供行爲召喚的功能

提供公司或者店鋪的實際地址/可視化地圖

2.具有響應式設計

響應式設計毫無疑問是現在網站應當具有的基礎素質，而大型的網站頁腳一樣也應該具有良好的響應性，這樣才能確保體驗上的一致，而且讓用戶可以便捷輕鬆地與之互動。

一個大型的頁腳，在桌面端上展現的時候，信息按列來分割排布，看起來是很合理的，但在移動端設備上，就顯得凌亂而複雜了。尤爲是考慮到頁腳須要隨着頁面變化而響應，而且要便於交互。整個頁腳的主要設計目標是包含並組織大量的元素，而這種形式並不必定拘泥於多欄式佈局。固然，你還能夠採起另一種方法來進行設計，使用超大的頁腳來承載單一元素，讓它將特定的功能發揮到極致。就像上面的 Hustle Panda 這個頁面，整個頁腳幾乎擴到屏幕的尺寸，單列式的佈局，即便是在移動端上也能夠和桌面端一致的樣式來進行響應和展現。（固然，你須要讓 CTA元素足夠大，而且易於閱讀）

3.包含用戶指望的信息

絕大多數的用戶對於網頁頁腳中所呈現的信息，是有所期待的，將用戶指望的信息包含在其中，可讓它的可用性更強。雖然並不是全部的元素都須要包含在網頁頁腳當中，可是下面所列舉出來的元素，應該覆蓋了絕大多數的用戶需求：網站地圖或者拓展導航，聯繫信息，地址或者地圖，社交媒體連接，電子郵件訂閱信息，搜索，關於我，獲獎狀況或者證實，還有一些其餘的小元素或者功能控件能夠放到其中，可是用戶並不是須要所有的元素，他們所須要的一般是其中的一部分，絕大多數是關於網站自己的一些信息。

4.組織連接

包含大量的，不一樣的內容的網站，應該考慮將大量的連接按照類別來進行分組管理，經過有組織的連接，你能夠幫助用戶找到他們想要的相關的內容。對於大型的項目而言，這是一種很是常見的技術，對於用戶而言，可能會很是有用。以 Amazon 爲表明的這些在線零售巨頭對於在頁腳中組織信息就有着豐富的經驗。頁腳是網站功能的一種補充和完善，尤爲是對於大型的網站項目而言，頁腳的信息組織是尤爲重要的。

5.維持品牌的調性

不要過後再考慮頁腳中的微文案。頁頭中的品牌設計和頁腳中的品牌調性是一樣重要的。風格和調性上，頁腳一樣是網站的品牌設計中不可分割的一部分，在視覺上沿用網站的配色，在視覺元素和品牌化上，一樣不能失去應有的調性。只有這樣，用戶纔不會在瀏覽頁腳的時候感到迷惑。頁腳的元素和元素之間留有足夠多的空間，確保總體的溫馨感。

6.足夠的留白

緊密的文本是用戶瀏覽和交互的大敵，保持足夠的呼吸感，不只可以確保視覺上的溫馨，並且在功能上也有保障，用戶交互也更加方便。空間排版佈局的規則，一樣適用於頁腳的佈局設計，千萬不要以爲它只是裝飾性的，並非「能看就行」。若是頁腳的設計可用性差，就很差了。你能夠藉助熱點圖等方式來肯定用戶對於各個模塊的點擊率和效果，在此基礎上來進行優化。

7.保持對比度

 須要保有足夠功能性的頁腳，應當確保它們能和上方的內容之間構成對比，從而造成視覺上的差別，脫穎而出。頁腳應當是整個設計當中的一部分，同時也應當具有足夠視覺差別性，便於用戶理解它的功能和存在。在視覺上創建這種對比，最經常使用的方法是將頁腳至於特定的 UI容器當中，好比彩色的區塊或者框當中，經過背景色彩和上方的內容進行區別。許多以淺色背景的網站，會在頁腳的部位採用深色的背景。這種額外的視覺對比的功能性是很明顯的，用戶會在看到頁腳的時候由於差別而注意到並思考其功能，它是足夠強大的視覺線索，而且在整個設計中創造出方向感和可用性。

結語

雖然愈來愈多的設計師開始設計超大型的頁腳，而且許多設計都作得至關的驚豔，可是頁腳的設計應當是有限制的，至少那些太長、須要翻頁的頁腳就至關的使人討厭。雖然頁腳是承載大量信息，用來做爲用戶最後獲取信息的地方，可是它也應該具有一目瞭然的特色，確保可用性、易用性和溫馨性。

來源：千鋒UI設計