一画原型,就忍不住扣细节,对齐、图标、上色,一顿操作猛如虎,结果评审时发现逻辑有问题,被批做的太花哨,浪费太多时间。

原型随性画,相同的组件,在不同页面展示都不一样,用Axure自带的原生组件就把原型画完了,被UI开发吐槽,原型太粗糙。

交互扣得太细被骂,原型画得太糙也被骂,原型到底应该画到什么程度?

要回答这个问题,先来看看,原型是什么,以及画原型的目的是什么,只有弄清楚这两个问题,才能真正利用好原型。

01. 原型

原型,又叫DEMO,可以理解为具有示范及演示功能的模型。

原型的主要作用是产品被开发出来之前,将想法或解决方案图纸化。进行定义,有了定义,团队就可以针对具体的定义来探讨方案。

原型是个小成本的解决方案,画原型不需要进行实际开发,高保真的原型除了表达解决方案外,还可以用于用户测试,在正式上线前发现问题,并调整。

02.原型的几种类型

原型按照保真程度,可以分为低保真、中保真、高保真。

1、低保真

低保真原型图,通常用于概念阶段。

在概念阶段,我们已经明确了目标用户、用户场景,基于用户场景,我们提炼了用户核心问题,然后基于问题策划了解决方案。

这个解决方案有可能是线下服务,也可能是线上产品功能。

如果是线上功能,原型就是通过界面/组件来表达。

产品功能要按某种解决组织起来,所以在画原型之前,要梳理出产品结构图,千万不要一来就画图。

梳理了大致的产品功能后,要快速勾勒出产品的样子,最好就是梳理低保真原型图。

低保真原型使用手绘稿或者线框图。

低保真原型的典型场景是头脑风暴或产品构思。

低保真原型

2、中保真

产品功能和方向进一步明确后,可以画中保真的原型,中保真原型的一个典型特征是,会展示产品的信息结构。

所以,要画中保真的原型,最好是提前梳理出信息架构。

梳理出产品(功能)结构和信息结构后,在开始动手画中保真原型。

产品结构的对象是具有一定逻辑的功能块,信息结构的对象是具体的信息/数据。

例如注册是一个功能,这个功能对应的信息有界面可见的手机号、密码、验证码,有界面不可见的注册时间、手机型号、系统版本等。

中保真的原型不用上色、不用画图标、不用做交互,主要表达产品结构、体现产品功能和信息结构。

中保真原型图

3、高保真

高保真原型图,是最接近视觉稿的原型图,有图标甚至有交互。

原型的保真度评估,可以从五个纬度:

A、视觉细化:视觉效果细化的程度,如是使用占位图还是像素级还原;

B、功能广度:涵盖了多少功能点;

C、功能深度:表明原型各个功能的详细程度,详细的功能需要梳理业务流程图,来遍历所有可能性;

D、交互性:表示产品交互部分如何展示用户,比如加载动画、切换动效等;

E、数据模型:包含用户在界面是哪个看到的是否真实的前后端数据;

高保真原型就是在以上几个纬度,都做到最细的程度。

高保真原型

03.应该画到什么程度

前面介绍了几种保真程度不一样的原型, 那么到底该选择画哪种呢?

先说刀哥的结论,概念阶段画草图,修改、确定阶段画中保真,不要画高保真。

这种操作对产品经理来说,成本是相对较小的,虽然不同阶段应该画不同保真度的原型,但要让产品经理同时输出中保真和高保真,对大部分人来说,是不太现实的。

建议高保真交给UI或UE去做,专业的人做专业的事。

所以产品经理,应该都有一套属于自己的中保真原型库。

网上有很多全面并且酷炫的组件,但是一定不要做『拿来主义』,遇着好的组件,自己画一遍,可能没别人好看,但内化成自己的,随时可以用。

这个就是模型思维,别人的组件,通常是基于别人的模型,你自己的组件才是自己的模型。

这套模型是你自己总结梳理出来的,是自己的方案库,更是自己经验的积累,更可贵。

对技术团队来说,中保真原型再加上需求描述,已经足够了。

有时我们需要跟老板领导或者业务方演示,会用到高保真原型,如果你不具备这个能力,找UI或UE帮忙吧。

产品经理的核心职责是策划、设计、项目管理,策划才是产品经理的核心价值,策划是发现用户问题,提供用户价值的关键点。

高级PM一定是策划大师。其他方面要是弱一点,就找更专业的人帮忙。

画低保真的草图,推荐用纸笔或Axure,中保真可以用Axure,高保真建议用磨刀。

记住,做【原型设计】前,先做好【产品策划】。

04.画原型的原则

1、使用灰模原型

不要在原型上使用色彩,不要抢UI的饭碗,大部分情况下,没人家专业还费时间。

2、注意对齐、重复、亲密性、对比

注意这几个方面,原型的效果就不会太差。

3、收集、整理自己的组件库,复用已有样式

产品由页面、组件、按钮组成,万变不离其宗,所有的产品,不外乎都是由这几个元素再按照某种结构和流程组建而成,多分析产品,就会发现背后的模型,形成模型,就可以复用,形成自己的经验和资产。

关于具体的设计原则,还可以关注刀哥公众号,回复"1",查看一份原型设计规范的PPT。

05. 写在最后

原型是表单产品方案的最小成本模型,分为低保真、中保真、高保真。

刀哥建议概念阶段用低保真,手绘即可,确认修改阶段画中保真,不要画高保真。

常用的工具有Axure、磨刀。画原型时,要遵循一些原则。

以上,就是刀哥对于原型画到什么程度的看法,希望对你有帮助。

推荐大家关注他的公众号:刀哥说

最后,也欢迎有问题的小伙伴加微信:yw5201a1 沟通交流。

更多干货可关注微信公众号:产品刘

··················END··················

今日研报:Mob研究院发布《2021年中国现制茶饮行业洞察报告》,公众号后台回复“ 现制茶饮 ”,即可下载完整PDF文件。

RECOMMEND

推荐阅读

一周之内,如何快速摸清一个行业?

面试中说这些话,到手的offer很容易飞

手把手教你做产品经理

面试题,谈谈一款APP的优缺点,并提出改进建议

点击“阅读原文”

查看更多干货

原型到底应该画到什么程度?被骂N次后我得出了答案相关推荐

  1. 都说产品要懂数据分析,到底要懂到什么程度?(附分析模板)

    大雄背起行囊,你旅途路上的成长驿站 这是第49个驿馆 这两天跟读者小Q聊面试的情况,被刷了几次的他,心有不甘来找我求解. 经了解,面试过程有两个特点: 1.面试官都很喜欢问数据相关的问题: 2.如果应 ...

  2. 中国的自动驾驶到底发展到了什么程度?

    来源:面包板社区 中国在自动驾驶汽车(AV)领域投入了大量资金,计划大力发展汽车工业这一新兴领域,包括技术.初创企业.测试.法律法规和部署等各个方面. 图1:在百度世界2020大会上,百度展示了其全自 ...

  3. 架构图到底怎么画?老彭带你走一波!

    前言 前两天群里有人问,架构图到底怎么画,能不能发来研究一下?手上的架构图其实挺多的,但是大多都涉密,不太方便拿出来. 不过网上公开的资料到处都是啊,随手搜罗几张来给大家分享一下,共3招,告诉你架构图 ...

  4. 国产AI绘画软件“数画”刷爆朋友圈,网友到底在画什么

    人们常说,眼见为实,只有自己亲眼见到的才会相信.但是我们都知道眼睛会产生错觉,而且人们在生活中被错觉误导的情况屡见不鲜.例如图中,你以为她们肯定是真人的照片.世界上有些事情,即使是自己亲眼所见到的也未 ...

  5. 算法训练 审美课(《审美的历程》课上有n位学生,帅老师展示了m幅画,其中有些是梵高的作品,另外的都出自五岁小朋友之手。老师请同学们分辨哪些画的作者是梵高,但是老师自己并没有答案,因为这些画看上去都像)

    问题描述 <审美的历程>课上有n位学生,帅老师展示了m幅画,其中有些是梵高的作品,另外的都出自五岁小朋友之手.老师请同学们分辨哪些画的作者是梵高,但是老师自己并没有答案,因为这些画看上去都 ...

  6. 腾讯工作心得:原型该画到什么程度?

    不知你有没有这样的经历:为了不让原型看起来丑,会纠结各种细节处理(间距.大小),结果造成工作周期延长,精力损失:为了让原型接近于真实效果,会思考各种精致布局,结果leader来一句'你现在做这么好看干 ...

  7. Axure RP从入门到精通(五十三)灵魂提问 - 画原型到底要不要加交互事件?

    产品经理在画原型时要不要加交互事件,不同的人有不同的观点,而且在实际工作中也不统一. 一:UI和UE UI设计师:用户界面设计(User Interface Designer),常用来指设计界面美观的 ...

  8. 初识原型链——怎么画一条完整的原型链

    关于原型链的知识,我刚开始就是看一篇一篇的博客,知识有点零碎,后面看了下<JS高级程序设计>,又大致整合了一下.下面记录的是,对于一条完整的原型链长什么样这个问题的思考. 一.疑惑 借用一 ...

  9. 都说产品要懂数据分析,到底要懂到什么程度?

    本文适合这几类朋友 1.还没做过数据分析,希望通过数据分析提升产品分析能力 2.野生产品,接触过数据分析,但总觉得学得不系统,没有方向 3.已经在做数据分析,但是老板觉得数据分析能力还比较差 01 为 ...

最新文章

  1. 本科生去面试算法工程师心酸的故事
  2. 高级持续性威胁检测无法检测出自定义恶意软件?
  3. Effective Java读书笔记七:泛型(部分章节需要重读)
  4. Linux popen和pclose启动shell命令的问题思考
  5. 能用python做信号处理吗_Python中的信号处理
  6. Elasticsearch学习(2)—— 常见术语
  7. python编写函数判断三角形_使用Python三角函数公式计算三角形的夹角案例
  8. dp动态规划_最长上升子序列问题
  9. 量子计算机时空穿越,科学家用量子计算机模拟时间机器 人类能否回到过去?...
  10. 最详细的双目摄像头测距离(深度)的原理
  11. cad字体安装_【CAD字体库】 3700种字体 打包下载
  12. Halcon教程十三:图像预处理
  13. mysql数据库的设计工具_MySQL Workbench,专为MySQL设计的数据库建模工具
  14. python中字符串以什么结尾_python判断字符串以什么结尾的实例方法
  15. anaconda清华镜像源使用
  16. android stop 服务,当调用stopService方法时服务不会停止
  17. h5页面 判断是在微信打开还是在浏览器打开
  18. win8连接wifi成功但受限制_win8平板电脑魔兽评测 Win8平板Pi游戏平板电脑测评PO W1流畅运行...
  19. PS海报制作的常用方法
  20. Apple quietly slips WebRTC audio, video into Safari's WebKit spec

热门文章

  1. Python小白的数学建模课-10.微分方程边值问题
  2. mingw linux socket,MingW上编译WinSocket程序undefined reference to `WSAStartup@8'报错的解决办法...
  3. mac xampp连接mysql数据库_请问在mac下xampp无法读取mysql的数据
  4. 百度贴吧发帖软件_贴吧自动发帖软件
  5. Django在根据models生成数据库表时报 __init__() missing 1 required positional argument: 'on_delete'
  6. 【测试工具】禅道项目管理工具设置触发邮箱
  7. (原码反码补码的计算)在一个8位的二进制的机器中,补码表示的整数范围是从_(1)_(小)到_(2)_(大)。这两个数在机器中的补码表示为_(3)_(小)到_(4)_(大)。数0的补码为_(5)_。
  8. 用CSS控制Table和div因撑开而变形
  9. 声笔双拼单字效率分析
  10. Unable to load native-hadoop library解决思路