The necessity of designing enhanced axure components

In the interactive designer's toolbox, Axure is believed to be an essential and handy interactive prototyping tool. Today, we want to explore the need to continuously refine and accumulate enhanced components (enhanced-widgets) in our work to improve productivity. At the same time, I produced a set of enhanced components.

What is a component (Widgets)?

The palette is designed for wireframe and flowchart design. In tacit agreement, the official only provides the wireframe component and the flowchart component, they are the most basic unit module.

Wireframe components for basic types

What is an enhanced component?

The so-called enhanced components, as the name implies, is based on the original base unit components, the unit modules are combined, and according to the requirements of the corresponding component behavior. The key features here are two. The first feature is that the composition of each unit module is not random and arbitrary, but with a certain purpose, for example: in the interactive prototype, automatic search (auto-complete) often used, then the design of simplified type can explain the design concept of automatic search components have a certain significance. The second feature is that component behavior is as abstract as possible, highly independent, and easy to reuse quickly, and is not conducive to use in other contexts if component behavior is too tightly linked to the current context.

At present, many enhanced component libraries can be searched on the internet, but most of them only conform to the first feature of the two main features of the enhanced components, that is, the unit modules are combined according to certain requirements. First of all, the relative unit module, its efficiency will certainly be improved. However, in practical work, interactive prototype with interactive behavior is more descriptive and persuasive, and sometimes can make a great contribution to the rapid progress of the project. This oneself is to have the firsthand experience. Of course, this is based on the individual working environment to determine, if you have a strong product manager in your work environment or a team of research and development teams that understand the textual description of the interactive prototype enough, your interactive prototype may be static, just to ensure that the information structure between the pages is reasonable and correct. After all, a prototype with component behavior takes more time and effort to make.

Wireframe components with enhanced type

Case Combat

To facilitate your understanding, here is a simple example. Without involving a specific context, we design an enhanced component suspension hint (Hover tip) through a basic unit component. The case is made using Axure Pro 6.

1, in the software left component (Widgets) Drop-down menu, click "Create Library", in the pop-up window, name and save the file as "Enhanced_widgets". Save the file to my Axure RP libraries in My Documents in the operating system. In this case, the Enhanced component library is automatically imported the next time you start Axure. Just like the official "Widgets".

2, the use of the basic unit components.

A) Rectangle (Rectangle)

b) Text panel (text panels)

c) Dynamic panel

3, the unit components of the combination

A in the Base Component library, select the rectangular component and drag it to the workspace, adjusting the rectangle width to 20px * 20px. Select the rectangle, click the right mouse button, in the pop-up context shortcut menu, click on the menu Group "Edit button Shape", from the next menu group select "Oval", so that the rectangle into a circle. Double-click the circle to become a state that you can enter. Enter "?" in the circle. Name the component as the question mark component

b Similarly, in the Base Component library, select the rectangular component, drag it to the workspace, and adjust the width to 200px * 100px. Select the text panel component, enter descriptive text "feature use Hint panel", and place the hint text in a rectangular component. Select the rectangular component and the text Panel component to form a group to facilitate overall drag and drop. To facilitate the description below, name the group "hint floating layer" and place "hint floating layer" on the right side of the component that was made in the previous step. The following figure:

4. Adding Behavior in Components

A) Check "hint floating layer", click the right mouse button, in the context menu, select "Convert" in the "Convert to Dynamic Panel", this feature only in the Axure Pro 6 version only. Previous Axure versions can only select a single dynamic panel from the Base Component library, double-click the Panel to open, and put the hint panel in it. It's a lot of trouble. It is recommended to use Axure Pro 6! Name the dynamic Panel "hint panel" the following figure is a light blue panel.

b Select the prompt panel, click the right mouse button, and in the context menu, select Hidden Panel in the edit dynamic panel. The following figure is a light yellow panel.

C Select the question mark component, select the Interactive (Interactions) panel in the Component properties (Widgets properties) in the right area of the software, double-click Onmouseenter, open the Edit Use Case window, and in the ADD actions, select Show Panel and check the prompt panel at the far right of the window, so that when the mouse hovers over the question mark component, the prompt panel on the right side of it appears. The following figure:

D Similarly, select the "question mark" component, select the Interactive (Interactions) panel in the Component properties (Widgets properties) in the right area of the software, double-click onmouseout, and open the Edit use case window , in ADD Actions, select Hide Panel and check the prompt panel at the far right of the window, so that when the mouse leaves the question mark component, the prompt panel on the right side hides. The following figure:

e) This enhanced component is complete. You can click F5 Output as HTML for effect viewing. There is no more narration here.

Enhanced component library Sharing

I based on the clean design provided by the Masters (module) and combined with their own work experience to transform a set of enhanced component library, if necessary, you can leave a comment in the message, preferably the mailbox, so that I send in time. are often used in a number of day-to-day design tasks, with the main feature being the inclusion of component behavior. Of course, in the use of the process, sometimes it is inevitable to make some adjustments to the behavior of components to adapt to the current context environment. But here's the trick, when you drag a component into the workspace from an enhanced component library, you can turn this component back into a separate dynamic panel to isolate the impact of the current context. In the use of the process, if there is doubt, please feel free to communicate, I Sina micro bo Http://weibo.com/lucasli.

Written in the last

The purpose of this article is to introduce the necessity of making enhanced components in Axure, which will enable us to improve productivity and make prototypes more authentic and persuasive. In order to simplify the description, the case is only the approximate step of the whole design process, the detail process has been hidden. I hope the examples in this article will inspire the readers.

Article Source: Grand ued