2\u5e74\u524d\u6211\u8bfb\u8fd9\u7bc7\u6587\u7ae0\u7684\u65f6\u5019\uff0c\u6211\u6b63\u5728\u7528Flash\u505a\u6240\u5f00\u53d1\u4ea7\u54c1\u7684\u539f\u578b\uff0c\u8bfb\u5230\u8fd9\u6587\u7ae0\u540e\uff0c\u4ece\u6b64\u8ba9\u6211\u5bf9Scott Berkun\u6709\u4e86\u5f88\u6df1\u7684\u656c\u610f
\n—————
\n\u62bd\u51fa\u4e00\u70b9\u65f6\u95f4\u5f88\u4e0d\u8fde\u8d2f\u5730\u3001\u975e\u5e38\u975e\u5e38\u7c97\u7cd9\u5730\u7ffb\u8bd1\u4e86\u5176\u4e2d\u7684\u90e8\u5206.\u800c\u975e\u5168\u90e8..\u5f88\u591a\u8868\u8fbe\u4e5f\u5e76\u4e0d\u786e\u5207\uff0c\u8981\u5f88\u5230\u4f4d\u5730\u7ffb\u8bd1\u9700\u8981\u65f6\u95f4\u548c\u7cbe\u529b…\u5e0c\u671b\u4f60\u6700\u597d\u770b\u82f1\u6587\uff0c\u770b\u539f\u6587\u624d\u662f\u6700\u597d\u7684\u65b9\u5f0f\uff0c\u52a3\u8d28\u7684\u7ffb\u8bd1\u4f1a\u8d70\u5473\uff0c\u800c\u4e14\u8fd9\u6587\u7ae0\u8981\u7ffb\u8bd1\u5f97\u5f88\u8d34\u5207\u4e0d\u662f\u975e\u5e38\u5bb9\u6613\u3002\u6211\u7684\u7ffb\u8bd1\u80af\u5b9a\u662f\u5f88\u7cdf\u7cd5\u7684\uff0c\u8fd9\u79cd\u7cdf\u7cd5\u7684\u7ffb\u8bd1\u8d28\u91cf\u6211\u672c\u6765\u662f\u6ca1\u6709\u8138\u9762\u8d34\u51fa\u6765\u7684\u3002\u3002\u53ea\u662f\u9488\u5bf9\u90a3\u4e9b\u5728\u7406\u89e3\u539f\u6587\u65f6\u9047\u5230\u56f0\u96be\u7684\u670b\u53cb\uff0c\u6211\u7684\u7ffb\u8bd1\u6216\u8bb8\u4f5c\u4e3a\u4e00\u4e2a\u7406\u89e3\u4e0a\u7684\u53c2\u8003\uff0c\u5e0c\u671b\u6ca1\u6709\u4e25\u91cd\u8bef\u5bfc\u4f60..\u6211\u5b9e\u5728\u662f\u6ca1\u6709\u592a\u591a\u7684\u70ed\u60c5\u53bb\u8ba4\u771f\u7ec6\u81f4\u5730\u7ffb\u8bd1\u8fd9\u7bc7\u6587\u7ae0\uff0c\u5982\u679c\u54ea\u4f4d\u70ed\u5fc3\u8005\u613f\u610f\u5b8c\u6574\u7ec6\u81f4\u5730\u7ffb\u8bd1\uff0c\u5f53\u7136\u66f4\u597d..<\/p>\n
The Art of UI Prototyping<\/p>\n
By Scott Berkun, November 2000<\/p>\n
\u5373\u4f7f\u6700\u806a\u660e\u7684\u4eba\u4e5f\u4f1a\u72af\u9519\u8bef\u3002\u8fd9\u70b9\u5bf9\u4e8e\u5f88\u591a\u5f00\u53d1\u56e2\u961f\u7279\u522b\u771f\u786e\u3002\u5f53\u9879\u76ee\u5f80\u524d\u63a8\u8fdb\u7684\u65f6\u5019\uff0c\u5c0f\u7684\u5047\u8bbe\u548c\u613f\u671b\u826f\u597d\u4f46\u7cdf\u7cd5\u7684\u51b3\u5b9a\u4e0d\u65ad\u79ef\u7d2f\uff0c\u628a\u8f9b\u52e4\u7684\u5de5\u4f5c\u6210\u679c\u8f6c\u5316\u4e3a\u7cdf\u7cd5\u7684\u7528\u6237\u4f53\u9a8c\u3002\u806a\u660e\u7684\u56e2\u961f\u901a\u8fc7\u4f7f\u7528\u4e00\u79cd\u53eb\u505aUI prototyping\u7684\u6280\u672f\u5728\u4ea7\u54c1\u53d1\u5e03\u7ed9\u7528\u6237\u4e4b\u524d\u6d88\u9664\u4ed6\u4eec\u7684\u9519\u8bef\u3002\u7ed3\u5408\u6613\u7528\u6027\u7814\u7a76\uff0cprototypes\uff08\u539f\u578b\uff09\u8ba9\u5f00\u53d1\u56e2\u961f\u5728\u6b63\u786e\u7684\u65b9\u5411\u524d\u8fdb\u3002<\/p>\n
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.<\/p>\n
Why Prototype?\u4e3a\u4ec0\u4e48\u8981\u505a\u539f\u578b\uff1f<\/p>\n
protoyping\uff08\u5236\u4f5c\u539f\u578b\uff09\u662f\u4e00\u79cd\u8ba9\u4f60\u5728\u771f\u6b63\u6295\u5165\u5f00\u53d1\u5404\u79cdIDEAS\u4e4b\u524d\u53ef\u4ee5\u63a2\u7d22\u8fd9\u4e9b\u4e3b\u610f\u7684\u624b\u6bb5\u3002\u6709\u7ecf\u9a8c\u7684\u5de5\u5320\u548c\u5de5\u7a0b\u5e08\u5728\u4ed6\u4eec\u771f\u6b63\u521b\u5efa\u4e4b\u524d\u4f1a\u521b\u5efa\u4f5c\u54c1\u7684\u539f\u578b\uff1a\u5efa\u7b51\u5e08\u7528\u7eb8\u6216\u7eb8\u677f\u6216\u7528\u865a\u62df\u73b0\u5b9e\u5de5\u5177\u521b\u5efa\u6a21\u578b\u3002Aeronautic\u5de5\u7a0b\u5e08\u4f7f\u7528\u98ce\u6d1e\u3002\u6865\u6881\u5efa\u7b51\u5e08\u521b\u5efa\u538b\u529b\u6a21\u578b\u3002\u8f6f\u4ef6\/WEB\u8bbe\u8ba1\u5e08\u521b\u5efa\u7528\u6237\u5982\u4f55\u4e0e\u8bbe\u8ba1\u4ea4\u4e92\u7684MOCKUPS\uff08\u6a21\u62df\u56fe\uff09
\nPrototyping 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.<\/p>\n
\u8fdb\u884c\u539f\u578b\u5316\u8bbe\u8ba1\u7684\u6700\u4f73\u539f\u56e0\u662f\u4e3a\u4e86\u8282\u7ea6\u65f6\u95f4\u548c\u8d44\u6e90\u3002\u539f\u578b\u7684\u4ef7\u503c\u662f\u5b83\u662f\u4e00\u4e2a\u95e8\u9762\uff0c\u5c31\u8c61\u597d\u83b1\u6c61\u7684\u5e03\u666f\u8bbe\u7f6e\u4e00\u6837\uff0c\u53ea\u6709\u5efa\u7b51\u7684\u524d\u9762\u88ab\u521b\u5efa\u3002\u76f8\u5bf9\u4e8e\u771f\u6b63\u7684\u4ea7\u54c1\uff0c\u521b\u5efa\u539f\u5f62\u662f\u5bb9\u6613\u548c\u4e0d\u6602\u8d35\u7684\u3002\u53ea\u8981\u6700\u5c0f\u7684\u6295\u8d44\uff0c\u4f60\u5c31\u53ef\u4ee5\u53d1\u73b0\u6613\u7528\u6027\u548c\u8bbe\u8ba1\u95ee\u9898\uff0c\u5e76\u5728\u4f60\u6295\u5165\u5927\u91cf\u7684\uff08\u8d44\u91d1\u548c\u4eba\u529b\uff09\u4e8e\u6700\u7ec8\u7684\u8bbe\u8ba1\u548c\u6280\u672f\u4e4b\u524d\u53ef\u4ee5\u8c03\u6574\u4f60\u7684UI.<\/p>\n
The best reason to prototype is to save time and resources. The value of the prototype is that it is a facade\u2014like 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.<\/p>\n
\u5728\u68c0\u67e5……………………..
\nOn 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: <\/p>\n
–Proof of concept.
\n\u9a8c\u8bc1\u6982\u5ff5 \u5728\u4e00\u4e9b\u56e2\u961f\u4e2d\u5bf9\u4e8e\u9879\u76ee\u7684\u672a\u6765\u65b9\u5411\u4f1a\u6709\u5206\u6b67\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u5706\u5f62\u6765\u8bc1\u660e\u67d0\u4e2a\u60f3\u6cd5\u6216\u65b0\u505a\u6cd5\u6709\u4ef7\u503c\u3002\u539f\u578b\u53ef\u4ee5\u5e2e\u52a9\u52fe\u753b\u51fa\u4e00\u4e2a\u60f3\u6cd5\u662f\u5982\u4f55\u5de5\u4f5c\u7684\uff0c\u4ee5\u89c6\u89c9\u5316\u548c\u4ea4\u4e92\u7684\u65b9\u5f0f\u8868\u73b0\u5b83\u7684\u7279\u70b9\uff0c\u4fc3\u4f7f\u56e2\u961f\u7684\u6210\u5458\u4ee5\u53e6\u5916\u7684\u89c6\u89d2\u53bb\u601d\u8003\u95ee\u9898Among 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.<\/p>\n
—Design exploration\u8bbe\u8ba1\u63a2\u7d22 . <\/p>\n
\u5982\u679c\u4f60\u8bbe\u8ba1\u4ea4\u4e92\u4ea7\u54c1\uff0c\u552f\u4e00\u53bb\u63a2\u7d22\u4ea7\u54c1\u5982\u4f55\u88ab\u4f7f\u7528\u7684\u65b9\u5f0f\u5c31\u662f\u521b\u5efa\u4e00\u4e2a\u6a21\u62df\uff0c\u5e76\u4e0e\u4e4b\u4ea4\u4e92\u64cd\u4f5c\u3002………………….<\/p>\n
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.<\/p>\n
Technical exploration.\u6280\u672f\u63a2\u7d22
\n\u5f00\u53d1\u4eba\u5458\u5bf9\u4e8e\u8c03\u67e5\u67d0\u95ee\u9898\u7684\u5b9e\u65bd\u65b9\u5f0f\u7ecf\u5e38\u662f\u5c1d\u8bd5\u4e0d\u540c\u7684\u7f16\u7801\u6280\u672f\u53bb\u770b\u5b83\u4eec\u662f\u5426\u80fd\u6709\u6548\u5de5\u4f5c\u3002\u4f7f\u7528HTML\u3002\u3002JSCTRPT\u3002\u3002SQL\u3002\u3002DHTML\u3002\u3002WIN32\u3002\u3002\u6216\u6bcf\u79cd\u6280\u672f\u5185\u6240\u7279\u522b\u7684\u7f16\u7801\u65b9\u5f0f\u6709\u4e0d\u540c\u7684TRADEOFFS\u3002\u3002\u6709\u65f6\u4e00\u4e2a\u539f\u578b\u4ee3\u8868\u7740\u80fd\u5f88\u597d\u652f\u6301\u67d0\u79cdUI\u6216WEB \u7279\u70b9\u7684\u6280\u672f\u7684\u63a2\u7d22\u3002
\nDevelopers 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. <\/p>\n
\u6709\u65f6\u539f\u578b\u662f\u56e0\u4e3a\u7efc\u5408\u8fd9\u51e0\u79cd\u539f\u56e0\u800c\u521b\u5efa\u3002\u5982\u679c\u8ba1\u5212\u5468\u5168\uff0c\u5f00\u53d1\u56e2\u961f\u80fd\u5206\u914d\u4e00\u4e2a\u5f00\u53d1\u4eba\u5458\u3001\u4e00\u540d\u8bbe\u8ba1\u5e08\u6216\u9879\u76ee\u7ecf\u7406\u53bb\u5171\u540c\u521b\u5efa\u4e00\u4e2a\u539f\u578b\u3002\u5728\u90a3\u79cd\u60c5\u51b5\u4e0b\uff0c\u6f84\u6e05\u76ee\u6807\u548c\u660e\u786e\u6bcf\u4e2a\u6210\u5458\u5e94\u8d1f\u8d23\u4ec0\u4e48\u975e\u5e38\u91cd\u8981\u3002\u4f60\u5e94\u8be5\u8ba9\u6bcf\u4e2a\u4eba\u90fd\u660e\u786e\u76ee\u6807\u662f\u4ec0\u4e48\uff0c\u6bcf\u4e2a\u4eba\u6240\u8d1f\u8d23\u7684\u662f\u4ec0\u4e48\uff0c\u6f5c\u5728\u7684\u7ed3\u679c\u4f1a\u662f\u4ec0\u4e48
\nSometimes 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.<\/p>\n
Who Is Involved?\u8c01\u53c2\u4e0e\u5176\u4e2d\uff1f<\/p>\n
\u5236\u4f5c\u539f\u578b\u53ef\u4ee5\u88ab\u4efb\u4f55\u4eba\u968f\u4fbf\u6240\u8fdb\u884c\uff0c\u4e0d\u7ba1\u4ed6\u4eec\u7684\u80cc\u666f\u6216\u5728\u9879\u76ee\u4e2d\u7684\u89d2\u8272\u3002\u3002\u901a\u8fc7\u4f7f\u7528PHOTOSHOP…
\nPrototyping 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.<\/p>\n
\u5bf9\u4e8e\u8f83\u5927\u56e2\u961f\u66f4\u6b63\u5f0f\u7684\u539f\u578b\uff0c……
\nFor 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. <\/p>\n
When Do You Build a Prototype?\u6211\u4ec0\u4e48\u65f6\u5019\u53bbbuild\u4e00\u4e2a\u539f\u578b<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
2\u5e74\u524d\u6211\u8bfb\u8fd9\u7bc7\u6587\u7ae0\u7684\u65f6\u5019\uff0c\u6211\u6b63\u5728\u7528Flash\u505a\u6240\u5f00\u53d1\u4ea7\u54c1\u7684\u539f\u578b\uff0c\u8bfb\u5230\u8fd9\u6587\u7ae0\u540e\uff0c\u4ece\u6b64\u8ba9\u6211\u5bf9Scott Berku […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-218","post","type-post","status-publish","format-standard","hentry","category-3"],"views":7850,"_links":{"self":[{"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=\/wp\/v2\/posts\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=218"}],"version-history":[{"count":0,"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=\/wp\/v2\/posts\/218\/revisions"}],"wp:attachment":[{"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucdchina.com\/baiya\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}