4、页面与导航：多页面创建、页面链接与交互流程、制作简单的点击跳转
好，咱们今天聊聊原型设计里最基础、也最核心的一环——页面与导航。
你想想看，一个原型如果只有一页，那叫单页展示。真正的交互，一定是多个页面之间来回切换的。用户点个按钮，跳到详情页；填完表单，跳到成功页。这些跳转，就是交互的骨架。
4.1 多页面创建：别让页面堆成山
我第一次做原型的时候，犯过一个傻。我把所有内容都塞在一个页面里，用图层显隐来模拟跳转。结果呢？页面一多，图层管理乱成一锅粥，改一个按钮位置要调半天。后来我学乖了——一个独立页面，就干一件事。
在 Figma 或 Axure 里创建多页面很简单。但我要说的是组织方式：
- 按功能模块分文件夹：比如「首页」、「商品详情」、「购物车」、「个人中心」。每个文件夹里放对应的页面。
- 页面命名要规范：别用「页面 1」、「页面 2」。我习惯用「模块_功能_状态」，比如「商品详情_默认态」、「商品详情_缺货态」。
- 善用组件库：导航栏、底部 Tab、按钮这些高频元素，做成组件。改一处，全局更新。省心。
4.2 页面链接与交互流程：画清楚用户怎么走
页面建好了，接下来就是连起来。说白了，就是告诉工具：用户点了这个按钮，要去哪个页面。
在 Figma 里叫「原型模式」，在 Axure 里叫「交互面板」。操作上大同小异：选中一个元素，拖一根线到目标页面。
但这里有个坑——交互流程不是乱连的。我见过有人把每个页面都连到首页，结果用户点任何地方都回首页，这显然不合理。
正确的做法是：
- 先画用户流程图：用纸笔或者思维导图，画出用户从进入到你离开的完整路径。比如：首页 → 商品列表 → 商品详情 → 加入购物车 → 结算。
- 再在原型里连线：按照流程图，一个节点一个节点地连。别跳步。
- 考虑异常流程：用户点错了怎么办？网络加载失败怎么办？这些也要连到对应的错误页或提示页。
4.3 制作简单的点击跳转：动手试试
光说不练假把式。咱们来做一个最简单的点击跳转——从首页跳到详情页。
假设你有两个页面：
- 首页：上面有一个「查看详情」按钮
- 详情页：展示商品信息，有一个「返回」按钮
在 Figma 里的操作步骤：
- 选中首页的「查看详情」按钮
- 在右侧面板切换到「原型」选项卡
- 点击「+」添加交互，选择「点击时」
- 动作选择「导航到」，目标页面选择「详情页」
- 过渡动画选「从右向左滑动」——这样看起来更自然
然后，在详情页的「返回」按钮上，做同样的操作，目标页面选「首页」，动画选「从左向右滑动」。
嗯，就这么简单。但你要记住：跳转不是目的，让用户理解他在哪里、要去哪里才是目的。所以，每个页面最好有个标题或者面包屑导航，告诉用户当前的位置。
我曾经做过一个项目，原型里跳转逻辑特别复杂，有十几个页面互相连。结果测试的时候，用户点着点着就迷路了。后来我加了一个「当前页面路径」的提示，用户才清楚自己走到哪一步了。这个细节，后来成了我所有原型的标配。
4.4 避坑指南
最后，分享几个我踩过的坑：
- 别用「悬停」做跳转：移动端没有悬停，只有点击。悬停效果只适合桌面端提示信息。
- 跳转动画别太花哨：旋转、缩放、弹跳……这些动画看着酷，但用多了用户会晕。我一般只用「滑动」和「淡入淡出」两种。
- 记得测试所有跳转：原型做完后，自己点一遍。看看有没有断链，有没有跳错页面。我习惯用「演示模式」从头到尾走一遍流程。
好了，这一章的内容就这些。多页面创建、页面链接、交互流程，说白了就是三件事：建页面、连页面、测页面。你动手做一遍，比看十遍都管用。