原型不是“画得好看”，而是“用得顺手”。本文将从视觉统一、交互逻辑、协作效率三大维度出发，构建一套可落地的原型规范框架，帮助团队把原型从“演示工具”变成真正的“沟通语言”。

作为一个做了 5 年产品的人，见过太多团队因为原型没规范，导致开发反复改、测试一堆坑、上线后用户骂的情况。原型设计不是画个框框摆点按钮就行，里面藏着能让团队效率翻倍的门道。今天就用大白话聊聊原型设计该有的规范，新手照着做能少走 90% 的弯路。

一、先搞懂：为什么要有原型设计规范？

上周帮朋友看他们团队的原型，同一个返回按钮，有的页面是左箭头，有的是文字 “返回”，还有的是圆形图标。开发问他按哪个做，他说 “随便，差不多就行”—— 结果上线后用户投诉：“这 APP 是不是半成品？按钮长得都不一样”。

原型规范本质是 “统一语言”：

• 对产品：避免自己前后矛盾（比如昨天画的表单在左边，今天画到右边）
• 对开发：减少沟通成本（不用反复确认“这个弹窗点确定后跳哪”）
• 对用户：降低学习成本（熟悉一个按钮，其他页面不用重新适应）

二、原型设计的 3 个核心原则（不懂这个，规范等于白设）

1. 别让用户 “猜”—— 符合认知习惯

用户用产品时，大脑会自动调用过往经验。比如：

• 看到“×”就知道是关闭
• 灰色按钮默认是不可点
• 输入框有下划线表示可编辑

去年做教育 APP 时，我们想搞创新，把 “提交作业” 做成了旋转图标，结果用户反馈 “找不到提交按钮”。后来改回文字按钮，使用率立刻涨了 30%。

记住：创新可以有，但别在基础交互上挑战用户习惯。

2. 让操作 “顺”—— 逻辑自洽

原型里的每个操作都要有明确的因果关系。比如：

• 点“保存”后，要么显示“保存成功”，要么提示“哪里填错了”
• 选“男/女”后，性别相关的选项（如“怀孕周数”）要自动隐藏
• 购物车删商品时，总价要实时变

见过最离谱的原型：点 “支付” 后直接跳首页，既没支付结果页，也没订单列表入口。开发按这做了，测试时差点把手机摔了。

3. 给团队 “留路”—— 可落地

别画 “技术实现不了” 的原型。比如：

• 别在H5里设计“下拉刷新时背景渐变动画”（开发要加3天班）
• 别让列表同时支持“左滑删除+右滑置顶+长按多选”（逻辑容易冲突）

不确定能不能做？画之前问开发：“这个交互大概要多少工时？”

三、各环节规范（附避坑指南）

1. 页面结构

• 顶部：放标题+核心操作（返回、保存）
• 中部：放主要内容（列表、表单、图片）
• 底部：放高频操作（确认、取消、导航）

避坑点：别在一屏里塞超过 3 个核心任务。比如电商详情页，核心是 “看规格 + 加购 + 购买”，别再加 “领券 + 关注 + 分享” 的大按钮。

2. 组件使用

• 按钮：主按钮（1个/页，绿色）、次按钮（2个内，灰色）
• 输入框：加提示文字（如“请输入手机号”），错误时标红+提示（如“格式不对哦”）
• 弹窗：分“确认型”（有取消按钮）和“提示型”（3秒后自动关）

避坑点：别自己造组件。比如想要 “选择日期”，直接用系统日历组件，别画个自定义日历（开发哭晕在厕所）。

3. 标注说明

这是最容易偷懒，但最影响效率的环节。必须标清楚：

• 跳转关系：点A按钮→到B页面（用箭头线画出来）
• 条件逻辑：如果用户没登录→弹窗提示登录（用注释写）
• 特殊状态：空列表时显示“暂无数据”（画个空状态页面）

见过只画了 “有数据的列表”，没画 “空列表” 的原型，开发直接做成了白屏 —— 用户以为 APP 崩了。

四、工具选择（新手友好版）

• 简单原型：墨刀（拖组件快，适合移动端）
• 复杂原型：Axure（能做交互逻辑，适合PC端）
• 协作原型：Figma（团队实时改，不用传文件）

别纠结工具，能把规范落地的就是好工具。

最后想说

原型设计规范不是束缚，是让产品少走弯路的 “导航”。刚开始可能觉得麻烦，但坚持 2 个项目后会发现：开发提的问题少了，测试出的 bug 少了，用户用得顺了 —— 这才是产品人最想看到的结果。

如果团队还没规范，从今天开始：先统一组件库，再明确标注规则，慢慢迭代。有疑问可以评论区问，看到就回。

本文由 @颜曦 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务