概要

マウスリーブとは、要素のエリア外にマウスカーソルが出たときに動作することを表します。 マウスエンターなどで開いたポップアップを閉じたり、操作が完了していない要素の外にマウスが外れた時にアラートを表示するなどの際に使用します。 マウスエンターなどで開いたポップアップを閉じる際などは、マウスリーブを設定する前に、マウスエンターでオーバーレイが開くプロトタイプを作成しておく必要がありますのでご注意ください。

1. インタラクションの追加
2. インタラクションの削除
3. インタラクションの種類
4. 操作後の動作

1. インタラクションの追加

再現したい操作と、操作後の動きを追加

2. インタラクションの削除

再現したい操作と、操作後の動きを削除

3. インタラクションの種類

操作時のインタラクションの種類を設定します。 クリックするとインタラクション詳細パネルが開きます。ドロップダウンで操作の種類を設定することができます。

4. 操作後の動作

操作後の動作を設定します。ドロップダウンで操作後の動作を設定することができます。

【マウスリーブ操作の詳細設定】 マウスリーブ後の動作は主に、以下を使用します。

① オーバーレイを開く ② オーバーレイを閉じる

① オーバーレイを開く

アラートの表示や、モーダルウィンドウを開く時に使います。 マウスリーブで動作するオブジェクトを選び、操作＝マウスリーブ　操作後の動作＝オーバーレイを開く　を選択します。

移動先を指定します。 指定の方法は2通りあります。

方法① ドラッグで矢印で繋ぐ 方法② プルダウンの選択肢から選ぶ

方法① ドラッグで矢印で繋ぐ

マウスリーブするオブジェクトから、移動先のフレームに矢印を引っ張ります。 または移動先を選択する欄が追加表示されるので、その中から選択します。

起点＝Hot Spot 遷移先＝Destination 両者をつなぐ線＝Connection

と言います。

方法② プルダウンの選択肢から選ぶ

移動先を選択する欄が追加表示されるので、その中から選択します。

上記のように繋いだら、遷移前のデザインをプレビューします。 プレビュー画面で対象のオブジェクトをクリックし、オブジェクトを離すことで動作を 確認することができます。

② オーバーレイを閉じる

アラートの表示や、モーダルウィンドウを閉じる時に使います。 今回は予めマウスエンターで開いたオーバーレイを例に解説します。 マウスリーブで動作するオブジェクトを選び、操作＝マウスリーブ　操作後の動作＝オーバーレイを閉じる　を選択します。

先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。