产品原型设计的步骤(分享原型设计的基本步骤)
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505C237-0.jpg)
产品原型有很多种形式,可能是画在草稿纸上的粗略草图,也可能是对最终产品的交互式模拟。本文是为了想了解产品原型的小白而写。
我将提到几个与快速制造原型相关的术语,以及解决以下的问题。
快速制造原型入门
快速制造原型是什么?
制作原型需要什么?
快速制作原型的过程
原型应该在多大程度上体现产品?
原型的精确度指的是什么?
如何选择制作原型的工具?
原型如何做到最好:可行与不可行的做法
快速制作原型是什么?
快速制作原型是指一个重复性的过程,用来将网站或应用的样子视觉化,从而得到用户、利益相关者、开发者和设计师的反馈和认可。
如果做得好,快速制造原型可以提高你的设计质量,因为这个过程可以加强不同方面的沟通,减少有人不喜欢最终产品的风险。
制作原型需要什么?
设计一个产品原型的目的,不是为了做出完全功能版的系统,完全是出于视觉化的目的,看到呈现在用户面前的最终产品的样子。正如GV(谷歌风投)的设计合伙人博卡(Daniel Burka)说:
“理想的原型应该是有着‘金发姑娘般的质量’。如果质量太差,那没人会相信原型是真的产品。如果质量太好,那你就得没日没夜地干,而且你还做不完。你要的就是‘金发姑娘’般 的质量,不太好,不太坏,足够好就行了。”
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505C2U-1.jpg)
“金发姑娘原则”源自童话《金发姑娘和三只熊》的故事:迷路了的金发姑娘未经允许就进入了熊的房子,她尝了三只碗里的粥,试了三把椅子,又在三张床上躺了躺,最后决定小碗里的粥最可口,小椅子坐着最舒服,小床上躺着最惬意,因为那是最适合她的,不大不小刚刚好。故事的寓意是,凡事要有度。
你几乎能把所有设计都做出原型来,不管是屏幕也好,应用也好。做原型是一个很好的方法,可以测试以下的项目:
新功能:在Instagram应用中做的Instagram Stories原型(在上线之前)
工作流程的变化:将Medium引入付费版之后。把新的文章发布情况作出原型。
新技术:将无人驾驶汽车的行驶路线原型做出来。
新界面:将Apple Watch的界面做出来。
现在你了解了做原型的目的,你该怎么做呢?
快速制作原型的过程
快速制造原型的过程有三个步骤,可以按照自己的需要重复进行,次数不限。
制造原型:把你的解决方案或者洁面视觉化,做一个视觉模拟版。
回顾:将原型与用户分享,对产品做出评价,看看是否能满足用户需求和期望。
改良:基于得到的反馈,找出需要改善或者更清楚呈现的部分。
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505A594-2.jpg)
一个原型一般从对关键部分对模拟开始,随着每次重复,你能收集到越来越多用户反馈数据,原型也随之越来越复杂。
原型应该在多大程度上体现产品
把注意力都集中在使用最频繁的功能上。快速制作原型的关键就在于,让看者知道一个功能的运行机制,或设计看起来什么样子,而不是说要把整个产品都具体做出来。记住,只要做的足够好就行了。
用户流程做成一个原型:与其做成PPT,一页页介绍自己的产品,倒不如用一个故事将要做原型的产品功能串联起来,这样,你得到的反馈也会更准确,因为你的原型是有现实基础的,在现实生活场景中有体现。比方说,将“注册/登陆/重设密码”作为一个用户流程。
同时,也要做好重复流程的计划。一般来说,对重复的计划一开始可以比较宽泛,然后将解决方案一步步具体化。在你重复的时候,原型的精确度,已经体现的完整程度也会慢慢提高。
但是,原型的精确度指的是什么?
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505CC9-3.jpg)
原型的精确度指的是什么
精确度指的是原型与最终产品之间有多接近。你可以有多种不同选择,准确性方面也有变化空间。这都取决于产品开发的阶段和做原型的目的。
视觉效果(速写vs精细)
在原型的精细程度方面,最显眼的就是布局和设计。如果产品的原型在视觉精确度一开始就很高,用户可能会把注意力更多的放在视觉效果上,而不是产品功能上。这么一来,就违背了早期做原型的初衷,因为视觉效果太引人注目。
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/1450561C7-4.jpg)
两种忠实程度不同的静态原型,左侧为速写效果(忠实度低),右侧为精细效果(忠实度高)
功能(静态vs交互)
原型应该设计成静态的,还是体现其完全功能呢(交互)?两种版本都各有优劣——静态的原型做起来比较简单,比较快捷,而交互式原型可以在可用性测试和用户培训时候用。
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505C514-5.jpg)
高清交互式原型
内容(随机假文vs真实内容)
在产品早期的原型制作过程中,可以用Lorem ipsum(随机假文),以免转移了用户的注意力。这样,用户的反馈就不会集中在文本上,而是给出功能方面的反馈.
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/1450561504-6.jpg)
Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。中文的类似用法则称为乱数假文、随机假文。
但是,随着原型制作的推进,你可以不再用假文,而是用真实的内容,让用户看到内容对设计整体有什么影响。
你也可以通过使用标签来测试自己的“copy”有没有用。“copy”指的是文本标签和你在屏幕上看到的信息。
精确度有哪些等级?
![新手入门教程:如何快速做出产品原型?](http://www.yujujie.cn/uploads/allimg/220604/14505C219-7.jpg)
从左至右, 精确度越来越高。
精确度低:精确度较低的原型,比如铅笔在纸上画的草图,通常是静态的,内容和视觉效果上精确度都不高,该动起来很快捷,很方便。这样的原型也会让用户把注意力都放在功能和系统的运作机制方面,而不是视觉效果上。
精确度中:电脑端的工具,比如Visio能够借由三维线框和工作流程,制作中等精确度的原型。这样的精确度水平可以展示系统的表芯,用以确定用户上需求是否达到了,还可以用来评价用户体验。
精确度高:精确度高的原型可能非常真实,让人觉得它就是最终产品的效果。做这类原型是很花时间的。用InVision、Sketch、Figma、Adobe XD、Framer等等工具,即使不是技术人员也可以做出高保真的原型。虽说这样的原型没法被转化成可使用的代码,但是在后面的可用性测试或者用户训练中可能很有用处。
如何选择原型的精确度?
很多时候,用粗略的草图衡量设计的效果是最好的。接着根据系统的复杂程度或要求,再慢慢提高精确度
有时候,具体选择什么精确度,还是要看客户具体需求,或者需要突出哪些部分。比如,如果你想评估界面上的一个变动对整体视觉效果的影响,那么你应该用精细的设计图,而非粗略的草图。或者,假如说你需要传递信息,那么你可能会用真实内容,而不是随机假文。
如何选择制作原型的工具?
根据你的不同需求和方法,有一系列工具可以使用。在选择工具之前,先问自己几个问题:
学会使用该工具需要花费多长时间?
这个工具是否满足我的产品的需要(网页、软件应用、移动端应用、新兴技术等等)?
这个工具能否让我和他人分享原型并收集他们的反馈?
如果要改动原型,方不方便?
这个工具能否使用模版和印刷模版?
纸笔、Sketch、Figma、Framer、Photoshop、Illustrator、XD、折纸等等
原型如何做到最好:可行与不可行的做法
可行做法:
和用户以及利益相关者合作,收集尽可能多的反馈意见,将这些意见体现在最终产品中。
在设计早期就跟用户和利益相关者说清楚,原型只是个样板,不能完整全面地体现最终产品,也不是最终产品。
精确度高的原型还是要做的,做的越真实越好,这样用户和利益相关者在最后对比最终产品和高精确度原型时,才不会觉得失望。
模版和印刷模版要保存好,以后其他项目或许能用上。
不可行做法:
不要为最终产品中没有的功能做原型。
不要太完美主义。做到足够好就够了。快速制作原型的目标是为了让大家达成共识。
不要什么都做出原型来。