注重細節(jié)!設計網(wǎng)頁頁腳的15個超實用技巧

2014-10-23    藍藍設計的小編

UI設計

一個網(wǎng)頁的頁腳容易被忽視,包括很多專業(yè)設計師有時也會草草對付頁腳設計。其實一個優(yōu)秀的頁面是無死角的。設計師們要想設計完美的頁面,更應該重視細節(jié)。所以今天特意把這篇文章分享出來,集合了全部頁腳設計的15個設計技巧,來學習學習!

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

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

先考考同學們,這里有一組體驗很贊的優(yōu)秀范例:《請聯(lián)系我!15個體驗舒適的聯(lián)系人頁面設計欣賞》,看完你可以總結出幾點呢?如果數(shù)量< 10,下面的內容就很有必要學習咯。

1.保持設計簡單

UI設計

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

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

2. 鏈接到你的信息

UI設計

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

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

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

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

4. 組織頁腳的鏈接

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

有心的同學都會發(fā)現(xiàn)優(yōu)設也是類似的設計,不信戳首頁看看?

5. 包含版權聲明

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

這行小小的文字可以成為你的救星,不要忘了它。大部分網(wǎng)站把它做在網(wǎng)站底部單獨一行,而你可以考慮把它設計得更融入頁腳。版權聲明可以手寫,也可以只放一個帶圈圈的小c標志。其文字通常包含發(fā)布年份和版權所有者的名字??梢詾閮热莺驮O計建立多個版權聲明(適用于部分由第三方創(chuàng)建的網(wǎng)站)。

Adventure.com在屏幕正下方保留了一行版權聲明。這行信息使用了低對比,這樣它就不會搶了更重要的信息鏈接的風頭。

6. 包含行動呼吁

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

7. 使用圖形元素

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

8. 注意對比度和可讀性

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

P53 為頁腳信息使用最傳統(tǒng)(也是可讀性最好的)的文字背景組合——黑與白。

嗯,配色不求出彩,但愿無錯,參考這篇:《秒變配色高手!怎么都不會錯的6條網(wǎng)頁設計配色原則》

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

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

10. 往小做(但別太小)

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

11. 多用點空間

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

12. 防備太多東西

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

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

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

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

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

14. 考慮做子頁腳

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

你的頁腳是否還需要一個頁腳?考慮添加一個子頁腳圖層吧(在實際應用中這種很流行)。子頁腳非常適合放置一些額外的層級,增加頁腳的空間,防止它過于密集,或者僅僅是為了給有趣的內容提供一點空間。使用這個區(qū)域來突出榮譽或者行動呼吁。

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

15. 不要在這些鏈接下添加下劃線

細節(jié)是魔鬼!設計網(wǎng)頁頁腳的15個超實用技巧

頁腳的最大錯誤?讓鏈接有下劃線?,F(xiàn)在仍有很多網(wǎng)站在他們頁腳的鏈接中使用下劃線。這個過時的技術并不適用于現(xiàn)代網(wǎng)站設計。

Baxter of California 擁有一個干凈整潔并且包含大量鏈接的頁腳。多虧了這些沒有下劃線的簡單鏈接,這個頁腳看起來并不雜亂。

總結

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

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔