「原型训练」透过原型看交互

产品经理P1阶段，除了磨炼硬技能外，还需要培养产品感。
拥有良好的产品感，是成为优秀产品经理的必要条件，那产品感怎么培养，无非从两个角度：
一、广度。涉猎足够的产品，对市场上新产品有较高的敏感度，并能快速解释其产品业务逻辑。
二、深度。对自己所负责业务的产品或者感兴趣的产品，不管是产品的价值、可行性、可用性都得有比较深刻的认识。（产品价值、可行性、可用性等3个概念源于《启示录》作者Marty Cagan对工作的总结）
手机原型手绘模板

1.jpg

2.jpg

布棉老师反复强调原型设计要「真实」：不论是「还原」时强调要用「真实的业务、真实的场景」，还是在「创造」时要追求「真实的比例，真实的文案」。
为什么在不对外的原型阶段也如此纠结「真实」？下面这个案例，或许能给你一些启发。
在2017年6月8日的，2017爱奇艺世界大会上，百度首席运营官兼董事会副主席陆奇的 PPT 引起网络热议，在一页PPT就上有三处文案错误。
百度公关部门的反馈是，由于工作流程的失误，陆奇演讲所使用的 PPT 是用来测试视频是否流畅的测试版，而非最终正式版。
我们可以看出，不仅是错别字的问题，测试版和正式版连页面布局逻辑也是完全不一样的。甚至字间距依然存在着问题。
百度PPT的这个例子充分说明了：
1、提前演习很重要，内容提前审核的重要性
2、军事演习一定要当真的来做
3、如果做到了1没做到2，那就是白搞
这个事件很值得产品经理思考。很多产品经理在日常工作中为了省事，在原型的绘制上不仅不注意细节，有时候甚至会丢失一些页面元素。
百度的事件，我想起了我一直要求我带的产品狗做原型、运营喵写运营方案、UI交互做设计的时候，一定要当真的来做。经常有PM觉得我啰嗦，要求苛刻，但实际上我觉得这就是基本的习惯和素养问题。每一次都用真实的文案，真实的素材，真实的比例，不允许占位符、不允许随便找一张图片占坑等开始做了再换。
产品经理经常会碰到，为啥产品设计、ui设计的效果图看起来很不错，上线后就很丑呢？是因为设计的时候，你拿都是美女帅哥，上线后的都是矮矬丑的头像，所以面对这样的情况，如果拿真实的头像作为设计素材，会出来完全不同的风格，也更接近于上线的版本。
https://www.zhihu.com/question/60838715/answer/181062631
对于产品同学而言，做内容真实的原型设计，可以看作是一种「自查」与「练兵」，提前暴露可能的问题，避免上线后手忙脚乱。
真实的内容对交互同学（或者出于种种原因，需要高度介入高保真原型设计的PM同学）而言，意义更为重大。不同的食物需要选择合适的容器盛放（平盘子或许造型好看，但遇上汤水多的菜就很尴尬），原型阶段的内容和设计如果搭配错位，上线后的效果就往往难以令人满意。
交互设计师：qinsman（http://qinsman.com）
《做产品框架的设计师，更要做内容的设计师》：（http://qinsman.com/1712_reality/）
以下是58转转的流程图、原型以及交互文档，是一份很惊艳的文档，供大家学习参考~ 平时工作中，无需做到这样的程度~（查看高清图片，可以：右键→在新标签打开图片）（如果图片还是小，删除地址栏上的后缀/web，就可看到无压缩的原图）

download.jpg

web.jpg

web.jpg

新入行的产品经理都对原型抱有向往的心境，其实很多有经验的产品经理一般不会一上来就画原型，而是先画页面流程再来画原型，那么什么是页面流程图呢？
1、在画交互设计/原型设计的底子，基本依据
2、用户操作过程，能从用户视角发现体验问题
3、重点突出页面元素与逻辑关系，提升原型设计的效率
为了让新人更快入行，新人应该了解信息架构图和页面流程区别
1、页面流程图：以用户视角，主要看流程的合理性。（适合于跳转复杂的产品，如电商）
2、信息架构图：以产品视角，主要看包含多少功能点。（适合于层级分明的产品，如阅读产品）
说了那么多，你们知道页面流程图究竟包含什么吗？
1、四方形：业务流程图、四方形的部分
2、流向：主干流和辅助流向
3、重点元素：每个流程重点表现和体现什么内容
画页面流程前其实也要遵循下三个原则
1、回归业务流程，明确主线
2、明确页面中重点元素
3、沟通与优化
前期我们已经准备好业务流程图和页面流程图，这时候我们就可以画原型了，那么在画原型之前我们应该清楚什么是产品原型设计。
1、产品原型即是线框图类似草图的意思
2、产品落地关键从虚拟概念到用户接触的节点
3、产品经理产出关键内容，上传下达至UI/UE等同事。
了解产品原型之后，我们应该明白什么才是好的原型

web.jpg

那么看怎么学原型设计呢？了那么多理论后，我们应该
1、一练：画原型和画画一样，多加练习。
2、二真：用真实业务、场景去画原型。
3、三用：不求完美、不炫技，做可用的原型。
新人在画原型时，肯定先从模仿开始，那么如何模仿原型关键页面呢？
1、研究流程——通过业务流程，来确定页面流程
2、确定页面框架——通过手绘方式，大概确定页面布局，定大框架
3、画原型——画模块，确定交互细节
4、大量重复——从1~3点，大量重复练习即可
理性的产品经理要避免一上来就画原型，画原型的坑随处可见，只要知道以下原则才能有效的避免踩坑。
1、产品需求、产品流程、手绘草图都没准备好，不要摸Axure
2、草图没和Boss基本确定之前，不要摸Axure
3、做产品和盖楼一样，不要一上来就搬砖
4、提前规划好再动手，避免重做和改动的出现
5、一上来先回顾“用户、场景、需求”理解本次需求的目的
6、业务流程图是块宝，没流程图肯定歇菜，等着不断的改吧
画原型看起来很简单，但是也不能乱画，在画前原型前一定要知道
1、用真实比例，真实文案
2、紧扣需求主题，不横生枝节
3、不要上额外的颜色
4、目录树清晰，阅读流畅
5、有修改记录，关键修改需保存文件