新入行的产品经理都对原型抱有向往的心境，但是有经验的产品经理不会一上来就画原型，而是先画页面流程再来画原型。通过本单元的学习，你将学会如何用页面流程图规划用户行为路径、如何借助原型识别问题、减少风险、有效沟通。

1. 业务流程设计

1.1流程设计产出物

业务流程图

1.2作用

将服务的场景转化为可见的流程

1.3工具：

visio
process on

1.4流程设计步骤

- 明确用户与任务
- 确定开始和结束时的状态
- 调整中间过程顺序
- 解决异常情况
- 优化调整细节

1.5流程设计常见问题

- 产品兼容问题
- 权限管理问题
- 技术性问题率

2.原型设计

2.1产出物

页面原型图

2.2作用

将产品页面具体化

2.3工具

- Axure
- mockup
- sketch
- mocking bot

2.4原型设计步骤

（1）明确页面流程
- 功能是什么？
- 有哪些交互？

（2）绘制原型图

- 有输入必有输出
- 有输入必有限制
- 有输入必有校验

（3）要求
大公司产品经理：
①手绘稿
②低保真原型（确定元素：图片、文字、按钮、商品）

大公司交互设计师：
高保真原型（确定样式：图片大小、Px间距、字体&字号、icon 样式）

小公司产品经理：（可能没有UI设计师）
①手绘稿
②低保真原型（确定元素：图片、文字、按钮、商品）
③高保真原型（确定样式：图片大小、Px间距、字体&字号、icon 样式）

---

3.实战体验

3.1任务：

产品「AppSo」，体验整个功能逻辑：点击发布——搜索app——编写内容——等待审核——发布成功。梳理整个体验的页面流程并还原2 - 3个主要界面的低保真原型图。

3.2APPso 产品介绍

AppSo的宗旨是：让智能手机更好用的秘密。它是国内第一的数字应用社区，有了AppSo你的iphone 才是iphone 。
它为你发掘最优秀（颜值高、功能好）的移动互联网产品，教你如何用好自己的智能手机，过上有品质的数字生活。它是一款搞机玩家、产品经理、创业者等智能手机重度用户一定喜欢的APP，会让你成为一个优雅的数字生活家。

3.3使用工具

Process on
MockingBot

3.4 APPso页面流程图：

APPso页面流程图

3.5 APPso部分原型图还原

APPso原型图

---

【参考解析】

页面流程图 页面原型图