Study notes: Axure Advanced Tutorial 1 Dynamic Panel making tab switch effect

1. Example screenshot analysis

Taobao's login box is mainly divided into 2 page tags, taobao members and Alipay members, the login in these 2 different tabs to switch to choose their own way of logging, and unchecked status layer is highlighted. Others are text panels plus text boxes, checkboxes, button components that can be made. The point is how to achieve these 2 tabs automatically switch on click.

First step: Drag a Dynamic Panel component to the page editing area and set its size to 400*360

Step Two: Add 2 statuses to the dynamic panel: Taobao member, Alipay member
1. Right click "Edit Dynamic Panel" admin panel status

2, directly double-click the dynamic panel, you can pop management dynamic panel status "Common, simple, convenient"

3, click the Plus button, you can continue to add state

4, click the Second red box, you can edit all the status of the dynamic panel

Step Three: Drag a rectangular component and set its coordinates to 0:0 Size 400*360

Fourth Step: Drag the two rectangle assembly, set the first coordinate 0:0 Second coordinate: 200:0 size is 200*30

and edit the text on the rectangle component separately: Taobao member, Alipay member

Fifth Step: Set the click Switch
1, select the Taobao membership component, double click on the "when clicked" pop-up use case editor,

2. Check "Set dynamic panel status to specified state"

3, check the Taobao login box (before the component has been named)

4. Check the corresponding status (Taobao member)

Click to view larger image

Set up Alipay members to the corresponding dynamic panel status in the same way


Sixth step: Copy the rectangle component of the dynamic panel to Alipay member status

Do the above steps, we generate a prototype, we can achieve the Tab tab switch effect, but it is not very real to see the change of the switch, we are doing something, let him after the switch, change


Seventh Step: Set the color gradient

We analyzed it before and found out that he was highlighted in the unchecked state, now we use the gradient of the rectangle to set the gradient for the selected state, how to set the rectangle gradient, refer to the previous article

Eighth Step: Set up additional component content

Drag some components to the page editing area and edit their text


Nineth Step: Prototype Generation

This case mainly master the dynamic Panel making tab switch effect, other such as components of the AH, size settings ah, layout ah, not in the scope of this tutorial, other content, we can rely on their own ideas to do, do more, will form a set of their own prototype steps and methods.

In fact, in the Actual Production tab tab switch, if the tab page too much, I am not in accordance with the above method step-by-step process, the main fast and simple to do. But beginners still follow the process to

Deep learning

Tab.jpg (5.81 KB, download number: 108)

Download attachments

AXURERP prototype tab Auto-Toggle and hide

2012-7-3 00:00 Upload