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

---

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

免費下載Axure RP 優(yōu)惠購買Axure RP

---

在本教程中，您將學(xué)習(xí)如何使用樣式效果創(chuàng)建當按鈕處于各種交互狀態(tài)（例如，鼠標懸?；騿螕簦r具有不同樣式的按鈕。

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

小部件設(shè)置

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

鼠標懸停樣式效果

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

Mousedown樣式效果

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

預(yù)覽互動

• 預(yù)覽頁面并將鼠標懸停在按鈕上，使其變?yōu)榉奂t色。
• 按住鼠標在按鈕上，使其變?yōu)榫G色。

所選樣式效果

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

將按鈕設(shè)置為其選定狀態(tài)

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

Disabled風(fēng)格效果

將樣式效果添加到按鈕

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

將按鈕設(shè)置為禁用狀態(tài)

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

預(yù)覽互動

• 預(yù)覽頁面，然后單擊按鈕將其設(shè)置為選定狀態(tài)并使其變?yōu)樽仙Ｈ缓笤俅螁螕粢詣h除所選狀態(tài)。
• 右鍵單擊該按鈕將其禁用并使其變?yōu)榛疑?/span>

---

想要獲得Axure RP更多資源、正版授權(quán)的伙伴，請咨詢【慧都客服】了解

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。