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

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

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

Wikipedia對Sitemap解釋如下：

網(wǎng)站地圖描述了一個網(wǎng)站的架構(gòu)。它可以是一個任意形式的文檔，用作網(wǎng)頁設(shè)計的設(shè)計工具，也可以是列出網(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ā)階段可以用于架構(gòu)的預(yù)鋪。畫站點地圖很容易很快，Omnigraffle、Visio、Word、PS、AI、畫圖板、QQ截屏工具、紙筆…。什么順手就用什么，不拘泥于工具。我常用的工具是Visio和AI。Visio有好用的只能連線；AI如果已有一套常用的Sitemap樣式的話也很效率，對于畫Conceptual Model或別的分析圖會更加得心應(yīng)手。

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

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

《Web信息架構(gòu)》書中用的是“藍(lán)圖Blueprints”一詞。

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

1,高級架構(gòu)藍(lán)圖階段

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

2,詳盡的藍(lán)圖階段

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

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

Tree map樹型圖：

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

Comb map梳子型圖：

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

Star map星型圖

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

Tab map標(biāo)簽型圖

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

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

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