Axure RP Pro 7.0 Suning easy-to-buy label switching effect tutorial

Ext.: http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html

Page label switching effect, almost all large sites (especially e-commerce sites) standard interactive mode;

The reason why the application is so common, the key lies in the site's first screen display area, is the gold area of the pound; Tag switching allows more content to be displayed in the same block; the equivalent of two pieces of land of the same size, a cottage, a building, the use of natural soil;

This tutorial is a copy of Suning website label Switching effect, in order to be realistic, so that you can axure technology and the forefront of the application scenarios, when you need to make a label switch interaction effect, you can first make the content, and then realize the interactive function;

Tools/Materials

• Axure RP Pro 7.0 version software

Method/Step

2. New Dynamic panel: Drag a dynamic panel into the edit window and set the length and width to 299*121;

4. Dynamic panel naming: Right click on the dynamic panel, click on the "Management panel status", in the pop-up box to create a new 3 dynamic panels, respectively named: "Promotion", "Bulletin", "Forum";

6. Edit Dynamic Panel: In the lower right part of the Axure management (also has a Chinese version called Component Management), right-click "Promotion", "Bulletin", "Forum", and in the pop-up menu click Edit;

   At this point there will be three blank tab pages to be edited, and each page represents a state, that is, each label and the content it represents;

8. Edit Dynamic Panel content: in the title "Promotion" Dynamic panel tab, drag into 3 rectangles, fill in each rectangle name, because the current to show as promotional information, so the "promotion" two words bold, similarly, for the "bulletin", "Forum" is also;

10. Add tag content: in the "Promotion" tab, add the list information content, total 6; for "Announcements", "forum" is also;

12. To increase the switching action: under the "Promotions" tab, click "Announcements", on the right side of the axure "parts interaction and Comment" module, double-click the "Mouse over" option, in the pop-up "Use Case editor" click on "Set up panel state", and then select the status named "Announcements" dynamic panel;

    Similarly, this is true for the Forum tab, which means that you can switch to the Announcements tab or to the Forums tab when the promotion is displayed.

14. Complete the Toggle Action settings: Under the "Announcements" tab, the "Promotion" and "forum" two tags set the action, similarly, in the "Forum" tab, the "Announcements" and "promotion" set the action, so as to complete the 3 display effect of the switching operation settings;

    Complete the above operation, and save, press the release quick Build "F5", you can see the label switch effect in the browser, you will find that you hand-made the finished effect, and Suning website exactly the same, no distinction between true and false! Give yourself a good celebration!

    END

Precautions

• 3 transitions correspond to 3 dynamic panels, each with a dynamic panel that corresponds to the display under each label
• In general, you also need to add a default state to the page.

Axure RP Pro 7.0 Suning easy-to-buy label switching effect tutorial