打開 Rollover Style 對(duì)話框

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton1.png" alt="image" />

首先打開AxureInteractiveButton.rp，然后打開 Interactive Button 頁面。

右鍵單擊按鈕，選中 Interaction Styles... 選項(xiàng)來打開 Interaction Styles 對(duì)話框。

編輯 MouseOver Style

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton2.png" alt="image" />

在 MouseOver 選項(xiàng)板中選中 Underline。這會(huì)讓按鈕中的文字顯示下劃線。

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

在 Axure 中預(yù)覽樣式

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton3.png" alt="image" />

當(dāng)部件應(yīng)用一個(gè) Interaction Style 時(shí)，點(diǎn)擊在按鈕右上方的一半是白色而另一半是黑色的按鈕。點(diǎn)擊翻轉(zhuǎn)白色的三角運(yùn)行你預(yù)覽各種各樣的樣式。

編輯 MouseDown Style

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton4.png" alt="image" />

現(xiàn)在設(shè)置當(dāng)鼠標(biāo)按下按鈕時(shí)顯現(xiàn)的 MouseDown Style。

在這一次，在 Properties 選項(xiàng)板中選中 MouseDown 來打開 Interaction Style 對(duì)話框。讓我們再次通過復(fù)選框以及顏色選擇器來添加下劃線以及填充灰色。不要太快關(guān)閉對(duì)話框。

編輯 Selected Style

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton5.png" alt="image" />

當(dāng)按鈕處于選中狀態(tài)時(shí) Selected Style 將會(huì)顯現(xiàn)出來。這個(gè)最常用來指定用戶當(dāng)前的頁面。

在 Selected 選項(xiàng)板中選中 underline 復(fù)選框然后添加一個(gè) darker grey。

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

點(diǎn)擊時(shí)按鈕被選中

http://wiki.jikexueyuan.com/project/axure/images/interactivebutton6.png" alt="image" />

通過動(dòng)作 Set Selected/Checked 添加一個(gè)事例到 OnClick 事件。然后選擇復(fù)選框 This Widget。

作為一種選擇，你可選中 MyButton，但是選中 This 將允許你復(fù)制粘貼一個(gè)交互到不同的部件而不用每次都改變目標(biāo)部件。

預(yù)覽原型然后測試 MouseOver， MouseDown，和 Selected 的樣式。