最新網站設計頁腳思路及技巧

網站設計中最重要的位置之一是頁腳。 是的，我是認真的。 很多時候它可能不是設計中的重點或最令人印象深刻的區域，但它是用戶經常用于尋找信息的地方。 因此，在規劃網站設計項目時，不要忽視這一領域，這一點非常重要。


但是你應該包括哪些元素？ 如何保持頁腳整齊有序，符合你的整體美感而不會突兀？ 在這里，我們將看看如何創建一個優秀頁腳的提示，其中包含一些做得很好的網站示例。

1.保持設計的簡潔（Keep the Design Simple）




是的，這是大多數設計項目的關鍵之一，但值得一提。 在處理大量信息時，簡單的設計很重要。 堅持簡潔的元素，充足的空間，并有目的地組織。 盡量避免混亂，想想你的頁腳中會包含哪些元素，以及為什么它們應該存在。

Agra-Culture在頁腳中使用顏色，圖標和文本，但它看起來很簡單。 每個鏈接都很容易被點擊，綠色框中的農場圖像是提供與站點統一主題的一個細節亮點。



2.關聯信息（Link to Your Information）




任何網站頁腳中最重要的兩個鏈接一般都會是“關于我們”和“聯系我們”的頁面。 用戶希望知道你的身份以及你的公司或品牌的含義。 你需要保證他們可以輕松找到該信息。 許多人還想了解你的團隊以及如何與他們聯系（這是一個至關重要的工具，很多人會丟失名片，那么你的網站在第一時間會成為他們與你保持聯系的媒介）。

Heckford在其頁腳設計中包含了大量與公司，社交媒體和有關其工作信息的鏈接。



3.包含基礎的聯系信息（Include Basic Contact Information）




雖然一般的做法是提供一個直接鏈接“聯系我們”頁面的欄目鏈接，但直接在頁腳中展示相關的基礎聯系信息也是一個很好的選擇。 包括主要的電話號碼，電子郵件地址和實際的辦公地址。

Root Studio創建了一個幾乎與你想象的完全相反的頁腳，但是它很有效。 大文本（以及包含它的邊框）更容易吸引注意力并且被識別，提供的基礎聯系信息可以讓相關的用戶第一時間與你保持聯系（對于希望用戶與他們聯系以進行項目和工作的網站設計，這是一個非常有影響力的設計概念）。


4.組織頁腳鏈接（Organize Footer Links）




像所有的網站設計一樣，分組可以為鏈接和信息創建良好的組織感。 考慮幾個相關信息的列（或行），例如“關于我們”、“聯系我們”、“服務”以及“社交媒體”等最受歡迎的部分。 將每個內容放置于相關的主欄目下，以便每個元素都易于查看和查找。

SugarSync包含多列信息，你可以輕松訪問頁腳信息。 通過“產品”，“公司”，“了解更多”和“與我們聯系”的主標題，你可以輕松找到你需要更詳細了解的信息。


5.版權信息（Include a Copyright Notice）




這一段簡單的文字有時候提供的幫助遠遠超出你的想象，所以不要忘記它。 雖然大多數站點將其作為單行包含在屏幕底部，但你可以將其設計為更貼合你的網站主題的樣式。 版權聲明可以包含有版權符號，該文本通常包括出版年份和版權所有者的姓名（公司類型的則為公司名稱）。

Adventure.com通過屏幕右下方的版權聲明保持整體設計的簡單。 該信息在對比度上明顯較弱，因此它不會妨礙更重要的導航元素。


6.包含行動按鈕（Include a Call to Action）




一旦用戶來到你的頁腳，在這個區域你是否會需要他們做點什么。 添加一個行動按鈕用于注冊或留下信息或邀請他們在社交媒體渠道上關注你。 在點擊率的轉換上，不要忘記此空間的價值。

Collabogive為“加入我們”提供了大量的頁腳空間。這個號召性用語很容易看到，符合設計要求，并為用戶提供了一種交互方式。


7.使用圖形元素（Use Graphic Elements）




頁腳的設計通常采用的是一個典型的塊狀結構。 通過添加徽標或圖形元素以增加視覺興趣。 注意不要讓太多元素使得這個小空間看起來過于擁擠。 你還可以使用小的標志性元素作為地圖或電話號碼等鏈接。

Kikk Festival的頁腳空間使用徽標和快速聯系信息來強調合作伙伴。 注意圖標的大小 - 每個圖標都易于查看和閱讀 - 并使用滑塊來切換內容，以便可以在很小的空間中顯示大量元素。


8.注意對比度和可讀性（Be Aware of Contrast and Readability）




頁腳信息通常很小......非常小。 這使得考慮文本元素和背景之間的顏色，對比度至關重要。 每個字都應該是可讀的。 考慮使用簡單的字體以及比你通常使用的樣式更簡單明了的選擇。 選擇具有高對比度的顏色，例如帶黑色文本的淺色背景或帶有白色文本的深色背景。 避免使用不同的顏色或華麗的字體。

P53使用經典（和最具可讀性）的文本和背景組合。


9.統一設計主題（Maintain Your Design Theme）




網站頁腳看起來不應該是事后的想法。 它應該與網站的整體設計主題相匹配。 顏色，樣式和圖形元素應該反映整體色調。 想想這個空間以及從項目開始的時候就考慮如何使用它，以避免在設計過程的后期遇到不匹配的元素。

Swiths Interactive Group使用一個簡單的頁腳，它完全集成了網站的整體外觀，其中有一個人坐在桌子旁，散落著物品。 簡單的頁腳顯示相關信息，看起來像是在同一個網站上。


10.對于小的思考（Think Small (But Not Too Small)）




頁腳包括很多小項目。 小心不要太小。 文本可以比用于網站主體的字體大小小一些。 圖標或圖像需要以您選擇的尺寸保證可讀（如果看不清圖標變大的是什么，它可能就太小了）。元素必須足夠大才能輕松點擊或被閱讀。 如果用戶因為太小而無法閱讀或被識別，則網站設計就無法按預期工作。

雖然Curious Space使用非常傳統的頁腳樣式，但你可以從使用的類型大小中獲得良好的規模感。 頁腳文本比頁面上的所有其他文本都更小，更薄，更輕，但仍然足夠大，可以輕松閱讀。


11.空間的使用（Use Plenty of Space）




由于頁腳通常的空間量不是很多，因此空間和間距的合理配置就很重要。 在頁腳中的元素周圍以及文本行之間留出足夠的空間。 足夠的間距可以防止頁腳區域看起來過于狹窄或不吸引人。 它對用戶是否會選擇點擊也具有很高的影響。 由于頁腳中的許多（如果不是全部）項目都鏈接到其他內容，這是用戶功能的一個重要方面。 你使用的空間量不必完全統一網站其余部分的間距（對于在站點主體中使用緊密間距以產生特定效果或影響的站點尤其如此）。

Sailing Collective在元素之間垂直和水平方向使用大量的空間。 它們按類型劃分并具有良好的點擊性。


12.注意元素（欄目）的數量（Be Wary of Too Many Objects）



雖然使用圖形元素是一個好主意，但是恰到好處和過多之間的界限有時候并不是很好把控。 謹慎使用這些元素， 問問自己為什么使用圖形，圖標或照片。 如果答案是“因為它看起來不錯”，那么請重新考慮它，每個元素都應該是有用的，這將幫助你設計一個可用的頁腳，充分利用可用空間。

從Master＆Dynamic的頁腳中可以看到“少即是多”的設計理念。 簡單的圖標和文字足以讓你輕松瀏覽頁腳的內容。


13.創建層次及結構感（Create a Sense of Hierarchy）




就像網站設計的其他部分一樣，頁腳本質上應該是具有明顯的層次的。 頁腳應位于整個站點層次結構的底部（這也是它實際所在的位置）。頁腳還應該在其“容器”中包含元素層次結構。最重要的元素（通常是聯系信息，號召性用語或站點地圖）應該是最突出的。 標準信息（例如版權聲明）通常是規模最小的。

Griflan Design Inc.按照他們想要的方式告訴用戶在頁腳中要做什么。 首先，用戶可以選擇給他們發郵件;，如果這不起作用，那么打電話給他們，也是一個便捷的途徑，如果這些選項都不起作用，請訪問社交媒體并關注他們。


14.考慮一個次級頁腳（Consider a Sub-Footer）



你的頁腳是否需要次級頁腳？ 考慮使用附加分層的子頁腳（這是一種非常流行的做法）。子頁腳可能是創建一些額外層次結構的好地方，如果頁面空間過于密集則只為頁腳空間添加維度，或者只為有趣的內容提供空間。

Smart Passive Income Blog使用多級頁腳使得內容變得更有組織。 內容包括了一個號召性用語，然后是網站鏈接，然后是媒體及子頁腳，其次是網站免責聲明和政策。 導航在頁腳中提供深度，使其易于瀏覽和點擊。


15.不要提供過多的強調鏈接（Don’t Underline All Those Links）




頁腳設計中做大的錯誤是什么——允許鏈接帶有下劃線。 頁腳中仍有大量帶下劃線鏈接的網站，這種過時的技術不適合現代網站設計。

Baxter of California有一個干凈的頁腳，包括很多鏈接。 由于簡單的設計，它沒有看起來混亂，沒有那些討厭的下劃線。


總結

頁腳可以影響你的網站整體的視覺，它可以告訴用戶你是誰，他們可以做什么以及如何定位到你的網頁的其他位置。 它還展示了作為設計師的細微之處，例如對細節的關注以及在狹小空間中工作的能力。

頁腳是設計的重要部分。 注意它，確保包含正確的信息組合，設計元素和可用性，以充分利用每個網頁設計項目中所有可用的空間。