Use Axure to simulate a Vogue website, and axure to simulate a vogue website

Use Axure to simulate a Vogue website, and axure to simulate a vogue website

User Experience consists of three parts: user research, visual design, and interactive design. In order, Axure is the best software for interaction design after user research and visual design.

Vogue is a famous luxury brand. Its website design is "advanced". It uses Axure to simulate Vogue and fully tap into the potential of Axure.

The home page of the Vogure website has four functions: menu, carousel, fixed in the lower right navigation and feedback window. The following describes how to use Axure to implement these four functions.

I. menu,

Vogure has two levels of menus. Level 1 is displayed on the first line.

 

Figure 1

The second level menu is shown in Figure 2. When you move the mouse over the shoe bag, the second level menu appears.

 

Figure 2

First, let's learn how to make it.

1. Drag multiple rectangles into a row and enter the name "homepage, trend, fashion ...". Drag the rectangle in the input box to use it as the drop-down box, which is called "rectangle ". The Rectangle can be filled with colors, change the border color, and change the transparency. (Figure 3)

 

Figure 3 change the color border and add a shadow

2. Enter text in the drop-down box to overwrite the "trend" and click "Send to Back" to hide the text. (See figure 4)

 

Figure 4 trends are covered in rectangle

 

 

3. Add the onMouseEnter and onMouseOut events to the "trend" event. Select the condition if visibility of rectangle equals false for case1 in the onMouseEnter event, and then show, case2 select the condition if cursor is not over area of rectangle, and then hide. The OnMouseOut event is added with the same case2 condition as the onMouseEnter event. (Figure 5)

 

Figure 5 trend selection events and actions

 

4. In "rectangle", select "hide" rectangle "for the onMouseOut event ". (Figure 6)

 

Figure 6 Add a rectangle event

Result Diagram

 

TIPS: describes events and conditions in Axure:

1. events, including onMouseEnter, onMouseOut, onClick, and onLoad. These events can help achieve the same effect as the real web page. OnMouseEnter: When the mouse moves to the place where the onMouseEnter event is added, the event is triggered. In this event, add operations, such as a drop-down window. onClick triggers, when an onClick event is added, an event occurs when you click it. For example, you can jump to another window. onLoad runs after the form is loaded. After an onLoad event is added, an event occurs before the component is displayed.

2. condition, for example, if state of "dynamic panel" equals 01. There are also 14 conditions similar to "state of xxx", and equals can be replaced with other conditions.

 

Ii. Carousel,

The so-called "Carousel" is shown in Figure 7:

Figure 7

Images and subtitles rotate at regular intervals, and images and subtitles rotate or jump by clicking the left arrow or a small gray dot on the bottom.

It looks pretty, and of course it is very troublesome to do it. Using Axure simulation requires a lot of events to see how to do it:

1. Drag a rectangle to Convert it to a Dynamic Panel (right-click and choose Convert to Dynamic Panel ).

2. Double-click the Panel to name it "dynamic panel" and add multiple PanelStates 01, 02, 03, 04 ...... (How many images are added ). (Figure 8)

 

Figure 8 Add a panel states

3. Double-click 01 and click inport in PanelState Style to add the image. 02, 03 the same method. (See figure 9)

 

Figure 9 attach an image to a panel

4. Return to "dynamic panel" and select onPanelStateChange event case1 to add the condition if stateof dynamic ad equals 02. Then select move, wait, and set panel state; add the condition if state of dynamic ad equals 03 to case2, and then select move, wait and set panel state. Add the same actions and similar conditions as case3 or case4. (See figure 10, 11, and 12)

 

Figure 10 Add conditions

 

 

Figure 11 set all condition 1

 

 

Figure 12 set all conditions 2

5. Add the onLoad event wait and set panelstate. If you want to add the left and right buttons, 1 drag the image into the image and add it to the appropriate position in the "dynamic panel", add the event onClick, and select set panel state. The method is the same for left and right. There are also dots that follow the picture, a few images plus a few dots, add a different color dot to overwrite those vertices, and The onClick event (do not forget the coordinates; also, the Move to and Move by are different. Move to indicates the position to be moved, for example, (543,644). Move by indicates the position to be moved, for example, (). Move by indicates to Move x to 40, y does not move .), Add similar actions to all vertices. (See figure 13, 14, and 15)

 

Figure 13 add an event to the left button

 

 

Figure 14 add an event to the right button

 

 

Figure 15

Omitted

 

3. Fixed the navigation in the lower right corner,

The "navigation at the bottom" is called so, because it is also a menu, but it is not comprehensive and has the function of returning to the top: (see figure 16)

 

Figure 16

It is not difficult to create a method. Select an event.

1. Drag four or five rectangles into a group and name them 01, 02, 03, 04, and 05. Add the drop-down box and the pop-up icon on the right, and name them 01001, 02001, 03001, 04001, and 05001. (See figure 17)

 

Figure 17 stacked five rectangles

2. If the menu is the same, add two cases to the onMouseEnter event, and add an onMouseOut event to select hide; 01, 02, 03, 04, 05 and Their marked events and (Fig 18 and 19th)

 

Figure 18-01 add events

 

 

Figure 19 add an event

 

Iv. Feedback window,

The feedback window is an important function. You need it for search and selection. 20th

 

Figure 20

1. Select forms in default or bootstrat and drag a Textfield and Droplist. (See figure 21)

 

Figure 21 pull Components

2. Enter "Enter xxxxx" and change it to Gray. (See figure 22)

 

Figure 22 change the font color

 

 

3. Add event onKeyUp, enter the condition if texton This equals "Enter the keyword to search", and select set panel state. (See figure 23)

 

Figure 23 add set panel state