在網(wǎng)頁設(shè)計中，頁面標(biāo)簽切換效果是非常常見的交互方式，尤其在電商類網(wǎng)站上更是標(biāo)配。之所以如此普遍應(yīng)用，主要是因?yàn)榫W(wǎng)站首頁展示區(qū)域被視為寸土寸金的黃金區(qū)域，而標(biāo)簽切換可以讓更多內(nèi)容在同一個地方展示，從而提

在網(wǎng)頁設(shè)計中，頁面標(biāo)簽切換效果是非常常見的交互方式，尤其在電商類網(wǎng)站上更是標(biāo)配。之所以如此普遍應(yīng)用，主要是因?yàn)榫W(wǎng)站首頁展示區(qū)域被視為寸土寸金的黃金區(qū)域，而標(biāo)簽切換可以讓更多內(nèi)容在同一個地方展示，從而提高了土地利用率。本教程將向大家介紹如何使用Axure RP Pro 7.0來制作蘇寧易購網(wǎng)站風(fēng)格的標(biāo)簽切換效果，幫助讀者將Axure技術(shù)與最前沿的應(yīng)用場景結(jié)合起來。

1. 新建動態(tài)面板

首先，在Axure編輯窗口中拖入一個動態(tài)面板，并將其長和寬設(shè)置為299*121像素。

2. 命名動態(tài)面板

右擊動態(tài)面板，選擇“管理面板狀態(tài)”，在彈出框中新建三個動態(tài)面板，并分別命名為“促銷”、“公告”和“論壇”。

3. 編輯動態(tài)面板

在Axure的部件管理中，右擊每個動態(tài)面板，選擇編輯。這將打開三個待編輯的空白標(biāo)簽頁面，每個頁面代表一個標(biāo)簽及其對應(yīng)的內(nèi)容。

4. 編輯動態(tài)面板內(nèi)容

在“促銷”標(biāo)簽頁面中，拖入三個矩形，并在每個矩形內(nèi)填入相應(yīng)的名稱。由于當(dāng)前展示的是促銷信息，我們將“促銷”二字加粗顯示。同樣，對于“公告”和“論壇”也進(jìn)行相同的操作。

5. 增加標(biāo)簽對應(yīng)內(nèi)容

在每個標(biāo)簽頁面中，增加相應(yīng)的內(nèi)容。例如，在“促銷”標(biāo)簽頁面中，添加六條列表信息。對于“公告”和“論壇”也進(jìn)行類似的操作。

6. 增加切換動作

在“促銷”標(biāo)簽下，鼠標(biāo)單擊“公告”。然后在Axure的部件交互與注釋模塊中，雙擊“鼠標(biāo)移入時”選項(xiàng)。在彈出的用例編輯器中，點(diǎn)擊“設(shè)置面板狀態(tài)”，并依次選擇名稱為“公告”的動態(tài)面板。同樣，在“論壇”標(biāo)簽下也進(jìn)行相同的操作。

7. 完成切換動作設(shè)置

在“公告”標(biāo)簽下，對“促銷”和“論壇”兩個標(biāo)簽設(shè)置動作。同樣，在“論壇”標(biāo)簽下，對“公告”和“促銷”也進(jìn)行設(shè)置。這樣，就完成了三個展示效果的切換操作設(shè)置。

完成以上操作并保存后，按下“F5”鍵即可在瀏覽器中預(yù)覽標(biāo)簽切換效果。你會發(fā)現(xiàn)，你剛剛制作的效果與蘇寧網(wǎng)站上的一模一樣，無論真假！現(xiàn)在慶祝一下你的成功吧！

通過本教程，你學(xué)會了如何使用Axure RP Pro 7.0制作蘇寧易購式的標(biāo)簽切換效果。這種交互方式在電商網(wǎng)站中非常常見，并且能夠有效利用頁面空間，提高用戶體驗(yàn)。希望這篇文章對你有所幫助！