Using Axure RP Prototype design Practice 03, create a prototype of the login interface

This experience makes a prototype of the login interface.

First, set the background color for the page in the pages style.

If you want to add a picture to the page, drag the image part into the page and set the X and Y axes. Double-click the image part on the page to import the picture. Cropping is also available in the Widget Properties and style panel for the image widget, and the double-click Saves the picture. It also provides the ability to cut pictures. The preserve corners property of the picture part maintains a certain sharpness when the image size is reduced.

Drag a rectangle part onto the page to change the color of the border through line color in the toolbar.

The text on the interface is used as a label part. Sets the text color by using the text color in the toolbar.

Drag the Text field to the interface as a text box, adjust the width, height, and position of the part, and modify the font height within the text box.

You can copy a part by holding down the CTRL key while dragging the part.

Drag the checkbox part to the page.

Now to do a login button, because the HTML button is not changing the style, so drag a round rectangle part, resize it, double-click the input text, adjust the text size, change the text color, set the rectangle part background color, set the border color.

Now want to hover the mouse over the button, the button color deepened, how to do it?

In the rectangle widget corresponding widget Properties and style panel under Interation styles there is a mouseover entry, click MouseOver, in the popup set Interation In the Style window, tick fill color to set the background color when hovering over the mouse.

If you want to set the hover effect on multiple parts, you need to select multiple parts together and set the hover effect.

If you want to add a ToolTip to a part, a text prompt will appear when you move it. Set in the ToolTip under the widget Properties and style panel for the widget.

The final effect is as follows.

Reference: http://www.iaxure.com/

Using Axure RP Prototype design Practice 03, create a prototype of the login interface