Axure RP 6.5 Learning Record (2)-design login form

Take a look at the logon form of the blog park, and then use axure RP to prototype the form step by step.

Run the axure RP software and start immediately:

1. Add a page, name it "", and add a sub-page under "".

1) Add a page

2) Right-click the page and select "RENAME" to rename the page as "blog Garden"

3) Add a subpage to the "blog Garden" page. Select the "blog" page, and click Add image to add a subpage. Alternatively, right-click the "blog" Page and choose add> child page from the shortcut menu. Finally, rename this subpage as "Logon page ".

We aim to organize all pages in a clear tree structure for convenient management. You can click the corresponding function icon or right-click to select a menu. In addition, after renaming, you can select the page and press the F2 key to quickly enter the editing status.

2. Double-click "Logon page" to make the page editable in the design area.

3. Drag the rectangle control from the Control Panel to the logon page in the design area. Then adjust the rectangle control to a proper size.

4. design the "log on to blog Garden" label text and "register now" link at the top of the logon form. This requires the text panel control in the control panel.

1) drag two text panels from the Control Panel to the login page in the design area.

2) set the text, Font, size, and color displayed on the two text panels.

5. design the username and password input box for the logon form. You need to use the text panel control and text field control in the control panel.

1) first drag a text panel to display "User Name", then drag a text field to the user name input box, and then drag a text panel to display the "retrieve User Name" link; drag a text panel to display the "password", drag a text field to the password input box, and then drag a text panel to display the "retrieve password" link.

2) set the text display, Font, color, size, and underline of these controls.

6. Check whether the password selection box, logon button, and some hyperlinks are saved at the bottom of the logon form. The button control and checkbox control in the control panel are used here.

1) Drag related controls to the login page of the design area.

2) Set control text-Related Properties

7. the login form prototype is designed, and the webpage prototype needs to be output. The Web prototype produced by axure RP can be viewed directly in a browser. Therefore, the person who watches the website prototype only needs a general browser and does not need to install the axure RP software.

1) Click Generate in the menu area at the top of axure RP, select prototype, or press F5 to open the generate prototype dialog box. Generally, you only need to select the saved folder. Other options can be used by default.

2) Check the final page effect.

8. Generate the specification document and output it to Office Word.

1) If you want to output the specification file or the configure specification output format, click the "generate" menu in the main function menu at the top of the axure RP software and select "Specification (F6 )」, you can open the generate specification document dialog box and set the document format.

Some tips:

1) The control on the page in the design area. After you select the control, copy it with Ctrl + C and press Ctrl + V to generate the same control, you don't need to drag in from the control panel.

2) widgets on the page in the design area. After selection, you can use the four arrow keys on the keyboard to fine-tune the placement of the controls.

3) The hyperlink display effect can be displayed in the underline + blue font. Of course, events will be added in the subsequent study of interactivity, so that hyperlinks truly have practical functions.

4) when you design a website prototype, the more skillful you are, the larger the website project will be, and the time for outputting the website prototype will grow as the project grows. It would be a waste of time if you only need to adjust a page, but you have to wait for the whole website to be output again.To regenerate a page, just open the wireframe page in axure RP, press the "generate" menu in the main function menu of axure RP, and select "regenerate current page to prototype (CTRL + F5) 」.When you select this action or press the shortcut key Ctrl + F5, axure RP will not generate any dialog window, and you will only feel the mouse pointer flashing, return to the website prototype to reload the page, or click the Page name to view the updated page. (An excerpt from the Internet is useful)