設計網頁頁尾的15個超實用技巧，頁尾實用技巧

設計網頁頁尾的15個超實用技巧，頁尾實用技巧

你網站最重要的部分之一就是頁尾。是的，我是認真的。這裡也許並不適合偉大的設計或者令人印象深刻的內容會存在的地區，但這裡是使用者尋找資訊的地方。所以在設計網站項目時候也不要忽略這個地方。

但是你需要在這裡包含哪些元素？如何組織頁尾的內容使其不突兀並保持整體美感？你來對地方了。在這裡我們將會提出一些關於如何設計好頁尾的建議，並會給出一些例子。

 

1.保持設計簡單

是的，這是大部分設計項目的關鍵之一，但是這點也是重中之重，值得現在就說。在需要處理大量需要放在頁尾的資訊的時候，簡單設計就顯得尤為重要。堅持清理元素，保證充足的空間並有目的地組織資訊。盡量避免混亂，思考哪些元素需要出現在你的頁尾中，以及它們為什麼要在那裡。頁尾的尺寸一般都跟你網站頁面數和資訊量有關。

Agra-Culture 在頁尾中使用顏色、表徵圖和文字，不過它很簡單，而且流量很大。每個連結都易於點擊，綠色背景中農場映像的微妙細節是個很好的嘗試。

2. 連結到你的資訊

網站頁尾中最重要的兩個連結分別是“關於我們”和“聯絡我們”。使用者想要知道你是誰，而且想要瞭解你的公司和品牌。讓使用者更容易找到這些資訊。還有很多人想知道你的團隊成員以及他們的連絡方式（這是一個重要的工具。很多人弄丟了他們的名片，但會回到你的網站去尋找連絡人資訊）

Heckford 包含了很多關於公司、社交網站以及他們工作資訊的連結。

3. 包含基本聯絡資訊

儘管你應該連結到一個完整的“聯絡我們”的頁面裡，在頁尾中展示相關連絡人資訊也不壞。寫上主要的電話號碼、郵箱和真真實位址。（如果能夠在點擊時自動撥號，自動發送郵件或者展示地圖，那就是加分了）

Root Studio做了一個幾乎違背你認為應該是“頁尾”的一切的頁尾，不過它文字很大，而且被壓縮為一個非常簡單的連絡人資訊列表。（這是一個具有影響力的設計理念，方便了那些想談項目合作的使用者）

4. 組織頁尾的連結

對頁尾內容的串連和資訊進行分類組織會給人感覺比較好。比如把連絡方式、友情連結、服務、社交網站和一些你流量最大的內容分成幾列（或幾行）。給每個部分起一個標題，這樣方便查看。

SugarSync 的頁尾資訊包含很多易於查看的列。在“Product”，“Company”，“Learn More”和“Connect with us”的標題下面，你可以很輕易地找到你接下來想要訪問的內容。

有心的同學都會發現優設也是類似的設計，不信戳首頁看看？

5. 包含著作權聲明

這行小小的文字可以成為你的救星，不要忘了它。大部分網站把它做在網站底部單獨一行，而你可以考慮把它設計得更融入頁尾。著作權聲明可以手寫，也可以只放一個帶圈圈的小c標誌。其文字通常包含發布年份和著作權者的名字。可以為內容和設計建立多個著作權聲明（適用於部分由第三方建立的網站）。

Adventure.com在螢幕正下方保留了一行著作權聲明。這行資訊使用了低對比，這樣它就不會搶了更重要的資訊連結的風頭。

6. 包含行動呼籲

當使用者瀏覽到你的頁尾的時候，給他們一些可做的事情。包括登記獲得郵件通知，或者邀請他們在社交媒體上關注你。不要忘了這個地區在轉化點擊方面的價值。

Collabogive 在頁尾地區添加了一個“訂閱我們的郵件”的標語。這個呼籲很容易看到，與頁尾設計融為一體，並且為使用者提供了一種無須加入組織就可以獲得其最新訊息的方式。

7. 使用圖形元素

通常頁尾只是一個塊塊。添加logo或者圖形元素可以為其添加視覺上的趣味。只是要注意不要為這狹小的空間添加太多它難以承受的元素。想象一下這個場面：不僅僅寫出“關注我們的微博/部落格/什麼的”，還包括它們的logo。你還可以使用小的標誌性元素添加在地圖或者電話號碼之類的旁邊（不過你可能需要添加一個懸停狀態的效果以闡釋這個資訊）

Kikk Festival在頁尾空間空使用logo和快速連絡人資訊凸顯活動夥伴。注意表徵圖的大小——每個都易於看到，也易於閱讀。使用滑塊可以使大量資訊顯示在這個狹小的空間中。

8. 注意對比和可讀性

頁尾的資訊通常都很小，非常小。這就使得文本元素與背景之間的顏色、字重以及對比變得非常重要。每個單詞都應該是易於閱讀的。考慮使用簡單的字型（無襯線字型和中等字重就很好）。選擇高對比的色彩，比如白底黑字或者黑底白字。避免使用不同的顏色或者華麗的字型。

P53 為頁尾資訊使用最傳統（也是可讀性最好的）的文字背景組合——黑與白。

嗯，配色不求出彩，但願無錯，參考這篇：《秒變更配置色高手！怎麼都不會錯的6條網頁設計配色原則》

9. 包含網站的設計主題

網站頁尾看起來不應該像是狗尾續貂。它應該看起來與整個網站的設計風格相符。顏色、樣式還有圖形元素都應該保持一致。不要為頁尾添加一個不合適的框框，這是很常見的錯誤。從項目伊始就應該思考這塊地方要如何展現，以免在設計過程中因不匹配的元素而做不下去。

Swiths Interactive Group 的簡單頁尾與整個網站相得益彰，網站一個人坐在桌前，各種物品放在桌上。簡單的頁尾展示了相關資訊，而且看起來與網站融為一體。

10. 往小做（但別太小）

通常的頁尾包含了很多小項目，但是注意別弄得太小了。頁尾的文字可以比網站主體所用的字型大小稍小一點。而表徵圖和映像要在你所選的尺寸裡是可讀的（如果你看不出來這個表徵圖是什麼，那它就太小了）。元素必須大到易於點擊或觸碰。如果你的連結太小，或彼此挨得太近而導致使用者點不到你的連結，那你就蹲牆角哭去吧。

Curious Space 使用了不太傳統的頁尾風格，你可以從風格尺寸的使用中感受到它的存在。頁尾的文字稍小一些，而且比頁面中其他文字更細更輕，當然也沒有小到看不見。

11. 多用點空間

由於頁尾通常都住在狹小的空間裡，空間和間距就顯得很重要。給頁尾中的元素留出大量空間如同文字的行間距。足夠的間距可以讓頁尾看起來來寬鬆舒暢。而且方便點擊或觸摸。因為頁尾中的絕大部分連結都要連結到別的地方，所以這對使用者體驗來說也很重要。你在頁尾所使用的空間不用與你網站主體完全一樣（尤其是對於那些需要在主體中使用小間距的網站）

Sailing Collective 在元素之間使用了足夠多的水平和垂直間距。然後根據類型和是否可以點擊分別放在一起。

12. 防備太多東西

使用圖形元素和一個頭部是個好主意，但剛剛好和太過頭僅有一線之隔。有節制地使用這些元素，並僅為特定元素使用。問問你自己為什麼要使用頭部、表徵圖或者照片。如果答案僅僅是“因為它看起來很好看”，那你得重新思考一下。每個元素都應該有其存在的意義。這會協助你設計出可用的頁尾，而且充分利用空間。

從 Master & Dynamic 的頁尾中你可以看到少即是多的設計美學。簡單的表徵圖和文字可以讓你輕鬆瀏覽頁尾。

13. 建立層次感

和網站的其他部分一樣，頁尾也應該有自然層級。這是兩方面的設計，頁尾應該位於整個網站層級的最底端（畢竟這是它該在的地方）。同時其內部的元素也應該具有層級。最重要元素（通常是聯絡資訊、或者呼籲資訊或者網站地圖）應該是最突出的。標準的資訊，比如著作權資訊，通常都是這個地區裡最小的。

Griflan Design Inc. 在頁尾中按照他們希望的順序告訴使用者要做什麼。首先，給他們發郵件；如果發郵件沒用，給他們打電話；如果這兩種方法都沒用，在社交媒體上找他們。

14. 考慮做子頁尾

你的頁尾是否還需要一個頁尾？考慮添加一個子頁尾圖層吧（在實際應用中這種很流行）。子頁尾非常適合放置一些額外的層級，增加頁尾的空間，防止它過於密集，或者僅僅是為了給有趣的內容提供一點空間。使用這個地區來突出榮譽或者行動呼籲。

The Smart Passive Income Blog 的多層級頁尾做得很好。這裡有行動呼籲，然後是網站連結，然後是淺色連結社交網站的子頁尾，後面是免責聲明和隱私政策。頁尾導航的層級提供了一定的縱深，易於瀏覽和點擊

15. 不要在這些連結下添加底線

頁尾的最大錯誤？讓連結有底線。現在仍有很多網站在他們頁尾的連結中使用底線。這個過時的技術並不適用於現代網站設計。

Baxter of California 擁有一個乾淨整潔並且包含大量連結的頁尾。多虧了這些沒有底線的簡單連結，這個頁尾看起來並不雜亂。

總結

頁尾可以幫你的網站傳達很多資訊。它會告訴使用者你是誰，網站都能做些什麼以及如何瀏覽你的網站。另外它還會展示細節方面的東西，比如作為設計師對細節的關注，以及對小空間的處理能力。

頁尾是設計中的重要部分。要時刻注意。確保裡面是基本資料，設計項目和可用性的最佳組合，這樣才能在每個網站設計項目中用最小的空間獲得最多可能。

怎讓網頁的頁尾部分始終在網頁的最下面？

網頁中的元素都是以body作為參考，所以又必要保HTML和Body的高度相同。
第一種方法：在body中使用兩個容器，包括網頁的頁尾和另外一部分（container）。設定container的高度為100%；頁尾部分使用負外邊距保持其總是在最下方。這種情況下，不論內容佔據的空間相對瀏覽器視口多高，瀏覽器側面的捲軸總是會出現。
html,body{height:100%;}
.fl{float:left;display:inline;}#container{width:100%;height:300px;overflow:hidden;height:100%;
border-bottom:70px#FFFFFFsolid;}
.aside{width:30%;}
.article{width:70%;}#footer{height:50px;width:100%;clear:both;margin-top:-50px;
border-bottom:1pxsolid#e0e0e0;border-top:1pxsolid#e0e0e0;}<divid="container"<divid="header"<div<imgsrc=""width=height=alt=""/<div<pfddfv</p<p容量：<span24M</span/<span2G</span</p</div</div</div<divclass="asidefl"
dsfcndsjkcnsd</div<divclass="articlefl"
cdsklcmdskcmkdslcmksdlckldsmcskl</div</div<divid="footer"footer</div
第二種方法：
 
怎設計頁尾的頁碼

【插入】——【頁碼】，選項頁碼顯示的位置，左或右或中間等，確定即可。有的軟體中，沒有頁碼這個選項，因此也可以在頁尾或頁首中設定選項，選中後選擇【自訂頁尾】，在彈出的對話方塊中選擇上面的【頁碼】表徵圖，當然要選點中一下你選項的是哪一個位置，左側空白處，還是中間或是右邊空白處，確定就行了