方法论 · 落地版 · 2026-10-21

从一句话,到一屏界面

正常产品不是"想到就画图"。它是一条固定链路:原话 → 人物 → 场景 → 需求 → 方块 → 界面 → 走查。每一层只做一件事,上一层的产物是下一层唯一的输入;没有需求编号的界面,不算界面。

先回答你的问题:不是。我们现在做得散,不是因为不努力,是因为一直按件产出(调研、人物、场景、图各做一份),但没有一条链把它们串起来。
从今天起只有这一条链:每个界面都必须能倒着走回一条原话——走不回去,就是拍脑袋。

一、完整链路:七层,每层一个产物绿色=已有,金色=半成品,红色=还没做。我们现在停在「结构 → 界面」这一步。

01 研究原话 · 问题清单02 人物3–5 张人物卡03 场景场景卡 · 步骤04 需求需求卡 · 编号05 结构方块图 · 流程06 界面线框 · 状态07 走查走查记录08 细化视觉 · 组件现在停在这里每一层只做一件事;上一层的产物是下一层唯一的输入。没有需求卡的界面不算界面。绿色 = 已有产物;金色 = 做了一半;红色 = 还没开始。
01

研究

输入 真实用户

产物 行为模式 + 问题清单

过关 能说出他们现在怎么凑合、什么情况下放弃

02

人物

输入 问题清单

产物 3–5 张人物卡(目标/行为/环境/挫折/替代)

过关 能选出一个主人物,并说清谁会不满意

03

场景

输入 人物卡

产物 场景卡(步骤 + 他想什么 + 可能出什么错)

过关 场景里只有目标与动作,没有控件词

04

需求

输入 场景卡

产物 需求卡(数据/功能/情境/约束 + 编号)

过关 每条都能追回某条场景;追不回就删

05

结构

输入 需求卡

产物 方块图(每块一个功能、标名字与关系、箭头表示流)

过关 用主场景走一遍,不漏块、不重复

06

界面

输入 方块图 + 需求卡

产物 线框(布局/控件/状态,含空错加载无权限)

过关 每个块上标着需求编号

07

走查

输入 线框 + 场景卡

产物 走查记录 + 修改清单

过关 正常/替代/边缘三类场景都能走通,或写明为什么不走

08

细化

输入 线框

产物 视觉、组件、动效、文案

过关 颜色/字号/间距全部从设计系统取

我们之前(散的原因)

  • 先画图 / 先写页面,再回头补需求
  • 需求、场景、图之间没有编号,互相挂不上
  • 每被问一次,就新做一件产物,没有主线
  • 所以看起来一直在动,但拼不成一个产品

现在这条链(不散的原因)

  • 每层只有一个产物,产物有固定格式
  • 每个界面块都标需求编号,能倒着走回原话
  • 下一层只读上一层,不跨层发挥
  • 先跑通 3 条链,再批量复制

二、拿一条真实需求走完整条链就用"签名前必须看到最坏结果"这一条,从阿杰的原话一直走到确认页。

01原话

阿杰说的

"我肯定要知道最坏会怎样。" · "买错了想撤销?链上不可撤销,所以我得说清楚。" · "退款失败的话,我肯定第一时间去找客服。"

来源10 人原始口述 · 阿杰

02人物

阿杰 · 主人物(首次买家)

会交易,但第一次面对"app + 代币 + 验证"。目标:买之前知道最坏会怎样;体验目标:30 秒看懂,不用查术语。

为什么是他老K只看效率、林泽只看流程、何佳只看证据;只有阿杰同时要"判断真假 + 看价格 + 知道最坏 + 能退出"。

03场景

签名前的 30 秒

他填完出价,鼠标停在"签名"上。他想知道:最多花多少?最高按什么价成交?最坏能拿回多少?费用多少?没达标怎么退?
如果这五件事看不全,他就不签,或者签了后悔——因为链上不可撤销。

场景 A阿杰第一次核验 / 出价 · 场景步骤 A-07

04需求

两条需求卡

数据需求 D-05出价前必须能看到:最多花 / 最高单价 / 最坏到账 / 费用 / 退款条件。缺一项就不许签名。

功能需求 F-04出价:填金额与最高可接受价 → 看最坏结果 → 签名;必须明确"签名后不可撤销"。

追溯D-05 / F-04 ← 场景 A-07 ← 阿杰 ← 原话

05方块

确认页 = 五个方块

每块只回答一个问题,块上标着它对应的需求编号;这时还不画控件。

① 出价摘要D-05 · 输入值
② 最坏结果五行D-05 · 核心块
③ 退款条件与入口D-05 · F-06
④ 不可撤销声明F-04
⑤ 签名按钮(唯一主按钮)F-04
06界面

把方块排成线框(还没上色)

确认出价 · Helios
出价 / 最高价$2,400 / $0.00210
最多花$2,400
最高单价$0.00210
最坏到账0 HELI(未达标)
费用$36
未达标全额退回 · 怎么退 →
签名(签名后不可撤销)
缺失任何一项 → 不允许进入签名步骤(F-04 硬规则)

每块对应:摘要=D-05 · 五行=D-05 · 退款入口=F-06 · 声明与按钮=F-04

07走查

拿三个场景打洞

正常:填 $2,400 → 五行齐全 → 签名 → 成功。✅ 通过

替代:余额不够 → 签名前预检拦住,告诉他还差多少、怎么充。✅ 已覆盖(F-04 + 预检)

边缘:部分成交 → 确认页没有说"可能部分成交" → 发现洞:补一句"可能部分成交,未成交部分原路退回",并挂到 F-05。

边缘:想取消 → 关账前可取消,确认页要写出这个入口。→ 补到 F-04。

这条链倒着走:线框上的"五行" ← D-05 ← 场景 A-07 ← 阿杰 ← 原话"要知道最坏会怎样"
只要走不回去,就不该出现在界面上。

三、怎么复用:一条需求一条链,界面是链尾的产物不是每次都重新想;固定编号、固定模板,批量跑。

固定编号(一件东西一个号)

  • 原话:Q-xx(谁说的)
  • 场景:S-xx(哪一步)
  • 需求:D-xx / F-xx / C-xx(数据/功能/情境)
  • 方块:B-xx(哪一块)
  • 界面:U-xx(哪个控件)

固定模板(每层一页)

  • 场景卡:他想干什么 / 可能出什么错 / 产品怎么接
  • 需求卡:谁 + 什么情况 + 要做什么 + 怎样算做到
  • 方块图:一块一功能 + 需求编号 + 关系箭头
  • 线框:布局 + 状态(空/错/加载/无权限)+ 编号标注

规矩只有一条:没有需求编号的界面块,不画;挂不上链的界面块,删。

四、我们现在在哪、下一步只做三件事不铺开,先跑通三条链,你就知道这事怎么落地了。