1. 確定一個(gè)明確的目標(biāo)

在為網(wǎng)站設(shè)計(jì)一個(gè)大型頁腳的時(shí)候，先要明確用戶在實(shí)際狀況下如何使用它。盡管有許多網(wǎng)站將頁腳當(dāng)作收納不知道怎么處理的鏈接和信息的地方，但是實(shí)際上頁腳的功能并不是垃圾箱。

和網(wǎng)站其他的部分一樣，設(shè)計(jì)優(yōu)良的頁腳是有著明確的設(shè)計(jì)目標(biāo)的：

提供網(wǎng)站地圖，以及最受歡迎的頁面/鏈接
提供聯(lián)系方式，或者提交訂閱的表單
提供社交媒體帳號(hào)鏈接和信息
提供行為召喚的功能
提供公司或者店鋪的實(shí)際地址/可視化地圖
網(wǎng)站和團(tuán)隊(duì)相關(guān)的信息（適合博客類網(wǎng)站）

2. 具備響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)毫無疑問是如今網(wǎng)站應(yīng)當(dāng)具備的基礎(chǔ)素質(zhì)，而大型的網(wǎng)站頁腳同樣也應(yīng)該具備良好的響應(yīng)性，這樣才能確保體驗(yàn)上的一致，并且讓用戶能夠便捷輕松地與之互動(dòng)。

一個(gè)大型的頁腳，在桌面端上展示的時(shí)候，信息按列來分割排布，看起來是很合理的，但在移動(dòng)端設(shè)備上，就顯得凌亂而復(fù)雜了。尤其是考慮到頁腳需要隨著頁面變化而響應(yīng)，并且要便于交互。

整個(gè)頁腳的主要設(shè)計(jì)目標(biāo)是包含并組織大量的元素，而這種形式并不一定拘泥于多欄式布局。

當(dāng)然，你還可以采取另外一種方法來進(jìn)行設(shè)計(jì)，使用超大的頁腳來承載單一元素，讓它將特定的功能發(fā)揮到極致。就像上面的 Hustle Panda 這個(gè)頁面，整個(gè)頁腳幾乎擴(kuò)到屏幕的尺寸，單列式的布局，即使是在移動(dòng)端上也可以和桌面端一致的樣式來進(jìn)行響應(yīng)和展示。（當(dāng)然，你需要讓 CTA元素足夠大，并且易于閱讀）

3. 包含用戶期望的信息

絕大多數(shù)的用戶對(duì)于網(wǎng)頁頁腳中所呈現(xiàn)的信息，是有所期待的，將用戶期望的信息包含在其中，可以讓它的可用性更強(qiáng)。

雖然并非所有的元素都需要包含在網(wǎng)頁頁腳當(dāng)中，但是下面所列舉出來的元素，應(yīng)該覆蓋了絕大多數(shù)的用戶需求：

網(wǎng)站地圖或者拓展導(dǎo)航
聯(lián)系信息，地址或者地圖
社交媒體鏈接
電子郵件訂閱信息
搜索
關(guān)于我們
獲獎(jiǎng)情況或者證明
新聞資訊，最近的文章或者事件列表
還有一些其他的小元素或者功能控件可以放到其中，但是用戶并非需要全部的元素，他們所需要的通常是其中的一部分，絕大多數(shù)是關(guān)于網(wǎng)站本身的一些信息。

版權(quán)信息
法律信息和隱私條款
專業(yè)領(lǐng)域或者所屬組織

4. 組織鏈接

包含大量的、不同的內(nèi)容的網(wǎng)站，應(yīng)該考慮將大量的鏈接按照類別來進(jìn)行分組管理，通過有組織的鏈接，你可以幫助用戶找到他們想要的相關(guān)的內(nèi)容。

對(duì)于大型的項(xiàng)目而言，這是一種非常常見的技術(shù)，對(duì)于用戶而言，可能會(huì)非常有用。以 Amazon 為代表的這些在線零售巨頭對(duì)于在頁腳中組織信息就有著豐富的經(jīng)驗(yàn)。

頁腳是網(wǎng)站功能的一種補(bǔ)充和完善，尤其是對(duì)于大型的網(wǎng)站項(xiàng)目而言，頁腳的信息組織是尤其重要的。

5. 維持品牌的調(diào)性

不要事后再考慮頁腳中的微文案。頁頭中的品牌設(shè)計(jì)和頁腳中的品牌調(diào)性是同樣重要的。

風(fēng)格和調(diào)性上，頁腳同樣是網(wǎng)站的品牌設(shè)計(jì)中不可分割的一部分，在視覺上沿用網(wǎng)站的配色，在視覺元素和品牌化上，同樣不能失去應(yīng)有的調(diào)性。只有這樣，用戶才不會(huì)在瀏覽頁腳的時(shí)候感到迷惑。

6. 足夠的留白

緊密的文本是用戶瀏覽和交互的大敵，保持足夠的呼吸感，不僅能夠確保視覺上的舒適，而且在功能上也有保障，用戶交互也更加方便。

空間排版布局的規(guī)則，同樣適用于頁腳的布局設(shè)計(jì)，千萬不要覺得它只是裝飾性的，并不是「能看就行」。

如果頁腳的設(shè)計(jì)可用性差，就不好了。你可以借助熱點(diǎn)圖等方式來確定用戶對(duì)于各個(gè)模塊的點(diǎn)擊率和效果，在此基礎(chǔ)上來進(jìn)行優(yōu)化。

7. 保持對(duì)比度

需要保有足夠功能性的頁腳，應(yīng)當(dāng)確保它們能和上方的內(nèi)容之間構(gòu)成對(duì)比，從而形成視覺上的差異，脫穎而出。頁腳應(yīng)當(dāng)是整個(gè)設(shè)計(jì)當(dāng)中的一部分，同時(shí)也應(yīng)當(dāng)具備足夠視覺差異性，便于用戶理解它的功能和存在。

在視覺上建立這種對(duì)比，最常用的方法是將頁腳至于特定的 UI容器當(dāng)中，比如彩色的區(qū)塊或者框當(dāng)中，通過背景色彩和上方的內(nèi)容進(jìn)行區(qū)別。許多以淺色背景的網(wǎng)站，會(huì)在頁腳的部位采用深色的背景。

這種額外的視覺對(duì)比的功能性是很明顯的，用戶會(huì)在看到頁腳的時(shí)候因?yàn)椴町惗⒁獾讲⑺伎计涔δ埽亲銐驈?qiáng)大的視覺線索，并且在整個(gè)設(shè)計(jì)中創(chuàng)造出方向感和可用性。

結(jié)語

雖然越來越多的設(shè)計(jì)師開始設(shè)計(jì)超大型的頁腳，并且許多設(shè)計(jì)都做得相當(dāng)?shù)捏@艷，但是頁腳的設(shè)計(jì)應(yīng)當(dāng)是有限制的，至少那些太長(zhǎng)、需要翻頁的頁腳就相當(dāng)?shù)牧钊擞憛挕?br />

雖然頁腳是承載大量信息，用來作為用戶最后獲取信息的地方，但是它也應(yīng)該具備一目了然的特點(diǎn)，確保可用性、易用性和舒適性。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站標(biāo)題：網(wǎng)站的頁腳，設(shè)計(jì)也要很講究
瀏覽地址：http://jinyejixie.com/news18/321918.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、微信公眾號(hào)、響應(yīng)式網(wǎng)站、微信小程序、定制網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)