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

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

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

Wikipedia對Sitemap解釋如下：

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

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

?

另一個概念是XML網(wǎng)站地圖Sitemaps，就不作為本文討論對象了。

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

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

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

怎么把Sitemap畫得更專業(yè)？

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

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

1,高級架構藍圖階段

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

2,詳盡的藍圖階段

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

在《Information architecture-Blueprints for the web》中，作者針對不同類型的網(wǎng)頁，給出了幾種Sitemap的形式：

Tree map樹型圖：

便于展示層次體系，不過當縱向?qū)蛹壎嗔酥髮挾炔粔蛴谩？梢酝ㄟ^結合梳子型圖來避免。

Comb map梳子型圖：

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

Star map星型圖

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

Tab map標簽型圖

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

（完）謝謝訪問cdc.tencent.com

• (本文出自Tencent CDC Blog，轉載時請注明出處)