原型設計工具Axure RP新手教程（二）：交互式按鈕教程

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何使用樣式效果創建當按鈕處于各種交互狀態（例如，鼠標懸停或單擊）時具有不同樣式的按鈕。

具體操作可以點擊下方視頻查看???

小部件設置

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將按鈕小部件拖到畫布上。

鼠標懸停樣式效果

• 選擇按鈕小部件，然后在Interactions （交互）窗格中單擊Mouseover Style Effect（鼠標懸停樣式效果）。
• 在出現的：mouseover塊中，點擊Fill Color（填充顏色）屬性，然后在顏色選擇器中選擇一種粉紅色。
• 單擊OK（確定）保存操作。

Mousedown樣式效果

• 在仍然選擇按鈕的情況下，在Interactions （交互）窗格中單擊New Interaction（新建交互）。在出現的列表的底部，選擇：mousedown樣式效果。
• 在出現的：mousedown塊中，檢查Fill Color（填充顏色）屬性，然后在顏色選擇器中選擇綠色。
• 單擊OK（確定）以保存操作。

預覽互動

• 預覽頁面并將鼠標懸停在按鈕上，使其變為粉紅色。
• 按住鼠標在按鈕上，使其變為綠色。

所選樣式效果

• 將樣式效果添加到按鈕。
• 返回Axure RP，選擇按鈕小部件，然后在Interactions （交互）窗格中單擊New Interaction（新建交互）。 在出現的列表的底部，選擇：selected樣式效果。
• 在出現的：selected塊中，檢查Fill Color（填充顏色）屬性，然后在顏色選擇器中選擇一種紫色。
• 單擊OK（確定）以保存操作。

將按鈕設置為其選定狀態

• 在仍選擇按鈕的情況下，再次單擊New Interaction（新建交互）。 選擇Click或Tap事件，然后選擇Set Selected / Checked操作。
• 在目標下拉列表中選擇此小部件。
• 在Set （設置）下拉列表中保持選中狀態，然后在To（到）下拉列表中選擇切換。
• 單擊OK（確定）以保存操作。

Disabled風格效果

將樣式效果添加到按鈕

• 在仍選擇按鈕小部件的情況下，在Interactions （交互）窗格中單擊New Interaction（新建交互）。 在出現的列表的底部，選擇：disabled樣式效果。
• 在出現的：disabled塊中，檢查Fill Color（填充顏色）屬性，然后在顏色選擇器中選擇灰色。
• 單擊OK（確定）以保存操作。

將按鈕設置為禁用狀態

• 在仍選擇按鈕的情況下，再次單擊New Interaction（新建交互）。 選擇上下文菜單（右鍵單擊）事件，然后選擇Enable/Disable（啟用/禁用）操作。
• 在目標下拉列表中選擇此小部件，然后在其下方選擇禁用。
• 單擊OK（確定）以保存操作。

預覽互動

• 預覽頁面，然后單擊按鈕將其設置為選定狀態并使其變為紫色。然后再次單擊以刪除所選狀態。
• 右鍵單擊該按鈕將其禁用并使其變為灰色。

---

想要獲得Axure RP更多資源、正版授權的伙伴，請咨詢了解

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。