实战：原型设计

是什么

原型 = 产品界面/流程的可视化草图，用来把想法讲给团队看、尽早对齐。分两级：

• 低保真：线框图，只画结构，不看颜色，最快验证流程对不对。
• 高保真：接近真实界面的效果，用于评审和演示。

PM 不必是设计师，但要能把"页面有什么、点哪里、去哪里"画清楚。

先画流程图，再画原型

1. 页面流程图：用户从哪个页面进来 → 经过哪些页面 → 到哪个页面结束。
2. 单页原型：每个页面的元素（按钮、列表、表单、提示）。

工具

• Figma（免费、最主流，优先学）→ 官网有官方教程，跟着画一遍就上手。
• 墨刀 / Axure（国内常用）。
• 流程图：ProcessOn / Figma / XMind。

一个页面的原型要素（以"创建定投计划"页为例）

[基金定投 · 创建计划]
基金名称：沪深300指数基金 A        [选择 >]
定投金额：[ 500 ] 元   （最低 10 元）
扣款周期：(●) 每周 ( ) 每月 ( ) 每日
扣款日：  [10] 日
扣款账户：招商银行 ****1234        [更换 >]
止盈/止损：[可选，点击设置]
──────────────────────────────
   [风险提示：定投不保证盈利，有亏损风险]
        [ 确认开通 ]

要点：字段齐全、有校验提示（最低金额）、有合规风险提示、主按钮明确。

常见坑

• 直接上高保真，改起来成本高 → 先用低保真对齐流程。
• 只画正常路径，不画空态/异常态（余额不足、网络失败）。
• 交互状态不全（按钮的默认/点击/禁用态）。

练习

• [ ] 注册 Figma，跟着官方教程画一个登录页。
• [ ] 把上面"创建定投计划"页在 Figma 里画成中保真原型，补上"余额不足"的异常提示页。