關於網站地圖 怎麼把Sitemap畫得更專業?

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

關於網站地圖

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

這故事都熟的吧。 用咱常用的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標籤型圖

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

(完)謝謝訪問cdc.tencent.com

原文位址：HTTP://cdc.tencent.com/?p=3340