屏幕纸原型设计:如何制作屏幕纸原型

文章描述:不止是纸上谈兵—屏幕纸原型.

作为一个从事用户体验研究的人来说,对于原型都应该不会感到陌生,不论是设计物理设备,网站还是应用程序,我们都会用到原型。在互联网领域,设计师经常会使用Flash,HTML等等的代码来实现原型的制作,这使得原型更加真实,更能收集到有价值的反馈。

但是,像这样的原型却不适用于产品设计周期之初,因为设计这样高保真度的原型,可能会减缓整个产品的设计进程,有时候还需要有程序员的协助,并且任何对于原型的修改都显得比较麻烦。换句话说,这样的高保真模型,不够灵活。

低保真度原型

那么,有没有什么方法让原型更灵活,更易于修改的呢?当然有,降低原型的保真度就行了。最常见的低保真度原型就是纸质原型,将界面粗略的绘制在纸上,再模拟使用时的场景进行可用性测试。纸质原型更低价,更迅捷,能够运用在设计初期,也使得整个设计的迭代更加高效。

但是不像高保真模型,纸质原型不能在真实设备中运行。比如说一个网站的纸质模型只能呈现在几张纸上,但是用HTML/CSS做出来的高保真原型却能真实的在浏览器中进行体验。

纸质原型缺少真实的运行环境这个问题在设计移动设备的用户体验时尤其突出,移动应用基于移动设备,而移动设备的使用方法和交互方式又是千变万化的。只是给用户几张纸进行测试根本不能让他们真实的体验到你的设计,用户体验的很多方面也不能得到良好的测试反馈。

如果我们能够让低保真度原型能够提供能加完整的体验,我们就能得到更多更有价值的反馈数据。我们需要做的,就是把纸质原型搬进手机屏幕里—屏幕纸模型。

什么是屏幕纸原型?

屏幕的纸原型理解起来很简单,就是将纸质模型搬到手机屏幕里面,也就是用手机将纸质原型显示出来。这样做的好处是给被测者带来了更完整的产品体验。

这种混合原型具备了纸质原型的一些特性,易于制作,易于修改,即用即弃。并且他们看起来都是很粗略的,未完成的,这使得被测者更倾向于提供自己的真实观点和反馈,如果是高保真原型的话,被测者很可能会保留自己的一些批评意见。

同样,屏幕纸原型也能够贯穿于整个设计进程当中,并且能够保持设计迭代的高效。

如何制作屏幕纸原型

下面是制作一个iphone应用的屏幕纸原型的基本步骤分解:

1. 绘制,绘制一般的纸质原型图。

2. 拍照,将原型图拍下来或者扫描进电脑。

3. 编辑,将原型图进行简单的编辑,使之适合被测设备的屏幕尺寸。

4. 组织,将原型图按照不同的使用场景进行归类,每个文件夹包含一个特定的使用场景。

5. 上传,将组织好的原型图上传到被测设备。

6. 测试,在产品实际的运行环境中对原型进行测试。

用屏幕纸原型进行测试

因为屏幕纸原型还是缺乏交互性的,所以在测试前先定义一个线性的场景是很重要的。被测者需要根据场景设置来进行体验测试。

虽然屏幕纸原型没有高保真原型那么生动和真实,但是起码他们在运行环境上和高保真模型没有区别。被测者如何使用实际设备,把持方式,使用偏好,都可以通过屏幕纸原型展现出来。

本能的,行为的,反思的

原型测试的价值不仅仅在于评估产品的UI元素和交互性能,行为和感情因素同样也是很有价值的反馈数据。纸质原型虽然能够让被测者体验到应用的外观,但是不能给与被测者产品最终能够提供的情感冲击,这就是设计认知的本能层次,三个设计认知层次中的一个(还有两个层次是行为层,和反思层),在Don Norman的《情感化设计中》有详细阐述。如果不考虑设计认知的本能层次,就不能准确预测实际的用户体验,因为如果没有实际的运行环境,那么原型的效果,情感反应都会打折扣。

屏幕纸原型同样也涉及到了Noman的行为层,这是用户体验设计师们最为关心的一个层次,因为它直接决定了产品的交互性和可用性。比如说,在使用屏幕纸原型的时候,设计师能够观察到被测者如何使用他们的手指,如何握持设备,那些地方被忽视了,那些地方是多余的等等。

结论

虽然屏幕纸原型比传统纸质原型在制作上要复杂那么一点,但是它却能提供传统纸质模型所不能提供的更为真实和有价值的反馈数据。所以,作为一个原型工具,屏幕纸原型的定位介于传统纸质原型和高保真原型之间。

同样,屏幕纸原型也有其缺点,它需要被测者始终严格遵照事先设计好的场景来完成测试,如果能在屏幕纸原型上加上一些可交互的链接和按钮,那么其用处还能增强。

这项原型制作技术填补了高低保真度原型之间的空白,即灵活又不失准确性。但是要记住,原型终究不是产品本身,使用原型的最终目的是高效的获得反馈数据,所以不要花费太多精力,将它做的太过真实和精细。

作者:汪锐

时间: 2024-08-30 21:21:32

屏幕纸原型设计:如何制作屏幕纸原型的相关文章

产品原型设计的8大黄金定律

原型设计,困扰很多新手级产品经理的老大难.其实原型设计没有想象的那么难,熟能生巧,掌握8大黄金定律即可. 我自己碰到.看到或者听到的大部分错误并不是因为选择了错误的工具或者方法.大多数错误都来自以下情况: 原型设计过度或者不够. 对错误的东西进行原型设计. 没有设定对原型的期望. 有效原型设计就是找到平衡并设定期望.本文会揭示我们开发的有效原型设计八条指导原则,无论使用什么方式或者工具,这些原则都适用. 无论你有丰厚原型设计经验或者只是想了解以下,都能从八条指导原则受益. 原则一:了解受众和意图

小屏幕该怎么设计

现在是时候发展移动银行了.我们开始意识到它,是通过认识公交上班族.商务旅行者.从事各种繁忙工作的母亲和因为不同的使用目标而以来移动设施的人. 银行会在智能手机上持续一点点的减少复制桌面经验的过程这是肯定的.你可以一直去要求设计师和工程师来减少独立的屏幕和工作流程,从而让他们的iphone和黑莓手机使用界面变得更加受欢迎.但是移动设备与互联网是一个完全不同的频道.把互联网上的内容直接缩小到手机上,可以让用户觉得觉得合适,但是忽略了真实的移动银行体验.我们可以通过改革来促使研究和设计进入最初阶段的发

客户端设计:针对不同的屏幕大小如何设计

文章描述:客户端交互设计适配之--屏幕大小. 随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移.然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在960px左右[当然,由于整体的电脑屏幕往大尺寸及高分辨发展,除了背景宽屏自适应外,不少网页也正朝着更宽的方向上发展].当前的手机种类繁多,手机屏幕的大小.比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配,又要保持其一致性,同时还要提高每个手机屏幕的使用效率,

Fireworks制作撕纸边缘效果

大家可能会经常看到一些图像的边缘有一些类似于撕纸的效果.关于这种特效制作的方法大家可能也见到了很多,这里我们通过使用FWMX 2004自带的Alien Skin Splat LE滤镜中的Edges滤镜特效来进行撕纸边缘效果的制作,应该说能够很轻松的实现,首先一起来看一下已经制作完成的效果图: 接下来,我们一起来看看具体的制作步骤. 1.打开FW,新建一个文件,文件大小根据需要自定,此处采用背景色为白色. 2.使用矩形工具在编辑区绘制一个矩形对象,颜色采用"#FFCC00",编辑区此刻如

用Photoshop制作撕纸文字效果

用Photoshop制作撕纸文字效果--效果图 1.新建一个文件,设置宽度为10厘米,高度为5厘米,分辨率为300像素,模式为RGB的白色文件. 2.打开通道面板,在控制面板下方单击"创建新通道"按钮,生成新的通道Alpha 1,执行菜单栏中的"滤镜""渲染""云彩"命令,效果如图01所示. 图01 3.进入图层控制面板,在控制面板下方单击"创建新的图层"按钮,生成新的图层"图层1",选

客户端交互设计适配之——屏幕大小

随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移.然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在960px左右[当然,由于整体的电脑屏幕往大尺寸及高分辨发展,除了背景宽屏自适应外,不少网页也正朝着更宽的方向上发展].当前的手机种类繁多,手机屏幕的大小.比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配,又要保持其一致性,同时还要提高每个手机屏幕的使用效率,这就存在着很多的矛盾点. 在客户端的设计过程中

Web应用的成功之路 – 产品早期的原型设计与用户测试

最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增:却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章:主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述Web应用在原型阶段的设计与测试工作的重要性,并从实

Web应用的成功之路 产品早期的原型设计与用户测试

中介交易 SEO诊断 淘宝客 云主机 技术大厅 最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增;却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章;主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述We

Web应用成功之路 产品早期的原型设计与用户测试

中介交易 SEO诊断 淘宝客 云主机 技术大厅 最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增;却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章;主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述We