2015年2月3日 星期二

關於網頁中Footer的設計




Footer
在網頁設計中,(FOOTER)是用戶尋找資訊的地方。
所以在設計網站時也不要忽略這個地方。
FOOTER要包含哪些元素?



1.保持設計簡單

這是大部分網頁設計項目的關鍵之一,但是這點也是重中之重。在處理大量資訊放在頁腳的的時候,簡單設計就顯得尤為重要。
堅持清理元素,保證充足的空間並有目的地組織資訊。儘量避免混亂,思考哪些元素需要出現在你的頁腳中,以及它們為什麼要在那裏。
頁腳的尺寸一般都跟你網站頁面數和信息量有關。 Agra-Culture 在頁腳中使用顏色、圖示和文字,不過它很簡單,而且流量很大。每個鏈結都易於點擊,綠色背景中農場圖像的微妙細節是個很好的嘗試。


2. 連結到你的資訊


網站建置網頁設計中,頁腳中最重要的兩個鏈結分別是關於我們聯絡我們
用戶想要知道你是誰,而且想要瞭解你的公司和品牌。讓用戶更容易找到這些資訊。
還有很多人想知道你的團隊成員以及他們的聯繫方式(這是一個重要的工具。很多人弄丟了他們的名片,但會回到你的網站去尋找聯繫人資訊)
Heckford包含了很多關於公司、社交網站以及他們工作資訊的鏈結。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 包含基本聯絡資訊

在網頁設計中,鏈結到一個完整的聯絡我們的頁面裏是不可或缺的,但在頁腳中展示相關聯絡人資訊也不壞。
寫上主要的電話號碼、e-mail和真實地址。(如果能夠在點擊時自動撥號,自動發送郵件或者展示地圖,那就是加分了)
Root Studio做了一個幾乎違背你認為應該是頁腳的一切的頁腳,不過它文字很大,而且被壓縮為一個非常簡單的聯絡人資訊列表。
這是一個具有影響力的網頁設計理念,讓那些想談合作的用戶更方便。

4. 組織頁腳的鏈結

網頁設計重要的是對頁腳內容的連接和資訊進行分類組織,比如把聯繫方式、友情鏈結、服務、社交網站和一些你流量最大的內容分成幾列(或幾行)。
給每個部分起一個標題,這樣方便查看。SugarSync的頁腳資訊包含很多易於查看的列。
ProductCompanyLearn MoreConnect with us的標題下面,你可以很輕易地找到你接下來想要訪問的內容。 

5. 包含網頁版權聲明

這行小小的文字可以成為你的救星,不要忘了它。大部分網站把它做在網站底部單獨一行,而你可以考慮把它設計得更融入頁腳。
網頁設計版權聲明可以手寫,也可以只放一個帶圈圈的小c標誌。其文字通常包含發佈年份和版權所有者的名字。
可以為內容和設計建立多個版權聲明(適用於部分由第三方創建的網站)。
Adventure.com在螢幕正下方保留了一行版權聲明。這行資訊使用了低對比,這樣它就不會搶了更重要的資訊鏈結的風頭。

6. 包含行動呼籲

當用戶流覽到你的網站的頁腳時,給他們一些可做的事情。包括登記獲得郵件通知,或者邀請他們在社交媒體上關注你。不要忘了這個區域在轉化點擊方面的價值。
Collabogive在頁腳區域添加了一個訂閱我們的郵件的標語。這個呼籲很容易看到,與網頁頁腳及版面設計融為一體,並且為用戶提供了一種無須加入組織就可以獲得其最新消息的方式。

7. 使用網頁設計圖形元素

在網頁設計裡通常頁腳只是一個區塊。添加logo或者圖形元素可以為其添加視覺上的趣味。只是要注意不要為這狹小的空間添加太多它難以承受的元素。
想像一下這個場面:不僅僅寫出關注我們的微博/粉絲團/什麼的,還包括它們的logo。你還可以使用小的標誌性元素添加在地圖或者電話號碼之類的旁邊(不過你可能需要添加一個alt狀態的效果以闡釋這個資訊)
Kikk Festival在頁腳空間空使用logo和快速聯繫人資訊凸顯活動夥伴。注意圖示的大小——每個都易於看到,也易於閱讀。

8. 注意網頁設計對比度和可讀性

網頁設計裡的頁腳資訊通常都很小,非常小。這就使得文本元素與背景之間的顏色、字重以及對比變得非常重要。每個單詞都應該是易於閱讀的。
考慮使用簡單的字體(無襯線字體和中等字重就很好)。選擇高對比的色彩,比如白底黑字或者黑底白字。避免使用不同的顏色或者華麗的字體。
P53 為頁腳資訊使用最傳統(也是可讀性最好的)的文字背景組合——黑與白。

9. 包含網站設計主題

網站設計頁腳看起來不應該像是狗尾續貂。它應該看起來與整個網站的設計風格相符。顏色、樣式還有圖形元素都應該保持一致。
不要為頁腳添加一個不合適的框框,這是很常見的錯誤。
從專案開始就應該思考這塊地方要如何展現,以免在設計過程中因不匹配的元素而做不下去。
Swiths Interactive Group 的簡單頁腳與整個網站設計相得益彰,網站一個人坐在桌前,各種物品放在桌上。簡單的頁腳展示了相關資訊,而且看起來與網站融為一體。

10. 往小做(但別太小)

通常網頁頁腳包含了很多小專案,但是注意別弄得太小了。頁腳的文字可以比網站主體設計所用的字型大小稍小一點。而圖示和圖像要在你所選的尺寸裏是可讀的(如果你看不出來這個圖示是什麼,那它就太小了)。
元素必須大到易於點擊或觸碰。如果你的網頁設計鏈結太小,或彼此挨得太近而導致用戶點不到你的鏈結,那你就蹲牆角哭去吧。
Curious Space 使用了不太傳統的網頁設計頁腳風格,你可以從風格尺寸的使用中感受到它的存在。頁腳的文字稍小一些,而且比頁面中其他文字更細更輕,當然也沒有小到看不見。

11. 多用點空間

sailing.jpg (715×527)
由於網頁設計頁腳通常都住在狹小的空間裏,空間和間距就顯得很重要。給頁腳中的元素留出大量空間如同文字的行間距。足夠的間距可以讓頁腳看起來來寬鬆舒暢。而且方便點擊或觸摸。
因為頁腳中的絕大部分鏈結都要鏈結到別的地方,所以這對網頁設計用戶體驗來說也很重要。
你在頁腳所使用的空間不用與你網站主體完全一樣(尤其是對於那些需要在主體中使用小間距的網站)
Sailing Collective 在元素之間使用了足夠多的水準和垂直間距。然後根據類型和是否可以點擊分別放在一起。

12. 防備太多東西

masterd.jpg (715×517)
在網頁設計裡使用圖形元素和header是個好主意,但剛剛好和太過頭僅有一線之隔。有節制地使用這些元素,並僅為特定元素使用。
問問你自己為什麼要使用header、圖示或者照片。如果答案僅僅是因為它看起來很好看,那你得重新思考一下。每個元素都應該有其存在的意義。這會幫助你設計出可用的網頁頁腳,而且充分利用空間。
Master & Dynamic 的頁腳中你可以看到少即是多的網頁設計美學。簡單的圖示和文字可以讓你輕鬆流覽頁腳。

13. 創建層次感

和網站設計的其他部分一樣,網頁頁腳設計也應該有自然層級。這是兩方面的設計,頁腳應該位於整個網站層級的最底端(畢竟這是它該在的地方)。
同時其內部的元素也應該具有層級。最重要元素(通常是聯繫資訊、或者呼籲資訊或者網站地圖)應該是最突出的。標準的資訊,比如版權資訊,通常都是這個區域裏最小的。
Griflan Design Inc. 在頁腳中按照他們希望的順序告訴用戶要做什麼。
首先,給他們發郵件;如果發郵件沒用,給他們打電話;如果這兩種方法都沒用,在社交媒體上找他們。

14. 考慮做子頁腳

你的網頁設計裡的頁腳是否還需要一個頁腳?考慮添加一個子頁腳圖層吧(在實際應用中這種很流行)。
子頁腳非常適合放置一些額外的層級,增加頁腳的空間,防止它過於密集,或者僅僅是為了給有趣的內容提供一點空間。
The Smart Passive Income Blog 的多層級頁腳做得很好。
這裏有行動呼籲,然後是網站鏈結,然後是淺色鏈結社交網站的子頁腳,後面是免責聲明和隱私政策。頁腳導航的層級提供了一定的縱深,易於流覽和點擊

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

在網頁設計裡頁腳的最大錯誤?讓鏈結有下劃線。
現在仍有很多網站設計在他們頁腳的鏈結中使用下劃線。這個過時的技術並不適用於現代網站設計。
Baxter of California 擁有一個乾淨整潔並且包含大量鏈結的頁腳。多虧了這些沒有下劃線的簡單鏈結,這個頁腳看起來並不雜亂。

總結

網頁設計的頁腳可以幫你的網站傳達很多資訊。它會告訴用戶你是誰,網站都能做些什麼以及如何流覽你的網站。
另外它還會展示細節方面的東西,比如作為設計師對細節的關注,以及對小空間的處理能力。
網頁頁腳是網頁設計中的重要部分,要時刻注意,確保裏面是基本資訊,設計元素和可用性的最佳組合,這樣才能在每個網站設計項目中用最小的空間獲得最多可能。