Use Axure RP prototype design practice 03 to create a login interface prototype, axurerp

Use Axure RP prototype design practice 03 to create a login interface prototype, axurerp

 

This article provides a prototype of the logon interface.

First, set the background color for the Page in Page Style.

 

To add images to the page, drag the Image component into the page and set the x and Y axes. Double-click the Image part on the page to import the Image. The cropping function is also provided in the Widget Properties and Style panel corresponding to the Image part. After cropping, double-click to save the Image. It also provides the image cutting function. The Preserve Corners attribute of the image part is used to reduce the image size and maintain a certain definition.

 

Drag a Rectangle part to the page and use Line Color in the toolbar to modify the border Color.

 

The text on the interface uses the Label part. Use Text Color in the toolbar to set the Text Color.

 

Drag the Text Field to the interface as a Text box, adjust the width, height, and position of the widget, and modify the font height in the Text box.

 

Hold down the ctrl key and drag the widget to copy it.

 

Drag the Checkbox widget to the page.

 

Now we need to create a login Button. Because the Html Button cannot change the style, we need to drag a Round Rectangle component, resize it, double-click the input text, adjust the text size, and change the text color, set the background color of the Rectangle widget and the border color.

 

What should I do if I want to hover the mouse over the button and the color of the button is deepened?

 

There is a MouseOver entry in Interation Styles under the Widget Properties and Style panel corresponding to the Rectangle part. Click MouseOver. In the displayed Set Interation Style window, select Fill Color, set the background color when hovering over the mouse.

 

 

If you want to set the hover effect for multiple parts, you need to select multiple parts at the same time and set the hover effect together.

 

If you want to add a Tooltip to a widget, a text prompt will appear when you move it. Set in Tooltip of the Widget Properties and Style panel corresponding to this part.

 

The final result is as follows.

 

 

References: http://www.iaxure.com/