打开Visio，网站拖几个矩形框，结构连上箭头——这大概是图画很多人画网站结构图的第一反应。但画完才发现，网站自己画出来的结构东西跟实际网站对不上。问题不在工具，图画在于动手之前没想清楚网站到底怎么组织。网站

网站结构图不是结构装饰画，它是图画一张地图。地图画错了，网站后面所有导航设计、结构URL规划、图画SEO优化都会跟着歪。网站我见过一个电商站，结构结构图上把「限时特卖」放在一级栏目，图画结果上线三个月，这个栏目的流量入口全靠首页banner撑着，频道页本身的自然搜索流量几乎为零。后来复盘发现，用户根本不从这个入口进，他们习惯从商品分类页跳转。结构图跟用户行为脱节了。

所以画之前，先做一件事：把网站现有的页面列出来。别急着归类，先列。首页、关于我们、产品列表、产品详情、新闻列表、新闻详情、联系我们、购物车、结算页……能列多少列多少。这一步很笨，但跳不过去。拿Excel或者一张白纸都行，我习惯用便利贴，一张写一个页面，贴满一墙，然后开始挪。

挪的过程就是建立层级。首页永远在最上面，下面挂一级栏目。一级栏目怎么定？看业务逻辑，不看设计美感。一个卖工业配件的B2B站，一级栏目可能是「产品中心」「解决方案」「技术支持」「关于我们」。一个个人博客，一级栏目可能就是「文章」「项目」「关于」。这里有个坑：别把「首页」之外的所有东西都塞进一级栏目。有些页面属于功能页，比如登录、注册、搜索 results，它们不参与导航层级，画的时候单独标出来就行。

层级定完，开始画线。工具随便，Visio、XMind、甚至PPT都行。关键是线的方向要统一——从上到下，或者从左到右，别混着来。我偏好从上到下，因为大多数人看结构图习惯纵向扫。每个框里写页面名称，框下面可以加一行小字标注URL路径。比如「产品列表」下面写 /products/，「产品详情」写 /products/{ id}/。这样画出来的图直接能拿去跟开发对需求。

画到第三层就该停了。再往下画，图会变成蜘蛛网，没人看得清。三级以下的页面用文字说明补充，比如「产品详情页下含：规格参数、用户评价、相关推荐」。这些内容不需要在图上占位置，但得让看的人知道它们存在。

有个细节容易忽略：把导航方式标出来。全局导航、面包屑、侧边栏、页脚导航，用不同颜色的线区分。比如全局导航用实线，面包屑用虚线，页脚导航用点线。这样一眼就能看出哪个页面从哪些路径可以到达。之前有个项目，结构图画完发现「帮助中心」只能从页脚进，全局导航里没有入口。这就是结构图暴露出来的问题——用户得滚到页面最底部才能找到帮助，体验肯定差。

最后说一个反常识的点：网站结构图不是画一次就完事的。上线后跑三个月，拉一遍搜索日志和点击热图，你会发现有些页面之间的跳转关系跟当初设想的不一样。这时候把结构图翻出来，改。我自己的博客结构图改过四版，第一版把「笔记」和「文章」分成两个一级栏目，后来发现用户根本不区分，合并成一个「写作」栏目后，跳出率降了将近两成。

画结构图这件事，工具占两成，思考占八成。想清楚了再动手，比画完再改省事得多。