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

Source: Internet
Author: User


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;

    • Axure RP Pro 7.0 version software
  1. New Dynamic panel: Drag a dynamic panel into the edit window and set the length and width to 299*121;

  2. 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";

  3. 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;

  4. 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;

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

  6. 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.

  7. 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!

    • 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.