从前有三只小猪，长大自立了分别造房子住。老大搬来草堆堆出草屋，老二搬来木头搭出木屋，老三搬来砖头，砌墙，造烟囱，造出了坚固的砖房。一天晚上大灰狼相继吹飞撞毁老大老二的草屋木屋后，来到老三家门口。进不去砖房傻眼了，看到烟囱就趴上屋顶跳进去，不料掉进锅炉变成了大灰狼火锅…

这故事都熟的吧。用咱常用的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，高级架构蓝图阶段

高级蓝图产生在设计前期阶段，通常是从制高点看网站的主页开始，描述网站的主要栏目区域。就好比装修房子先从调整房间结构开始。高级蓝图上可以看到页面、页面内组件、页面组、以及页面之间的关系（如下图）。尽量利用简单快速的工具产出高级蓝图可以促进产品层面的讨论。