Using Axure to simulate Vogue website

The user experience consists of three parts: User research, visual design, and interactive design. In order, after user research and visual design, interactive design begins, Axure is the best interactive design software.

Vogue is a famous luxury brand, web design "tall on", with Axure to simulate vogue, can fully tap the potential of axure.

Vogure website Home has four functions: menu, Carousel, fixed in the bottom right of the navigation and Feedback window. Here's a quick introduction to using Axure to implement these four features.

A, menu,

Vogure has a level two menu, first level one, shown in the first row.

Figure A

The second-level menu, as shown in two, will appear when you move the mouse over the "shoe bag" when the level two menu appears.

Figure II

First of all, to learn how to make.

1, drag into a number of rectangle and put it into a row and enter the name, "home, trend, fashion ...". Then drag into the input box rectangle as a drop-down box, called "Rectangle". Rectangle can fill the color, change the border color, change the transparency and so on. (Figure III)

Figure three changing the color border and adding shadows

2. Enter text in the drop-down box to overwrite the "current" point, then click Send To Back, then hide. (See figure IV)

Figure four currents covering the rectangle

3. Add Onmouseenter and onmouseout events in "trend", case1 selection condition in Onmouseenter event if visibility of rectangle equals false, then show, CASE2 Select Condition if cursor is not over area of rectangle, then hide. The onmouseout event adds the same conditions as Case2 in the Onmouseenter. (Figure V)

Figure v Trend selection events and actions

4 Select the onmouseout event in "Rectangle" to select Hide "Rectangle". (Figure VI)

Figure Six Rectangle Add Event

The result diagram is slightly

Tips, descriptions of events and conditions in Axure:

1, events, there are Onmouseenter, onmouseout, OnClick, onload and other event mechanisms. These events can help to achieve the same effect as a real Web page. Onmouseenter, when the mouse moves to the place where the Onmouseenter event is added, the event is triggered, in which case the action is added, such as a pop-up drop-down window, and the onclick is the click Trigger, where the OnClick event is clicked and an event occurs, such as jumping to another window ; onload, which runs after the form is loaded, adds an OnLoad event after the event occurs before the component is displayed.

2, conditions, for example: if state of "dynamic panel" equals 01. There are also 14 types of conditions that are similar to "State of xxx", and equals can be exchanged for others.

Second, the Carousel,

The so-called "carousel" is shown in Figure seven:

Figure Seven

The pictures and subtitles will rotate at regular intervals, and the left or right arrows or the gray dots below will rotate or jump.

Looking beautifully, it is of course also very troublesome. With Axure simulation to add a lot of events to see how to do:

1. Drag into a rectangle to turn it into a dynamic panel (right click to select Convert to Dynamic panels).

2, double-click the panel named "Dynamic Panel" and then add multiple panelstates 01, 02, 03, 04 ... (How many pictures are added). (Fig. Eight)

Figure Eight Adding a panel states

3, double click 01, click Panelstate Style inport add image. 02, 03 the same method. (See figure Nine)

Figure Nine Panel loading picture

4. Go back to "dynamic panel" Select Onpanelstatechange event case1 Add condition if stateof dynamic ad equals 02, then select Move,wait and Set panel state, add CASE2 condition if state of Dynamic AD equals 03, then select Move,wait and Set panel state, add case3 or case4 the same actions and similar conditions. (See Figure 11 or 11, 12)

Figure 10 Adding a condition

Figure 11 Setting all conditions 1

Figure 12 Setting all conditions 2

5, add onload event wait and set Panelstate. If you want to add the left and right button, 1 drag into the image to add a picture into the appropriate location in the "dynamic panel" Add, add event onclick Select Set panel state, left and right the same method. There are also follow the picture of the dot, a few pictures plus a few points, plus a different color points covering those points, plus the onclick event (do not forget the coordinates; move to and move by is different, move to indicates which location to move: (543,644), move By means moving several locations such as: (40,0), which means that the X-move 40,y is not moving. ), all points plus similar actions. (See figures 13, 14, 15)

Figure 13 left button plus event

Figure 14 Right Button plus event

Figure 15

Slightly

Third, fixed in the bottom right of the navigation,

"Fixed under navigation" so to call it, because it is also a menu, but not too full and has the effect of returning to the top: (see Figure 16)

Figure 16

The production method is not too difficult, the event should be chosen well.

1 drag into a group of four or five rectangle and named 01, 02, 03, 04, 05, plus the dropdown box and the right pop-up flag, named 01001, 02001, 03001, 04001, 05001. (See Figure 17)

Figure 85 a rectangle stacked together

2 and menu same, to add two case in the Onmouseenter event, the indicator also needs to add a onmouseout event to select Hide;01, 02, 03, 04, 05, and its marked events and (Figure 18, 19)

Figure 811 Plus Event

Figure 901,011 Plus Event

Iv. Feedback window,

The feedback window is an important feature for searching and selecting all that is needed for it. Twenty

Figure 20

1 Select forms in Default or Bootstrat, and drag into a TextField and droplist. (See Figure 21)

Figure 21 pull-in component

2 Name enter "input xxxxx" and turn gray. (See Figure 22)

Figure 22 Changing the font color

3 Add Event onkeyup, enter the condition if Texton this equals "Enter keywords to search", select Set panel state. (See Figure 23)

Figure 23 Adding the Set panel state

Using Axure to simulate Vogue website