快好知 kuaihz

产品原型设计的8大黄金定律 十分钟读懂原型设计

原型设计,困扰很多新手级产品经理的老大难。其实原型设计没有想象的那么难,熟能生巧,掌握8大黄金定律即可。

我自己碰到、看到或者听到的大部分错误并不是因为选择了错误的工具或者方法。大多数错误都来自以下情况:

原型设计过度或者不够。

对错误的东西进行原型设计

没有设定对原型的期望。

有效原型设计就是找到平衡并设定期望。本文会揭示我们开发的有效原型设计八条指导原则,无论使用什么方式或者工具,这些原则都适用。

无论你有丰厚原型设计经验或者只是想了解以下,都能从八条指导原则受益。

原则一:了解受众和意图

这是原型设计流程第一条。也是最关健的原则。为了做原型而了解受众并理解原型的意图,能驱动原型设计流程的各个方面。了解受众和意图之后,能更好地完成以下工作。

确定原型设计所需要的东西。

设定适当的期望值。

确定恰当的保真度。

选择合适的工具。

一切都源自受众,因此我们从解决受众的问题开始。了解谁是受众,就可以确定原型设计需要什么东西、要多少原型设计以及合适的保真程度。

如果受众是我自己、另一位设计师或者工程师,低保真纸质原型、或者应急用的PowerPint或者HTML模拟可能就够用了。你可以用这些媒介进行工作并理解这些媒介,它们还能传达观点而且不用花太多精力。

但如果受众是顾客或者高级管理人员,原型可能就需要更多精细。鸡尾酒餐巾纸上的草图可能就不行了。

考虑受众的时候会,应该考虑它们的适合哪种媒介或者保真度。如果他们能理解纸上的粗略图,你也自信草图足以向他们传达概念,就用这个方法。但如果受众搞不懂纸原型,你也很难用纸原型向他们传达概念,就应该换一种媒介或者保真度。

了解了受众的原型意图,接下来进入规划阶段并开始做原型

原则二:稍加规划——再做原型

软件系统不断迅速变化。稍加规划,然后再做原型,以渐增、迭代的方式展开工作,这样能适应不断变化的环境。

规划阶段所做的工作越多,越能更好地启动工作。当然,回报会递减,一定要用常识来判断需要做多少规划工作。

经常有人问我:“原型设计前需要多少规划工作?”没有什么神奇数字,但我会把最多70%的设计时间花在草图上,然后再开始原型设计

为什么是70%?有两个主要原因。首先,我的目标是获得受众反馈,因此越快给受众看到原型,就能越快获得反馈。其次,做原型是走查设计的好工具。如果能在纸上画出70%的设计概念,剩下的工作就可以用原型来走查完成。

原则三:设定期望

设定期望是基于名为激发(priming)这个心理学方法。如果激发受众,就能引导他们的注意力和焦点。

提前设定期望,就不会出现对尚未做原型的详细交互或者功能有奇奇怪怪的讨论。不要说不会出现这种讨论,因为它最后肯定会出现。一开始就设定恰当的期望,以后就会很轻松了——虽然这些东西还是不是原型的一部分,但可以加到下一次发布中。

激发受众并设定好期望,然后拿出原型并演示给他们看。不要害怕讨论此时原型中还没有的东西,但尽量集中讨论原型中已有的东西。提醒受众这只是个原型,告诉他们有些东西还没有完全画出来。

原则四:可以画草图

如果我要画一个超应急的草图,而且只有兴趣画出屏幕上得功能区块,我会采用较低保真度,而且通常只用线条。如果是和另一位设计师或者客户在现场画草图,我也会采用一样的做法。

如果字段的实际顺序很关键,而且又需要传达出这种顺序,我回采用略高一点的保真度,要么写出标签,要么打开Illustrator软件在屏幕上把它们画出来。

在这些决定往往归根于第一条原则:了解受众和意图。如果受众只是我,线框就够了,不需要用标签。如果是其他人要用原型,我通常会稍微多花一些精力吧标签写出来。

请记住,如果你在孩子时代能画画,现在一样也能画画。你的目标不是给《纽约客》画插图,而是要传达你的想法。毕竟,只是一个原型而已。

原则五:是原型——不是蒙娜丽莎

原型本质上市最终产品的不完善、简略版本。原型并不完美。也没有必要完美。原型的本意就不是要完美。事实上,略显粗糙的原型往往能获得更好的反馈。

如果原型未完成,测试者更容易给出反馈。因为他们uhui觉得一切都已确定多说无益。

诚然,在很多情况下需要更精细的原型。商业展示会上得简略原型可能没什么用。CEO拿着草图或者黑白原型版本无法描述最终产品。因此,这里又要用常识来判断原型需要达到什么样的精细程度。

但我可以信心十足的告诉你,在大多数情况下,原型没必要搞成蒙娜丽莎——足够好就够了。

现在的目标不是完美——只是个原型。花最少的时间和精力向受众传达想法的核心概念,这是现在要做的事情。所需要的是合适的保真度。不要过度。也不要不够。

原则六:如果做不出来原型,就用假的

如果不会写代码,或者无法写代码,可以有很多方法换用假的。

使用一些列JPEG界面。用Dreamweaver创建图片地图它们链接在一起。不用写一行代码,就可以得到交互及流程是否合理的相关反馈。

用Fireworks内置功能把页面和框架链接在一起,然后生成可点击的HTML原型

用你最喜欢的PDF生成工具或者Adobe Acrobat把文档链接在一起,也可以得到一样的效果。

用PowerPotint把静态界面链接在一起。

用一系列HTML界面来模拟AJAX和其他交互。

有很多工具能制作假交互,而且你手头可能就有好多种。只要首先激发受众,设定他们的期望,模拟演示所描述的东西,你就可以开始了。

原则七:只对需要的东西做原型

所建原型都是整个系统的一部分,多半都是这种情况,并不需要构建真个系统来研究设计或者反馈,事实上,建立整个系统会丧失快速迭代的固有优点。

如果最终目标是把原型用于测试,你可能要测试五六个情景。此时,只需要针对这五六个情景来建立所需原型

如果测试者点击了原型上还没有做到的东西,该怎么办?原型就是原型原型本质上就是不完整的。如果测试者试着点击了还没有创建的特性,可以利用这儿机会来探讨他对此有何期望。

只对需要的东西进行原型设计,能大大减少很多方面的投入——成本、时间和精力。此外,只对需要的东西进行原型设计,花的时间就少,因此能更快获得反馈,并进行下一步工作。如果建立的原型能发挥作用,就可以继续下去。如果没有获得反馈,损失也不大,还可以试试别的方法。

原则八:减少风险,尽早开始做原型,经常做原型

我们让这些大公司太晚才开始创建线框图,开发东西、发现问题。

——Anders Ramsay

原型有许多优点,其中之一就是投入效益比较低。我们来看看两种开发模式——一种是传统瀑布法,另一种是里哟过快速迭代原型设计

传统瀑布法要先规划好系统特性和功能,然后才开始开发。常常需要六到九个月的规划周期,之后才能开始实际开发系统。

如果进展或者不会有很大变化,这么做可能不会有问题。但对于现在的互联网产业,九个月就可能是一生一世——九个月的时间足以创立、购买、出售或者搞垮整家公司。

但假设你所处的整个产业的前进速度和蜗牛一样慢。此时你已经进行了大量投入,改变方向几乎不可能,更不可行。

瀑布法模型非常昂贵。通常情况下还会发送错误,而且修复成本很高,甚至高到百分之百。。因此,这些错误会留在系统中,而最终用户必须努力处理这些错误。

另一种方法采取较为敏捷的做法。一次解决一小块问题,并采取增量、迭代的进化方式。通过原型来使用这种方法,投入很少。显然,减少投入,必然可以减少风险。

这是原型真正闪光的地方。投入小,而收益可观。有正面收益,也有负面收益。如果正面是收益,就更好。如果是负面,风险则大大减少,因为在这个过程中能及时发现风险并能够迅速发现错误。开发流程中越早发现错误,纠正错误就越容易,成本就越低。

如果尽早做原型、经常做原型,风险就会降低,还能减少很多烦恼,节省时间、精力和费用。

产品设计也好,原型设计也好,过程中,错误在所难免。记住以上八个原则,就能够轻松降低犯错误的概率了。

十分钟读懂原型设计

本文将梳理关于原型的前世今生,弄清楚它到底是个啥,我们如何使用它。

做互联网产品的小伙伴一定不会对“原型”这个词感到陌生。它就像“用户体验”一样经常被各类人挂在嘴边。它有许多近义词,如线框图、故事板等。那么究竟什么是原型设计,我们为什么需要原型设计,如何进行原型设计呢?

本文将梳理关于原型的前世今生,弄清楚它到底是个啥,我们如何使用它。

原型设计是什么

原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言,原型是一种沟通工具。

线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。

原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致

原型设计在产品设计中所处的位置

原型设计的目的?

很难想象一个没有原型的产品是如何诞生的。

原型设计的核心目的在于测试产品,没有哪一家互联网公司可以不经过测试,就直接上产品和服务。

原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

虽然需求文档也是可以满足沟通需求的,通过用例将交互写到设计描述文档中,但是原型可以更详细地解释交互。

你可以用屏幕录制软件或者用一只手机对着屏幕拍摄下你操作原型的过程,边录制可以边评论,比如:“我现在有点晕了,不知道该怎么操作,或许点击这里看看……哎呀,好像点错了。”

原型设计的流程

开始做原型之前,请先考虑清楚以下几个要素:

做这个原型的目的是什么?这个原型的受众是谁?这个原型有多大效率帮助我传达设计或测试设计?有多少时间做原型?需要什么级别的保真程度?

原型设计流程?

步骤一:画草图

画草图的目标是提炼想法,并且最好给画草图加上一个时间限制,那就是15分钟。

如果你绘画能力很差,那么恭喜你,可能你能更好地用好草图,因为你的注意力没有放在美化你正在画什么上面。

画草图要避免陷入审美细节,尽可能快速的导出想法才是关键

用纸笔画的用户个人账户的草图示

用HTML代码制作的相亲网站个人收集页面草图

步骤二:演示及评论

演示和评论的目标是把一些想法拿出来跟大家分享,然后进一步完善想法。在演示过程中,要做好记录,演示和评论的时间可以对半分。

步骤三:做原型

在明确了想法之后,就可以开始进行原型设计了。这个阶段需要考虑很多细节,找出切实可行的方案,运用合适的原型来表达。

步骤四:测试

原型的目标之一是让受众来检验产品是否达到了预期,因此可以请5-6位测试者,通过音视频捕捉等方式,看看产品原型是否被顺畅地使用了。

原型设计工具

选择什么工具来制作原型?主要考虑以下几个因素(排名分先后):

熟悉程度和获得工具的便利度;所需的时间和精力;可复用的代码/框架;为测试创建可用的原型;价格和学习曲线。

常用原型设计工具调查结果(2013年),出处:toddwarfel.com

不得不说,这个结果很让人吃惊,没想到有那么多人用Dreamweaver做原型,在这里我介绍两种我经常用到的原型设计工具。

PPT和Keynote

优点:

技术门槛低,学习曲线不陡峭;

可用幻灯片母版,复用性高;

模拟移动端产品,修改画板适应手机端尺寸即可;

可导出为HTML或PDF文件;

缺点:

绘画工具有限;

交互动作有限;

现在非常流行把Sketch与Keynote放在一起用,简单说就是把Sketch里的图层、部件拖拽到Keynote中,然后添加Action动作,按照剧本完成一套交互。

Axure RP?

Axure的优点不用多说,但使用它一个工具就能满足设计和文档需求(通过注解,生成规格文档)。

Axure自带的部件库也给制作过程带来了便捷,类似Omnigraffle的stencil一样,避免了重新发明轮子。

要掌握Axure,主要应该弄懂四大核心功能:

母版:主要用于制作网页的页头、页尾,可复用性高;动态面板:核心中的核心,“层”的概念很重要;图片热区:在一张完整的图片上通过热区,建立交互动作;函数和变量:局部变量和全局变量的概念以及应用(比如用户登陆效果)。

Axure 7.0还有中继器这个功能,但是个人觉得比较鸡肋,学习成本也比较高,

主要可以用来做搜索框的搜索结果联想的原型

原型测试流程

原型测试是原型设计过程中的关键步骤,是整体流程中主要的里程碑之一。

可用性测试是一个庞大的话题,测试方法有一对一或者远程测试,难点是从测试中得到有质量的成功。

测试结果取决于测试者,务必招募到合适的人。要找到合适的人,需要对测试者制定一系列的筛选标准,比如一个社交产品绝对不可能找一个连电子邮件都没有的人来测试。

测试时长可以是一个小时左右,足以测试5个到6个左右的关键场景,并列出一些观察结果和关键问题,例如:

用户如何开始任务的?(是搜索还是浏览?)他先做了什么,再做了什么?他如何做出最终决定的?他们是否领会了设计意图?有什么操作困难?

关于记录测试结果,可以结合定性和定量两种方式,做一张计分表,用1-5的程度来表示;同时定性地记录用户的一些表达,尽可能地原话记录。

最后分析这些记录,改善设计

产品原型设计或者说产品开发是没有尽头的,它是一个不断发展,循环上升,整合知识和经验,不断迭代和完善过程。

经理人为您推荐更多资讯:英语自我介绍大学 职场达人 薪资福利

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  设计  设计词条  定律  定律词条  十分钟  十分钟词条  黄金  黄金词条