頁(yè)腳也精彩!網(wǎng)頁(yè)設(shè)計(jì)頁(yè)腳的15個(gè)超實(shí)用技巧
網(wǎng)站最重要的部分之一就是頁(yè)腳。是的,我是認(rèn)真的。這里也許并不適合偉大的設(shè)計(jì)或者令人印象深刻的內(nèi)容會(huì)存在的區(qū)域,但這里是用戶尋找信息的地方。所以在設(shè)計(jì)網(wǎng)站項(xiàng)目時(shí)候也不要忽略這個(gè)地方。之前打開某某“設(shè)計(jì)工作室”的網(wǎng)站,木想到界面慘不忍睹,緩過神來又注意到頁(yè)腳設(shè)計(jì)都沒有鏈接,驚呆后留意了一下,發(fā)現(xiàn)很多專業(yè)設(shè)計(jì)師有時(shí)也會(huì)草草對(duì)付頁(yè)腳設(shè)計(jì),所以今天特意把這篇文章分享出來,集合了全部頁(yè)腳設(shè)計(jì)的15個(gè)設(shè)計(jì)技巧,來學(xué)習(xí)咯!
但是你需要在這里包含哪些元素?如何組織頁(yè)腳的內(nèi)容使其不突兀并保持整體美感?你來對(duì)地方了。在這里我們將會(huì)提出一些關(guān)于如何設(shè)計(jì)好頁(yè)腳的建議,并會(huì)給出一些例子。
1.保持設(shè)計(jì)簡(jiǎn)單
是的,這是大部分設(shè)計(jì)項(xiàng)目的關(guān)鍵之一,但是這點(diǎn)也是重中之重,值得現(xiàn)在就說。在需要處理大量需要放在頁(yè)腳的信息的時(shí)候,簡(jiǎn)單設(shè)計(jì)就顯得尤為重要。堅(jiān)持清理元素,保證充足的空間并有目的地組織信息。盡量避免混亂,思考哪些元素需要出現(xiàn)在你的頁(yè)腳中,以及它們?yōu)槭裁匆谀抢?。?yè)腳的尺寸一般都跟你網(wǎng)站頁(yè)面數(shù)和信息量有關(guān)。
Agra-Culture 在頁(yè)腳中使用顏色、圖標(biāo)和文字,不過它很簡(jiǎn)單,而且流量很大。每個(gè)鏈接都易于點(diǎn)擊,綠色背景中農(nóng)場(chǎng)圖像的微妙細(xì)節(jié)是個(gè)很好的嘗試。
2. 鏈接到你的信息
網(wǎng)站頁(yè)腳中最重要的兩個(gè)鏈接分別是“關(guān)于我們”和“聯(lián)系我們”。用戶想要知道你是誰,而且想要了解你的公司和品牌。讓用戶更容易找到這些信息。還有很多人想知道你的團(tuán)隊(duì)成員以及他們的聯(lián)系方式(這是一個(gè)重要的工具。很多人弄丟了他們的名片,但會(huì)回到你的網(wǎng)站去尋找聯(lián)系人信息)
Heckford 包含了很多關(guān)于公司、社交網(wǎng)站以及他們工作信息的鏈接。
3. 包含基本聯(lián)系信息
盡管你應(yīng)該鏈接到一個(gè)完整的“聯(lián)系我們”的頁(yè)面里,在頁(yè)腳中展示相關(guān)聯(lián)系人信息也不壞。寫上主要的電話號(hào)碼、郵箱和真實(shí)地址。(如果能夠在點(diǎn)擊時(shí)自動(dòng)撥號(hào),自動(dòng)發(fā)送郵件或者展示地圖,那就是加分了)
Root Studio做了一個(gè)幾乎違背你認(rèn)為應(yīng)該是“頁(yè)腳”的一切的頁(yè)腳,不過它文字很大,而且被壓縮為一個(gè)非常簡(jiǎn)單的聯(lián)系人信息列表。(這是一個(gè)具有影響力的設(shè)計(jì)理念,方便了那些想談項(xiàng)目合作的用戶)
4. 組織頁(yè)腳的鏈接
對(duì)頁(yè)腳內(nèi)容的連接和信息進(jìn)行分類組織會(huì)給人感覺比較好。比如把聯(lián)系方式、友情鏈接、服務(wù)、社交網(wǎng)站和一些你流量最大的內(nèi)容分成幾列(或幾行)。給每個(gè)部分起一個(gè)標(biāo)題,這樣方便查看。
SugarSync 的頁(yè)腳信息包含很多易于查看的列。在“Product”,“Company”,“Learn More”和“Connect with us”的標(biāo)題下面,你可以很輕易地找到你接下來想要訪問的內(nèi)容。
有心的同學(xué)都會(huì)發(fā)現(xiàn)優(yōu)設(shè)也是類似的設(shè)計(jì),不信戳首頁(yè)看看?
5. 包含版權(quán)聲明
這行小小的文字可以成為你的救星,不要忘了它。大部分網(wǎng)站把它做在網(wǎng)站底部單獨(dú)一行,而你可以考慮把它設(shè)計(jì)得更融入頁(yè)腳。版權(quán)聲明可以手寫,也可以只放一個(gè)帶圈圈的小c標(biāo)志。其文字通常包含發(fā)布年份和版權(quán)所有者的名字??梢詾閮?nèi)容和設(shè)計(jì)建立多個(gè)版權(quán)聲明(適用于部分由第三方創(chuàng)建的網(wǎng)站)。
Adventure.com在屏幕正下方保留了一行版權(quán)聲明。這行信息使用了低對(duì)比,這樣它就不會(huì)搶了更重要的信息鏈接的風(fēng)頭。
6. 包含行動(dòng)呼吁
當(dāng)用戶瀏覽到你的頁(yè)腳的時(shí)候,給他們一些可做的事情。包括登記獲得郵件通知,或者邀請(qǐng)他們?cè)谏缃幻襟w上關(guān)注你。不要忘了這個(gè)區(qū)域在轉(zhuǎn)化點(diǎn)擊方面的價(jià)值。
Collabogive 在頁(yè)腳區(qū)域添加了一個(gè)“訂閱我們的郵件”的標(biāo)語。這個(gè)呼吁很容易看到,與頁(yè)腳設(shè)計(jì)融為一體,并且為用戶提供了一種無須加入組織就可以獲得其最新消息的方式。
7. 使用圖形元素
通常頁(yè)腳只是一個(gè)塊塊。添加logo或者圖形元素可以為其添加視覺上的趣味。只是要注意不要為這狹小的空間添加太多它難以承受的元素。想象一下這個(gè)場(chǎng)面:不僅僅寫出“關(guān)注我們的微博/博客/什么的”,還包括它們的logo。你還可以使用小的標(biāo)志性元素添加在地圖或者電話號(hào)碼之類的旁邊(不過你可能需要添加一個(gè)懸停狀態(tài)的效果以闡釋這個(gè)信息)
Kikk Festival在頁(yè)腳空間空使用logo和快速聯(lián)系人信息凸顯活動(dòng)伙伴。注意圖標(biāo)的大小——每個(gè)都易于看到,也易于閱讀。使用滑塊可以使大量信息顯示在這個(gè)狹小的空間中。
8. 注意對(duì)比度和可讀性
頁(yè)腳的信息通常都很小,非常小。這就使得文本元素與背景之間的顏色、字重以及對(duì)比變得非常重要。每個(gè)單詞都應(yīng)該是易于閱讀的。考慮使用簡(jiǎn)單的字體(無襯線字體和中等字重就很好)。選擇高對(duì)比的色彩,比如白底黑字或者黑底白字。避免使用不同的顏色或者華麗的字體。
P53 為頁(yè)腳信息使用最傳統(tǒng)(也是可讀性最好的)的文字背景組合——黑與白。
9. 包含網(wǎng)站的設(shè)計(jì)主題
網(wǎng)站頁(yè)腳看起來不應(yīng)該像是狗尾續(xù)貂。它應(yīng)該看起來與整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格相符。顏色、樣式還有圖形元素都應(yīng)該保持一致。不要為頁(yè)腳添加一個(gè)不合適的框框,這是很常見的錯(cuò)誤。從項(xiàng)目伊始就應(yīng)該思考這塊地方要如何展現(xiàn),以免在設(shè)計(jì)過程中因不匹配的元素而做不下去。
Swiths Interactive Group 的簡(jiǎn)單頁(yè)腳與整個(gè)網(wǎng)站相得益彰,網(wǎng)站一個(gè)人坐在桌前,各種物品放在桌上。簡(jiǎn)單的頁(yè)腳展示了相關(guān)信息,而且看起來與網(wǎng)站融為一體。
10. 往小做(但別太小)
通常的頁(yè)腳包含了很多小項(xiàng)目,但是注意別弄得太小了。頁(yè)腳的文字可以比網(wǎng)站主體所用的字號(hào)稍小一點(diǎn)。而圖標(biāo)和圖像要在你所選的尺寸里是可讀的(如果你看不出來這個(gè)圖標(biāo)是什么,那它就太小了)。元素必須大到易于點(diǎn)擊或觸碰。如果你的鏈接太小,或彼此挨得太近而導(dǎo)致用戶點(diǎn)不到你的鏈接,那你就蹲墻角哭去吧。
Curious Space 使用了不太傳統(tǒng)的頁(yè)腳風(fēng)格,你可以從風(fēng)格尺寸的使用中感受到它的存在。頁(yè)腳的文字稍小一些,而且比頁(yè)面中其他文字更細(xì)更輕,當(dāng)然也沒有小到看不見。
11. 多用點(diǎn)空間
由于頁(yè)腳通常都住在狹小的空間里,空間和間距就顯得很重要。給頁(yè)腳中的元素留出大量空間如同文字的行間距。足夠的間距可以讓頁(yè)腳看起來來寬松舒暢。而且方便點(diǎn)擊或觸摸。因?yàn)轫?yè)腳中的絕大部分鏈接都要鏈接到別的地方,所以這對(duì)用戶體驗(yàn)來說也很重要。你在頁(yè)腳所使用的空間不用與你網(wǎng)站主體完全一樣(尤其是對(duì)于那些需要在主體中使用小間距的網(wǎng)站)
Sailing Collective 在元素之間使用了足夠多的水平和垂直間距。然后根據(jù)類型和是否可以點(diǎn)擊分別放在一起。
12. 防備太多東西
使用圖形元素和一個(gè)頭部是個(gè)好主意,但剛剛好和太過頭僅有一線之隔。有節(jié)制地使用這些元素,并僅為特定元素使用。問問你自己為什么要使用頭部、圖標(biāo)或者照片。如果答案僅僅是“因?yàn)樗雌饋砗芎每?rdquo;,那你得重新思考一下。每個(gè)元素都應(yīng)該有其存在的意義。這會(huì)幫助你設(shè)計(jì)出可用的頁(yè)腳,而且充分利用空間。
從 Master & Dynamic 的頁(yè)腳中你可以看到少即是多的設(shè)計(jì)美學(xué)。簡(jiǎn)單的圖標(biāo)和文字可以讓你輕松瀏覽頁(yè)腳。
13. 創(chuàng)建層次感
和網(wǎng)站的其他部分一樣,頁(yè)腳也應(yīng)該有自然層級(jí)。這是兩方面的設(shè)計(jì),頁(yè)腳應(yīng)該位于整個(gè)網(wǎng)站層級(jí)的最底端(畢竟這是它該在的地方)。同時(shí)其內(nèi)部的元素也應(yīng)該具有層級(jí)。最重要元素(通常是聯(lián)系信息、或者呼吁信息或者網(wǎng)站地圖)應(yīng)該是最突出的。標(biāo)準(zhǔn)的信息,比如版權(quán)信息,通常都是這個(gè)區(qū)域里最小的。
Griflan Design Inc. 在頁(yè)腳中按照他們希望的順序告訴用戶要做什么。首先,給他們發(fā)郵件;如果發(fā)郵件沒用,給他們打電話;如果這兩種方法都沒用,在社交媒體上找他們。
14. 考慮做子頁(yè)腳
你的頁(yè)腳是否還需要一個(gè)頁(yè)腳?考慮添加一個(gè)子頁(yè)腳圖層吧(在實(shí)際應(yīng)用中這種很流行)。子頁(yè)腳非常適合放置一些額外的層級(jí),增加頁(yè)腳的空間,防止它過于密集,或者僅僅是為了給有趣的內(nèi)容提供一點(diǎn)空間。使用這個(gè)區(qū)域來突出榮譽(yù)或者行動(dòng)呼吁。
The Smart Passive Income Blog 的多層級(jí)頁(yè)腳做得很好。這里有行動(dòng)呼吁,然后是網(wǎng)站鏈接,然后是淺色鏈接社交網(wǎng)站的子頁(yè)腳,后面是免責(zé)聲明和隱私政策。頁(yè)腳導(dǎo)航的層級(jí)提供了一定的縱深,易于瀏覽和點(diǎn)擊
15. 不要在這些鏈接下添加下劃線
頁(yè)腳的最大錯(cuò)誤?讓鏈接有下劃線?,F(xiàn)在仍有很多網(wǎng)站在他們頁(yè)腳的鏈接中使用下劃線。這個(gè)過時(shí)的技術(shù)并不適用于現(xiàn)代網(wǎng)站設(shè)計(jì)。
Baxter of California 擁有一個(gè)干凈整潔并且包含大量鏈接的頁(yè)腳。多虧了這些沒有下劃線的簡(jiǎn)單鏈接,這個(gè)頁(yè)腳看起來并不雜亂。
總結(jié)
頁(yè)腳可以幫你的網(wǎng)站傳達(dá)很多信息。它會(huì)告訴用戶你是誰,網(wǎng)站都能做些什么以及如何瀏覽你的網(wǎng)站。另外它還會(huì)展示細(xì)節(jié)方面的東西,比如作為設(shè)計(jì)師對(duì)細(xì)節(jié)的關(guān)注,以及對(duì)小空間的處理能力。
頁(yè)腳是設(shè)計(jì)中的重要部分。要時(shí)刻注意。確保里面是基本信息,設(shè)計(jì)元素和可用性的最佳組合,這樣才能在每個(gè)網(wǎng)站設(shè)計(jì)項(xiàng)目中用最小的空間獲得最多可能。
本文地址:http://m.likemindfilms.com/tutorial/de2508.html
您可能還喜歡
- 干貨分享!推薦8個(gè)高清無水印無版權(quán)可商
- 國(guó)外黃色網(wǎng)站系列欣賞之一
- 7款簡(jiǎn)約線條的免費(fèi)英文字體
- 國(guó)外最好的22個(gè)配色網(wǎng)站
- 10個(gè)高清多邊形的設(shè)計(jì)背景紋理素材下載
- 2015年最優(yōu)秀的20款網(wǎng)站配色方案
- 網(wǎng)易的404公益廣告頁(yè)面
- 簡(jiǎn)潔大氣時(shí)尚網(wǎng)頁(yè)背景匯集(附下載)
- 20套免費(fèi)的純色網(wǎng)頁(yè)小圖標(biāo)
- 30個(gè)“簡(jiǎn)潔大氣國(guó)際化”的網(wǎng)頁(yè)設(shè)計(jì)欣賞
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏