關于網站地圖

0 評論 4852 瀏覽 7 收藏 8 分鐘

從前有三只小豬,長大自立了分別造房子住。老大搬來草堆堆出草屋,老二搬來木頭搭出木屋,老三搬來磚頭,砌墻,造煙囪,造出了堅固的磚房。一天晚上大灰狼相繼吹飛撞毀老大老二的草屋木屋后,來到老三家門口。進不去磚房傻眼了,看到煙囪就趴上屋頂跳進去,不料掉進鍋爐變成了大灰狼火鍋…

這故事都熟的吧。用咱常用的map表達出來呢就是下圖的樣子:

描述網站的Sitemap簡單來說也就是這么畫出來地,不復雜,但是會包括進各種流程,通向不同的頁面和結果。

Wikipedia對Sitemap解釋如下:

網站地圖描述了一個網站的架構。它可以是一個任意形式的文檔,用作網頁設計的設計工具,也可以是列出網站中所有頁面的一個網頁,通常采用分級形式。

引自維基百科creator: en:User:Trevor macinnis

 

另一個概念是XML網站地圖Sitemaps,就不作為本文討論對象了。

Sitemaps是站點管理員向搜索引擎爬蟲公布站點可被抓取頁面的協議,Sitemap文件內容必須遵循XML格式的定義。每個URL可以包含更新的周期和時間、URL在整個站點中的優先級。這樣可以讓搜索引擎更佳有效的抓取網站內容。

畫站點地圖的好處很多,需求階段可以用于和產品討論大盤,交互階段可以用于優化頁面流,開發階段可以用于架構的預鋪。畫站點地圖很容易很快,Omnigraffle、Visio、Word、PS、AI、畫圖板、QQ截屏工具、紙筆…。什么順手就用什么,不拘泥于工具。我常用的工具是Visio和AI。Visio有好用的只能連線;AI如果已有一套常用的Sitemap樣式的話也很效率,對于畫Conceptual Model或別的分析圖會更加得心應手。

我喜歡把這樣的圖放在交互說明文檔的第一頁,功能上作為后頁詳述單頁的總起,形式上讓自己的產物看著更有專業感。

怎么把Sitemap畫得更專業?

《Web信息架構》書中用的是“藍圖Blueprints”一詞。

(藍圖會顯示出網頁和其他內容組件之間的關系,可以用來塑造組織、導航以及標簽系統,通常也稱為“網站地圖”)并將Blueprints分為兩個階段——高級架構藍圖High-Level Architecture Blueprints; 詳盡的藍圖Detailed Blueprints

1,高級架構藍圖階段

高級藍圖產生在設計前期階段,通常是從制高點看網站的主頁開始,描述網站的主要欄目區域。就好比裝修房子先從調整房間結構開始。高級藍圖上可以看到頁面、頁面內組件、頁面組、以及頁面之間的關系(如下圖)。盡量利用簡單快速的工具產出高級藍圖可以促進產品層面的討論。

2,詳盡的藍圖階段

當“裝修”逐漸深入細節,欄目內部頁面關系細化成型時,就需要用到詳盡藍圖了。它描述的是網站某一欄目內部頁面的詳細關系。詳盡藍圖的主要觀眾是開發人員,描述清晰的詳盡藍圖將會幫助與開發同事的順利銜接。最終歸檔到交互文檔中的應當是詳盡藍圖。至于要畫到多詳盡,就要視項目而定。一個簡單的介紹型網站的詳盡藍圖就算從首頁開始畫完也未必很龐大。

在《Information architecture-Blueprints for the web》中,作者針對不同類型的網頁,給出了幾種Sitemap的形式:

Tree map樹型圖:

便于展示層次體系,不過當縱向層級多了之后寬度不夠用??梢酝ㄟ^結合梳子型圖來避免。

Comb map梳子型圖:

當同級內容很多時,梳子型圖可以避免圖形上的過寬。如果打算最后把Sitemap歸入word或其他文檔的話,建議使用梳子型圖將Sitemap畫成豎長型,畢竟多數電子文檔上方不適合放過寬的圖。

Star map星型圖

當網站規模很大內容層級很多時,用星型圖可以避免頂部層級相距過遠不宜檢索的麻煩。以首頁為圓心,放射狀展現各級內容會把Sitemap變得更加緊湊有條理。但是如果各局部內容類型差異很大,畫出來就容易亂。

Tab map標簽型圖

對于種屬關系較強的內容層級就適合用標簽型圖了。在層次體系完全相同的情況下,標簽型圖比樹型圖直觀高效,包含的關系一目了然,同時簡化了第二層級的展現形式和很多連接線。

(完)

來源:http://cdc.tencent.com/?p=3340

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!