Axure-rp-basic-interactions
Axure RP-基本的な相互作用
この章では、画面を設計するときにAxureが提供する基本的な対話セットについて説明します。
Axure RPの目的は、インタラクティブなプロトタイプを許可することです。 現在、インタラクティブプロトタイプの作成に関しては、過度にインタラクティブなプロトタイプを作成する場合の注意点が常にあります。 これが、利用可能な残りのページをスプリントするために、一度に1つの重要なインタラクションから始めるのが理にかなっている理由です。
Axureインタラクション
インタラクションとは、静的なワイヤフレームをクリック可能なインタラクティブなプロトタイプに変換する機能要素を表す造語です。 相互作用に対する単純なアプローチにするために、Axureは、構造とロジックを定義するためのインターフェースを提供することにより、プロトタイプをコーディングする必要を排除します。
HTMLプロトタイプの生成中に、Axure RPは相互作用を実際のコード（HTML、CSS、およびJavaScript）に変換します。 これは、意図したデザインとページ上の相互作用を示す触媒として機能します。
通常、インタラクションは*インタラクションが発生するとき*から始まります。 たとえば、ページがブラウザにロードされるとき、ユーザーが要素の1つをクリックするときなど。
次に質問が来ます。画面のどこで対話が行われていますか。 メニューの目的でクリック可能なボタンにしたい長方形などの単純な画面要素でもかまいません（例は後で示します）。
最後に、インタラクションで発生している What の説明があります。 ブラウザがページをロードするときのページのロードを考えてみましょう。特定のスライドショーを選択して開始するか、画面に入力すると画像が大きくなります。
Axureイベント
Axureのイベントには2つのタイプがあり、2つのタイプのイベントによってトリガーされます。
ページおよびマスターレベルのイベント
ページがロードされると、デザイン情報、コンテンツ、したがって画面上のすべての要素の配置を取得するためのイベントが大量に発生します。 これらのイベントは最初のページの読み込み中に発生するため、ページの読み込みごとにこれらのイベントが繰り返されると考えることができます。 以下は、ページおよびマスターレベルイベントの例です。
- OnPageLoad
- OnWindowResize
- OnMouseMove
- OnAdaptiveViewChange
オブジェクトまたはウィジェットレベルのイベント
考えてみましょう、ページとページ上の特定のボタンウィジェットを作成しました。 現在、このボタンウィジェットを操作するには、タッチ（モバイルプロトタイプ上）またはマウスクリックが必要です。 以下は、オブジェクトまたはウィジェットレベルのイベントの例です。
- オンクリック
- OnMouseEnter
- OnDrag
- OnDrop
- OnMouseHover
ケース
前の章で説明したように、ページプロパティセクションで、特定のウィジェットの相互作用を設計できます。 これらは*ケース*と呼ばれます。 特定の相互作用は、複数のケースの構成です。
これをよく理解するために例を考えてみましょう。
例：Axureプロトタイプ–マウスホバーでメニューを表示
この例を開始するには、 File メニューの下にある New をクリックするか、ショートカットキー Ctrl + N を使用して新しいファイルを作成します。
この例では、ほとんどのソフトウェア製品に見られるように、シンプルな*メニューバー*を設計します。 メニュー構造には、次のメニュー要素とそれぞれの下にサブメニューがあります。
ファイル
- New
- Open
- Save
- 閉じる
編集
- Cut
- Copy
- ペースト
- Find
- 交換する
見ます
- ステータスバーを表示
- ツールバー
- メインツールバー
- スタイリングツールバー
助けて
- 入門
- ヘルプを使用する
- これは何ですか
開始するには、デザインエリアで*クラシックメニュー–水平*をドラッグアンドドロップします。 [ライブラリ]→[メニューとテーブル]にあります。 コントロールにMenuBarExampleという名前を付けます。 この要素を幅300 px、高さ30 pxにしましょう。 X軸で100、Y軸で30に配置します。 これらの値は、右側の「インスペクター」セクションの「スタイル」タブで調整できます。
上記の手順の最後に、次のスクリーンショットに示すように最終結果を確認できます。
Inspectorセクションのメニュータイトルにも名前を追加しましょう。 各メニュータイトルをクリックして、インスペクターセクションを確認します。 特定のメニューバーに名前が付けられていない場合、名前は（メニュー項目名）に変わります。
[ファイル]メニューに FileMenu という名前を付けます。
*EditMenu* としての編集と *ViewMenu* としての表示についても同様です。名前が提供されているかどうかを確認するには、個々のメニューをクリックして、[インスペクター：メニュー項目]で確認します。 （メニュー項目名）ではなく名前を表示できます。
ここで、要件に従って、[ヘルプ]メニューでメニューバーを完成させます。 メニューバーのタイトル（表示）を右クリックすると、コンテキストメニューが表示されます。 [メニュー項目の追加]をクリックします。
空のメニュー項目が表示されます。 空のメニュー項目をダブルクリックし、メニュータイトルをヘルプとして入力します。 手順を繰り返して、[インスペクター：メニュー項目名]の下に名前を付けます。 完了すると、次のようなデザイン領域が表示されます。
次に、ファイルメニューの相互作用を設計しましょう。
[ファイル]メニューバーのタイトルをクリックし、[インスペクター：メニュー項目]を確認します。
上記のスクリーンショットで強調表示されているように、[プロパティ]タブを確認します。
[プロパティ]タブで、[ファイル]メニューのインタラクションを作成します。
サブメニューをメニューに追加するのは非常に簡単です。 [ファイル]メニューを右クリックし、表示されるコンテキストメニューで[サブメニューの追加]をクリックします。
注-同じ手順を繰り返し、[サブメニューの削除]をクリックして、サブメニューを削除することもできます。
サブメニューが追加されると、空白のサブメニューが表示されます。 各メニュー項目をダブルクリックして、「新規」、「開く」、「保存」などの名前を指定します。
最後のサブメニュー項目を右クリックして、もう1つのサブメニュー項目を追加します。 Closeという名前を付けます。
Inspectorセクションの下にあるすべてのサブメニュー項目にも名前を付けることをお勧めします。 これは、設計プロセス全体でそれらを参照するのに役立ちます。
この部分の設計中に、設計領域の他の部分をクリックすると、サブメニューが消えることに注意してください。 サブメニューを表示するには、[ファイル]メニュー項目をクリックする必要があります。
相互作用について話しましょう-ホバー。 この相互作用には、マウスポインターが特定の要素の上に置かれたときにトリガーされるという固有の動作があります。 Axureでは、この対話はクラシックメニュー-水平で自動的に実装されます。
操作中の相互作用を確認するには、ツールバーの「プレビュー」ボタンをクリックします。 Axureは、デフォルトのブラウザーでプレビューを開きます。
[ファイル]メニューにカーソルを合わせます。 次のスクリーンショットに示すように、サブメニューが表示されます。
客観的に見ると、Axureを使用して、メニュー項目にカーソルを合わせるなどの複雑な相互作用を作成しました。 通常のHTMLコーディングでは、1〜1.5時間近くかかりました。
割り当てとして、サブメニューの残りのメニューを完成させます。
次に、[ファイル]メニューの[閉じる]サブメニューでインタラクションをすばやく作成します。 ホバーすると、赤で強調表示されます。 これを行うには、[閉じる]サブメニューを右クリックします。 [インタラクションスタイル…]をクリックします
[MouseOver]タブで、[塗りつぶしの色]を選択し、赤色を選択します。 Axureはすぐにデザイン領域にプレビューを表示します。 [選択メニュー]セクションと[すべてのサブメニュー]セクションが選択されていると仮定すると、メニュー全体が赤で強調表示されます。
[選択したメニュー項目のみ]をクリックします。 ここで、[フォントの色を選択]をオンにして、フォントに白色を選択します。 プレビューはすぐに更新されます。
[OK]をクリックして、このセットアップを完了します。
もう一度[プレビュー]をクリックして、実行中のインタラクションを確認します。
これで例を完了しました。
簡単な割り当てとして、次の相互作用を試すことができます。
ボタンウィジェットを使用したOnClickプロパティ。
