Prototyping Tool axure-basic interaction

【Summary]

This article describes the basic interaction of the axure RP tool and how to use the interaction of axure to implement the prototype action requirements.

【Introduction]

During software development, in order to improve the prototype simulation and better demonstrate the user's needs, we often need some interactive functions such as pages or controls, although the process of prototype design does not require too much advanced interaction, the basic interaction still needs to be understood.

【Body]

The basic interaction in axure is generally composed of events, scenes, and actions:

1. Events are triggered on the user interface, such as onclick, onmouseenter, and onmouseout;

2. Each event can contain multiple scenarios, that is, the conditions to be met after the event is triggered;

3. Multiple actions can be performed in each scenario, such as opening a link, displaying a panel, hiding a panel, and moving a panel.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/34/wKiom1QosobR44tkAACYCV6B8GM087.jpg "Title =" image001.png "alt =" wkiom1qosobr44tkaacycv6b8gm087.jpg "/>

Learn about basic interaction functions of axure through several instances

1.Define Link

The following steps describe how to define a link on the button control:

1. First, drag a button control to the wiremap and select this button. In the control interaction panel, double-click the "onclick" event.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/36/wKioL1Qoss3xv1BEAACwIDco_AE670.jpg "Title =" image002.jpg "alt =" wkiol1qoss3xv1beaacwidco_ae670.jpg "/>

2. Bounce a "User Editor" dialog box and click the "add condition" text button.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/34/wKiom1QosryS6cYoAAE99NWtOik664.jpg "Title =" image003.jpg "alt =" wkiom1qosrys6cyoaae99nwtoik664.jpg "/>

3. The "condition generator" dialog box pops up, And The onclick condition is set in the edit condition. Click "OK" after setting (no conditions are set for this experiment. The setting condition is to set multiple scenarios. If a condition is met, the action under a condition is run ).

4. Select the action you want to set in the Add action area. Here, "open a link in the new window" is used to set multiple actions.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/36/wKioL1QosvzTBXsCAAFjvgpIUus604.jpg "Title =" image004.jpg "alt =" wkiol1qosvztbxscaafjvgpiuus604.jpg "/>

5. configure the action, you can select the self-built page, you can also select the external page, Here select is "link to external URL or file", enter the address you want to link http://www.baidu.com click OK, the link is created for the button.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/34/wKiom1Qosu3iJgRSAADyl0qUd-Y997.jpg "Title =" image005.png "alt =" wKiom1Qosu3iJgRSAADyl0qUd-Y997.jpg "/>

2.Simple logon Interface

1. Drag the required controls from the control panel and combine them in the intermediate work area to form a logon interface.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/36/wKioL1QoszSw3m8zAABi91tmUNY808.jpg "Title =" image006.jpg "alt =" wkiol1qoszsw3m8zaabi91tmuny808.jpg "/>

2. To increase the simulation degree, set the password input box to the form of hidden text (Password box)

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/36/wKioL1Qos0bBMomKAAE__DFzYnY966.jpg "Title =" image007.png "alt =" wkiol1qos0bbmomkaae1_dfzyny966.jpg "/>

The result is shown in.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/36/wKioL1Qos1vT_il3AAAgGIGMSWg073.jpg "Title =" image009.png "alt =" wkiol1qos1vt_il3aaaggigmswg073.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/34/wKiom1Qos07iJ4VSAAAF4q_-hvg854.jpg "style =" float: none; "Title =" image008.png "alt =" wKiom1Qos07iJ4VSAAAF4q_-hvg854.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/36/wKioL1Qos3ihpfIaAAAYL7ngZT8070.jpg "style =" float: none; "Title =" image010.png "alt =" wkiol1qos3ihpfiaaaayl7ngzt8070.jpg "/>

3. Set the interaction when you click "OK". There are two scenarios: logon success and logon failure.

1) logon success scenarios

Setting conditions: you can set a username and a password.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/34/wKiom1Qos2Hwmk0-AAGbwMh4AXM222.jpg "Title =" image011.png "alt =" wKiom1Qos2Hwmk0-AAGbwMh4AXM222.jpg "/>

Set action

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/36/wKioL1Qos6aiIr2tAAE6h4Lvx0w685.jpg "Title =" image012.jpg "alt =" wkiol1qos6aiir2taae6h4lvx0w685.jpg "/>

2) logon failure scenarios

Add conditions. If either the user name or password is incorrect, the logon fails.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/36/wKioL1Qos7vCOituAAFDWDplRWE897.jpg "Title =" image013.jpg "alt =" wkiol1qos7vcoituaafdwdplrwe897.jpg "/>

Set the action when logon fails.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/34/wKiom1Qos6ShqjTkAAFOEVYEvUw253.jpg "Title =" image014.jpg "alt =" wkiom1qos6shqjtkaafoevyevuw253.jpg "/>

3. onfocusAndOnlostfocusAction

1. Drag a text box to the intermediate work area and Add labels to the text box control (to better set the time zone of the action, avoid too many confusing controls)

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/34/wKiom1Qos7ywRiO9AACHcmvyRDw640.jpg "Title =" image015.jpg "alt =" wkiom1qos7ywrio9aachcmvyrdw640.jpg "/>

2. Set the action (onfocus (when getting focus ))

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/35/wKiom1Qos9Dy3R5_AAFj7VbPwxw091.jpg "Title =" image016.jpg "alt =" wkiom1qos9dy3r5_aafj7vbpwxw091.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/4B/35/wKiom1Qos-2Aj7AaAAC6XLX7eJ0590.jpg "Title =" image017.jpg "alt =" wKiom1Qos-2Aj7AaAAC6XLX7eJ0590.jpg "/>

Set action (onlostfocus (when the focus is lost ))

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/35/wKiom1QotAHj_x97AAE_1O29ovs643.jpg "Title =" image018.jpg "alt =" wkiom1qotahj_x97aae_1o29ovs643.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/37/wKioL1QotFPSlBnWAAE_1O29ovs806.jpg "style =" float: none; "Title =" image018.jpg "alt =" wkiol1qotfpslbnwaae_1o29ovs806.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/35/wKiom1QotCqR4elHAAFfwVECE1I982.jpg "style =" float: none; "Title =" image019.jpg "alt =" wkiom1qotcqr4elhaaffwvece1i982.jpg "/>

Lab results

When you move the mouse away: 650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/4B/38/wKioL1QotJDxm7nGAAAVyGP9S-A827.jpg "Title =" image021.png "alt =" wKioL1QotJDxm7nGAAAVyGP9S-A827.jpg "/>: 650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4B/38/wKioL1QotKai4uxAAAASjuKDiYg292.jpg "Title =" image022.png "alt =" wkiol1qotkai4uxaaaasjukdiyg292.jpg "/>

This article is from the "Jia Wei IT Training Institute" blog, please be sure to keep this source http://canway.blog.51cto.com/8964890/1559239

Prototyping Tool axure-basic interaction