使用交互樣式（MouseOver鼠標懸停、 MouseDown鼠標按下、Selected選中、和 Disabled禁用）制作交互式按鈕。

然后，添加交互以將按鈕設置為“selected和disabled”樣式。

下載培訓文件

如果您還沒有該文件，請下載AxureTraining.rp并在Axure RP中打開它，Axure培訓網站上每個教程都包含在內。建議您使用該文件來學習教程，但是不這樣的話，也可以按照以下指導步驟來做，這樣一來不使用AxureTraining.rp也能學會教程。

步驟1：添加交互方式

首先在按鈕上設置交互方式。

前兩個交互樣式MouseOver和MouseDown可以自動觸發，無需再構建交互。當某一部件上為MouseOver樣式時，鼠標移到該小部件上時，該部件會呈現出Mouseover的視覺效果。光標懸停在部件上時，點擊鼠標，將暫時顯示MouseDown樣式。使用Selected和Disabled兩個交互樣式則需要構建交互。

打開AxureTraining.rp，然后打開畫布上的“交互式按鈕”頁面進行編輯。該頁面中有一個綠色實心按鈕。

點擊選中按鈕。在檢查器頂部的名稱字段處將窗口部件命名為“交互式按鈕”。

在“屬性”選項卡中“交互樣式”欄下，單擊“MouseOver”，打開“設置交互樣式”對話框中的“MouseOver”選項卡。

單擊選中“填充顏色”復選框。選中任一樣式將覆蓋窗口部件的默認樣式。

打開顏色選擇器并選定色號05AE03（活力綠）。

注意，當打開MouseOver選項卡時，部件為MouseOver樣式。

切換到“交互樣式”對話框中的“MouseDown”選項卡。將MouseDown填充顏色設置為色號52CDE6（亮藍）。在“選擇”選項卡中，選定填充顏色B822C5（輝煌紫）。在“禁用”選項卡中，選擇填充顏色DDDDDD（淺灰色）。

單擊“確定”關閉“設置交互樣式”對話框。

步驟2：預覽

點擊主工具欄中的“預覽”按鈕，在瀏覽器中預覽頁面。最好是定期在瀏覽器中進行預覽，以確保能達到預期效果。

在瀏覽器中，將光標懸停在按鈕上查看MouseOver樣式。然后單擊并長按按鈕查看MouseDown樣式。

步驟3：設置selected

只有當用“設置selected”操作將窗口部件設置交互為“selected”狀態時，才可以動態顯示“selected”樣式。同樣，僅當使用“disabled”操作將窗口小部件設置交互為“disable”狀態時，才可應用“disabled”樣式。

在屬性選項卡的頂部，雙擊“OnClick”打開例編輯器，創建OnClick交互。

在左列中，單擊選中“設置selected/checked”。

在右欄中，找到“交互式按鈕”，然后單擊選中該復選框。或者也可以選擇“此部件”選項，因為要創建的交互是部件對其自身執行操作的交互。

在此列底部，可以看到文本“將selected狀態設置為”以及兩個下拉列表。第一個下拉菜單設置為“value”，第二個設置為“true”。可以將這些下拉框保持原樣不變。

單擊“確定”關閉對話框。

步驟4：預覽

單擊預覽，在瀏覽器中查看此交互。

在瀏覽器中，單擊按鈕。首先將看到MouseOver樣式，然后是MouseDown樣式，最后是Selected樣式。

步驟5：設置disabled

現在將交互變更為點擊時為禁用而不是選中。

將剛剛創建的OnClick案例視作“案例1”。雙擊屬性選項卡中的標簽“案例1”將其打開以進行編輯。

在中心列中，標記為“組織操作”，單擊“設置selected”操作，然后按[DEL]鍵將該操作從案例中刪除。

在左欄中，選擇“啟用/禁用”操作。

在右欄中，單擊“交互式按鈕”復選框或“本窗口部件”復選框。

將在此列底部看到兩個單選按鈕：啟用和禁用。選擇“禁用”。

單擊“確定”關閉對話框。

步驟6：預覽

預覽頁面。

單擊禁用按鈕,即可看到禁用狀態。

關注設計，而非工具，讓我們把精力集中在設計本身，而非去努力學習某個“強大”的工具，這是Mockplus一貫的理念。Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。