關於網站地圖

　　

　　以前有三只小豬，長大自立了作別造房屋住。老大搬來草堆堆出草屋，老二搬來木實搭出木屋，老三搬來碎磚，砌牆，造煙筒，造出了卻合緊密的磚房。一天晚上大灰狼一個跟著一個吹飛撞毀老大老二的草屋木屋後，來偕老三家門跟前。進不去磚房目瞪口呆了，看見煙筒就趴上屋頂跳進去，沒想到掉進鍋爐成為了大灰狼火鍋

　　這故事都熟的吧。用咱常用的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或別的剖析圖會更加游刃有餘。

　　我喜歡把這麼的圖放在交互說明事物的文章檔的第1頁，功能上作為後頁詳述單頁的總起，方式上讓自個兒的產物看著更有專業感。

　　

　　怎麼把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