Talk about Wireframes: the necessary theories and prerequisites

This is a cliché question, so if someone already knows, please automatically ignore it. It was also the old question that was raised again at a communication training session with PD: Exactly why the wireframe was drawn and how it was painted.

As for the wireframe why to draw, it is not here 聱. I believe that many people have written similar articles, of course, if you still have questions, you can write to me.

Now is the question of how to draw.

Isn't it easy? A simple wireframe, no more time than a beautiful visual map? Also does not need the foundation of esthetics, also does not need the fine processing, plus already has a so-called 10 minutes to use the tool as the auxiliary, I am afraid does not need to open this topic to study alone.

However, the reason is thrown again, it is in a "painting" word.

The wireframe is not "painted" out, but is thought out, is confirmed.

The wireframe is simply provided with a load for discussion, review, confirmation, and then the identified requirements (business requirements and design requirements) are transmitted in an image-like manner.

Therefore, the wireframe itself looks beautiful, professional unprofessional, drawing good, is not an important issue.

It is hard to say which is more "good" when a simple wireframe is painted on a whiteboard, and an extremely exquisite and professional wireframe.

To say this is to remind ourselves not to ignore the nature of wireframes. So most of the problem of how to draw a wireframe, it may not be out in the do not know how to draw, but do not know why to draw, specifically what to draw, how to use the problem.

How exactly does a wireframe draw?

One. Several concepts and prerequisites must be:

1. Not exquisite and meticulous is a good wireframe

Superficially, you seem to be not experiencing the previous stage, jump directly to the detail wireframe, but in reality, you must have a previous stage in mind, and in real projects, these links are accompanied by constant review, confirmation, confirmation of a problem, a decision to exclude some possibilities, Get some idea, so that the possibility becomes more reliable and focused, and then there is a choice to produce a good wireframe.

2. From the simplest start, gradually replenish the details

Input data, information, ask questions, answer questions, paint, this is in the same vein.

From the simplest start, if you jump first to the last step, there may be a very tragic situation, you have struggled with the design of the interaction, is not needed, if you grasp the degree of bad confirmation, will cause not only you a person's resources wasted.

3. The greatest value lies in the discussion and confirmation

The wireframe is used for quarrelling. Therefore, can not like 10243.html "> visual designers like to resist the changes to the visual manuscript."

Perhaps it is precisely because of this, we continue to emphasize not to picture the wireframe too beautiful: haha, because it looks beautiful things, can not bear to destroy it. This is nature.

We should be glad that with so many review meetings, though more restrictive, the direction is clearer. As the direction becomes clearer, we can really focus on the design of some interactive details.

There is a classic diagram that is often used, that is:

Remember: Don't talk to me about the color of his hair until you confirm it is a person.

Two. Choose the most cost-effective tool:

Only Heidi himself, used word, PPT, flash to do the wireframe, our colleagues around, there is the use of Visio, but also the use of Excel, but also the use of Photoshop, of course, in the use of these tools, we are most easily used, the most commonly used, is still white paper and pen, so, always want to share this content before, first emphasize: The tool is really not a problem! Because a lot of new people, always like to come up to ask tools, as if mastered a tool, you can draw a good wireframe, you can appear very professional.

We find that all the tools that assist in the expression of ideas may gradually become less professional and use the threshold to the minimum, so that we are not bound by the tools used to express our ideas, so that we can really focus on the idea itself.

Finally I chose axure, not because it is currently popular, but really because of its cost-effective.

Good tools can make the best use of the advantages of the wireframe itself, so the principle of choosing a good tool is:

1. Ensure the advantages of wireframe (fast, easy to modify, help focus)

2. Easy to share and spread (export HTML, as long as there is a computer can see)

3. Quick to use (axure almost no threshold, I do not know why people rely on training axure how to collect money)

As for the reasons for the choice made on the official website, I think it is not the most important, of course, it is the view of the beholder.

Three. Learn basic Skills

A lot of students learn axure, inadvertently evolved to advanced skills. But is it really useful in addition to showing that you are professional?

I have been eating axure for a long time, and have not written any advanced commands, I use the highest function, that is, imageregion and dynamic panels.

Looks cool, but the actual project you will find that the various states to do dynamic panels, but will be delivered after the misunderstanding, and not necessarily have engineers know that there is something still hidden in the dynamic panel.

The simplest is still to enumerate the different states, so that's a clear glance:

For example, in the message area, the input before state and the status of the input, are enumerated:

The so-called basic skills are actually:

1. Import Pictures

2. Add components (shape, text, line, button, etc.)

3. Change the shape, size and color of the component

4. Add Interactive components (radio Button,check box,drop list)

5. Add hyperlinks (internal links, external links)

6. Generate HTML

Over ... These, for simple wireframe, are enough.

If you really do not understand, you can look at this document: http://www.webppd.com/thread-82-1-1.html

Four. The tools and shortcuts you might use

Three is enough. Unfortunately, we have to tolerate some of the problems of Axure, which may also be caused by the Chinese, such as Chinese input. When I do wireframe, generally use the above three things, a shortcut key, plus two plug. As for easy to use, used people, you know. I am here only to mention, is to avoid, in case there is a classmate with axure, not calm affect their emotional and physical health:

Why do other people's text spacing is very beautiful, I do not know how to adjust? In fact, others are written in one line. Why other people can input Chinese, I do not?—— may be pasted with Notepad, or use other input method.

Four. So-called advanced skills

The advanced skills I mentioned here, in Daniel's eyes, are actually elementary. But so what, for me, is enough, the most needed is efficiency rather than the complete interaction of the wireframe prototype.

1. Dynamic Panel Implementation of the page does not refresh the state switch

You can put different content into a dynamic panel of two states, according to your needs, in advance when the mouse clicks, or the mouse to move the state switch. For example, when you click the "Close Demo Guide" below, make this area a closed state:

Using the dynamic panel can easily achieve the page without refreshing the tab switch effect.

However, I really suggest that it should be divided into several pages, or simply list the different tab content on the same page, which can also help PD to tidy up the needs of the copy, not because of hidden in the dynamic panel missing.

2. Page Anchor Mark

Click a link on a page to jump to an area of the same page.

Use the picture map Hot Zone This component can complete this mission, the English version is called: Image map region

I still can not help but suggest that simply tagging the link, or writing to the document, or the handover of the person, how to know after clicking is to jump to the page within the area. Wireframe is not a substitute for communication between people.

3. Flow chart

I only so the flow chart as a senior skill, because it is generally believed that axure do not professional flow chart, so the basic or Visio to do more, but the flow chart and wireframe separate to do, very troublesome, or integrated together. Later I found that, in fact, axure do flow diagram is not difficult to use, I now either a simple flowchart or detailed flow chart are used as a tool to achieve, that is axure:

Simple Flowchart Effect:

Detailed Flowchart (Detailed page flow) Effect:

Some students do the flowchart is very professional very beautiful, my oneself!

Other advanced skills include: use of masters and so on, here is not a word.

The most important thing is still to learn in practice.

SOURCE Address: Http://heidixie.blog.sohu ... 59793641.html