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

产品经理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、有修改记录,关键修改需保存文件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,458评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,030评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,879评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,278评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,296评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,019评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,633评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,541评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,068评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,181评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,318评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,991评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,670评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,183评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,302评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,655评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,327评论 2 358

推荐阅读更多精彩内容