A bit of a tangle of quick prototypes

As an interactive designer and tool controller, I have always been interested in the topic of prototyping design. Work so far, have used a lot of different types of prototype tools, from the most basic paper pens, to Axure rp/omni graffle, in constant attempts and comparisons, also has been thinking about what the prototype tool is most suitable for interactive design. It turned out that there was no solution to the problem. There is no value in simply discussing tools without purpose. So think about writing the purpose of rapid prototyping and the choice of tools.

First, define the prototype (prototype), where the key point is to differentiate between Wireframe,prototype and mockup three concepts.

Wireframe, the literal word is a wireframe. A sketch or sketch made of a line belongs to wireframe. Of course, if there is a simple shadow performance or color, the general also belong to Wireframe.

Mockup, models, industrial design with mockup will be more, such as 1:1 of the car sludge model. But in UI design, the concept of mockup and wireframe are sometimes not very clear. such as Balsamiq mockups this software, its implementation effect should actually belong to wireframe level. The following figure is the implementation effect of Balsamiq mockups.

Finally said prototype, prototype. The stereotype emphasizes functionality, and it's easy to distinguish between the two, which is typically the prototype. So PS output is generally not a prototype, and the implementation of the DW Web page is called the prototype, the following figure is an Apple prototype.

After a long search on the FLICRK, it was found that the prototype was difficult to perform with pictures, so he found a video of a paper prototype on YouTube. I've never had a cold on a paper prototype and I've seen it all the more. Video Address

The prototype generally has a low fidelity prototype (Low-fidelity prototype) and a high-fidelity prototype (high-fidelity prototype), such as the above paper prototype is the lowest-fidelity prototype. But in a tangle, the division is problematic. Because there are at least two dimensions of fidelity. The fidelity of the visual and the fidelity of the interaction (the degree of completion of the function implementation). Another dimension is the fidelity of content, which is also an important dimension in content products.

One important factor in the diagram above is whether technology or code can be reused. This is not the main focus of this article, and the need to consider code reuse in a quick prototyping is a lot of limitations. As far as I can see, for projects outside the Web or blend, the reuse of prototype code is relatively rare. And the pursuit of code reuse of the prototype, must have been in the high fidelity phase, itself has been inconsistent with the rapid prototyping to pursue the number and iterative purposes, the following will be mentioned.

In the face of external customers, the visual fidelity of the prototype is more important, it can better help customers understand the design, and a visual fidelity of the prototype, in the proposal will be more convincing. Shortcomings are also obvious, the same prototype needs to invest more time, once the design changes to invest more time, and in the early stage of the project, it is generally difficult to do a high visual fidelity prototype, so the entire design process in the application has limitations.

Therefore, if it is not necessary to the external customer proposal, just for internal communication, testing the interaction problem, the visual fidelity can be returned to the second, the interaction of fidelity as the main dimension. Speed and quantity should be pursued as much as possible in the early stages of the product to find new ideas and reduce risk at the end of the project.

So I have a definition of the rapid prototyping: early in the project to discover new ideas and test design for the main purpose of the prototype design behavior.

On the quest for quantity, interrupt a little story from Bill Buxton's sketching user experience Book:

The pottery teacher said on the first day that the students would be divided into two groups, and the students sitting on the left side of the studio would only be graded by the number of pottery they made, while the students on the right would be assessed only by the quality of the pottery they made. The process is very simple, the last day of class, the teacher put the home in the bathroom weighing scale students to weigh the work, the crock total weight reached 50 pounds to "A", 40 pounds "B", and so on. Quality Assessment Group A student can only make a jar, but as long as it is perfect, it gets a "a". At the end of the day there was a strange phenomenon: the best works are from the students in the quantitative Assessment group. It seems that students in the quantitative assessment group are trying hard to make more pottery works, they are constantly learning new things from their mistakes, and the quality assessment group sits there thinking about how to use theory to make "perfect" work, and ultimately not see the results of their efforts, leaving behind a whole bunch of vague theories and lifeless clay.

The pursuit of quality of the group, the results were lost in the quality of the pursuit of the number of the group, surprised, and carefully think, it is really that thing. Looking back on the past design experience it is easy to find that when we repeatedly polished a design, the idea has fallen into the rut, the best way to jump out is to break again. But abandoning a design that has spent a lot of time on it is generally difficult for a designer; the higher the degree of completion of the design, the more inclined the designer is to refine or improve the design, rather than start from scratch and redo another design.

So the fast prototype is very important, fast to the pursuit of quantity. As the saying goes: The World Martial arts, no hard to break, only fast not broken ^_^

The most commonly used tool in the early design is paper and pen, the output is a sketch (paper wireframe). The advantage of the sketch is that it is fast, cheap, and free (compared to the software, the cost of paper and pen is much lower than that of the computer, and what the designer wants to express is often limited by the function of the software itself or the mastery of the software skills of the designer). Paper and pen as a tool, is indeed the concept of the first stage of design.

What is the preferred tool for rapid prototyping? I think, there should be such a few requirements:

1. Low learning and hands-on costs

2. Fast and efficient drawing function

3. can achieve interactive action

There are a number of tools that can achieve these goals. Axure RP or Omni graffle The learning curve is a bit steep, but for those who are accustomed to it, they are fully qualified for the rapid prototyping work. Especially based on Omni Graffle a large number of stencils, can be very fast prototype. But I still want to push the ppt/keynote as a quick prototyping tool, although they look amateurish. (Forgive me, as a tool-control, I'm too tangled up t)

First, ppt/keynote are the standard on most win/mac machines, and they are the highest attainable level, and can be installed without a single large software installation. Well, most people don't care.

In terms of output, most designers will choose to use pdf/swf as their final output format in order to ensure that the final results work perfectly on the client's or other colleagues ' machines. But the downside is that the source file and the final output are two things (in fact, ps/ai or something has the same problem). In other words, modify the design, be sure to open the source file that the program can! Then you have to export the artwork again to be able to show it. Perhaps most designers have been accustomed to this, so do not feel that this is a problem (but this is a big reason I like to use FW, the FW source file is the design manuscript, do not have to export again; the other advantage of FW is that the source file is too small). But the advantage of ppt/keynote is that you can choose not to export the PDF, but directly to the other side to show the source file, press play on it. Then exit playback mode can be changed immediately, ask which similar software can do.

Maybe some people want to challenge, even if they can be modified immediately, but Ppt/keynote can do limited, a lot of things I still want to do in PS. So I recommend the following two sites, are based on the keynote template, note that, all templates are in the keynote drawing.

Keynotopia Keynote Kungfu

So, for example, with keynote, it has more than most of the expected powerful graphics capabilities of a designer who just uses it to do presention (a good long = =!). ）。 In addition, it also has the characteristics such as the motherboard, can save us a lot of time, which is also in line with the "fast" mystery.

Finally, Ppt/keynote also has animation effects, including scene toggle animation and object animation. What can I do for you? The magnification of a control can be simulated with the magic move in keynote! Including the iphone's settings interface is generally flipped to the back, the effect can be completely flip to achieve. This can be an unexpected surprise for a prototype tool that pursues fast.

Finish the advantage, then the disadvantage. The biggest drawback is that the free template is too little, the above two links in the keynote template are for money, and free in effect on the passable. In addition, the application of free template is limited, so it is necessary for the designer to spend a lot of energy on this piece. However, the foreign use of keynote as a prototype of more and more designers, the first two days just to see Pixelmator an interview, their designers are also using keynote to do prototypes.

Even a prototype of a drawing software can be implemented with keynote, what else is not possible?

Source Address: http://cdc.tencent.com/?p=3223