如何利用Axure RP8做出點(diǎn)擊按鈕切換頁(yè)面效果？一起來(lái)文中看看~

先來(lái)看一下頁(yè)面的效果圖：點(diǎn)擊不同的按鈕，切換不同的頁(yè)面。(是web端和手機(jī)端都很常見的交互效果)

實(shí)現(xiàn)這一效果大致要分為三個(gè)步驟：

為按鈕添加“選中”后的效果；

設(shè)置動(dòng)態(tài)面板，并對(duì)其進(jìn)行狀態(tài)編輯；

通過(guò)對(duì)“鼠標(biāo)單擊”命令的編輯，完成交互設(shè)置。(其中一、二順序誰(shuí)先誰(shuí)后都o(jì)k)

先來(lái)講第一個(gè)步驟，為按鈕添加“選中”狀態(tài)的效果(我會(huì)對(duì)其分為幾個(gè)小的步驟)。

搭建出一個(gè)類似的原型，根據(jù)按鈕的數(shù)量對(duì)文件逐一進(jìn)行命名(重新命名是為了方便后面的操作)；

選中其中想要做變化的按鈕，在鼠標(biāo)狀態(tài)中 單擊“選中”(selected)選項(xiàng)，調(diào)出編輯器，對(duì)按鈕顏色和字體顏色進(jìn)行編輯，確定后，檢查“選中”狀態(tài)后的備注變化，標(biāo)有備注信息說(shuō)明操作成功。

對(duì)其他按鈕分別進(jìn)行 第 2 步的操作，這樣為按鈕添加效果的第一步就完成了。

接著，來(lái)說(shuō)第二個(gè)步驟：設(shè)置動(dòng)態(tài)面板(也就是需要做變化的頁(yè)面)。

選中圖片——右鍵 選擇 “轉(zhuǎn)為動(dòng)態(tài)面板” 選項(xiàng)，這時(shí)右側(cè)的圖片文件會(huì)發(fā)生變化，轉(zhuǎn)化為動(dòng)態(tài)面板，里面默認(rèn)會(huì)包含一個(gè) 狀態(tài) 文件，然后對(duì)動(dòng)態(tài)面板(不是里面的包含文件)進(jìn)行重新命名。

對(duì)動(dòng)態(tài)面板下的狀態(tài)圖層進(jìn)行復(fù)制，有幾個(gè)按鈕，就復(fù)制幾個(gè)文件。

文件復(fù)制完了，雙擊動(dòng)態(tài)面板調(diào)出編輯器，選擇“編輯所有文件”的小圖標(biāo)，然后確定，這時(shí)候菜單欄下會(huì)生成所有需要編輯的狀態(tài)文件。

選擇需要編輯的狀態(tài)文件進(jìn)行編輯(如只換顏色，可復(fù)制效果，粘貼到其余文件中進(jìn)行編輯即可，這樣能快一些)，編輯完成后 叉掉 即可。

最后，將按鈕和動(dòng)態(tài)面板效果進(jìn)行交互編輯，效果就完成啦。

還記著之前對(duì)按鈕進(jìn)行了“選中”狀態(tài)的編輯嘛？現(xiàn)在需要讓這個(gè)效果能在預(yù)覽中顯示，我們就需要雙擊 在交互面板里的“單擊”(onclick)選項(xiàng)，調(diào)出編輯器之后，在元件庫(kù)中找到 “單擊/按下”選項(xiàng)，選中它，然后在右側(cè)文件中找到對(duì)應(yīng)的文件名稱，勾選后 確定。(剩下的按鈕也是這樣操作)

選中剛才的按鈕，雙擊“case1”調(diào)出編輯器，在編輯器中找到“設(shè)置動(dòng)態(tài)面板”選項(xiàng)，然后勾選右側(cè)的動(dòng)態(tài)面板，然后在狀態(tài)欄中選擇 對(duì)應(yīng)按鈕點(diǎn)擊時(shí)，需要做變化的狀態(tài)文件，設(shè)置好點(diǎn)擊確定。(其他按鈕的操作也是如此，如果熟悉了操作不需要分別兩次打開編輯器，直接進(jìn)行操作也是可以的，我是為了方便拆解步驟看的清楚才分了兩步)

最后，還有一個(gè)關(guān)鍵的步驟：為了預(yù)覽時(shí)，按鈕切換的效果更加自然，需要選中所有的按鈕元件，進(jìn)行編組命名。

以上步驟都完成后，即可預(yù)覽查看效果了。

本文由 @雨禾君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議

總結(jié)

以上是生活随笔為你收集整理的angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。