设计知识库DESIGN KBAF4 · HUMAN VERSION
01 研究02 人物03 场景04 需求05 框架06 视觉只做 5 件
ABOUT FACE 4 · LAUNCHPAD 重审

先别改界面,先按书的顺序走一遍

这不是“设计原则合集”,是一条能照着做的线:每一步先讲原书怎么做,再讲我们实际怎么做的,然后讲访谈怎么问、设计怎么改。

依据:《About Face 4》第 1–6、9–12、15–21 章 · 我们的 1012 定稿、线稿 v1/v2/v5、演示站、RootData 拆解、5 个参照产品 · 2026-10-19

怎么读每一节只看四块:原书怎么做(黄)、我们怎么做的(蓝)、访谈怎么调整(绿)、设计怎么改(红)。每节最后有一句“一句话记住”。先读每节的这一句,再回头读全文。
30 秒版

我们不是不会画界面,是跳过了前两步:没有真的看人怎么判断,就直接画了首页、项目页和出价面板。

所以现在看到的所有问题,其实是同一件事的后果:首页像竞品、项目页像代币页、验证像一枚徽章、数字对不上、手机没有方案。

修法不是再改一轮视觉,而是按书里的顺序补课:先看人 → 再建模 → 再写场景 → 再翻译需求 → 再定框架 → 最后才是视觉。

STEP 01 · 研究

先看人,不要先看竞品

原书第一件事不是画图,是去问人“你上一次是怎么做的”。竞品告诉你别人长什么样,访谈告诉你人为什么点、为什么走。

原书怎么做

找 6–12 个真实用户,做访谈 + 观察;问“上一次”的具体经过,不要问“你想要什么功能”;记录原话、动作、当时的处境。

我们实际怎么做

25+ 家竞品二手调研、老板和顾问意见、Michael 反馈、RootData 拆解;没有一手访谈。我们知道别人长什么样,不知道用户为什么点。

访谈怎么调整
  • 5 个投资人 + 3 个项目方 + 2 个验证方,共 10 人。
  • 只问“上一次”:上一次判断项目靠不靠谱,你做了什么?上一次没买,为什么?
  • 让他现场打开浏览器演示,不要只听他说。
设计怎么改
  • 这一轮先不改视觉。
  • 把 10 个人的“上一次”写成 10 个短故事。
  • 从故事里找重复动作:看收入、找证据、算最坏结果。
一句话不是再调研 10 个竞品,是调研 10 个人。
展开:这轮研究到底做了什么、缺什么

已有:30+ 路由的参照产品拆解、RootData 项目页 DOM/截图、产品定稿、线稿 v1/v2/v5、演示站验收截图。缺:任何一手访谈、任何可用性测试录像、任何“用户原话”记录。下一步产出:10 份访谈笔记,每份至少 3 个真实动作。

STEP 02 · 人物模型

不要“四类人”,要 10 种判断方式

人物模型不是年龄职业画像,是“他打开页面时先看哪、怕什么、什么时候走”。不同的人不是同一类用户,是 10 种不同的判断方式。

原书怎么做

从访谈里找行为差异,合成人物模型;分主人物、次人物、负面人物;每个人的目标分三层:生活目标、最终目标、体验目标。

我们实际怎么做

1012 文档有“四类人”表(想要什么/怕什么/在哪出现),但没有行为差异、没有主次、没有三层目标。四类人更像角色介绍,不能逼出取舍。

访谈怎么调整
  • 10 个人按“判断方式”找,不按年龄职业找。
  • 同一个问题:“你打开首页,第一眼看哪里?第二眼呢?”
  • 记录他停在哪、点了什么、在哪退出去。
设计怎么改
  • 主人物:第一次认真买币、怕被骗也怕买贵的人。
  • 负面人物:刷子;项目方/审计/运营是次人物。
  • 首页只服务主人物;项目页用左右两栏分别服务“看项目”和“看价格”。
一句话人物模型不是画像,是取舍:首页为谁做、不为谁做。
展开:10 个人分别是谁

第一次买币的上班族、只做短线的 degen、项目方创始人、独立尽调/审计、KOL/研究员、机构分析师、移动端通勤用户、传统老板、平台运营/风控、羊毛党(负面)。详细故事在 全书精读的 10 个人。

STEP 03 · 场景

把“他怕什么”写进流程

场景不是流程图。流程图讲系统怎么走,场景讲人在那一刻看到什么、怕什么、下一步敢不敢点。

原书怎么做

写三种场景:上下文场景(他当时在什么处境)、关键路径(主成功路径)、验证场景(失败、边界、异常)。每条都要有“人物 + 目标 + 障碍”。

我们实际怎么做

有一张“项目方进场到投资人拿币”的系统流程图,颗粒度是系统步骤;失败路径只有“全额退款”一句。我们只设计了顺利路径。

访谈怎么调整
  • 让用户复盘“上次最紧张的一刻”。
  • 问:“如果这一步失败,你最怕什么?你会怎么办?”
  • 记录他原话里的情绪词:怕、等、不敢、看不懂。
设计怎么改
  • 先写 5 条主路径 + 8 条失败路径。
  • 每条写:他看到什么 / 他怕什么 / 下一步是什么。
  • 优先补:未连接钱包、出价被拒、拍卖失败退款、验证不过、报告断更、claim 失败。
一句话场景不是流程图,是“人在那一刻怕什么”。
展开:失败路径清单

未连接钱包、余额不足、出价低于底价、拍卖失败退款、验证未通过、数据源断开、季度报告断更、claim 失败、托管放款延迟。每条都要有页面、文案、下一步,不能只有一句“请联系客服”。

STEP 04 · 需求

把“功能”翻译成“用户离开前必须能回答的问题”

需求不是功能清单。功能是“我们做了什么”,需求是“用户离开这个页面之前,必须搞懂什么”。

原书怎么做

从场景里抽设计需求,不写规格;每条需求要能检验。比如“投资人在 30 秒内能说出这个收入证明了什么、没证明什么”。

我们实际怎么做

产品需求定稿写的是规则和参数:费率、押金、里程碑、曲线。很强,但它是“系统怎么算”,不是“用户要理解什么”。开发能做完,用户还是不知道这跟我有什么关系。

访谈怎么调整
  • 让用户用自己的话复述规则。
  • 问:“你怎么知道这笔钱什么时候到?”
  • 他说不出来,就是需求没翻译好,不是他笨。
设计怎么改
  • 每个核心页面写一句“离开前必须能回答的问题”。
  • 首页:这里和别的 launchpad 有什么不同?
  • 项目页:这个项目凭什么真?我现在买会不会亏?
  • 出价:最坏会怎样?持仓:我的钱在哪、下一步做什么?
一句话需求不是功能表,是用户离开前必须能回答的问题。
展开:5 个页面各一句需求

首页:5 秒内说出“这里和 pump.fun 有什么不同”。项目页:30 秒内说出“收入证明了什么、没证明什么”。出价页:签字前说出“最坏亏多少、退款条件是什么”。持仓页:任意时点说出“我的钱在哪、下一步做什么”。验证页:第三方不登录也能复核“谁验的、验了什么、覆盖几个月”。

STEP 05 · 框架

先定骨架,再画皮

框架不是线框细节。框架先回答:这个页面是“项目页”还是“代币页”?用户第一眼该看到什么?手机怎么折叠?这些没拍板,画得再细也会一直改。

原书怎么做

先定交互框架:产品姿态、结构、流程、控件;框架定了再视觉。姿态不是风格,是“用户来这里做什么、页面该多主动”。

我们实际怎么做

线稿 v1/v2/v5 已经很细,但“项目页 vs 代币页”的取舍没定;双栏是布局决定,不是行为框架;移动端没有框架。所以每版都在改布局。

访谈怎么调整
  • 给用户看 2 张框架草图,不要问“喜欢哪个”。
  • 问:“你会先看哪?看完下一步点哪?”
  • 观察他在哪找不到“买/验证/退款”。
设计怎么改
  • 拍板:项目页=项目页,不是代币页;左 Token / 右 App 等宽。
  • 首页=三入口 + 三证据,banner 降第二屏。
  • 移动=只读 + 简化出价,底部抽屉。
  • 画 3 张框架图,冻结后再做视觉。
一句话先定骨架,再画皮;框架没拍板,细节都是白改。
展开:3 张框架图是什么

① 首页框架:一句话 + 三入口 + 三证据 + 双段卡;② 项目页框架:RootData 式项目头 + 左 Token / 右 App + 右栏粘性价格与 Buy/Bid;③ 移动框架:结论→价格→出价→App 指标,出价用底部抽屉。

STEP 06 · 视觉与控件

第一眼看到什么,决定他信什么

视觉不是“好不好看”,是“决策顺序”:用户第一眼该看到证据,还是涨幅?该看到一个主按钮,还是五个都在发光?

原书怎么做

视觉层级等于决策顺序;少即是多;控件要承诺正确行为;错误要在发生前防住,而不是发生后弹窗。

我们实际怎么做

深色 + 五条语义渐变 + 唯一发光按钮,设计系统是成体系的;但 Buy 按钮在网格里重复发光、“已验证”绿色和涨幅绿色同色、图表没有轴。

访谈怎么调整
  • 5 秒测试:给用户看首屏 5 秒。
  • 问:“这是什么产品?你最想点哪?你信哪条信息?”
  • 记录第一眼,不要解释。
设计怎么改
  • 首页:一句话 + 三证据 + 双段卡;banner 降级。
  • 项目页:RootData 式项目头 + 收入证据上移 + 右栏粘性。
  • 颜色:绿色只给涨跌;信任用中性/金色;每屏一个发光 CTA。
  • 图表:轴、单位、时间范围、null、来源。
一句话第一眼看到什么,决定他信什么;视觉顺序要等于决策顺序。
展开:5 秒测试怎么记

给 5 个人看首屏 5 秒,关掉页面,问三个问题:这是什么产品?你最想点哪里?你信哪条信息?记录第一反应;如果 3 个人说不出“和别的 launchpad 有什么不同”,首屏就没过。

IF ONLY 5 THINGS

如果只做 5 件事

不要同时开十条线。先做这 5 件,其他都是第二层。

  1. 先访谈 10 个人:5 个投资人、3 个项目方、2 个验证方。问“上一次”,不问“你想要什么”。
  2. 首页首屏换叙事:一句话 + 三入口(发项目 / 买项目 / 验证证明)+ 三个可核对证据;banner 降到第二屏。
  3. 项目页换骨架:RootData 式项目头 + 左 Token / 右 App + 收入证据上移 + 右栏粘性价格与 Buy/Bid。
  4. 出价面板先写最坏结果:最多花多少 / 最高单价 / 最坏到账 / 费用 / 退款条件;其余收进说明。
  5. 把验证做成一条链:结论 → 来源 → 覆盖期 → 检查项 → 链上 Proof → 本地复核,项目页/验证页/持仓页复用。
0–30 天访谈 10 人;冻结数字口径;首页首屏改版;出价面板改版。
31–60 天项目页按 RootData 骨架重排;信任链组件;8 个失败态模板;状态词统一。
61–90 天移动端只读 + 简化出价;5 人可用性测试;人物模型校准一版。
先读这一页,再去看细节这一页是“人话版”。10 个人的完整故事、RootData 逐块对照、5 个参照产品、12 章逐章判决,在 全书精读的项目诊断里;需要证据时再往下翻。
下一步:替 10 个人回答读完这一页,去 10 个人 · 10 种状态 · 替他们回答:每题替他们选一次,选完自动收成需求、优先级和“该少什么”。