文章主要介紹了利用Axure制作交互式按鈕的具體操作過程，希望給大家帶來些幫助。

用MouseOver（鼠標懸停），MoverDown（鼠標按下），Selected（選中）和Disabled（禁用）這些交互樣式來制作一個交互式按鈕。然后，添加一個交互行為來設置它被選中和禁用的狀態。

STEP 0：下載練習文件

如果你還沒有練習文件，下載AxureTraining.rp文件并且在Axure RP打開它。這個文件包含了Axure培訓網站上每個教程用到的相關頁面。我們建議一直都用我們準備的這個文件來完成教程，但是如果你不能，那也是ok的——即使你沒有使用我們的培訓文件，我們總是會告訴你為了完成每一個教程需要在新文件中創建什么。

AxureTraining.rp文件打開后如下：

STEP 1：添加交互樣式

開始在按鈕上配置你的交互樣式。前面兩個交互樣式，MouseOver 和MouseDown會自動發生，不需要建立交互行為。無論什么時候當一個部件有MouseOver樣式時，鼠標懸停在部件上會自動改成對應的視覺樣式。當光標放在部件上并點擊按鈕，MouseDown樣式會臨時顯現。后面兩個，Selected和Disabled，需要我們建立一個交互行為來激活他們。

我發現在官網教程中這個截圖的標注方框還是和圖片本身分開的

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

點擊按鈕選中它。在Inspector面板上方的名字區域將部件重命名為“Interaction button（交互式按鈕）”

在屬性標簽下的“Interaction Style（交互樣式）”標題下，點擊“MouseOver（鼠標懸停）”會打開“Set Interaction Style（設置交互樣式）”對話框，當前是在“MouseOver”標簽欄。

點擊選中“Fill Color（填充顏色）”的選項框。任何一個樣式屬性在這個對話框里被選中都會覆蓋部件原先默認的樣式。

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

注意此時畫布中的按鈕會顯示出MouseOver的樣式，當MouseOver標簽欄打開時。

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

點擊“OK”關閉Interaction Styles對話框。

STEP 2：預覽

點擊“Preview”按鈕，位置在主工具欄右上角，這樣我們就可以在瀏覽器中預覽。這是一個好主意，你可以時不時在瀏覽器中預覽自己的示意圖為了確認它的效果是否達到自己的目的。

在瀏覽器中，將光標移動到按鈕上查看MouseOver樣式（顏色變化為活潑的綠色）。然后點擊按鈕并按住鼠標左鍵，可以看到MouseDown樣式（顏色變化為亮藍色）。

STEP 3：Set Selected（設置選中）

Selected（選中）樣式只有在“Set Selection（設置選中）”這個行為關聯到部件選中狀態時的樣式才會觸發。同樣的，Disabled（禁用）樣式也只有在“Disable（禁用）”這個行為關聯到部件的禁用狀態才會被觸發。

在屬性標簽欄的頂部，需要雙擊“OnClick”打開“Case Editor（OnClick）”對話框以便創建一個新的點擊交互。

在左邊欄，通過點擊“Set Selected／Checked”來選擇這個行為。

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

在右邊欄的底部，你將會看到“Set Selected state”的文本以及兩個下拉選項框，第一個下拉選項框是設置“value（值）”而第二個是設置“true（真）”。我們在這個地方可以不做任何修改。

點擊“OK”關閉對話框。

STEP 4：Preview（預覽）

點擊預覽在瀏覽器中查看交互行為。

在瀏覽器中，點擊按鈕，你將會首先看到MouseOver樣式（亮綠色），短暫地看到MouseDown樣式（亮藍色），接著就是選中狀態下的樣式了（亮紫色）。

STEP 5：Set Disabled（設置禁用）

現在我們來修改一下交互行為以便替換選中行為，將其改為點擊按鈕時禁用它。

我們之前創建的OnClick實例叫做“Case 1（實例1）”。在屬性面板中雙擊標簽“Case 1”可以打開進行編輯。

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

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

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

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

點擊“OK”關閉對話框。

STEP 6：預覽

預覽這個頁面。

點擊按鈕禁用它，你將會看到按鈕的禁用狀態（淺灰色）。

譯者：Eugene

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

本文由 @Eugene 翻譯發布于人人都是產品經理。未經許可，禁止轉載。