10 recommendations for improving the efficiency of axure design (RPM)

Axure is a fast and powerful tool for creating software prototypes. It's easy to get started, but there's a danger. The software is so intuitive that many users can use it without any formal training. What they may not know is that they may not be using Axure in the right way.

As an experienced user experience designer, I rarely draw a page for the first time to design it correctly. Most of the time, I'm going through 5 to 10 iterations (iterations). When your user experience design is used as a blueprint for agile projects, you may need to keep up with the project during the project cycle. Sometimes, these changes will affect more than 10 pages or more design pages. It is in this case that some of the less obvious features of Axure can save designers a great deal of time.

My general work in the team is to create wireframes and prototypes. To do this, I'll use the "Shared Items" feature in Axure (called "Team Project" in Axure 7). Being able to design a project in real time is my favorite place to axure, but it does require a concise and structured way of working. There is no doubt that you will find that others are working on the design you have designed, or that you are working on someone else's design draft. I have written these guidelines for using axure in mind, because that is the tool I am working on, and I believe that these recommendations apply to other software tools as well.

In the long run, I think the 10 recommendations I have made are an important way to save time (crucial techniques). This approach does not always reflect its advantages in the short term, but it does make it more flexible than normal (but it does allows for optimal flexibility further down.).

One thing you can do with a control never use two controls

The most time-consuming behavior I see is that Axure's novice and advanced users are using unnecessary controls. I find myself still making this mistake, so I have to keep reminding myself that this is the first rule. Every control you add to your project will take more work time when you need to change it in the future. All of this work will gradually increase after 10 iterations. As a simple example, how can two visually identical objects be built in different ways?

Figure 1

The above two examples illustrate a situation in which some people use a text label with a button that separates the control. When this person wants to add an OnClick event to an entire object, they have two options. The first method is to add a hot zone across the entire part, which makes three of the controls need to be maintained. The second approach is to add an OnClick interaction event for each element, which allows two interactive actions to be maintained.

Both of these methods will take unnecessary time when the part needs to be modified. An easier way to do this is to create objects by adding text on a rectangular box.

Figure 2

Then your text can be adjusted using the Align and fill toolbar. You now have only one control that needs to be maintained and requires only one interactive event.

Figure 3

Do not copy objects, but turn objects into Masters

I experienced a great deal of joy when I found myself in the late stages of a design phase and we needed to change each page of the main navigation. Not because I like a lot of repetitive work (a big pile of), but because all I have to do is edit a single master, and then quickly (Presto) the entire project is updated.

Using the master for the main navigation seems pretty bland, but creating a master is worthwhile when you use any action more than once. Whenever you find yourself copying and pasting a set of controls, always remember that creating a master may be a better choice.

Figure 4

After the master has been created, such as the product display "tile" above, if you decide to change the text on the button to "Buy Now", you will only need to edit it once and then find that each instance in the template has changed.

Figure 5

Remember, do not turn too large a group object into a master version. The larger the combined object, the more likely it will be to make changes in many parts of the master. Merging some masters with another master is generally a better approach. This is handy when you just need to make a change in a master version. This means that some elements are always included and some other elements are always changing, such as:

Figure 6

The base motherboard does not contain the price information, but it can be combined with another master to create a new master for all the product displays.

Figure 7

To set a style before creating a master (place styles)

The master is good for creating elements that need to be reused, but they are not allowed to change. Each instance of a master is identical. This time the style came. Suppose you have a button that needs to be copied to multiple pages, but the label on the button needs to be modified, and the style can help you to do it easily. The properties of each button can be set by style, and all you need to do is change the text label.

Figure 8

Buttons are often useful for increasing mouse hover and other related events. In Axure, these events are often created by using dynamic panels. Different states are placed in different dynamic panels and scripts. However, using this method you will have to modify this button by entering the state of each dynamic panel.

A faster way to handle button events is to use the Interactive Styles dialog box. Using this feature, you just need to set different styles for different event states (with the This feature, simply set different style for every behavior state), and then just copy the button and set the size once.

Figure 9
Figure 10

tip: You can use the "Auto Fit width" feature described in Axure 7 on the button. If you use the left and right padding in the style, you're going to modify just the text of the button, and the size of the button will automatically fit.

Figure 11

Iv. maintaining the organizational and naming clarity of the project

Axure offers a number of options to keep the project organized. Each element that you place on the page has a unique name. Pages can be named and then organized into a tree structure. For example, the master can be named and then sorted in folders, and so on. But why take the effort to give each object a clear name?

1) Keep things organized

When you have a well-crafted webpage and then you want to create an interaction through a dynamic panel, you will have to find the one you want through a long list of elements. You can use the search box--but it's only in case you've already considered the name of your project thoughtfully.

2) Allow team members to intervene

Maybe like me, you are in the team and your project is always going to happen unexpectedly. You or your colleague may be sick or accidentally have to work in another project. It is vital that the project is built so clearly that others can intervene smoothly and take over the business. Interactive events that are added by others can be particularly complex to accomplish.

3) can be shared with third parties

In general, my wireframes need to be shared with at least 10 colleagues in the project I am involved in. Some people will sit at my desk, and I can guide them. Others, we'll never see each other, and then I don't know their understanding of wireframes. Ideally, a prototype should be clear and understandable without explanation (viewable autonomously).

I will do the following things to complete the task.

Create a login page

You can set up your prototype homepage as a starting page to explain what people are seeing and how to use it. Alternatively, you can provide your contact information or a link on the flowchart.

Figure 12

Give a unique, self-explanatory name to the page

If the name of the page is clear and explains the contents of each page, then the prototype will be easier to understand. People will also use these names in future communication. For example, if a graphic designer makes a sample of comp based on your design, they may use the same naming for the page as you do. If the name of a page is not unique, a page will appear with two different names.

Create the most common flowchart

Most people do not make the design page a tree structure, they like to design according to the activity flowchart. You can create flowcharts in Axure to react to important user processes and link to related pages. Then you will provide additional ways to browse the prototypes. (The names on the flowchart are based on the names of those site maps.) Therefore, it becomes important to have your name clearly. ）

Figure 13

V. Develop the habit of using global guides and grids

Axure allows users to create two types of guides: One is a local guide, one is on a page, and one is a global guide that exists on all pages. Guides can be set using the Create Guides dialog box. For example, if you set up a 960px grid and then position the elements on different pages, it becomes much easier. In the meantime, your team members will see these global guides in a shared project.

Figure 14

Using a grid can help you keep your design neat and structured. I often set my grid to be 10x10px and then create my objects in multiples of 10. For example, 60x20 pixels of a button, not 55x18 pixels. When you put these objects on the grid, everything becomes easier to align and can satisfy any obsessive-compulsive disorder. Of course, special objects that require different sizes are allowed to deviate from the grid.

Tip: In Axure 7, you can create different global guides for both the mobile and the Web end. Here is an example of a mobile grid application I like to use:

Figure 15

Six, do not forget the import function

In most projects, the elements that people make are also useful for other projects. Instead of reinventing the wheel, reuse the elements that have been used in past work. Many of the basics are consistent throughout the project, such as styles, guides, and Masters. Although it is possible to copy and paste an item from this. rp file to another. rp file, not all of the information will be available. When you paste a button with a unique style, the style does not stick with the past.

The best way to reuse elements is to use super-strong import capabilities. This allows you to import pages and masters, as well as styles and guides.

Figure 16

Tip: Create a "parent".RP file to import the new project, where you can keep the standard master. "

Seven, to keep the old version of the Web page

I often find myself needing to go back to an older version of a project. In the past days, I often needed to create wireframes in Visio, and it was difficult to manage projects with many pages, so I ended up losing pages.

In Axure, it is easy to track the old version. Simply create a folder named "Bin" (or create a page in Axure 6.5 or earlier).

Figure 17

Put the old version of the page there, so that it can be easily found when you need to return it in time. When you need to export, just select a section of the line, do not need a full selection of pages. In this way, you can share a concise version with your customers, and the old version can be accessed directly.

Figure 18

Eight, do not design unnecessary interactive action

The initial user of Axure is often impressed by the Axure's ability to add interactive actions to the prototype with ease. At first, I couldn't help adding interactive actions to every page I created. However, in many cases, I can clearly communicate the design without needing any interaction-just a static image. Now, I will only increase the interaction when I answer "Yes" to one of the following questions.

1."do I really have to interact to express my design clearly and unambiguously? 」

If you provide only static images without interactive elements, will your design be misunderstood? This can be a situation where you need to rely on a certain animation to be understood.

2."does this interaction design save time in the long run? 」

Is it faster to create an element's interaction than to show different states of different pages? For example, it is easier to create and maintain labels for an interactive Web page than to create multiple labels for each page.

3."do I need to convince some people about the concept of interactive elements? 」

I came up with the best solution I thought was the problem, but I knew it was hard to move forward, so I needed someone to support my idea. I found that interacting with prototypes can help me spread my ideas.

However, if the answer to all these questions is no, then I would rather create multiple versions that show only a different state of an interaction element.

Nine, to use the font icon (icon font) instead of the picture

Another simple but often overlooked way to keep the Axure project manageable is to minimize the number of pictures. To change the color of an image in a prototype, you have to go through several steps. You need to open a picture editor, make changes to the picture, export a new bitmap, and then import your Axure project.

Another option is to use a font icon. One, you can change the ratio of color and icon in Axure. A great basic font icon The resource station is http://copypastecharacter.com/, and its icons can be used immediately on many platforms.

Figure 19

For the font icon, you can add a graphic to a button, but you still need to listen to the first piece of advice.

Preview the prototype on a browser or device

If the designer learns that their prototypes are different in Axure and in the browser, they will feel frustrated. In particular, the spacing and position of the text are different. Even worse, they are displayed differently in different browsers. To avoid errors, you need to constantly preview your prototype in the browser, and if it is a mobile prototype, preview it on your device.

Even if you can never eliminate all the differences between Axure and the browser, here are some ways to reduce the difference.

Text Wrapping

Here's how text wraps:

Figure 20

The following shows how the browser wraps text:

Figure 21

To prevent the text box from wrapping into the next line, make sure that your text box has enough space for redundancy. The safest way to do this is to give the text box enough space that it might need. Therefore, if you need to edit this text in the future, you will not need to change the size of the text box, it will use text wrapping way.

Vertical Spacing

Vertical spacing shows the difference between the browser and the Axure. You can fine-tune the pitch in the Axure until you find that the text looks good in the browser, but this is a pretty hard work and an uncertain result. The only way to determine the position of text is to break up the copy into chunks, or convert the text to graphics. Unfortunately, the first option breaks the first one, but sometimes it is unavoidable.

Summarize

In the short term, these suggestions rarely show results, but in the long run it has many benefits. Perhaps more importantly, shortening working hours can make you happier at work.

I hope these suggestions are as helpful to you as I am to you. I believe that some people will think that some other rules will be more important and we would love to hear them, so please post your thoughts in the comment box below.

If you haven't Axure, try Axure 7 Beta. Some changes really help to keep the organization of the work.

The last point: These rules, like any other rule, are used to be broken. Don't let them interfere with your work. Smart designers, we need to know when to break the rules.

Transfer from: Link

10 recommendations for improving the efficiency of axure design (RPM)