05｜用原型和讲述，让甲方提前走一遍项目

本章任务：把说好的功能画出来，边点边讲，让甲方提前试着用一遍。
准备材料：甲方确认过的规则、这次要做的功能，以及验收条件。验收条件就是“做到什么样算合格”，比如取消成功后，刷新页面仍然显示已取消。
本章产出：一套页面草稿、一份演示时怎么讲的提纲、一份修改记录，以及页面样式的约定。

好看的页面，为什么还会返工？

你把活动报名系统的页面做得很漂亮，甲方也说颜色不错。可真正用起来，他才问：“没登录怎么就能报名？审核没通过，为什么看不到原因？”

你觉得这些之前没说过，甲方却觉得本来就该有。两边都以为另一边懂了，最后只能重做。

所以这一步要做“原型”，就是先做一份可以拿来讨论的页面草稿。像装修前先看房间怎么安排：先确定门开在哪里，再考虑墙刷什么颜色。

你拿着页面，把点击以后会发生什么讲给甲方听。 一张图画不出的地方，就用文字和下一张图接上，不让甲方靠猜。

照着做：先通流程，再定细节

第一步：列页面与入口，先不要追求精美

先在纸上画几个框：活动列表、活动详情、填写报名、查看结果、后台审核。用箭头连起来，表示点哪里会去哪里。

再给每个框写几句：什么时候能进来、能看到什么、能做什么、做完去哪里。比如报名成功以后，是留在原页提示一句，还是去看自己的报名记录？按之前确认的规则来。

先不要加你觉得“应该有”的功能。甲方没确认候补名单，就别顺手画个“加入候补”。图里多一个按钮，后面就多一串需要解释和开发的事情。

这时候画得粗一点没关系。 改几个方框比重画一整套精美页面便宜。操作顺序还没确定，就先别把时间花在阴影和圆角上。

第二步：按需要选择原型方式

想让甲方挑颜色、看大概排版，图片就够用。想让他自己点按钮、看页面跳转，就做能点击的页面草稿。

可以借助 AI 生成图片，也可以让它用 HTML 写一个演示页面。HTML 就是浏览器用来显示网页的文件；这时可以只做外观和模拟点击，不用连接真实数据。

但你得主动说清楚哪里是假的。 比如点“审核通过”只是把画面换成通过，并没有真正保存。否则甲方以为已经做好，你也可能把演示页面误当成可以交出去的成品。

接口是两个程序交换信息的入口，比如页面发一句“保存这份报名”，后台返回“保存成功”。有没有真的接上接口，不能凭按钮能点击来判断。

仅作为示例，不建议作为实际项目中的提示词使用。

我想先拿页面跟甲方讨论，不准备现在做完整系统。请按已确认的功能，整理需要哪些页面、从哪里进、点完到哪里。先用简单方框表达，不增加候补等额外功能。演示里的报名信息用虚构内容，没真正保存的地方写清楚。遇到规则不明确，先列出来问我。

第三步：补齐页面状态，别只画成功画面

图解：状态会影响下一步能做什么。 查看大图

“页面状态”就是同一个页面在不同情况下长什么样。比如网购付款时，你会看到正在支付、支付成功，也可能看到网络不通。

活动报名也一样，不能只画出“一切顺利”的样子。先把会影响下一步操作的情况列出来，不需要把所有可能组合都画一遍。

页面	换个情况，会怎样？	你要讲清楚什么
活动列表	还在读取、没有活动、读取失败	是继续等，还是可以重试？
活动详情	可以报名、已经截止、已经报过	哪些按钮能点，旁边怎么解释？
填写报名	漏填、正在提交、成功、失败	填过的内容会不会消失？能不能连点？
报名记录	待审核、通过、拒绝、取消	现在还能做什么？拒绝后能否重报要另问清楚。
后台审核	没有权限、名额已满、记录刚被改过	为什么不能继续，接下来怎么处理？

比如点了“审核通过”，转圈十秒还没结果。此时不能直接写“通过了”，也不能肯定说“失败了，再点一次”。可能后台已经处理，只是结果没传回来。

你可以先在演示里表现为“暂时没查到结果，请查看最新状态”。具体怎么保证不会重复处理，下一章再讨论。现在先让甲方知道，这种情况也要有说法。

第四步：准备一份按任务讲述的演示脚本

图解：把前置条件、操作结果和规则讲出来。 查看大图

演示脚本就是你展示时手边的讲述提纲，写清先点哪里、讲什么、问什么。不是让你背台词，而是免得紧张时漏掉重要步骤。

别说“这里有报名按钮，这里有审核按钮”。直接带甲方从头走一次：现在想参加活动，接下来怎么做，做完能看到什么。

下面是讲述提纲示例，不是 AI 提示词：

顺序	你展示什么	你怎么解释
1	打开活动详情	还没截止，可以提交申请。
2	填写并提交	现在只是待审核，还没占名额。
3	切到后台看申请	这个账号只能看到分配给它的活动。
4	点审核通过	通过后占一个名额，报名端能看到结果。
5	截止前取消已通过的报名	取消后释放名额，再刷新看一次。
6	换成没权限的账号，再看满额时的审核	不该看的看不到；满额不能再审核通过，但截止前仍可提交申请。

每讲到关键一步，就问甲方实际是不是这样。别到最后只问一句“整体没问题吧”，他可能刚才没跟上，也不好意思打断。

碰到新想法，先记下来。不能为了让演示顺利，听见“顺便加一下”就答应马上做。

仅作为示例，不建议作为实际项目中的提示词使用。

请帮我准备一次给甲方看的演示提纲。从查看活动、提交报名，一直讲到后台审核和查看结果，再补上取消、没权限和审核名额已满。每一步写我该点哪里、解释什么、需要问甲方什么。只是模拟的地方明确说出来，不把没做的功能说成已经做好。

甲方确认后，怎样形成视觉规范？

视觉规范就是页面样式的共同约定，比如什么颜色表示主要按钮、标题多大、输入框之间留多少空。不写下来，AI 今天画蓝色按钮，换个会话明天又变成紫色。

先把操作顺序讲通，再根据甲方确认的页面整理这些约定。别只写“高级、简约”，那样每次都能解释成另一种样子。

至少留下一份能照着做的说明：主色用在哪里、标题和正文怎么区分、常用按钮长什么样、成功和错误怎么提示、手机屏幕变窄时怎样排。

拿真实手机看看。字是不是太小？按钮能不能点准？不用鼠标、只按键盘，能不能填完？错误别只涂成红色，还要写清楚错在哪里。

图片里的文字另存一份可修改的文字。否则改一句按钮文案就得重新作图，做页面时还可能抄错。

反馈怎样回到项目资料？

图解：规则变化要同步需求、方案和验收。 查看大图

甲方说了什么、改哪一页、最后决定怎么做，逐条记下来。只改按钮颜色，就改样式说明；如果把自动通过改成手动审核，需求、开发做法和检查步骤都得一起改。

只改图片，不改规则，会出什么事？ 你拿着新图检查，AI 却按旧文档开发。两边各有依据，最后仍然得返工。

给每版原型写上日期，说明哪版已经确认、哪些还没定。甲方认可外观，也不表示原本没问清的取消规则突然有答案了。

本章练习

甲方看到“取消报名”，说：“取消前再问一遍，而且取消后我想知道取消时间。”

先想想：弹出确认框要改哪些页面？显示取消时间，原来的数据里有没有存？谁能看这个时间？以前取消过的记录没有时间怎么办？

写下需要继续问的问题，再指出哪些资料要跟着改。别急着说“就加个弹窗，很快”。

怎样判断本章完成了？

• [ ] 能从打开活动一直演示到查看结果，不会讲到一半找不到下一页。
• [ ] 等待、失败、空列表、没有权限等情况都有交代。
• [ ] 哪些是真的、哪些只是模拟，已经说清楚。
• [ ] 甲方的修改意见有记录，规则变化也写回了其他资料。
• [ ] 页面样式有具体约定，在实际手机上能看清、能操作。
• [ ] 知道甲方确认的是哪一版，还有什么没决定。

卡住了怎么办？

甲方只说“不好看”，别马上重做整套。挑一页问：是颜色太暗、字太挤、重要按钮不明显，还是内容顺序不对？先改出一小处让他比较。

如果不确定某个效果能不能做，拿着页面和具体操作，找懂这方面的人问。不要看见 AI 画得出来，就向甲方保证实际一定做得到。

本章带走： 一套你能拿着讲清楚的页面，以及做页面时能遵守的样式约定。下一章再看看，代码到底准备怎么写。