App原型设计：低成本验证你的想法

很多独立开发者在有了一个 App 点子之后，第一反应是打开 IDE 开始写代码。写了三周，功能做了一半，拿给朋友看，对方一句“这个流程我没看懂”就把热情浇灭了大半。问题不在代码，而在于跳过了原型设计这一步。原型不是设计师的专属工作，对个人开发者来说，它是成本最低的验证手段。

原型解决的是“想清楚”的问题

代码解决“怎么做”，原型解决“做什么”和“为什么这样排”。在纸上或工具里画三五个页面，你会被迫回答几个平时容易含糊过去的问题：

• 用户打开 App 第一眼看到什么，主操作按钮在哪里；
• 完成一个核心任务需要点几次，中间有没有多余的确认页；
• 空状态、加载中、出错这三种情况分别长什么样；
• 数据从哪来，哪些字段是必须的，哪些可以后置。

这些问题在原型阶段改动的成本几乎为零，等写完接口再改，就要动数据库和页面逻辑，代价高出一个量级。

三档保真度，按阶段选

低保真：纸笔和线框图

适合想法刚成型的时候。一支笔、几张 A4 纸，把主要页面画成方块加文字，重点标注页面之间的跳转关系。这个阶段不要纠结颜色和字体，关注信息层级和路径长度。画完自己走一遍流程，通常能砍掉两三个不必要的页面。

中保真：可点击的线框原型

用 Figma、Axure 或即时设计这类工具，把纸上的内容搬到画布上，加上页面跳转，做成可以点的原型。中保真的价值在于能拿给别人测试：把手机递给对方，说“帮我注册一下”，然后闭嘴观察。对方卡在哪、犹豫多久、点错哪个按钮，都是真实反馈。独立开发者没有用户研究团队，这种五分钟的走廊测试就是最实用的方法。

高保真：接近成品的视觉稿

确定流程没问题之后，再做视觉层。高保真原型主要用于两件事：一是自己开发时对照还原，二是需要找合作方或早期用户展示时提升说服力。对个人项目来说，高保真不必每个页面都做，把首页、核心功能页和付费页做精细即可。

用代码做原型的取舍

有些开发者习惯直接用前端代码搭原型，这在小程序或 App 场景下也可行。比如用 uni-app 或 Flutter 写几个静态页面，数据写死，只验证交互。优点是手感真实，缺点是容易陷进细节，写着写着就开始调样式、接接口，原型就变成了半成品。

比较稳妥的做法是设定时间盒：给自己半天到一天，只做页面和跳转，不写业务逻辑，不做状态管理。时间一到就停下来，拿去给人看。原型的目标是获得反馈，不是交付代码。

// 原型阶段常见的假数据写法，够用就行
const mockUser = {
  name: '测试用户',
  avatar: '',
  isVip: false
}

// 页面里直接引用，不请求接口
Page({
  data: { user: mockUser },
  onLoad() {
    // 留空，等原型验证通过再补逻辑
  }
})

原型评审时该看什么

拿到反馈后，不要急着逐条改。先归类：

• 流程问题：用户找不到入口、步骤太多、返回逻辑混乱，这类必须改；
• 认知问题：按钮文案看不懂、图标含义不明，改文案和图标即可；
• 偏好问题：颜色不好看、圆角太大，记下来但不优先处理。

判断标准很简单：如果三个以上测试者在同一个位置卡住，那就是设计问题，不是用户问题。

原型的终点是开发清单

一份好的原型走到最后，应该能直接拆出开发任务。每个页面标注清楚：需要哪些数据、调用哪个接口、有哪些交互状态、跳转到哪里。这份清单比任何需求文档都直观，也方便你在开发过程中随时对照，避免做到一半又回头改结构。

对独立开发者来说，原型设计不是额外负担，而是把返工提前消化掉的方式。花一天画清楚，可能省下一周的无效编码。