国产亚洲一卡2卡3卡四卡国色天香_ 合肥網(wǎng)頁(yè)設計培訓_15個(gè)技巧教你設計網(wǎng)頁(yè)的頁(yè)腳

合肥網(wǎng)頁(yè)設計培訓_15個(gè)技巧教你設計網(wǎng)頁(yè)的頁(yè)腳

合肥網(wǎng)頁(yè)設計培訓博榮教育學(xué)校是一個(gè)全方位、多功能、一體化的培訓平臺，每年都會(huì )造就一大批復合型、技能型、專(zhuān)業(yè)型的實(shí)用人才，為社會(huì )、為*、為自己創(chuàng )造了財富。

說(shuō)個(gè)事兒，之前打開(kāi)某“設計工作室”的網(wǎng)站，木想到界面慘不忍睹，緩過(guò)神來(lái)又注意到頁(yè)腳設計都沒(méi)有鏈接，驚呆后留意了一下，發(fā)現很多專(zhuān)業(yè)設計師有時(shí)也會(huì )草草對付頁(yè)腳設計，所以今天特意把這篇文章分享出來(lái)，集合了全部頁(yè)腳設計的15個(gè)設計技巧，來(lái)學(xué)習咯！

你網(wǎng)站*重要的部分之一就是頁(yè)腳。是的，我是認真的。這里也許并不適合偉大的設計或者令人印象深刻的內容會(huì )存在的區域，但這里是用戶(hù)尋找信息的地方。所以在設計網(wǎng)站項目時(shí)候也不要忽略這個(gè)地方。

但是你需要在這里包含哪些元素？如何組織頁(yè)腳的內容使其不突兀并保持整體美感？你來(lái)對地方了。在這里我們將會(huì )提出一些關(guān)于如何設計好頁(yè)腳的建議，并會(huì )給出一些例子。

1.保持設計簡(jiǎn)單

是的，這是大部分設計項目的關(guān)鍵之一，但是這點(diǎn)也是重中之重，值得現在就說(shuō)。在需要處理大量需要放在頁(yè)腳的信息的時(shí)候，簡(jiǎn)單設計就顯得尤為重要。堅持清理元素，保證充足的空間并有目的地組織信息。盡量避免混亂，思考哪些元素需要出現在你的頁(yè)腳中，以及它們?yōu)槭裁匆谀抢?。?yè)腳的尺寸一般都跟你網(wǎng)站頁(yè)面數和信息量有關(guān)。

Agra-Culture 在頁(yè)腳中使用顏色、圖標和文字，不過(guò)它很簡(jiǎn)單，而且流量很大。每個(gè)鏈接都易于點(diǎn)擊，綠色背景中農場(chǎng)圖像的微妙細節是個(gè)很好的嘗試。

2. 鏈接到你的信息

網(wǎng)站頁(yè)腳中*重要的兩個(gè)鏈接分別是“關(guān)于我們”和“聯(lián)系我們”。用戶(hù)想要知道你是誰(shuí)，而且想要了解你的公司和品牌。讓用戶(hù)更容易找到這些信息。還有很多人想知道你的團隊成員以及他們的聯(lián)系方式（這是一個(gè)重要的工具。很多人弄丟了他們的名片，但會(huì )回到你的網(wǎng)站去尋找聯(lián)系人信息）

Heckford 包含了很多關(guān)于公司、社交網(wǎng)站以及他們工作信息的鏈接。

3. 包含基本聯(lián)系信息

盡管你應該鏈接到一個(gè)完整的“聯(lián)系我們”的頁(yè)面里，在頁(yè)腳中展示相關(guān)聯(lián)系人信息也不壞。寫(xiě)上主要的電話(huà)號碼、郵箱和真實(shí)地址。（如果能夠在點(diǎn)擊時(shí)自動(dòng)撥號，自動(dòng)發(fā)送郵件或者展示地圖，那就是加分了）

Root Studio做了一個(gè)幾乎違背你認為應該是“頁(yè)腳”的一切的頁(yè)腳，不過(guò)它文字很大，而且被壓縮為一個(gè)非常簡(jiǎn)單的聯(lián)系人信息列表。（這是一個(gè)具有影響力的設計理念，方便了那些想談項目合作的用戶(hù)）

4. 組織頁(yè)腳的鏈接

對頁(yè)腳內容的連接和信息進(jìn)行分類(lèi)組織會(huì )給人感覺(jué)比較好。比如把聯(lián)系方式、友情鏈接、服務(wù)、社交網(wǎng)站和一些你流量*大的內容分成幾列（或幾行）。給每個(gè)部分起一個(gè)標題，這樣方便查看。

SugarSync 的頁(yè)腳信息包含很多易于查看的列。在“Product”，“Company”，“Learn More”和“Connect with us”的標題下面，你可以很輕易地找到你接下來(lái)想要訪(fǎng)問(wèn)的內容。

6. 包含行動(dòng)呼吁

當用戶(hù)瀏覽到你的頁(yè)腳的時(shí)候，給他們一些可做的事情。包括登記獲得郵件通知，或者邀請他們在社交媒體上關(guān)注你。不要忘了這個(gè)區域在轉化點(diǎn)擊方面的價(jià)值。

Collabogive 在頁(yè)腳區域添加了一個(gè)“訂閱我們的郵件”的標語(yǔ)。這個(gè)呼吁很容易看到，與頁(yè)腳設計融為一體，并且為用戶(hù)提供了一種無(wú)須加入組織就可以獲得其*新消息的方式。

7. 使用圖形元素

通常頁(yè)腳只是一個(gè)塊塊。添加logo或者圖形元素可以為其添加視覺(jué)上的趣味。只是要注意不要為這狹小的空間添加太多它難以承受的元素。想象一下這個(gè)場(chǎng)面:不僅僅寫(xiě)出“關(guān)注我們的微博/博客/什么的”，還包括它們的logo。你還可以使用小的標志性元素添加在地圖或者電話(huà)號碼之類(lèi)的旁邊（不過(guò)你可能需要添加一個(gè)懸停狀態(tài)的效果以闡釋這個(gè)信息）

Kikk Festival在頁(yè)腳空間空使用logo和快速聯(lián)系人信息凸顯活動(dòng)伙伴。注意圖標的大小——每個(gè)都易于看到，也易于閱讀。使用滑塊可以使大量信息顯示在這個(gè)狹小的空間中。

8. 注意對比度和可讀性

頁(yè)腳的信息通常都很小，非常小。這就使得文本元素與背景之間的顏色、字重以及對比變得非常重要。每個(gè)單詞都應該是易于閱讀的?？紤]使用簡(jiǎn)單的字體（無(wú)襯線(xiàn)字體和中等字重就很好）。選擇高對比的色彩，比如白底黑字或者黑底白字。避免使用不同的顏色或者華麗的字體。

P53 為頁(yè)腳信息使用*傳統（也是可讀性*好的）的文字背景組合——黑與白。

9. 包含網(wǎng)站的設計主題

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

Swiths Interactive Group 的簡(jiǎn)單頁(yè)腳與整個(gè)網(wǎng)站相得益彰，網(wǎng)站一個(gè)人坐在桌前，各種物品放在桌上。簡(jiǎn)單的頁(yè)腳展示了相關(guān)信息，而且看起來(lái)與網(wǎng)站融為一體。

10. 往小做（但別太?。?

通常的頁(yè)腳包含了很多小項目，但是注意別弄得太小了。頁(yè)腳的文字可以比網(wǎng)站主體所用的字號稍小一點(diǎn)。而圖標和圖像要在你所選的尺寸里是可讀的（如果你看不出來(lái)這個(gè)圖標是什么，那它就太小了）。元素必須大到易于點(diǎn)擊或觸碰。如果你的鏈接太小，或彼此挨得太近而導致用戶(hù)點(diǎn)不到你的鏈接，那你就蹲墻角哭去吧。

Curious Space 使用了不太傳統的頁(yè)腳風(fēng)格，你可以從風(fēng)格尺寸的使用中感受到它的存在。頁(yè)腳的文字稍小一些，而且比頁(yè)面中其他文字更細更輕，當然也沒(méi)有小到看不見(jiàn)。

11. 多用點(diǎn)空間

由于頁(yè)腳通常都住在狹小的空間里，空間和間距就顯得很重要。給頁(yè)腳中的元素留出大量空間如同文字的行間距。足夠的間距可以讓頁(yè)腳看起來(lái)來(lái)寬松舒暢。而且方便點(diǎn)擊或觸摸。因為頁(yè)腳中的絕大部分鏈接都要鏈接到別的地方，所以這對用戶(hù)體驗來(lái)說(shuō)也很重要。你在頁(yè)腳所使用的空間不用與你網(wǎng)站主體完全一樣（尤其是對于那些需要在主體中使用小間距的網(wǎng)站）

Sailing Collective 在元素之間使用了足夠多的水平和垂直間距。然后根據類(lèi)型和是否可以點(diǎn)擊分別放在一起。

12. 防備太多東西

使用圖形元素和一個(gè)頭部是個(gè)好主意，但剛剛好和太過(guò)頭僅有一線(xiàn)之隔。有節制地使用這些元素，并僅為特定元素使用。問(wèn)問(wèn)你自己為什么要使用頭部、圖標或者照片。如果答案僅僅是“因為它看起來(lái)很好看”，那你得重新思考一下。每個(gè)元素都應該有其存在的意義。這會(huì )幫助你設計出可用的頁(yè)腳，而且充分利用空間。

從 Master & Dynamic 的頁(yè)腳中你可以看到少即是多的設計美學(xué)。簡(jiǎn)單的圖標和文字可以讓你輕松瀏覽頁(yè)腳。

13. 創(chuàng )建層次感

和網(wǎng)站的其他部分一樣，頁(yè)腳也應該有自然層級。這是兩方面的設計，頁(yè)腳應該位于整個(gè)網(wǎng)站層級的*底端（畢竟這是它該在的地方）。同時(shí)其內部的元素也應該具有層級。*重要元素（通常是聯(lián)系信息、或者呼吁信息或者網(wǎng)站地圖）應該是*突出的。標準的信息，比如版權信息，通常都是這個(gè)區域里*小的。

Griflan Design Inc. 在頁(yè)腳中按照他們希望的順序告訴用戶(hù)要做什么。首先，給他們發(fā)郵件；如果發(fā)郵件沒(méi)用，給他們打電話(huà)；如果這兩種方法都沒(méi)用，在社交媒體上找他們。

14. 考慮做子頁(yè)腳

你的頁(yè)腳是否還需要一個(gè)頁(yè)腳？考慮添加一個(gè)子頁(yè)腳圖層吧（在實(shí)際應用中這種很流行）。子頁(yè)腳非常適合放置一些額外的層級，增加頁(yè)腳的空間，防止它過(guò)于密集，或者僅僅是為了給有趣的內容提供一點(diǎn)空間。使用這個(gè)區域來(lái)突出榮譽(yù)或者行動(dòng)呼吁。

The Smart Passive Income Blog 的多層級頁(yè)腳做得很好。這里有行動(dòng)呼吁，然后是網(wǎng)站鏈接，然后是淺色鏈接社交網(wǎng)站的子頁(yè)腳，后面是免責聲明和隱私政策。頁(yè)腳導航的層級提供了一定的縱深，易于瀏覽和點(diǎn)擊

15. 不要在這些鏈接下添加下劃線(xiàn)

頁(yè)腳的*大錯誤？讓鏈接有下劃線(xiàn)?，F在仍有很多網(wǎng)站在他們頁(yè)腳的鏈接中使用下劃線(xiàn)。這個(gè)過(guò)時(shí)的技術(shù)并不適用于現代網(wǎng)站設計。

Baxter of California 擁有一個(gè)干凈整潔并且包含大量鏈接的頁(yè)腳。多虧了這些沒(méi)有下劃線(xiàn)的簡(jiǎn)單鏈接，這個(gè)頁(yè)腳看起來(lái)并不雜亂。

總結

頁(yè)腳可以幫你的網(wǎng)站傳達很多信息。它會(huì )告訴用戶(hù)你是誰(shuí)，網(wǎng)站都能做些什么以及如何瀏覽你的網(wǎng)站。另外它還會(huì )展示細節方面的東西，比如作為設計師對細節的關(guān)注，以及對小空間的處理能力。

頁(yè)腳是設計中的重要部分。要時(shí)刻注意。確保里面是基本信息，設計元素和可用性的*佳組合，這樣才能在每個(gè)網(wǎng)站設計項目中用*小的空間獲得*多可能。

【培訓機構】: 合肥博榮電腦培訓學(xué)校
咨詢(xún)熱線(xiàn):0 張老師
咨詢(xún)
地址:合肥市蜀山區，長(cháng)江西路304號鑫鵬大廈10層（三里庵國購廣場(chǎng)對面，蘇寧電器樓上）
友情提醒:報名日期:周一至周日 9:30—21:00 節假日照常報名
學(xué)校網(wǎng)址: /