網(wǎng)站設(shè)計(jì)中最重要的位置之一是頁(yè)腳。 是的，我是認(rèn)真的。 很多時(shí)候它可能不是設(shè)計(jì)中的重點(diǎn)或最令人印象深刻的區(qū)域，但它是用戶經(jīng)常用于尋找信息的地方。 因此，在規(guī)劃網(wǎng)站設(shè)計(jì)項(xiàng)目時(shí)，不要忽視這一領(lǐng)域，這一點(diǎn)非常重要。


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

1.保持設(shè)計(jì)的簡(jiǎn)潔（Keep the Design Simple）




是的，這是大多數(shù)設(shè)計(jì)項(xiàng)目的關(guān)鍵之一，但值得一提。 在處理大量信息時(shí)，簡(jiǎn)單的設(shè)計(jì)很重要。 堅(jiān)持簡(jiǎn)潔的元素，充足的空間，并有目的地組織。 盡量避免混亂，想想你的頁(yè)腳中會(huì)包含哪些元素，以及為什么它們應(yīng)該存在。

Agra-Culture在頁(yè)腳中使用顏色，圖標(biāo)和文本，但它看起來很簡(jiǎn)單。 每個(gè)鏈接都很容易被點(diǎn)擊，綠色框中的農(nóng)場(chǎng)圖像是提供與站點(diǎn)統(tǒng)一主題的一個(gè)細(xì)節(jié)亮點(diǎn)。



2.關(guān)聯(lián)信息（Link to Your Information）




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

Heckford在其頁(yè)腳設(shè)計(jì)中包含了大量與公司，社交媒體和有關(guān)其工作信息的鏈接。



3.包含基礎(chǔ)的聯(lián)系信息（Include Basic Contact Information）




雖然一般的做法是提供一個(gè)直接鏈接“聯(lián)系我們”頁(yè)面的欄目鏈接，但直接在頁(yè)腳中展示相關(guān)的基礎(chǔ)聯(lián)系信息也是一個(gè)很好的選擇。 包括主要的電話號(hào)碼，電子郵件地址和實(shí)際的辦公地址。

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


4.組織頁(yè)腳鏈接（Organize Footer Links）




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

SugarSync包含多列信息，你可以輕松訪問頁(yè)腳信息。 通過“產(chǎn)品”，“公司”，“了解更多”和“與我們聯(lián)系”的主標(biāo)題，你可以輕松找到你需要更詳細(xì)了解的信息。


5.版權(quán)信息（Include a Copyright Notice）




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

Adventure.com通過屏幕右下方的版權(quán)聲明保持整體設(shè)計(jì)的簡(jiǎn)單。 該信息在對(duì)比度上明顯較弱，因此它不會(huì)妨礙更重要的導(dǎo)航元素。


6.包含行動(dòng)按鈕（Include a Call to Action）




一旦用戶來到你的頁(yè)腳，在這個(gè)區(qū)域你是否會(huì)需要他們做點(diǎn)什么。 添加一個(gè)行動(dòng)按鈕用于注冊(cè)或留下信息或邀請(qǐng)他們?cè)谏缃幻襟w渠道上關(guān)注你。 在點(diǎn)擊率的轉(zhuǎn)換上，不要忘記此空間的價(jià)值。

Collabogive為“加入我們”提供了大量的頁(yè)腳空間。這個(gè)號(hào)召性用語(yǔ)很容易看到，符合設(shè)計(jì)要求，并為用戶提供了一種交互方式。


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




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

Kikk Festival的頁(yè)腳空間使用徽標(biāo)和快速聯(lián)系信息來強(qiáng)調(diào)合作伙伴。 注意圖標(biāo)的大小 - 每個(gè)圖標(biāo)都易于查看和閱讀 - 并使用滑塊來切換內(nèi)容，以便可以在很小的空間中顯示大量元素。


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




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

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


9.統(tǒng)一設(shè)計(jì)主題（Maintain Your Design Theme）




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

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


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




頁(yè)腳包括很多小項(xiàng)目。 小心不要太小。 文本可以比用于網(wǎng)站主體的字體大小小一些。 圖標(biāo)或圖像需要以您選擇的尺寸保證可讀（如果看不清圖標(biāo)變大的是什么，它可能就太小了）。元素必須足夠大才能輕松點(diǎn)擊或被閱讀。 如果用戶因?yàn)樘《鵁o(wú)法閱讀或被識(shí)別，則網(wǎng)站設(shè)計(jì)就無(wú)法按預(yù)期工作。

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


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




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

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


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



雖然使用圖形元素是一個(gè)好主意，但是恰到好處和過多之間的界限有時(shí)候并不是很好把控。 謹(jǐn)慎使用這些元素， 問問自己為什么使用圖形，圖標(biāo)或照片。 如果答案是“因?yàn)樗雌饋聿诲e(cuò)”，那么請(qǐng)重新考慮它，每個(gè)元素都應(yīng)該是有用的，這將幫助你設(shè)計(jì)一個(gè)可用的頁(yè)腳，充分利用可用空間。

從Master＆Dynamic的頁(yè)腳中可以看到“少即是多”的設(shè)計(jì)理念。 簡(jiǎn)單的圖標(biāo)和文字足以讓你輕松瀏覽頁(yè)腳的內(nèi)容。


13.創(chuàng)建層次及結(jié)構(gòu)感（Create a Sense of Hierarchy）




就像網(wǎng)站設(shè)計(jì)的其他部分一樣，頁(yè)腳本質(zhì)上應(yīng)該是具有明顯的層次的。 頁(yè)腳應(yīng)位于整個(gè)站點(diǎn)層次結(jié)構(gòu)的底部（這也是它實(shí)際所在的位置）。頁(yè)腳還應(yīng)該在其“容器”中包含元素層次結(jié)構(gòu)。最重要的元素（通常是聯(lián)系信息，號(hào)召性用語(yǔ)或站點(diǎn)地圖）應(yīng)該是最突出的。 標(biāo)準(zhǔn)信息（例如版權(quán)聲明）通常是規(guī)模最小的。

Griflan Design Inc.按照他們想要的方式告訴用戶在頁(yè)腳中要做什么。 首先，用戶可以選擇給他們發(fā)郵件;，如果這不起作用，那么打電話給他們，也是一個(gè)便捷的途徑，如果這些選項(xiàng)都不起作用，請(qǐng)?jiān)L問社交媒體并關(guān)注他們。


14.考慮一個(gè)次級(jí)頁(yè)腳（Consider a Sub-Footer）



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

Smart Passive Income Blog使用多級(jí)頁(yè)腳使得內(nèi)容變得更有組織。 內(nèi)容包括了一個(gè)號(hào)召性用語(yǔ)，然后是網(wǎng)站鏈接，然后是媒體及子頁(yè)腳，其次是網(wǎng)站免責(zé)聲明和政策。 導(dǎo)航在頁(yè)腳中提供深度，使其易于瀏覽和點(diǎn)擊。


15.不要提供過多的強(qiáng)調(diào)鏈接（Don’t Underline All Those Links）




頁(yè)腳設(shè)計(jì)中做大的錯(cuò)誤是什么——允許鏈接帶有下劃線。 頁(yè)腳中仍有大量帶下劃線鏈接的網(wǎng)站，這種過時(shí)的技術(shù)不適合現(xiàn)代網(wǎng)站設(shè)計(jì)。

Baxter of California有一個(gè)干凈的頁(yè)腳，包括很多鏈接。 由于簡(jiǎn)單的設(shè)計(jì)，它沒有看起來混亂，沒有那些討厭的下劃線。


總結(jié)

頁(yè)腳可以影響你的網(wǎng)站整體的視覺，它可以告訴用戶你是誰(shuí)，他們可以做什么以及如何定位到你的網(wǎng)頁(yè)的其他位置。 它還展示了作為設(shè)計(jì)師的細(xì)微之處，例如對(duì)細(xì)節(jié)的關(guān)注以及在狹小空間中工作的能力。

頁(yè)腳是設(shè)計(jì)的重要部分。 注意它，確保包含正確的信息組合，設(shè)計(jì)元素和可用性，以充分利用每個(gè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中所有可用的空間。