收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 9795|回复: 16

原型的使用(翻译)

[复制链接]
发表于 2007-9-18 10:11:18 | 显示全部楼层 |阅读模式
部分未翻译,欢迎大家补充并纠正错误!转载注意留个名就行!

September 17th, 2007

By Gerd Waloszek and Joelle Carignan, SAP AG, User Productivity

翻译:Qing

原文地址:这里

在产品开发的整个过程中,原型有利于评估设计的可行性。这里三种方法:故事版、纸质原型、HTML原型。这里给出各种原型方法的利弊,以方便你做出最合适的选择。

引言

原型是一个有价值的设计工具。在产品开发的整个过程中,有利于评估设计的可行性。在初步设计阶段,能够探究和测试用户。在实际设计布局和更详细的交互问题,能够评估和测试。之后的”高保真”模型,可以用来提供一个最终软件的”演示”。此外,故事板可用于基本可用性检查。

原型可以有多种实现方法。目前,纸质原型被一些作者所推崇。但电子原型如HTML原型,也有其支持者。HTML的原型是特别适合web应用程序或如果只是屏幕序列的探讨。当然,也可以使用其他任何熟悉的工具(如VB、PowerPoint等)。



图1 :纸质原型的创建是一个团队的努力;这个团队分成三个组,创造各自可行的原型



图2 :当原型制作完成,每组出一个人给整个团队介绍小组的设计,然后评估每个原型的利弊。

故事板

故事板,也称为写生,是原型一个很好的补充,可用于基本可用性检查。使用这种方法,你能回答的典型问题如下:

    * 是否是简单的对话?
    * 什么是阅读模式或工作?
    * 相关内容是否组织在一起了?
    * 在屏幕上有太多或太少的内容?



图3 :一个故事板

故事版也可以被作为线框模型实现,然后作为最终的规格。大多数使用在网站或者学习型软件,即内容为驱动的产品。




图4 :用微软的PowerPoint制作的部分线框模型(每个视图是一个幻灯片)(点击图片放大)

纸质原型

材料



图5 :一个简单的原型

纸质原型,可以有多中方式,这取决于个人经验或喜好。纸质原型典型的材料是:

    * 纸板——用于屏幕;
    * 邮票式张贴——用于菜单、对话框和其他的屏幕元素;
    * 透明的幻灯片——用于临时项目或用户输入;
    * 隐藏的带子或者其它用于用户输入的带子;
    * 笔和标记(可擦写标记用户输入或临时信息);
    * 用来擦除输入的水;
    * … …



图6 :一个更复杂的纸质原型的实例

优势

    * 技术壁垒消失
    * 更少的辩护(Less invested effort to defend)
    * 更少的辩论时间
    * 传达产品”感觉”不错
    * 比Visual Basic 或者HTML原型制作快速
    * 在编码之前快速实现
    * 廉价
    * 创建快速和容易(不到一两个小时)
    * 可以创造出一组——这有助于求得设计的共同理解
    * 人人都可以参加设计纸质原型——不需要特殊的”工具”知识
    * 用户可以协同设计原型或参加之后的测试部分
    * The focus of paper prototype discussions with users is the structure of the application and the suitability to the task
    * Discussions about “taste” matters or graphic design can be avoided
    * 没有妨碍用户对原型的批评,因为它显然是临时的

缺点

· 有限的交互——不是所有的交互问题可以被充分的测试(例如,某些功能,例如鼠标划过事件给用户一个反馈无法模拟)

    * 不能评价的响应时间
    * 不得在实际系统中制造假数据
    * 不能评估视觉
    * 图标
    * 屏幕真实状态问题
    * 需要摆弄大量的纸
    * 当原型测试时,至少有一人需要扮演”电脑”
    * 超过3个人的演示是不合适的

HTML原型

低保真原型

低逼真原型容易制作,用来展示基本交互作用,例如静态的html 。它可以用来与用户“彩排”,并要求他们以下问题:

    * 描述系统和每个对象
    * 在那里能找到[每个功能] ?



图片7 :如果交互问题是焦点,低逼真的HTML原型可以用简单的html元素来创建

高保真原型

高保真原型可用于向董事会或同事展示,因为它传递了最终软件的许多特点,举例来说,视觉设计。它们也适合于正式的可用性测试:

    * 给予用户书面任务完成所需数据
    * 要求用户边想边说出
    * 测试协调人(facilitator)引导用户通过测试
    * 测试记录人记录可用性问题
    * 团队里其他人默默观察,而且最好是与测试用户不在一个房间里
    * 最后,可用于满意度问卷



图8 : HTML的原型比纸原型更适合检查设计的动态过程;这里的”高保真”的html样机已经包含视觉设计的元素

工具

    * 所见即所得(WYSIWYG)的html编辑器(或你选择的任何其他编辑——不过所见即所得更快)
    * 一个或多个浏览器测试原型
    * 图形工具
    * 设计元素库(一旦设计元素库建立,有助于形成一致的外观和加快开发速度)
    * 图形库或其他屏幕元素(有助于在其他事情重复利用屏幕元素(screen elements))
    * ……

优势


    * 更好的交互,尤其是有益于评价屏幕变化(但通常需要一个人扮演”计算机” )
    * 很好展现软件的设计或者可能的设计
    * 在测试和最终编码之间,还有时间来作出改进
    * 无需纸张

缺点

    * 制作需更多时间(通常是一个或更多天)
    * Barrier to discard the prototype and start over
    * 不灵活,能以测试新的想法或替换
    * 提供现实的情况及假数据是费时
    * 分析、剪辑录像带、写报告延误改进的执行
    * Often discussions on implementation issues (”taste”) dominate content discussions
    * 用户不能协同设计原型,他们只能提出建议(即不能立即检查)
    * HTML或者需要编程知识(一般只有一个人制作——设计师,可能倾向于制作一个”完美”的原型)

小贴士


    * 研究可行的设计,并使用情景或任务进行用户测试。
    * 增加原型的新功能,并进行用户测试。
    * 简单的应用软件,原型制作非常容易,只有有限的视图和用户界面元素。
    * 更大和更复杂的应用软件,原型可以分为几个,研究应用软件的不同层面,以保持原型的简单。

[[i] 本帖最后由 第一速度 于 2007-9-18 12:35 编辑 ]

评分

参与人数 1威望 +3 收起 理由
feng4ever + 3 好文

查看全部评分

发表于 2007-9-18 11:35:18 | 显示全部楼层
好文啊,赞楼主的英文~~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-19 09:10:13 | 显示全部楼层
这么好东西没人理!
回复 支持 反对

使用道具 举报

发表于 2007-9-19 09:41:19 | 显示全部楼层
非常不错的文章,最实用的还是在纸上画原型.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-19 10:26:35 | 显示全部楼层
还是希望大家指正翻译不到位的,还有几句不知道怎么翻译的
把原文贴出来:
Using Prototypes

By Gerd Waloszek and Joelle Carignan, SAP AG, User Productivity

Last changed on 07.05.2004

Prototypes can help to evaluate design alternatives at any stage of the development process. Here three approaches are introduced: storyboards, paper prototyping, and HTML prototyping. A listing of pros and cons is given for the prototyping approaches in order to facilitate the decision of which is best for your requirements.


Introduction

Prototypes can be a valuable tool for designing applications. They can help to evaluate design alternatives at any stage of the development process. During the conceptual phase the basic design elements can be explored and tested with users. When designing the actual screens the layout and more detailed interaction issues can be evaluated and tested. Later "high-fidelity" mockups can be used to provide a "preview" of the final application. In addition, storyboards can be used for basic usability inspection.

Prototyping can be done in many ways. Currently, paper prototypes are promoted by a number of authors. But electronic prototypes like HTML prototypes have their uses as well. HTML prototypes are especially suited for Web applications or if just screen sequences are explored. However, any other familiar tool (VB, PowerPoint, ...) may also be used.

Creating paper prototypes is a team effort

Figure 1: Creating paper prototypes is a team effort; here the team is split into three groups that create alternative prototypes

Group members present paper prototypes

Figure 2: Having finished the prototypes, a member of each group presents the group's prototype to the team; then the pros and cons of each prototype are evaluated


Storyboards

Storyboards, also called sketches, are a good supplement to prototypes and can be used for basic usability inspection. Typical questions that you can answer with this approach are:

    * Is the dialog simple?
    * What is the reading patterns or workflow?
    * Are related elements grouped together?
    * Are there too many or too little elements on the screen?

Figure 3: A storyboard

Storyboards can be also be realized as wireframe models and later be used as final specifications. They are mostly used as a technique for Websites and learning applications, that is, for content-driven products.

Figure 4: Section of a wireframe model implemented with Microsoft PowerPoint (each view is a slide) (click image for larger view)


Paper Prototypes
Materials

Figure 5: A simple paper prototype

Paper prototypes can be implemented in a number of ways depending on personal experience or preferences. Typical materials used for paper prototypes are:

    * Cardboard – for the screen
    * PostIt's for menus, dialog boxes or other screen elements
    * Transparent slides for temporary items or user inputs
    * Masking tape or other tape for user inputs
    * Pens and markers (erasable markers for user inputs or temporary messages)
    * Water for erasing inputs
    * ...

Paper prototype

Figure 6: Example of a more complex paper prototype
Advantages

    * The Technology barrier vanishes
    * Less invested effort to defend
    * Less time wasted in arguments
    * Conveys product “feel” quite well
    * Faster than Visual Basic or HTML prototyping
    * Rapid improvements before investing effort in code
    * Not expensive
    * Created fast and easily (from less than an hour to a couple of hours)
    * Can be created by a group – this helps to gain a common understanding of the design
    * Everybody can take part in the design of paper prototypes – there is no special "tool" knowledge needed
    * Users can co-design the prototype during or after a test session
    * The focus of paper prototype discussions with users is the structure of the application and the suitability to the task
    * Discussions about "taste" matters or graphic design can be avoided
    * No barrier for users to criticize the prototype, because it is obviously of temporary nature

Drawbacks

    * Limited interaction – not all interaction issues can be tested sufficiently (for example, certain features like mouse-over events that give feedback to users cannot be simulated)
    * Can't evaluate response times
    * Have to fake data available in real system
    * Can't assess the visuals
          o Icons
          o Screen real estate issues
    * Lots of fiddling with paper
    * At least one person is needed to play the "computer" when the prototype is tested
    * Unsuitable for presentations with more than 3 people


HTML Prototypes
Low Fidelity Prototypes

Low fidelity prototypes can be created with minimal effort to demonstrate the basic interaction, for example, static HTML. They can be used for a walk-through with users and asking them the following questions:

    * Describe the system and each object
    * Where would you find [each function]?

HTML prototype

Figure 7: A low fidelity HTML prototype can be created from simple HTML elements if modeling interaction issues is the focus
High Fidelity Prototypes

High fidelity prototypes can be used for presentations to the board or colleagues because they convey many features of the final application, for example, the visual design. They are also suited to formal usability testing:

    * Give users written tasks to accomplish with required data
    * Users are asked to think aloud
    * Test facilitator guides user through the test
    * Test recorder notes usability problems
    * Rest of team silently observes, preferably in a different room
    * A satisfaction questionnaire may be used at the end

HTML prototypes can show the dynamics of an application

Figure 8: HTML prototypes are better suited to check the dynamics of a design than paper prototypes; here the "high fidelity" HTML prototype already includes some elements of the future graphic design
Tools

    * WYSIWYG HTML editor (or any other editor of your choice – however a WYSIWYG is faster)
    * One or more Web browsers for testing the prototype
    * Graphic tools
    * A library of design elements (helps creating consistent look and makes development faster once the library is established)
    * A library of graphical or other screen elements (helps among other things to reuse screen elements of the target platform)
    * ...

Advantages

    * Better interaction, especially useful for evaluating screen changes (but usually someone is needed who plays the "computer")
    * Useful for presentations of the application design or of design alternatives
    * Still time to make changes between days of testing and final coding
    * No hassle with paper

Drawbacks

    * Creation takes much time (usually one or more days)
    * Barrier to discard the prototype and start over
    * Not as flexible to test new ideas or alternatives
    * Providing realistic scenarios and fake data is time-consuming
    * Analyzing, editing tapes, creating reports delays change implementation
    * Often discussions on implementation issues ("taste") dominate content discussions
    * Users cannot CO-design the prototypes, they can only make suggestions (which cannot be checked immediately)
    * HTML and/or programming knowledge needed (usually created by one person only - the designer may also tend to create a "perfect" prototype)

Tips

    * Explore design alternatives and test them with users using scenarios or tasks.
    * Use the prototypes to add features and test them with users.
    * Prototyping is especially easy for designing simple applications with a limited number of views and user interface elements.
    * Prototypes for larger and more complex applications can be split into several prototypes that explore different aspects of the application in order to keep the prototypes simple.
回复 支持 反对

使用道具 举报

发表于 2007-9-19 11:31:34 | 显示全部楼层
纸面原型和电子原型都各有好处,下面说几点纸面原型的弱点  :

       纸面原型在同组同次讨论中是比较方便的,方便的及时修改、边讲边演示边做。不过它在不同组不同次的讨论会中,要多次重复演示纸面原型给其他组的同事看是很麻烦的,而且也不利于保存。

       为了有个统一的参考,让所有的人员都拿到一份原型来指导工作的话,还是需要出电子原型的。需要做出一种人人都看得懂的十分规范的线框图,否则就只能在小范围的人群内说清楚了。

[[i] 本帖最后由 Amer 于 2007-9-19 11:33 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-9-22 11:42:08 | 显示全部楼层
刚开始做网站的时候都是直接做,经常是摸不到头脑,浪费了很多时间。后来开始在纸上画草稿,效率高了很多。

个人认为可以几种方式结合。初期在纸上画出非常基本的草稿,然后再用HTML实现(这时候速度会快很多)
回复 支持 反对

使用道具 举报

发表于 2007-10-6 21:40:10 | 显示全部楼层
正在思考这些过程怎么样更有效率呢。。。。。。。谢搂主
回复 支持 反对

使用道具 举报

发表于 2007-12-5 23:09:26 | 显示全部楼层
土豆的帖子一定要顶!这是硬道理!
     作页面也一定要有原型。这是硬道理。
     该有朋友问了,什么叫原型?
      声明一下,我不是老师,不会讲理论;我的原则是:如人饮水,冷暖自知,靠自己体会吧。对了,给大家一点帮助,不对了,MMD,骂一句,我也不介意。
      举个例子,选中一个目标,比如这个页面的 ,然后双手虎口相对,留出一个圆洞,透过这个圆洞来看 ,你会发现,你不是两只眼同时看的,而是先用一只眼看,根据这个可以分左视眼,右视眼。类似关于视觉研究的例子有很多,不多介绍。这些研究都说明了一个事实,我们对一个物体的关注,不是我们认为的那样“一下子就看到了的”,而是一个寻找的过程,一个渐进的过程,一个区分背景的过程——别说我危言耸听——另外的一个视觉的例子,就是雪盲症。
     既然人看东西是一个复杂的过程,那么影响这个过程的因素就很多,有观看者的主观因素,不同的观看者对相同的观察对象有着不同的理解,这不属于我们研究的对象。
    我们所要做的是努力去取悦观看者,欺骗他的眼睛,引导他的视线,研究他的心理。
    比如我们要做一个新闻发布系统的一个审核页面,你就需要声明主题:至少你可以用一个黑字体h1,黑颜色,写明白 ***系统新闻审核,保证它是最吸引人的眼睛的,保证它的重量;然后你要帮助浏览者把要看的东西从背景中区分出来,这很重要的,即使你是白底黑字,也不是说就做到了这一点,因为大量的黑字本身就会成为一个背景,或许你会把其中一些重要的内容反白,或者换个颜色,这确实起到了区分的作用,但是这样的行为又会造成另外一个后果,会把页面分割的支离破碎,这同样会引起浏览者的反感。事实上,一个原型设计所需要考虑的东西很多,原型作的越好,后面所作的工作就越顺利,工作量就越小。
     哥们们,如果你不是被老板逼迫得明天必须交工,那么在页面出来之前,做一下原型设计,这个付出会是相当值得的。
    我不知道我所说的原型和楼主所说的是不是一回事,希望对大家有点益处。
回复 支持 反对

使用道具 举报

发表于 2007-12-6 00:18:23 | 显示全部楼层
补充些楼主未翻译的部分,其他翻译过的我就没再重看了。

* 更少的辩护(Less invested effort to defend)
--更少的论证投入

* The focus of paper prototype discussions with users is the structure of the application and the suitability to the task
同用户讨论纸质原型的焦点是程序架构和任务的适应度
* Discussions about “taste” matters or graphic design can be avoided
避免出现“品味”或关于影像(界面)设计的困扰话题

* Barrier to discard the prototype and start over
造成摒弃原型的障碍并推倒重来

* Often discussions on implementation issues (”taste”) dominate content discussions
时常陷入未完成事件(“品味”)的讨论从而支配了内容探讨

[[i] 本帖最后由 moonjeep 于 2007-12-5 11:41 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-12-24 09:36:28 | 显示全部楼层
一般我做的都是中保真原型,其实现在能耐心按流程下来的项目都不多
回复 支持 反对

使用道具 举报

发表于 2007-12-24 13:58:02 | 显示全部楼层
其实原型的制作程度要根据项目大小、进度、时间安排来确定的。
但是,原则就是一个——尽量展现给下游人员最完善、易懂的稿子;
回复 支持 反对

使用道具 举报

发表于 2008-3-7 10:09:18 | 显示全部楼层
不错,纸质原型没怎么用过,貌似老外很倡导这种方法;
最近都用axure做原型,挺方便的,演示起来也可以避免大家陷入一些不必要的信仰大战;
同时,另外安排一条线可以完成一些关键页面的html原型,一则供开发做一些研究,二则在不断的迭代过程中,这个原型也将可以直接运用于上线的最终html代码~~~
回复 支持 反对

使用道具 举报

发表于 2008-6-10 14:05:20 | 显示全部楼层
感觉很有激情的做法
回复 支持 反对

使用道具 举报

发表于 2008-6-11 10:57:29 | 显示全部楼层
我顶
回复 支持 反对

使用道具 举报

发表于 2008-6-13 01:35:26 | 显示全部楼层
原形的设计的确有助于数据库设计给程序员确认方向 我顶
回复 支持 反对

使用道具 举报

发表于 2008-6-13 09:25:05 | 显示全部楼层
已标“高亮”

感谢“第一速度”提供这么有价值和分量的文章!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-22 05:57 , Processed in 0.171439 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表