滑鼠移入移出及圖像變換的互動設計

1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)
2. 變換圖像(Rollover Image)
3. 變換樣式(Rollover Style)

---

1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)

在先前初級互動設計(Basic Interaction)一章中，介紹多種Axure RP支援的人機介面互動效果。這裡我們要介紹其中兩個常見的觸發事件(Event)：

OnMouseEnter – 滑鼠的指標移動到物件之上
OnMouseOut – 滑鼠的指標移動出物件之外

有許多Widget可以使用OnMouseEnter 和 OnMouseOut觸發事件，當滑鼠移到Widget上時會觸發OnMouseEnter事件，OnMouseOut事件則發生在滑鼠離開Widget時被觸發。

最常見的運用方式，則是合併Dynamic Panel來控制比較複雜的功能時，例如：浮動選單、滑過特效和自訂tooltips等。

以左圖的互動效果來當例子：當滑鼠移到圖片上方時，會自動彈出說明文字框(Dynamic Panel)，當滑鼠移出圖片時，說明文字框就會消失。這個互動設計就可透過OnMouseEnter 和 OnMouseOut觸發事件結合Dynamic Panel的控制來達成，設計方式如下圖所示。

　

2. 變換圖像(Rollover Image)

Image Widget 以及 Button Shape Widget可直接利用Axure RP的功能來設計Rollover Image和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和 Dynamic Panel。

變換圖像(Rollover Image)

想要建立變換影像的話，請在Image Widget上按右鍵，選擇「Edit Image->Import Rollover Image」，然後選擇一個影像當作變換影像，一旦影像選定後，您可以在Wireframe中，利用滑鼠滑過影像上的黑白色方塊來預覽變換影像。

　

3. 變換樣式(Rollover Style)

在Axure RP裡頭，Rectangle，Placeholder，Button Shape這三種Widget可以直接設定變換樣式(Rollover Style)，而不需要去特別指定OnMouseEnter / OnMouseOut的觸發事件，就可以做到變換樣式。

想要建立變換樣式的話，請在Rectangle / Placeholder / Button Shape上按右鍵，選擇「Edit Edit Button Shape->Edit Rollover Style」。

此時會開啟「Set Rollover Style」對話方塊，您可以在這裡選擇變換樣式，勾選「Preview」核取方塊來預覽設定在Button Shape的變換樣式。

　

變換的樣式(如下圖)包括：

• 字型 Font
• 字體大小 Font Size
• 粗體 Bold
• 斜體 Italic
• 底線 Underline
• 文字顏色 Font Color
• 填色 Fill Color
• 線條顏色 Line Color
• 線寬 Line Width
• 線條樣式 Line Style

套用了變換樣式之後，您可以選擇 Preview提早預覽效果。也可以在Wireframe中，利用滑鼠滑過Widget左上角的黑白色方塊來預覽變換狀態。

---

(版權聲明：歡迎引用及複製Axure RP 中文教學內容，必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)

---