原型图前做什么？先设计站点地图

在产品设计的纷繁细节中，站点地图（Sitemap）是PM最容易忽视却至关重要的“上帝视角”。本文通过拆解多邻国的极简线性闯关、微信的克制插件化设计、Spotify的去中心化探索三大经典案例，揭示顶级产品如何用信息架构控制用户步长与心智模型。更有AI时代高效绘制Sitemap的实战技巧，助你从“画图仔”进化为真正的架构师。

在产品经理的日常修行中，我们常被教育要“深挖需求”、“细化交互”。于是，很多 PM 习惯了拿到需求后立刻打开 Figma，在方寸之间腾挪跳转、不断对齐像素点，试图用精美的原型打动研发、设计和业务。

但往往在原型画到一半时，你会发现逻辑断了：“从这个入口进去，用户还能回来吗？”、“这个功能模块到底该归属于‘我的’还是‘首页’？”

这种“局部细节拉满，全局逻辑崩盘”的窘境，通常是因为你少了一张导航图——站点地图（Sitemap）。

一、什么是站点地图：产品设计的“上帝视角”

如果把一款产品比作一栋大楼，原型图（Prototype） 是每个房间的精装修样板间，而 站点地图（Sitemap） 就是整栋大楼的楼层索引与建筑总平面图。

简单来说，站点地图是以树状图的形式，梳理出产品内所有页面、功能模块之间的层级关系与跳转逻辑。在 PM 的视角下，它主要解决三个核心问题：

1. 信息架构（IA）的合理性： 功能堆砌是否臃肿？入口是否过深？
2. 用户步长的控制： 用户达成核心目标需要跨越几个层级？
3. 开发边界的界定： 一眼望去，整个项目有多少个页面，哪些是高频核心，哪些是边缘逻辑。

二、深度拆解：顶级产品的“骨架”哲学

好的产品经理，能从 Sitemap 中读出一个产品的“性格”。

以下是三个经典案例的深度拆解：

1. 多邻国（Duolingo）：极简主义的“线性闯关”

多邻国通过一套极其扁平化的站点地图，将复杂的“多语言学习”降维打击成了“闯关游戏”。

短步长，低认知： 从上图可见，多邻国的二级页面极少。大部分交互都在一级 Tab 的“弹窗”或“抽屉”中完成。这种设计极大地缩短了“用户步长”。题外话一句，这会带来四点好处。

缩短“用户步长”的四点好处

1. 降低“认知负荷”，对抗人性惰性：人天生是趋利避害且懒惰的。每增加一个点击、一个页面跳转，用户的认知负荷（Cognitive Load）就会随之增加。当用户打开多邻国，不需要在“选课-选章节-点开始”中纠结，而是直接进入唯一的“学习路径”，这种“无脑式”的衔接极大地降低了心理门槛，让用户在产生“要不今天就算了”的念头之前，就已经开始了学习。
2. 提高“转化率”与“完成率”：在漏斗模型中，每多一个步骤，就意味着多一个流失点。缩短步长意味着漏斗变短、变宽。对于多邻国这种工具类产品，用户从“打开 App”到“进入核心功能（学习）”的步长越短，日活（DAU）到核心行为触发的转化率就越高。
3. 营造“心流”体验（Flow State）：心流的产生需要“清晰的目标”和“即时的反馈”。如果站点地图（Sitemap）层级太深，用户会迷失在寻找功能的路径中，心流会被频繁的导航操作打断。多邻国通过扁平化设计，让用户始终处于“执行”状态而非“寻找”状态，更容易进入沉浸式的学习心流。
4. 降低“操作摩擦力”，提升爽感：每一次跳转都是一次“摩擦”。在移动端，频繁的页面加载和返回操作会带来明显的卡顿感。多邻国大量使用弹窗（Modal）和抽屉（Drawer），让用户感觉自己始终在同一个平面上操作，这种“原地解决问题”的交互方式，会让产品显得异常轻盈、顺滑。

我们来对比一下缩短步长的好处

一句话总结： 缩短步长，就是把“思考”留给产品经理，把“爽快”留给用户。这也是为什么在 Sitemap 阶段，我们就必须死磕“层级”的原因。

线性引导替代选择自由： 在“首页” Tab 中，多邻国采用强制线性的关卡设计。这种在 Sitemap 层面就定下的“线性结构”，是典型的“弱化选择，强化执行”策略。

2. 微信（WeChat）：克制背后的“插件化”逻辑

微信的 Sitemap 是产品界“克制”的典范。底部四个 Tab 十年如一日，但其内部却通过“折叠”容纳了整个互联网生态。

• 核心与插件分离： 微信将核心通讯功能（微信、通讯录）放在最高优先级，而将朋友圈、视频号、小程序等庞大生态全部“深埋”在“发现”页。
• 深埋逻辑： 这种架构保证了工具的纯粹性。只有在用户需要时，才会通过“发现”这个二级入口进入更深层的生态。

3. Spotify：发现导向的“去中心化”探索

与多邻国的线性逻辑相反，Spotify 的 Sitemap 旨在让用户在海量音乐中“迷失”并“发现”。

• 多入口触达： 同一个歌单可能出现在“首页”的推荐位，也可能出现在“搜索”的分类里。这种“网状结构”增加了内容的曝光率。
• 动态层级： Spotify 的 Sitemap 并不是死板的，它根据算法实时调整“首页”的模块顺序，体现了极强的模块化思维。

三、 站点地图的实战价值：PM 的“逻辑防火墙”

为什么说不画 Sitemap 的 PM 只是“画图仔”？因为 Sitemap 承载了比页面更深层的逻辑：

1. 拦截逻辑漏洞： 在 Sitemap 阶段，你可以轻易发现“孤岛页面”（没有入口的页面）或“死循环路径”。在纸上改一条线，比在 Figma 里改十个 Frame 要快得多。
2. 统一团队语言： 研发最怕的是“边做边改”。一张清晰的 Sitemap 能让研发一眼看出项目的技术边界，评估接口复用性，从而大幅降低沟通成本。
3. 心智模型对齐： Sitemap 反映了你希望用户如何理解这款产品。是像 Notion 那样“无限套娃”的自由，还是像微信那样“用完即走”的克制？

四、 进化：从“画笔”转向“智能体”

在 AI 2.0 时代，拆解APP流程、手绘 Sitemap 正在成为过去式。对于追求效率的 PM 来说，我们应该学会利用 AI 来完成这部分工作：

1）逻辑先行： 使用GPT、Gemini这类工具，只需输入一句业务描述，AI 就能基于海量优秀竞品案例，秒级生成一套结构严密的站点地图。你只需要让AI：生成XX app的Mermaid格式的站点地图，就可以得到如下内容：

graph TD

Root(多邻国 App) –> Tab1[

1. 学习主路径 Home]

Root –> Tab2[

2. 练习与巩固 Practice]

Root –> Tab3[

3. 排行榜 Leaderboards]

Root –> Tab4[

4. 个人中心 Profile] Root –> Tab5[

5. 商店 Shop]

Tab1 –> T1_1(单元关卡树)

Tab1 –> T1_2(关卡详细弹窗)

Tab1 –> T1_3(宝箱/奖励节点)

Tab1 –> T1_4(复习模块)

Tab2 –> T2_1(口语练习)

Tab2 –> T2_2(听力练习)

Tab2 –> T2_3(错题集

– Super)

Tab2 –> T2_4(故事集)

Tab3 –> T3_1(当前段位排名)

Tab3 –> T3_2(晋级/降级倒计时)

Tab3 –> T3_3(好友动态)

Tab4 –> T4_1(个人成就/勋章)

Tab4 –> T4_2(连胜记录)

Tab4 –> T4_3(好友搜索/邀请)

Tab4 –> T4_4(设置 Settings)

Tab5 –> T5_1(道具购买)

Tab5 –> T5_2(服装/装扮)

Tab5 –> T5_3(Super 订阅入口)

style Root fill:333,stroke-width:2px,color:f9f,stroke:ffd700,stroke:#333

2）无缝衔接： 将 AI 生成的站点地图直接导入 Figma AI。AI 能够识别 Sitemap 中的层级，自动为你搭建出对应的 Frame 框架 and 基础导航。或者你可以搜索Mermaid网站，我使用了mermaid.ai，将上面的代码内容copy进去即可得到对应的站点地图了。这可以大大加速我们对一个产品的了解。

五、 结语

一名优秀的产品经理，不应该只是“画图仔”。在动手操作任何一个像素点之前，请先跳出细节，站在上帝视角绘制出那张 Sitemap。

记住：好的产品不是看它有多少个房间（功能），而是看用户在楼里走动时，是否永远知道自己在哪，以及下一步该往哪去。

作者：探索者，公众号：探索者的神庙

本文由 @探索者 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。