Interface prototype creation Tool Axure use one of the tutorials: basic operations

Source: Internet
Author: User
Tags close page html page
Axure Pro is a tool designed to create an interface prototype.
When we communicate with users about the requirements of the software system, if we use text, the general end user is difficult to understand and imagine your future product appearance. Therefore, we usually design the interface prototype, the interface prototype expresses what the software system can do, that is, the functional requirements of the system, because it is a prototype, not a real system, but it can achieve the same effect as the system really run.
Through the interface prototype and user communication, so that it can see in advance what the future system looks like, so that users can tell us what their real needs are, the production interface prototype is required to obtain the requirements, through the interface prototype and user communication, can play a multiplier effect.
There are many ways to make an interface prototype (I know):
1) Use web authoring software to create: You can directly manipulate the HTML file, closer to the real. Disadvantages, you need to master the HTML syntax, mastering complex web authoring tools. High operational complexity.
2) Visio, you can quickly create a single page, can also be created, the disadvantage: at most only the page directly related, buttons, links can not create events, inflexible. Unable to make near-real effect, unable to generate HTML file.
3) Axure,axure can create the interface prototype in WYSIWYG way, the advantage: the operator does not need to understand the HTML syntax, do not have to understand the control of human-computer interaction event processing, such as page jump, command button press when the System Response Program script (JAVA script). This makes it ideal for business needs analysts to use. The generated pages, strung together, can be manipulated to simulate the scene and let the system "move" up.
This section explains the basic operations of axure through the creation of a simple page. The next section explains human-computer Interaction event processing. Baidu Experience: jingyan.baidu.com Tools/MaterialsAxure Trial Version. Baidu Experience: jingyan.baidu.com Steps/Methods1 start Auxre. After success as pictured:
For the first time, all toolbars and related views are opened. The interface can be divided into 9 parts:
(1) menu bar, all applications (c/S mode) have content. The File menu includes operations on files, such as saving, Save As, recently opened design, exit, and so on. Edit menu, redo, Undo, copy, paste, clip, find and replace. View menu: Sets the appearance and hiding of toolbars in the interface, various views ③, ⑤, ⑥, ⑦, ⑧, ⑨. Default all appear; wireframe Menu: Global System Settings menu; object menu: Alignment, grouping, conversion, etc. of objects in a page Generate menu: Generate prototypes and manuals. Share menu: Configure Management-related features (used by Team design). Help menu: Online assistance, copyright information.
(2) Tool button Bar: Whether a button group appears in the tool button bar, controlled by the View menu. View->toolbars the settings.
(3) page Map bar: This column shows you the design of the page and the tree relationship between the page, the context menu can delete pages, renaming, etc.
(4) Page workspace: page design area, you can open more than one page, click the page tab, the right context menu includes the action to open the close page. Double-click the page in the page map bar to open the page in the workspace.
(5) Page Property bar: Enter page comments, set page events, page properties.
(6) Control bar: The elements that make up the page, various controls, and drag to the desired position on the page.
(7) Control Property Bar: The property settings bar for each control, including three items: A: Control Description B: Event settings C control properties: Include position, font, alignment, grouping.
(8) Template bar: In the design of the whole system interface, some content may be repeated in multiple pages, which can be organized into a master,master can be managed by the package organization. Drag master to the page, and the controls in master appear as a whole in the page. Simply say master is for reuse. When the master content is modified, the content of the page using Master is also modified (from the effect of creating prototypes).
(9) Dynamic Panel Management bar: Dynamic Panel is the core concept of axure, good use can make a good effect. The dynamic panel consists of multiple states, each of which can be placed in different content, through the event switch state, so that the page performance of different state content. In one of my experiences, I explained how to make tabpage effects using dynamic panels. This is only a usage and will introduce some other usages in succession.
The view on the page, the fork in the top right corner, click to close, can be opened on the View menu (except for the page).
Between the view and the View and page design workspace between the top and bottom, left and right split line, you can click Drag, adjust the size of the area. The small triangle on the left and right dividing line can hide the area, and then click to open, try to know.
Step Reading 2 The system defaults to 4 pages: Home and its subordinate pages Page1, Page2, Page3, the more tightly linked pages can be organized hierarchically together, such as a functional module. Click on the page, the right button can modify the name of the page, change to your satisfied name. can delete, copy (duplicate), move page (up, down, move out, move in: Try it yourself) 3 Click the Save button, save as design document, suffix. Rp. 4 figure I placed 5 controls on the page:
(1) Text Panel control: shown as static text as used by the figure.
(2) Picture control: Image, on the page, right-click on the Edit image-->import image to insert a specific picture.
(3) Rectangle control: Usually used for interface segmentation, but also can be many other uses, such as tab page label, in short, when you want to draw a box, you can use it.
(4) text box: A text box that requires input, one of the most commonly used controls;
(5) button: The system needs to execute certain commands to use, such as the submission of content, calculation and so on. The yellow 1 in the upper right corner of the way indicates that there is an event (I added) on this button.
Steps to read the 5 control's direct alignment, you can control by entering the control's position data, or you can select multiple controls, and then click the Align Command (button) on the toolbar to align the controls. As shown in figure:
Depending on the icon you can see the function: From left to right: The selected control is aligned to the top of the first, align horizontally, align to the right, align upward (the control may be stuck in a block if it does not overlap in the vertical direction), vertically center, align downward, evenly distribute the vertical spacing between controls, and evenly distribute horizontal spacing.
Step Reading 6 After completing this simple page, you can produce the HTML page, click Generate-->prototype, Open the dialog box as shown:
Select Default on the left, choose the directory where the page is generated, click the Generate button, generate an HTML page, and open the first page using IE, you can also decide whether to open the default browser of your system and open it.
Steps to read the 7 effect as shown:
Steps to read 8 Save the prototype, click Exit to quit Axure.

This section explains the basic operations of Axure, followed by an event, master and other advanced applications. END experience content is for reference only, if you need to solve specific problems (especially in the areas of law, medicine, etc.), we recommend that you consult the relevant professionals in detail. Report Author statement: This experience is based on the actual experience of the original, without permission, declined reproduced. Vote (184) voted (184) +1 have (0) I have a question (0)

Tell me why you voted for this experience. It was great, and it helped me. The author is great because of Caprice

Why do I vote ...?

You can also enter 500 words

Having read this experience, you have some unique experiences to share to everyone?
Or, you follow the guidance of the author and make the exact, even better results.
Whether it is "have experience", or "have income", are quick to share the experience of the small partners to see it.

Non-return users are temporarily unable to publish experience "get" how to add back to enjoy. You can also enter 1000 words

If you have questions about this experience, you can give feedback to the author and the experience writer will try to solve it for you.

You can also enter 500 words for a number of related experiences axure experience in creating interface prototypes 52012.01.05 Axure Tutorial Ten how to display axure left and Right toolbar: [10]52014.06.19 CAD Drawing Tutorial: [1] CAD toolbar and interface settings 02013.10.30 SWiSHmax tutorial fool Flash simple Basic Operation Toolbox 02016.03.07 PCI Software Tutorial-Basic operation of file management tools 0202016.06.08


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.