UXPinの**Interactions(インタラクション)**を使用して、最終形に近いプロトタイプを作成できます。 簡単なモックアップから完全にアニメーション化されたプロトタイプまで何でも可能です。

インタラクションの追加

UXPinでは、要素やキャンバスにインタラクションを追加することができます。

既存のインタラクションには数字が表示されます。無効なインタラクションには赤のハイライトが表示されます。

ドラフトインタラクションとは?

**ドラフトインタラクション(Draft interactions)**は、削除された要素や変数にリンクしているなど状態の、未完成のインタラクションを言います。

インタラクションのコピー

設定したインタラクションをコピーして、他の要素に貼り付けることができます(他のページでも適用可能です)。 インタラクションをコピーするには、インタラクションのある要素を右クリックして Copy interaction(インタラクションのコピー)を選択します。 すべてのインタラクションをコピーするか、選択したインタラクションのみをコピーできます。 コピーしたインタラクションを別の要素またはグループに貼り付けるには、その要素を右クリックしてコンテキストメニューを開き、Paste(貼り付け)> Paste Interactions(インタラクションの貼り付け)を選択します。

インタラクションの複製(Duplicate)

Interactionsの複製は、右側のInteractionsパネルから行うことができます。設定したインタラクションの上にカーソルを置き、Duplicate(⌘ + D)をクリックします。

インタラクションの削除

インタラクションを削除するには、Interactionパネルで X アイコンをクリックします。

Trigger(トリガー)

Trigger(トリガー)とは、ユーザーがインタラクションを開始するために実行する必要のあるアクションのことです。UXPinには、**Element triggers(要素のトリガー)Canvas triggers (キャンバストリガー)**の2種類のトリガがあります。要素トリガーは、要素を操作した時のアクションを起こし、キャンバストリガーは、キャンバスの状態が変化した時のアクションを起こします。

要素のトリガー(Element trigger) 次の場合にトリガーが適用されます。
クリック - Click (Tap) ユーザーがコンポーネントをクリックまたはタップしたとき
ダブルクリック / ダブルタップ(Double Click / Tap) ユーザーがコンポーネントをダブルクリックまたはダブルタップしたとき
右クリック(Right Click) ユーザーがコンポーネントを右クリックしたとき
ホバリング中(While Hovering) マウスカーソルがコンポーネントの上に持ち込まれたり出たりするとき
マウスダウン / タッチダウン(Mouse Down/Touch Down) 選択した要素の上にマウスの左ボタンを押したとき
マウスアップ / タッチアップ(Mouse Up / Touch Up) 選択した要素の上にマウスを押した左ボタンを離したとき
マウスオーバー(Mouse Over) マウスカーソルがコンポーネントに入ったとき
マウスリーブ(Mouse Leave) マウスのカーソルがコンポーネントから離れたとき
左スワイプ(Swipe Left) ユーザーが右から左に水平にスワイプするとき
右スワイプ(Swipe Right) ユーザーが左から右に水平にスワイプするとき
上向きスワイプ(Swipe Up) ユーザーが下から上に垂直にスワイプするとき
下にスワイプ(Swipe Down) ユーザーが上から下に垂直にスワイプするとき
プレス&ホールド(Press&Hold) ユーザーが指を押しながら1秒以上押し続けるとき
長押し(Release Hold) ユーザーが指を1秒以上保持した後に手を離したとき
フォーカス(Focus) コンポーネントがフォーカスされた状態(例:入力フィールド)
値の変更(Value Change) コンポーネントの値が更新されると(入力フィールドなど)。
オプション選択(Option Select) 複数選択リストからオプションを選択します。

Stateを持つ要素は、State Changeオプションが利用可能です。

キャンバスのトリガー(Canvas trigger) 次の場合にトリガーが適用されます。
Key Press(キープレス) 設定したキーが押されたとき
Scroll(スクロール) プロトタイププレビューが一定の高さまでスクロールされた場合
Page Load(ページの読み込み) ページが完全に読み込まれたとき
変数変更 変数の値が更新されたとき