最近有个朋友向我咨询：产品设计流程中原型、交互和视觉之间孰先孰后问题，并由此引出了原型低保真、高保真以及视觉稿之间的差异的思考。先解决我朋友的问题，交互是存在原型之中的，即设计原型的过程中也包含着添加交互的过程；而视觉稿呢，则是在原型通过评审之后，再进行设计的产物。三者的前后顺序可以大概理解为：原型-交互-视觉。
从建筑学的角度来看，大家可以将原型和蓝图（施工方案）对比理解，两者的区别在于应用场景不一样：前者应用在移动/互联网、后者应用到实体施工现场。而接下来是要探讨则是原型的三种形态——草图、低保真原型（线框图）、高保真原型之间的区别。
手绘草图
手绘草图一般应用于产品概念的形成阶段。这个阶段可能发生的场景颇多：可以是团队成员之间的头脑风暴，也可以是个人在收集及整理需求时诞生的灵思妙想，还可以是你在某个明媚阳光下漫步看到树影婆娑突然萌发的灵感。
在这个美妙的moment，兴许你会马上拿笔把它画出来，也可能立刻用电脑记下来，还有可能立即停下脚步散落在脚边的石子划开来。但无论画的怎么样，都没关系，因为这个只是灵感发生变化的开始，也就是产品原型的最初样子——草图。
手绘草图是由产品经理来给产品需求描绘出的一个雏形，主要用于梳理及向项目负责人证实产品需求是否确实存在。手绘草图，不仅可以避免对产品需求的片面理解，在一定程度也可以提高产品经理本人的思维拓展能力。
手绘草图.jpeg
低保真原型（线框图）
与草图相比，线框图显得更加完整、饱满，它明确地表达：内容大纲（什么东西、信息结构（在哪）、用户的交互行为描述（怎么操作）。主要应用在产品需求已经成型无需改动阶段，这个时候，产品的业务流程、信息架构都已经确定。产品经理在设计原型时也会遵循一定的规则，比如遵循栅格系统的布局规则、运用格式塔原理进行排版和设计。但这时的原型还是呈现为灰度图，这也是和高保真原型最大的区别。
低保真原型（线框图）.png
线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员（开发工程师、视觉设计师、文案作者和项目经理），开辟了一条辅助理解设计的通道。说得再明白点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。
一般情况下，低保真原型可以适用了大部分场景：包括向UI解说布局排版字体图标，向前端、后台攻城狮解说功能实现以及交互效果，还可以作为产品样本对接业务部门，通过沟通确保产品满足需求。当然，原型到低保真，基本可以作为展示产品经理的能力的参考之一。
高保真原型
与低保真原型相比，高保真原型的最大不同之处在于配色。不是毫无规则的五颜六色，而是符合一定规范的用色。例如上面讲到的格式塔原理：接近、相似、封闭、连续、简单。但是涉及到用色，一般会由专业的UI设计师来设计，产品经理需要做的是把已完成的视觉效果图按照交互逻辑重新制作。这样制作出来的高保真原型视觉效果棒，容易传播并且评判。
高保真原型.png
但是在很多大公司小公司，根本就不会考虑制作高保真原型，因为耗时太长，人力成本也高。在我接触的项目中，只有给建设银行的系列产品（如商城、手机银行等）做用户体验测试时有用到。
通常来说，高保真原型常应用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资；或者邀请真实（潜在）用户来测试，在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。
以上通过案例帮对原型设计感兴趣的同学厘清了草图、低保真原型（线框图）、高保真原型之间的区别。
网友评论