modern-sitemap 回想過去這些日子以來,幾乎每個網站都會有網站地圖(sitemap)的頁面,這頁面列出了所有的網頁連結。主要的目的是幫助網站的訪問者和搜尋引擎,能順利的查詢網站上的資訊。現在,很多摩登的網站,己經把網站地圖置於網頁的註腳區(footer)了。我審視了20個網站(從大企業到小型網站),這些網站巧妙的組織了註腳的區域,以提高網站的可用性。

把網站地圖放在註腳區的好處

  • 吸引使用者的點擊,和提高參觀的時間:
    正如所知,在線上的讀者不會閱讀網頁上的所有內容,他們滾動著滑鼠,然後大概的掃了一下網頁。看到了註腳區後、接著離開。所以,放置一個 Sitemap 在註腳區可能吸引讀者的注意力,並增加網頁的點擊次數和瀏覽次數。 
  • 確認你的使用者不會錯失資訊:
    有時你的訪客可能懶的點擊網站地圖的連結,或不小心錯過。所以把網站地圖放置於註腳區,可以確認你的訪客不會錯過所有的網頁標題。 
  • 在註腳區推銷重要的頁面:
    你不需要真正的在頁腳列出所有的連結,有時可以只放置比較重要的連結,促使訪客點閱的機會。
  • 節省讀者的時間:
    有個網站地圖在網站的註腳區,讓使用者能更快速的某一頁跳到某一頁。
  • 節省訪問者的點擊次數:
    透過註腳區的網站地圖,而不是單獨一個頁面,更能節省訪問者的點擊次數。
     
  • 增加版面設計的要素:
    不知道要放什麼資訊在註腳區嗎?或許網站地圖能更豐富你的網頁,讓你的網站看起來更為壯大。

Digg

Digg 的網首區很清楚的和良好的目錄分類。他們的頁首區焦點於用戶,而註腳區焦點於公司的用戶。

digg

Mozilla - Firefox

感謝註腳區的網站地圖,讓訪客只需要瞄一眼,就可以知道各網頁會出現在網站的那個地方。

mozilla

Apple

如果你有個巨大的網站(在內容的部份),如果把全部的網站地圖放在註腳區,可能會讓人看到精神錯亂!你可以學習 Apple.com 的聰明做法,把網站地圖分割去不同的章節上。例如去 Mac 的那一區後,只會看到 Mac 那一區的網站地圖。

apple

GoodBarry

雖然 GoodBarry 沒有在註腳區放置所有的頁面連結,可是他們也列出了最為重要的連結。

goodbarry

White House

最近重新設計的白宮網站,有更好的瀏覽設計,包含了下拉式選單(dropdown menus),和註腳區的網站地圖。

whitehouse

Miro

Miro 把網站地圖另外用文字述敘為“你在找什麼?(Looking for something?)“.

miro

Six Apart

你也可以在網站地圖內去連結你其他的網站。Six Apart 就是一個很好的例子,在註腳區的 Six Apart Blog欄中,就有一些他們姐妹站的連結:Typepad,Movable 和 Vox.

sixapart

Clearspring

在 Clearspring 中,列出兩種服務的欄位:Lanuchpad 和 WidgetMedia。

clearspring

SqareSpace

在 SquareSpace’s 的網站地圖中,會告訴你己經參觀過那些網頁了。請注意,在訪問過的網站是顯示一個小小的勾選符號,而不是原先的小三角形。

sqarespace

SugarSync

sugarsync

FreeAgent Central

再一個, FreeAgent Central 簡單的就網站地圖放置在註腳區,可以連結到所有的頁面。

freeagentcentral

FiveRuns

FiveRuns 聰明的組織了網站地圖,網站地圖聚焦於他們的產品內。

fiveruns

Red Nose Day

我特別喜歡 "red nose" 註腳區的圖像設計,這使得他們網站脫穎而出。

rednoseday

Tigers

註腳區的位置太多空白了嗎?用網站地圖來填滿吧。你的網站地圖不需要太多的頁面連結,Tigers 就是一個很好的例子。

tigers

Get Satisfaction

Get Satisfaction 省略了他們的頁首區的空間 ,而把導覽列跟網站地圖放在註腳區中。

getsatisfaction

Flashloaded

Flashloaded 主要是銷售 Flash 的元件,而從他們註腳區的網站地圖,只列出他們的產品。

flashloaded

Jamie Oliver

Jamie Oliver 在註腳區也簡單明瞭的顯示網站地圖,以方便連結到網站的所有頁面。

jamieoliver

Redbrick Health

五欄式的網站地圖,良好且簡潔的設計。

redbrickhealth

FortySeven Media

我展示了很多大公司的網站了。可是如果你有一個小型網站呢?FortySeven Media就是一個很好的例子:他們在註腳要顯示出最近的部落格和最近的作品集。

fortysevenmedia

Jason Santa Maria

這是我其中最喜歡的一個網站。不只外觀優雅,而且也容易引起讀者的注意,也奠定近期的部落格網站中,一種美麗的編排方式。

jasonsantamaria

註腳地圖(註腳區的網站地圖)的設計技巧

  1. 使之分類 - 將你的連結有組織的分類。

  2. 使用標題 - 每個分類使用標題或主旨。

  3. 使之一致 - 連結的順序必需一致


創作者介紹

設計自己也設計別人

jaichang2008 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 阿言
  • 很不錯的文章

    我最近也在研究相關的東西,多謝你的分享
  • 多多交流喲~~

    jaichang2008 於 2009/06/04 13:39 回覆

  • jasminekuo
  • 感謝你
    很棒的資訊^^
  • 多多交流喲~~

    jaichang2008 於 2009/06/04 13:39 回覆

找更多相關文章與討論