從前有三只小豬，長(zhǎng)大自立了分別造房子住。老大搬來(lái)草堆堆出草屋，老二搬來(lái)木頭搭出木屋，老三搬來(lái)磚頭，砌墻，造煙囪，造出了堅(jiān)固的磚房。一天晚上大灰狼相繼吹飛撞毀老大老二的草屋木屋后，來(lái)到老三家門(mén)口。進(jìn)不去磚房傻眼了，看到煙囪就趴上屋頂跳進(jìn)去，不料掉進(jìn)鍋爐變成了大灰狼火鍋…
　　這故事都熟的吧。用咱常用的map表達(dá)出來(lái)呢就是下圖的樣子：

 
　　描述網(wǎng)站的Sitemap簡(jiǎn)單來(lái)說(shuō)也就是這么畫(huà)出來(lái)地，不復(fù)雜，但是會(huì)包括進(jìn)各種流程，通向不同的頁(yè)面和結(jié)果。
　　Wikipedia對(duì)Sitemap解釋如下：
　　網(wǎng)站地圖描述了一個(gè)網(wǎng)站的架構(gòu)。它可以是一個(gè)任意形式的文檔，用作網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)工具，也可以是列出網(wǎng)站中所有頁(yè)面的一個(gè)網(wǎng)頁(yè)，通常采用分級(jí)形式。

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

#p#　　另一個(gè)概念是XML網(wǎng)站地圖Sitemaps，就不作為本文討論對(duì)象了。
　　Sitemaps是站點(diǎn)管理員向搜索引擎爬蟲(chóng)公布站點(diǎn)可被抓取頁(yè)面的協(xié)議，Sitemap文件內(nèi)容必須遵循XML格式的定義。每個(gè)URL可以包含更新的周期和時(shí)間、URL在整個(gè)站點(diǎn)中的優(yōu)先級(jí)。這樣可以讓搜索引擎更佳有效的抓取網(wǎng)站內(nèi)容。
　　畫(huà)站點(diǎn)地圖的好處很多，需求階段可以用于和產(chǎn)品討論大盤(pán)，交互階段可以用于優(yōu)化頁(yè)面流，開(kāi)發(fā)階段可以用于架構(gòu)的預(yù)鋪。畫(huà)站點(diǎn)地圖很容易很快，Omnigraffle、Visio、Word、PS、AI、畫(huà)圖板、QQ截屏工具、紙筆…。什么順手就用什么，不拘泥于工具。我常用的工具是Visio和AI。Visio有好用的只能連線；AI如果已有一套常用的Sitemap樣式的話也很效率，對(duì)于畫(huà)Conceptual Model或別的分析圖會(huì)更加得心應(yīng)手。
　　我喜歡把這樣的圖放在交互說(shuō)明文檔的第一頁(yè)，功能上作為后頁(yè)詳述單頁(yè)的總起，形式上讓自己的產(chǎn)物看著更有專(zhuān)業(yè)感。

 
　　怎么把Sitemap畫(huà)得更專(zhuān)業(yè)？

 
《Web信息架構(gòu)》書(shū)中用的是“藍(lán)圖Blueprints”一詞。
　　（藍(lán)圖會(huì)顯示出網(wǎng)頁(yè)和其他內(nèi)容組件之間的關(guān)系，可以用來(lái)塑造組織、導(dǎo)航以及標(biāo)簽系統(tǒng)，通常也稱(chēng)為“網(wǎng)站地圖”）并將Blueprints分為兩個(gè)階段——高級(jí)架構(gòu)藍(lán)圖High-Level Architecture Blueprints; 詳盡的藍(lán)圖Detailed Blueprints
　
1,高級(jí)架構(gòu)藍(lán)圖階段
    　　高級(jí)藍(lán)圖產(chǎn)生在設(shè)計(jì)前期階段，通常是從制高點(diǎn)看網(wǎng)站的主頁(yè)開(kāi)始，描述網(wǎng)站的主要欄目區(qū)域。就好比裝修房子先從調(diào)整房間結(jié)構(gòu)開(kāi)始。高級(jí)藍(lán)圖上可以看到頁(yè)面、頁(yè)面內(nèi)組件、頁(yè)面組、以及頁(yè)面之間的關(guān)系（如下圖）。盡量利用簡(jiǎn)單快速的工具產(chǎn)出高級(jí)藍(lán)圖可以促進(jìn)產(chǎn)品層面的討論。

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

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

Tree map樹(shù)型圖：
　　便于展示層次體系，不過(guò)當(dāng)縱向?qū)蛹?jí)多了之后寬度不夠用?？梢酝ㄟ^(guò)結(jié)合梳子型圖來(lái)避免。

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

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

 
　
Tab map標(biāo)簽型圖

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

 
（完）

原文：http://cdc.tencent.com/?p=3340