快缩短网址 · 设计速写手册
suo.run

一、序章：从混沌到清晰
在会议室里，客户像打开水龙头一样倾倒需求；在 Slack 里，产品经理把「史诗级」功能拆成 47 条消息；设计师的 Figma 画布上，颜色、字体、动效早已排兵布阵，却没人说得清「我们到底要解决什么问题」。
需求如洪水，若无河床，只会淹没一切。河床的名字，叫「需求表达」。



二、三把刻刀：把洪水雕刻成河流
1. 用户故事：一句话的北极星
格式：作为〈角色〉，我想〈行为〉，以便〈价值〉。
例：
· 作为深夜加班的设计师，我想一键把冗长竞品链接缩短为 suo.run/abc，以便在原型里保持版面整洁。
· 作为市场运营，我想批量生成带 UTM 的短链，以便追踪每个渠道的转化。
用户故事像北极星，永远指向「谁」在「什么场景」获得「什么收益」。

2. 用户流：用时间轴讲故事
把故事拆成帧：入口 → 触发 → 决策 → 结果。
工具不限：Excalidraw 的潦草线条、Miro 的便利贴、甚至餐巾纸。
例：
· 入口：用户在 Twitter 复制长链接
· 触发：粘贴到 suo.run 输入框
· 决策：选择「自定义后缀」或「随机生成」
· 结果：一键复制短链并回写 Twitter
用户流让时间可见，让团队在同一部「电影」里对话。



3. 线框：沉默的蓝图
去掉颜色、摄影、插画，只留下功能与层级。
把「缩短」「统计」「自定义域名」三个核心动作摆成三角形，像建筑师的承重墙。
线框的灰度，是设计师的留白，也是工程师的施工图。

三、实战：一场 30 分钟的需求速写
背景：suo.run 准备上线「团队协作版」。
Step 1 用户故事（5 min）
作为 5 人增长团队 Leader，我想创建共享工作区，以便成员共用短链并查看统一数据面板。



Step 2 用户流（10 min）
· 注册 / 登录 → 创建 Workspace → 邀请成员 → 生成短链 → 查看 Dashboard → 导出 CSV

Step 3 线框（15 min）
· 左栏：Workspace 列表 + 成员头像
· 主区：输入框 +「一键缩短」按钮
· 右栏：实时点击数折线图

30 分钟后，会议室里不再有人问「我们要做什么」，而是「我们何时上线」。

四、尾声：需求表达不是终点，而是对话的起点
把需求翻译成故事、流程、线框，不是为了锁死答案，而是为了让设计师、产品经理、客户与工程师在同一语言里争吵、迭代、共赢。
下一次，当客户说「我要一个像 Uber 的洗衣 App」时，请递给他一支笔，一起写下第一个用户故事。
然后，打开 suo.run，把那条过长的需求链接，剪成一句干净利落的短句，开始真正的设计。