【产品修行课】原型图绘制那点事

一、页面流程图

1、用来做什么

• 交互设计/原型设计的底子，基本依据。
• 代表用户的操作过程，先做页面流程能够快速发现体验问题
• 突出页面重点元素与逻辑关系，提升原型设计的效率

2、例子

3、页面流程图和信息架构图的区别

• 页面流程图主要以用户视角，主要看流程的合理性
•  信息架构图以产品视角，主要包含多少功能点
• 页面流程图适合于跳转比较复杂的产品功能，如电商、社交产品
• 信息架构图适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等

4、页面流程图包含的元素

• 四方形：表示关键触发点。异常流程为tips或者碳层
• 流向：主干流向和辅助流向

5、绘制

• 回归业务流程，明确主线
  • 页面流程一定来自于业务流程
  • 一般为业务流程中的方形部分
  • 异常流程一般为弹层或弹窗
  • 业务流程图画的好，页面流程就很简单
• 后台系统一般不做页面流程

•  明确页面中的重点元素
  • 功能在页面中，有哪些是需要表现元素
  • 增加异常流程的处理逻辑（弹层 or 提示）
  • 增加辅助的帮助页面
  • 考虑下游触发点

•  沟通与优化
  • 尽可能穷举涉及的页面，然后做减法
  • 通过原型草图，优化调整页面关键元素
  • 与UI、UE、前端研发等多沟通，有更好的效果

6、重点

• 回到业务逻辑，明确主线
• 明确每个页面的核心元素
• 通过优化进行调整

二、原型的基本功训练

1、什么是产品原型设计

（1）产品原型：线框图（草图）

（2）产品落地的关键点：从虚拟概念到用户接触的结点

（3）PM产出的关键内容：上传下达，传达给UI、UE

2、产品从原型到上线

大公司交互设计有专人做，小公司需要PM自己操作。

 3、好的原型有什么特点

（1）整体感受：页面结构清晰，跳转关系明确，与业务流程一致，完整表达用户需求

（2）独立页面：功能元素明确有序，位置关系清晰，不同状态变化清晰

（3）交互设计：清晰的交互逻辑，一致的交互方式，界面统一

4、原型还原实验——大众点评、小米有品

（1）研究流程：几个页面跳转，页面中有几个元素

（2） 确定页面框架

（3）画原型，确定交互细节

 （4）原型不要上颜色，就用黑白灰即可

（5）目录树清晰，阅读流畅

（6）有修改记录，关键修改重新保存文件

（7）小米有品