首页 > 交互设计, 用户研究, 资源推荐 > Prototyping原型设计-动手是最好的思考

在实际工作中,原型设计(Prototyping)作为需求确定之后、开发之前的一个环节,正在被产品经理、交互设计师所广泛应用。然而Html5技术、不同分辨率适配、复杂的使用环境下,设计产出已不仅仅是一张图片或者一个动态页面那样简单,它需要经受住真实使用场景下的评估和考验。从这个维度下来看,原型设计已不单单是需求的一个表达方式,它可以帮助产品模拟使用场景、再次探索用户需求,帮助设计师验证视觉效果,帮助CE人员测试可用性、收集用户反馈。

乔布斯说过:“Designing static images is not enough, you need to bring them to life.”这篇文章会介绍原型设计的概念、方式及它是如何影响最终设计的,随后介绍几款常用的原型设计工具,让你在设计的不同阶段、面对不同复杂度的项目中能够找到对应的解决办法。

 

原型设计的方式

在其他设计领域,原型可以是小型的实物模型,比如一个微型的汽车模型、一个微型建筑等。

1

2

3D打印模型

在交互设计中,原型可以是以下种类:

一套手绘界面

一个故事版(类似卡通四格漫画的一系列场景)

一个PPT演示稿

一个介绍使用场景的视频演示

一块木头(模拟手持设备)

一套硬纸板卡片模型

一个功能有限的软件(用某种特定语言或其他语言编写)

 

无论用哪一种原型,最根本的目的是快速、便捷的演示设计方案,让真实用户来使用。

 

原型设计的原则

评估和用户反馈是交互设计的核心,原型设计的目的正是实现设计想法和进行优化改进。请注意,从现在开始,原型已不仅仅是产品与设计师之间传达需求的作用,更重要的是通过原型来测试可用性、讨论提升设计方案,这也是这篇文章所想表达的最重要的目的。

3

Google与时尚大牌DVF联合打造的新款眼镜

Google眼镜大家或许已不陌生,它的理念是在置身现实世界的同时,也可以得到我们需要或喜爱的虚拟资讯。试问,Google在设计这个产品时,要如何来构建这种体验?换句话说,用了多长时间来制作头戴显示器的第一款版本?Google X(Google X实验室,研究课题包括太空电梯、谷歌眼镜、无人驾驶汽车等项目)用户体验团队负责人Tom Chi给出的答案是:1天。

原则1:找到最快的方式去体验

让我们来看一下Google一天内制作出的原型,如下图所示,最核心的地方是中间的衣架,被折成了图片中的形状,上面的勾勾住脖子,下面的勾勾在胸口上。这样可以带着一块儿塑料板,和一个透明塑料袋,塑料袋里可以放上纸板,微型投影仪把影像投射到纸板上。用这个原型,不到一天,研究人员就可以开始讲体验数位资讯叠影到真实世界的感觉。带着这个装置到处溜达,他们开始大量实验产品的各种想法。

4

Google Glass第一款体验原型

当得到这样一种原型后,有了更多的想象空间,把这些东西带在头上,它就像一幅眼镜,没有鼠标、键盘、或者触控屏幕这些原本用来跟机器互动的工具。就像在电影《Minority Report》里那样,汤姆克鲁斯用手在前面舞动,照片就飞过来,邮件就飞过去。

5

电影《少数派报告Minority Report》剧照

研究人员开始尝试电影里的画面,同样的问题,要多长时间才可以制作一个原型体验到真实的这种感觉?

45分钟。

原则2:动手是最好的思考

6

Google Glass 第二款体验原型

如上图,研究人员用白板、发绳、笔、筷子等工具在45分钟内便构架了一个在电影里体验到的功能。左右手各拿着一个发绳,发绳上各绑着一根钓鱼线,钓鱼线从上面绕过白板,往下连接到地板上的小装置,这表示,手往任何方向移动,都会增加钓鱼线的张力,地上的装置就会发生相应的触发。

钓鱼线的另一端,绑着一根筷子,筷子中间用装订夹夹住,另一头悬在遥控器按钮的上方。当手臂挥动的时候,钓鱼线张力增加,相应拉动筷子会点击一下遥控器,白板上就会出现对应的画面。一只手挥舞代表切换下一张图片,另一只手代表上一张。

这样的原型很短时间就可以做好,用户像是在看电子相簿,然后说“下一张,下一张,上一张”;或者对着邮箱挥手:“我要看这封信,我要回信”。当然,Google最后当然不会用这种方式来生产设备,但是可以学到许多事情,比如社交尴尬、人体工学的一些技巧,这些事情是单靠想象无法体会到的。过去老师教我们要常常思考,但我觉得思考有点被高估了。

Google Glass这样的项目似乎离我们有些远,但是,像网页设计、App开发,同样可以借助动手体验的思想来解决许多实际问题。举个例子,腾讯精品课移动Web版项目中,我们便用最简单、快速的方式(纸片)构建产品原型,给真实用户测试,之后评估改进产品原型,提升用户体验。

7

我们运用了以用户为中心的交互设计原则,利用原型可用性测试,来进一步挖掘需求和评估产品。

8

我们把电脑屏幕上的原型稿打印出来,用剪刀切割成手机大小的卡片;设想了若干个用户使用精品课产品的情景,并列举成一个个小任务,用户在卡片前操作,我们来模拟计算机切换、移动纸片。这些工作在两天之内完成,虽然比Google Glass要长一些,但是还是很迅速了不是么?

应了那句老话“不做不知道,一做真的吓一跳”,很多我们之前没有考虑过的问题,在测试的时候全部一一暴露出来,很多功能我们设想的很好,但是实际用户可能连什么意思都没搞懂。我们根据用户的问卷和口述反馈,对冗余的模块进行了删减,优化了首页结构,简化各级页面结构,建立统一的格局与体验。

9

模块裁撤及合并

10

结构调整

优化的地方还有很多,这里就不一一列举了,通过精品课项目,我们发现,无论之前思考的有多好,动手操作之后总会有新的收获,原型设计不仅仅是拿来看的,而是拿来让设计师、让用户体验的,只有这样,交互设计、原型设计才会发挥它最大的价值。

原型设计工具

11

爱因斯坦说: “If I can't picture it, I can't understand it.”

现实世界中,产品经理或者交互设计师要做的工作,似乎要比爱因斯坦困难的多,相对论爱因斯坦“画”了出来,很多人还是不懂,但是交互设计师画的原型,必须让所有人都清楚的明白。

工具1 白纸和铅笔

1213

 

这或许是最快速、最有效的原型设计工具,不要求你有多好的手绘功底,也不用担心纸张裁剪要符合手机的分辨率,因为这一切都是在需求策划阶段,保持清晰易懂、逻辑清晰即可。当需要展示复杂的交互动作时(如点击某个button需要跳转到下一个页面)只需多准备几张白纸,剪刀剪成合适大小,让用户点击,你负责放下、拿起页面就好了。

如果你准备好了一套纸张模型,完全可以拿它去做可用性测试,在多数产品的敏捷开发中快速高效是最重要的,不必过分追求细节。这里会出现一个问题,我为手机或者PC界面作纸张原型,需要把纸片严格裁剪成手机或者电脑屏幕大小吗?

1415

 

答案是:不需要。纸张原型可以做的比实际尺寸大,因为手指要比鼠标指针大,人们通常写字会大于12号字体,所以,放大一点原型,会让测试者更容易使用。另外,在一定的距离更容易观察野十分重要。当我们做测试的时候,很重要的是观察用户与产品交流的动作,甚至有好几个观察者同时看测试过程、同时做笔记,所以,还是大一些好。

工具2Axure

关于Axure的学习和讨论,网络上被提起太多次,有很多资料可以得到,这里不过多讨论。

16

它的优点是很容易上手,初学者便可以做出比较像样的作品,而且不仅是原型,产品信息框架、流程图都可以轻松绘制。但是学习曲线陡峭,很多丰富的交互动作需要一些编码才可以实现,想深入掌握还是需要花费一些时间的。

工具3 Mockups

17

如果你觉得手绘费时费力,尤其是绘画一系列的产品页面,需要经常重复使用某类按钮、图标、线框,那么Mockups是一个不错的选择,它有较为丰富的部件库,可以满足常规产品的设计需求。

有意思的是,Mockups是一款设计师为了自己工作方便而开发的软件,手绘的风格颇受欢迎,或许连设计师本人也没有想到吧。

优点:网页、手机端原型设计均可,手绘风格。

缺点:对中文字体支持比较差,素材风格单一,没有动态交互。

工具4 Edge Animate

18

Adobe Edge Animate是一款Html5网页动画可视化工具,简单的可以理解为Html5版本的Flash Pro。对于有着丰富动画效果的交互稿来说,用Edge Animate制作演示模型是非常合适的。

优点:动画效果丰富,可实现动态交互原型,所呈现动画直接生成Html5代码。

缺点:较难上手,需要一定的编程基础。

 

总结:

1、把用户需求、功能设置、界面逻辑的不一致消灭在原型设计阶段,用最有效的沟通和最快速的原型表现来达成产品的一致,尽量不要带入视觉和开发阶段,节省项目时间。

2、没有最好的工具,只有最适合自己的工具,不管你用代码编程,还是在纸上草草画上几笔,让对方理解你最重要。

3、只要动手,就一定有收获。当我们为了一个产品设计苦思冥想的时候,往往高估了思考的力量,把想法制作成原型,不断去模拟、操作、体验,灵感的源泉在下一秒或许就会闪现。

浏览:0 喜爱:
分享到: