文章主要介紹了利用Axure制作交互式按鈕的具體操作過(guò)程，希望給大家?guī)?lái)些幫助。

用MouseOver（鼠標(biāo)懸停），MoverDown（鼠標(biāo)按下），Selected（選中）和Disabled（禁用）這些交互樣式來(lái)制作一個(gè)交互式按鈕。然后，添加一個(gè)交互行為來(lái)設(shè)置它被選中和禁用的狀態(tài)。

STEP 0：下載練習(xí)文件

如果你還沒有練習(xí)文件，下載AxureTraining.rp文件并且在Axure RP打開它。這個(gè)文件包含了Axure培訓(xùn)網(wǎng)站上每個(gè)教程用到的相關(guān)頁(yè)面。我們建議一直都用我們準(zhǔn)備的這個(gè)文件來(lái)完成教程，但是如果你不能，那也是ok的——即使你沒有使用我們的培訓(xùn)文件，我們總是會(huì)告訴你為了完成每一個(gè)教程需要在新文件中創(chuàng)建什么。

AxureTraining.rp文件打開后如下：

STEP 1：添加交互樣式

開始在按鈕上配置你的交互樣式。前面兩個(gè)交互樣式，MouseOver 和MouseDown會(huì)自動(dòng)發(fā)生，不需要建立交互行為。無(wú)論什么時(shí)候當(dāng)一個(gè)部件有MouseOver樣式時(shí)，鼠標(biāo)懸停在部件上會(huì)自動(dòng)改成對(duì)應(yīng)的視覺樣式。當(dāng)光標(biāo)放在部件上并點(diǎn)擊按鈕，MouseDown樣式會(huì)臨時(shí)顯現(xiàn)。后面兩個(gè)，Selected和Disabled，需要我們建立一個(gè)交互行為來(lái)激活他們。

我發(fā)現(xiàn)在官網(wǎng)教程中這個(gè)截圖的標(biāo)注方框還是和圖片本身分開的

打開AxureTraining.rp，然后打開“Interactive button”頁(yè)面，這樣我們就可以在畫布中修改它。這個(gè)頁(yè)面包含一個(gè)綠色的按鈕。

點(diǎn)擊按鈕選中它。在Inspector面板上方的名字區(qū)域?qū)⒉考孛麨椤癐nteraction button（交互式按鈕）”

在屬性標(biāo)簽下的“Interaction Style（交互樣式）”標(biāo)題下，點(diǎn)擊“MouseOver（鼠標(biāo)懸停）”會(huì)打開“Set Interaction Style（設(shè)置交互樣式）”對(duì)話框，當(dāng)前是在“MouseOver”標(biāo)簽欄。

點(diǎn)擊選中“Fill Color（填充顏色）”的選項(xiàng)框。任何一個(gè)樣式屬性在這個(gè)對(duì)話框里被選中都會(huì)覆蓋部件原先默認(rèn)的樣式。

打開色彩拾取器并指定顏色 05AE03，一種活潑的綠色。

注意此時(shí)畫布中的按鈕會(huì)顯示出MouseOver的樣式，當(dāng)MouseOver標(biāo)簽欄打開時(shí)。

切換到“MouseDown”標(biāo)簽欄在Interaction Styles對(duì)話框中。設(shè)置它的填充顏色為 52CDE6，一種亮藍(lán)色。在“Selected”標(biāo)簽欄，指定填充顏色 B822C5，一種亮紫色。在“Disable（禁用）”標(biāo)簽欄，選擇填充色為 DDDDDD，一種淺灰色。

點(diǎn)擊“OK”關(guān)閉Interaction Styles對(duì)話框。

STEP 2：預(yù)覽

點(diǎn)擊“Preview”按鈕，位置在主工具欄右上角，這樣我們就可以在瀏覽器中預(yù)覽。這是一個(gè)好主意，你可以時(shí)不時(shí)在瀏覽器中預(yù)覽自己的示意圖為了確認(rèn)它的效果是否達(dá)到自己的目的。

在瀏覽器中，將光標(biāo)移動(dòng)到按鈕上查看MouseOver樣式（顏色變化為活潑的綠色）。然后點(diǎn)擊按鈕并按住鼠標(biāo)左鍵，可以看到MouseDown樣式（顏色變化為亮藍(lán)色）。

STEP 3：Set Selected（設(shè)置選中）

Selected（選中）樣式只有在“Set Selection（設(shè)置選中）”這個(gè)行為關(guān)聯(lián)到部件選中狀態(tài)時(shí)的樣式才會(huì)觸發(fā)。同樣的，Disabled（禁用）樣式也只有在“Disable（禁用）”這個(gè)行為關(guān)聯(lián)到部件的禁用狀態(tài)才會(huì)被觸發(fā)。

在屬性標(biāo)簽欄的頂部，需要雙擊“OnClick”打開“Case Editor（OnClick）”對(duì)話框以便創(chuàng)建一個(gè)新的點(diǎn)擊交互。

在左邊欄，通過(guò)點(diǎn)擊“Set Selected／Checked”來(lái)選擇這個(gè)行為。

在右邊欄，定位到“Interactive button”（我們前面重命名時(shí)的名字），點(diǎn)擊復(fù)選框選中它?；蛘吣阋部梢赃x擇“This Widget”這個(gè)選項(xiàng)，由于我們正在建立一個(gè)是可以在部件本身發(fā)生效用的交互行為。

在右邊欄的底部，你將會(huì)看到“Set Selected state”的文本以及兩個(gè)下拉選項(xiàng)框，第一個(gè)下拉選項(xiàng)框是設(shè)置“value（值）”而第二個(gè)是設(shè)置“true（真）”。我們?cè)谶@個(gè)地方可以不做任何修改。

點(diǎn)擊“OK”關(guān)閉對(duì)話框。

STEP 4：Preview（預(yù)覽）

點(diǎn)擊預(yù)覽在瀏覽器中查看交互行為。

在瀏覽器中，點(diǎn)擊按鈕，你將會(huì)首先看到MouseOver樣式（亮綠色），短暫地看到MouseDown樣式（亮藍(lán)色），接著就是選中狀態(tài)下的樣式了（亮紫色）。

STEP 5：Set Disabled（設(shè)置禁用）

現(xiàn)在我們來(lái)修改一下交互行為以便替換選中行為，將其改為點(diǎn)擊按鈕時(shí)禁用它。

我們之前創(chuàng)建的OnClick實(shí)例叫做“Case 1（實(shí)例1）”。在屬性面板中雙擊標(biāo)簽“Case 1”可以打開進(jìn)行編輯。

在打開的對(duì)話框“Case Editor（OnClick）”的中間欄叫“Organize Action（組織行為）”，單擊“Set Selected（設(shè)置選中）”行為然后用[DEL]刪除鍵刪除它。

在左邊欄，選擇行為“Enable／Disable.”

在右邊欄，選擇“Interactive button”或“This widget”的復(fù)選框。

你將會(huì)在右邊欄的底部看到兩個(gè)單選按鈕：Enable（激活）和Disable（禁用）。選擇“Disable”。

點(diǎn)擊“OK”關(guān)閉對(duì)話框。

STEP 6：預(yù)覽

預(yù)覽這個(gè)頁(yè)面。

點(diǎn)擊按鈕禁用它，你將會(huì)看到按鈕的禁用狀態(tài)（淺灰色）。

譯者：Eugene

原文鏈接：?https://www.axure.com/support/training/interactive-button-tutorial

本文由 @Eugene 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。