制作用户界面原型的艺术

The Art of UI Prototyping

By Scott Berkun, November 2000

即使最聪明的人也会犯错误。这点对于很多开发团队特别真确。当项目往前推进的时候，小的假设和愿望良好但糟糕的决定不断积累，把辛勤的工作成果转化为糟糕的用户体验。聪明的团队通过使用一种叫做UI prototyping的技术在产品发布给用户之前消除他们的错误。结合易用性研究，prototypes（原型）让开发团队在正确的方向前进。

Even the brightest people make mistakes. This is especially true for teams of people. Somehow, as a project moves forward, small assumptions and well-intentioned but poor decisions accumulate, turning hours of work into a lousy user experience. The smart teams eliminate their mistakes before they ship by using a technique called UI prototyping. Combined with usability studies, prototypes keep teams headed in the right direction.

Why Prototype?为什么要做原型？

protoyping（制作原型）是一种让你在真正投入开发各种IDEAS之前可以探索这些主意的手段。有经验的工匠和工程师在他们真正创建之前会创建作品的原型：建筑师用纸或纸板或用虚拟现实工具创建模型。Aeronautic工程师使用风洞。桥梁建筑师创建压力模型。软件/WEB设计师创建用户如何与设计交互的MOCKUPS（模拟图）
Prototyping is a means of exploring ideas before you invest in them. All experienced craftspeople and engineers create prototypes of their work before they build anything: Architects create models out of paper or cardboard, or with virtual reality tools. Aeronautic engineers use wind tunnels. Bridge builders create stress models. Software and Web designers create mock-ups of how users will interact with their designs.

进行原型化设计的最佳原因是为了节约时间和资源。原型的价值是它是一个门面，就象好莱污的布景设置一样，只有建筑的前面被创建。相对于真正的产品，创建原形是容易和不昂贵的。只要最小的投资，你就可以发现易用性和设计问题，并在你投入大量的（资金和人力）于最终的设计和技术之前可以调整你的UI.

The best reason to prototype is to save time and resources. The value of the prototype is that it is a facade—like a Hollywood set, where only the front of the building is constructed. Relative to the real product, prototypes are easy and inexpensive to create. So, for a minimal investment, you can find usability and design problems and adjust your UI before you invest heavily in the final design and technologies.

在检查..........................
On examining the needs of your particular project, you might come up with reasons for creating a prototype other than saving money. Is the goal to explore a new interface model? Make modifications to one part of the existing design? Investigate a new technology? It‘‘‘‘‘‘‘‘s important to be clear about why you‘‘‘‘‘‘‘‘re building what you‘‘‘‘‘‘‘‘re building before you start. If you begin with clear goals, you can be direct and effective in your efforts. The reasons for creating prototypes fall into three basic categories:

--Proof of concept.
验证概念 在一些团队中对于项目的未来方向会有分歧。你可以使用圆形来证明某个想法或新做法有价值。原型可以帮助勾画出一个想法是如何工作的，以视觉化和交互的方式表现它的特点，促使团队的成员以另外的视角去思考问题
Among some teams there are disagreements about the future direction of a project. You can use a prototype to prove that an idea or new approach has merit or value. A prototype can help illustrate that an idea works, express its qualities in a visual and interactive way, and/or motivate team members to think about the problem from another perspective.

---Design exploration设计探索 .

如果你设计交互产品，唯一去探索产品如何被使用的方式就是创建一个模拟，并与之交互操作。......................

If you design interactive things, the only way to explore how something will be used is to create a mock-up and interact with it. Sometimes the mock-up is tied to a usability study, where parts of the prototype can be evaluated in a structured way. Sometimes it‘‘‘‘‘‘‘‘s just a way to clearly express to a developer how something should work or look. In many cases, a designer might simply be experimenting, in an effort to get a sense for what approach might work. Anyone on the team can use prototypes to explore design issues, although designers are generally the most skilled. Design explorations should be directed at trying to solve specific problems that you‘‘‘‘‘‘‘‘ve recognized in your product.

Technical exploration.技术探索
开发人员对于调查某问题的实施方式经常是尝试不同的编码技术去看它们是否能有效工作。使用HTML。。JSCTRPT。。SQL。。DHTML。。WIN32。。或每种技术内所特别的编码方式有不同的TRADEOFFS。。有时一个原型代表着能很好支持某种UI或WEB 特点的技术的探索。
Developers investigating implementation approaches to a problem often try out different coding techniques to see if they work well. Using HTML, Jscript, SQL, DHTML, Win32, or specific coding approaches within each technology have different tradeoffs. Sometimes a prototype represents an exploration into what technology will work well to support a certain UI or web feature.

有时原型是因为综合这几种原因而创建。如果计划周全，开发团队能分配一个开发人员、一名设计师或项目经理去共同创建一个原型。在那种情况下，澄清目标和明确每个成员应负责什么非常重要。你应该让每个人都明确目标是什么，每个人所负责的是什么，潜在的结果会是什么
Sometimes prototypes are created for a combination of these reasons. If a team plans well enough, they can allot time for a developer and a designer or project manager to work together on a prototype. In such cases, it‘‘‘‘‘‘‘‘s extremely important to clearly define the goals and the contributions each team member is expected to make. You want everyone to be clear on what the goals are, what‘‘‘‘‘‘‘‘s at stake, and what the potential outcome will be.

Who Is Involved?谁参与其中？

制作原型可以被任何人随便所进行，不管他们的背景或在项目中的角色。。通过使用PHOTOSHOP...
Prototyping can be done informally by anyone, regardless of their background or role in the project. It‘‘‘‘‘‘‘‘s easy to make a simple but effective prototype by taking a bitmap from Adobe Photoshop, putting it into the Microsoft® FrontPage® Web site creation and management tool, and adding active buttons or links. These lightweight prototypes only go so far, and can become unwieldy for complex interactions.

对于较大团队更正式的原型，......
For more formal prototypes by larger teams, a developer or project manager will often collaborate with a designer and a usability engineer. Together they‘‘‘‘‘‘‘‘ll generate ideas, build a prototype that represents the best ideas, and then go into the lab to see how effective it is in solving user problems. Developers might get involved if they can spare the time, or if their technical expertise is needed. Often the designer or project manager will do most of the scripting or coding to build the prototype.

When Do You Build a Prototype?我什么时候去build一个原型

Depending on the scope of the prototype and the level of detail required, prototypes can be built at any time during the project. Most often they are created early in the project, during the planning and specification phase, before developers write any production code. That‘‘‘‘‘‘‘‘s when the need for exploration is greatest, and when the time investment needed is most viable. If developers instead of program managers or designers are prototyping, scheduling time becomes even more important because you need to make sure the work invested in the prototype is accounted for in the development schedule. Planning for any UI release should include some level of prototyping.

Late in a project, smaller prototypes can help resolve tough design and technical issues. A quick HTML mock-up of how a dialog box or Web page should behave can help answer a developer‘‘‘‘‘‘‘‘s question or give other teammates a feel for what the desired experience should be. In some cases, a strong program manager or designer can implement the behavior in Microsoft JScript® development software and approximate much of the programming logic that developers will need to think through.

The time it takes to create a prototype can vary tremendously, depending on the scope and precision of what the end result needs to look like. An informal prototype could mean a few hours of work by one person; a more organized effort can involve weeks of effort by an entire team.

How Far Should You Go?您应该走多远？
在你的原型中，只创建设计中所需要的部分。如果按钮没有效果或者文字从来不更新，是OK的。只要你可以体会你想探索的交互，对于剩下的使用SMOKE AND MIRRORS是可以的。下面是你应该仔细专注于你的努力的几个原因：
In your prototype, build only as much of the design as you need. It‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s okay to have buttons that don‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t work, or text that never updates. As long as you can experience the interactions you want to explore, it‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s fine to use smoke and mirrors for the rest. Here are a few reasons why you should focus your efforts carefully:

创建原型的代价。你想最小化创建原型的花费。创建原型的挑战是需要认识到--用最小的投入需要有效回答关于设计的问题。.....................
Cost of building the prototype. You want to minimize the cost involved in building the prototype. The challenge with prototyping is recognizing the minimal investment needed to effectively answer your questions about the design. This is where usability studies are critical, because they clearly identify the parts of your UI that need the most work. Even without usability studies, you should clearly define what user problems you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re trying to solve, or what tasks you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re trying to improve, with the design in your prototype.

有限的项目生命期。原型应该有明确定义的生命期。.....
Limited lifetime. Prototypes should have clearly defined lifetimes. Is the end goal a presentation at a team meeting? An executive review meeting? A spec review? A usability study? Convincing yourself, with your devil‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s advocate hat on, that the design solves a user problem? Once the needs for these specific objectives are met, the prototype should be set aside. The basic mindset is that the code or bitmaps generated in a prototype will be left behind. There might be exceptions where code or visuals live on in the product, but the expectation should be that this won‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t be the case.

吓住团队的风险。展示原型给开发人员和同事是很棘手的。一个过分复杂或精细的原型，具有令人惊叹的视觉效果和动画，会令人们觉得有压力...
Risk of overwhelming the team. Showing prototypes to developers and teammates can be tricky. An overly complex or elaborate prototype, sporting amazing visuals and animation, can overwhelm people. You should always have a sense for how far to go and how much of what you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re creating in the prototype you want to be taken seriously.

Determining the Scope of Your Prototype决定你的原型的范围
As you determine where to focus your prototyping efforts, here are some things to consider:
当你决定你的原型专注与何处的时候，你需要考虑：

用户的需要。如果你从理解你的用户的关键问题或需要着手，对于哪一个部分是大部分探索的基础你会有一个想法。

Customer needs. If you start with an understanding of the key problems or needs of your users (perhaps something your usability engineer has provided for you), then you have an idea about which parts warrant the most exploration.

易用性研究任务.如果你为易用性研究创建原型，和易用性工程师讨论什么任务应该是原型的一部分，讨论相关的设计。

Usability study tasks. If you are creating the prototype for a usability study, discuss with the usability engineer what specific tasks will be part of the study, and design around those elements.

团队的想法： 当那些IDEAS（想法）你的原型中被组合起来的时候，和你团队中的关键开发人员交谈。从他们那里获取关于“哪些是合理的，哪些是可能的，哪些是超出考虑范围应属于下一个版本”的基本感觉。.......

Team input. Talk with key developers on your team as the ideas in your prototype are coming together. Get a basic sense from them on what‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s reasonable, what‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s possible, and what is beyond consideration for the next release. In some cases, you might deliberately go beyond what they say is possible for one aspect of the design if it‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s a key point and you think the team needs to be challenged. However, you don‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t want to do this with every aspect of your prototype. There is a fine line between pushing the limits and overwhelming your team. If you only want to inspire the team by showing them a vision for several versions out, then go for it. However, if you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re looking to define specific changes for the next release, then focus your efforts on those changes. Make sure you call out the specific changes in a modular way to show developers a path for building your designs.

宽度VS深度。对于较大的原型，需要额外考虑“宽度对深度”的问题。...........
Breadth vs. depth. For larger prototypes, there is the additional consideration of breadth versus depth. Do you make each feature in the design work just a little bit, or do you pick one feature and prototype almost all of its pieces and options? If you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re not careful, you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘ll try to do both at the same time and end up with a large, unwieldy prototype that is hard to modify and difficult to throw away.
Wireframe vs. Visual design - Depending on your audience, consider what level of visual design quality you need your prototype to have. Sketches or box drawings may suffice for folks you work with often, that you do not need to impress, or who can understand the difference between the prototype, and what it represents. If you are presenting to less experienced clients, certain executives, or more technical audiences, a more robust and aesthetically invested prototype might be appropriate. An additional consideration is what questions you have for the design itself - if you hope to learn about the impact of your aesthetic and layout choices on usability, and you are planning for a usability test, you need to make that additional investment.
ROI: Return on Investment - Prototypes allow for various forms of evaluation (aesthetic, business, technical, usability). The higher fidelity the prototype is, the greater accuracy your evaluation will have. The most robust prototypes require no explanation - you just point people at it, and let them experience it for themselves. The more you have to explain (oh, that wouldn‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t do that in the real version, the style will be more techno) the less robust it is, and the less accurate the evaluations are likely to be. Of course, you pay a price for the investments you make. Deciding how robust is enough, and how accurate an evaluation you need to make is a judgement call, much like the decision making processes of actual web sites or software products. Your goal is to invest as much as necessary to obtain the information and effects you want, but no more.

Making Prototypes Flexible让原形灵活
One way to focus your prototyping resources is to concentrate on smart design. You can create more effective prototypes by allowing one piece of prototype code to exercise many different ideas. Instead of having five different prototypes, consider making one prototype that has the options to switch the different attributes of the prototype.

Should the toolbar be located on the left or on the top? Should we show 10 items on the home page or 20? A good prototype has some sort of built-in options panel that allows you to change the parameters of how the prototype looks or works. Keep these option panels hidden in your prototype—you don‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t want a usability participant accidentally finding them during a test.

The challenge is to keep the prototype simple, but still useful enough that you can show it to a teammate, walk through some of the different options you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re thinking about, and get feedback on them.

How Do Beta Releases Differ from Prototypes?Beta版本发布如何与原型不同？
BETA版本的发布并没有资格作为原型，因为它们是完全的工程开发努力的结果。如果你在一个测试版本中发现一个FEATURE的关键错误，你并不可能把它扔掉，即使那最符合产品的利益...开发人员、测试人员、设计人员已经投资了他们的时间于其中，要和糟糕的决定一起继续下去的压力是非常高的。BETA版本肯定能帮助找到错误和缺陷，但它们...

Beta releases don‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t qualify as prototypes, because they are complete engineering efforts. If you find a critical mistake in a feature of a beta release, you are unlikely to throw it away, even if that might be in the best interest of the product. The developers, testers, and designers have already invested their time, and the pressure to live with bad decisions is very high. Betas certainly do help in finding bugs and defects, but they are rarely useful in making controlled studies of the value of specific design directions.

Tools and Technologies工具和技术
有几种工具和技术你可以用来创建原型，每一种有其优点和不足。根据你准备原型化的设计工作的类型和目标，选择合适的工具或技术来创建原型。
There are several different tools and technologies you can use for creating prototypes, each of which has its advantages and disadvantages. Consider the type of design work you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re trying to prototype and the goals of your prototyping effort as you decide which tool or technology is right for you.

---Paper纸张 -对于易用性研究或快速的评估，纸是最快的方式去原型化一个设计想法。使用photoshop\mspaint或其他工具，可以制作表达设计的设计图，然后把它们打印在纸上。 如果你制作了足够的设计图，你可以模拟“走查”，让测试用户做出选择和体验设计。但是，对于具有一定复杂性的的原形，制作纸原型是很笨拙费力的。高度交互性的东西如游戏或聊天室不能很好地在纸上模拟。For usability studies or quick reviews, paper is often the fastest way to prototype a design idea. Using Photoshop, mspaint, or any tool you are comfortable with, produce screens that express the design, and print them out on paper. If you make enough screens, you can simulate walkthroughs, allowing test users to make choices and experience the design. However, for prototypes of moderate complexity, generating paper prototypes can be cumbersome. Highly interactive things like games or chat rooms can not be simulated well on paper. Also, the more elaborate the tasks, the more pages you might need to have handy.

VB是制作WINDOWS风格ui原型最快的技术。.....的确有经验的C/C++程序员能较快地用C/C++制作UI，会有在最终的产品开发代码中重用这些代码的诱惑。.....需要discipline去认识到快速、肮脏的UI原型和高质量的开发的目标是完全不一样的。。应确保你了解你正在写哪种代码，确保你的团队和经理明白什么会被丢弃.

---Microsoft Visual Basic—.This is the fastest technology for creating Windows-style UI prototypes. The Web browser object makes it easy to integrate HTML UI with your standard Windows-style components. While it‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s true that an experienced C/C++ developer might be able to generate UI faster in C/C++, this creates the temptation to reuse code from the UI prototype in your production code. It takes discipline to recognize that the goals of a quick and dirty UI prototype are highly divergent from high-quality engineering. Make sure you know what kind of code you‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘re writing, and that your team or manager understands what will be discarded.

---Macromedia Director or Flash. 在设计师中最流行的UI prototyping工具之一。对于多媒体或非标准的GUI设计或要求大量动画的原形，它是最有用的工具。它的高度灵活性使它制作windows风格的UI跟VB相比比较笨拙，但是专业的Director用户能没有困难地制作出Windows 或Web UI...(译注：Flash的actionscript能让专业的flash设计师制作很强大的WINDOWS原型，特别是FLASH MX2004版本的组件让制作原型更加快捷和容易。回想2年前花了很多时间和精力制作的产品原型，如果现在通过强大的flash mx来制作原型，会快很多，效果会更逼真，我个人认为FLASH做原型是一个很好、也很快速的工具，但也有弱点）This is one of the most popular UI prototyping tools among designers. It is most useful for multimedia or non-standard GUI designs, or for prototypes that require significant animation. It‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘s high flexibility makes it cumbersome for Windows-style UI compared to Visual Basic. However, a proficient Director user can generate Windows or Web UI without difficultly.

---HTML. Dreamweave.Frongtpage和其他ＨＴＭＬ编辑器能快速创建简单的原型 要表达一个想法，可以创建一系列用户交互的图片，然后把它们放入ＦＲＯＮＴＰＡＧＥ中。然后创建链接区域把这些页面连接起来，然后模拟如何交互操作该设计。而javascript和DHTML能使原型上升到另外一个层次，能产生复杂的逻辑和交互。如果使用ＨＴＭＬ来制作ＷＥＢ站点的原型，针对Ｃ／Ｃ＋＋所描述的警告也适用于这里：不要掉入把快速原型的代码和最终的开发工程混在一起的陷阱。

Dreamweaver, FrontPage and other HTML editors allow for fast creation of simple prototypes. To express an idea, you can often create bitmaps that illustrate a sequence of user interaction, and place them into FrontPage. Then you can create link areas to connect the pages, and simulate how you can interact with the design.

JScript and DHTML take things to another level, allowing for very sophisticated logic and interaction. If you are using HTML to prototype your Web site, the warning just described for C/C++ applies here as well—don‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘t fall into the trap of confusing quick prototype code with production-quality engineering.