インタラクションの共有

インタラクションの使用

共有インタラクションとは?

インタラクショの共有を使用する場合、トリガーされる変更は定義したステートだけではなく、複数のステートに適用されます。

同じ変更を複数のステートに適用

たとえば、のホバー インタラクションを定義する場合、要素以外のスクリーンのステートに関係なく表示する目的があります。つまり、スクリーンのその他の要素のステートに関係なく、スクリーン全体を特定の固定ステートに設定する代わりに、その他の要素の上にツールチップを表示します。

Indigo Studio には、この機能をサポートする「共有インタラクション」があります。「インタラクション エクスプローラー」で、矢印およびプラス アイコンで表されます。

ステートの結合

スクリーンの新しいステートを定義した際に、Indigo のデザインが実際のスクリーンでも同じになります。ただし、現在のステートに項目を追加して要素の操作を表示する場合もあります。たとえば、リッチ ツールチップなどのオーバーレイ、グローバル ナビゲーション、パネルなどを表示する場合などです。共有インタラクションを使用する場合、結果のステートの変更がその他のステートと結合できます。Indigo Studio は、デザインした変更をインタラクションの共有がトリガーされたステートに適用します。

共有インタラクションを使用した場合、結合で予期しないステートになる可能性があります。そのため、操作をトリガー可能なすべてのステートに適切な変更のみで使用してください。

以下の画像では、インタラクション エクスプローラー で 3 つのステートを含むスクリーンインタラクション フローを表示します。「Hovering Rectangle」ステートは、共有インタラクションの結果ステートです。

プロトタイプを実行する場合、「Hovering Rectangle」ステートに設定した変更が「Start」ステートまたは「Tapped/Clicked Rectangle」ステートに適用して結合できます。プロトタイプを実行し、各変更が適用可能なステートでインタラクションをテストすることを推薦します。

インタラクションの作成元は インタラクション エクスプローラー の 1 つの結合したステートです。上の例では、Start からデザインされた Hovering Rectangle を表示します。ただし、実行中で、その他のステートに適用できます。インタラクション エクスプローラー を使いやすくするため、結合したステートを非表示にします。たとえば、大きいプロトタイプで複数の共有インタラクション を定義した場合、ナビゲーションが容易でなくなります。

共有/共有されていないインタラクション間の切り替え

ホバー インタラクションおよびその他の切り替える操作がデフォルトで共有されます。タイムライン パネルの「インタラクションの共有」ボタンをクリックすると、インタラクションをトリガーする任意のステートに変更を適用します。

プロトタイプ

以下のサンプル プロトタイプを参照してください。

関連トピック