Axure-rp-quick-guide
Axure RP-プロトタイピングの概要
「プロトタイピング」という言葉は非常に一般的であり、ソフトウェア開発と建築開発の関係者に関連しています。 エジプトの建築開発に関しては、ギザの大ピラミッドのプロトタイプがあります。 これらは、定規から同意または承認を得るために、（もちろん）小さなバージョンで構築されました。
この小さくても意味のある例は、プロトタイプの目的を正確に示しています。 ウィキペディアによると、プロトタイプは「他のフォームの開発元であるデバイスまたは車両の最初のバージョンまたは予備バージョン」です。
ソフトウェア開発の世界では、定義をページ、画面、または機能の予備バージョンとして適合させることができます。これは、画面要素を効果的に視覚化し、相互作用を示すことで他の開発をサポートします。 この定義には、最も重要な部分である相互作用が含まれます。
ソフトウェア開発では、機能の一部または完全な機能自体を開発するために、時間と労力の観点からかなりの投資が必要です。 これは、クライアントからのフィードバックに従って、問題を開発、検証、修正する無限のプロセスです。
ほとんどのソフトウェア開発会社は、このプロセスを可能な限り迅速にすることを望んでいます。 したがって、彼らはすべてのチームメンバーからの努力と時間の投資を進めません。 代わりに、特定の機能を視覚化するスキルセットを持っているユーザーエクスペリエンス（UX）エンジニアを採用するという賢明な動きをします。 これにより、製品の開発時に運転席に座ることができます。
基本的に、開発の非常に早い段階でソフトウェア要件をシミュレートして視覚化するには、プロトタイピングが必要です。 このプロセスは、機能の未知数を減らし、開発の正しい方向性を提供するため、最終的にソフトウェア開発会社とクライアントの両方にとって有益になります。
プロトタイプ開発の適切なフェーズ
注目を集めるソフトウェア開発の現在の時代では、ソフトウェア開発ライフサイクルテーブル全体に多くの進歩がありました。 これらの進歩は、ライフサイクルにおける特定のチームメンバーの役割/役職だけでなく、テクノロジーの側面からのものです。 そのようなポジションの1つは、UXエンジニアと呼ばれる牽引力を獲得し始めました。
UXエンジニアには、顧客にとって有益なスキルセットが装備されています。 UXエンジニアは、さまざまな手法や手順を使用して顧客をよりよく知ることで、特定のソフトウェア製品にユーザーが期待していることを把握できます。
通常、要件収集プロセスが行われると、テクノロジー企業は現在、UXエンジニアを巻き込んで市場に出て、ユーザーのニーズを理解します。 ソフトウェア開発へのレスポンシブWeb XDesignおよびモバイルファーストアプローチの最新の傾向により、注意を集中したい領域がいくつかあります。 UXエンジニアは、ユーザーインタビュー、市場調査などのプロセスを使用して、対象ユーザーの脈拍を把握します。
このプロセスは、ソフトウェア製品が市場での適合性を確認するための道筋を明確にするため、時間がかかると同時に重要です。 これらの手順は、ソフトウェア要件を収集して引き出すときに使用されます。 開発の全体的なコストを削減するため、理想的なフェーズです。 ただし、ソフトウェア製品が成熟したら、UXの研究フェーズを導入して、行われている機能強化の実行可能性を評価できます。
Axure RP-はじめに
UXエンジニアにとって、ユーザーベースを理解するプロセスは、顧客からの入力や関連する会話の取得に限定されません。 ユーザーが何を望んでいるかを理解するために必要ないくつかの興味深いステップがあります。 実際の作業は、ユーザーがソフトウェア製品に期待することについてある程度明確になったときに始まります。
ユーザーが今後のソフトウェアまたは既存のソフトウェアの機能強化をどのように認識しているかについてのデータが利用可能になると、UXエンジニアはそのデンに戻ってユーザー用のユーザーインターフェイスを設計します。 伝統的または一般的なアプローチとして、誰かがデザインと言うとき、それはAdobe Photoshop、CorelDraw、またはMicrosoft Paintなどのソフトウェアを意味します。 UXデザイナーは、ユーザーにすぐに戻ってもらうために、古き良きペンと紙を使用してインターフェイスを設計することがあります。
ただし、UXデザイナーにとって、ユーザーインターフェイスの設計で品質を提供するということは、素晴らしいデザインを表示するだけではありません。 ユーザーエクスペリエンスは、ユーザーがどのようにインターフェイスを見るかだけでなく、ユーザーがどのように操作するかで構成されます。 上記のソフトウェアツールや市場の同類には、独自の機能セットが付属しています。 UXエンジニアにとって、ブレーンストーミング、設計、およびフィードバックの取得を可能にする適切なソフトウェアを選択するのは、実に退屈な作業です。
美しいユーザーインターフェイスとインタラクションを設計するための現在トレンドのソフトウェアであるAxureに参加してください。 Axureは、UXエンジニアがソフトウェアプロトタイプの作成の詳細に簡単にアクセスできるようにするため、10年近く前から存在しています。 Axureは、プロトタイピングツールであることに加えて、多くの例と巧みな相互作用でUXの世界に貢献する強力なコミュニティを持っています。
より高いレベルでは、Axureが提供する機能は次のとおりです-
- 図とドキュメント
- 動的コンテンツを使用した効果的なプロトタイピング
- 条件付きフロー
- インタラクションを強化する美しいアニメーション
- アダプティブビュー
- WindowsおよびMacでのサポート
Axureが提供する詳細な機能リストを確認するには、https://www.axure.comにアクセスしてください。 インストール手順については、リンクhttps://www.axure.com/downloadを参照してください。
ラピッドプロトタイピングのために、Axure RPはさまざまなツールと手法を提供し、アナリスト/ユーザーエクスペリエンスエンジニアが最終目標を視覚化するのに常に役立ちます。
Axure RPは、常に強力なコミュニティを支援できるため、UXの愛好家や実務家にとって好ましいツールになりつつあります。
Axure RP-ユーザーインターフェイス
Axureをインストールすると、次のスクリーンショットに示すようなインターフェイスが表示されます。
この画面は、表示しないことを選択するまで、起動時に常に表示されます。
この画面では、次のオプションがあります-
- Axureで新しいファイルを開始する
- 既存のAxureプロジェクトを開きます
Axureで新しいファイルを作成しましょう。
「新規ファイル」ボタンをクリックすると、新しいプロトタイプを作成するための次の画面が表示されます。
上の図に示すように、ワークスペースは6つの部分に分かれています。
- ページ数
- 図書館
- 検査官
- アウトライン
- マスターズ
- 設計エリア
これらの部分を1つずつ見ていきましょう。
ページ数
このセクションには、作業中のページが表示されます。 これらのページは、次のようにデフォルトのツリー構造で表示されます。 ホームページには以下の子ページがあります。
Home
ページ1
2ページ
- ページ3 *
指定された構造を続行することも、必要に応じて変更することもできます。 そのためには、ページのいずれかを右クリックすると、追加、移動、削除、名前の変更、複製などのオプションが表示されます。
使用可能なさまざまなツールのほとんどと同様に、このセクションでは、プロトタイプのページを操作できます。 これを使用して、目的のプロトタイプの画面を計画できます。
ライブラリペイン
ライブラリペインでは、プロトタイプに必要なほとんどのコントロールが利用できます。 このセクションで使用できる一般的なコントロールは、ボックス、画像、プレースホルダー、ボタンなどです。 Axure RPは、アプリケーションの領域に応じて分類された豊富なUIコントロールのセットを提供します。
上の図（a）に示すように、ライブラリには、共通、フォーム、メニューとテーブル、およびマークアップというカテゴリがあります。 これらのカテゴリはすべて、アプリケーションを開くと展開されます。 便宜上、このスクリーンショットでは省略されています。
一般的なライブラリには、基本的な形状、ボタン、見出しテキスト、ホットスポット、動的パネルなどが含まれます。
Axure RPでは、すべてのプロトタイピング要件に対して、ホットスポットと呼ばれる非常に効果的なコントロールが用意されています。 このコントロールを使用すると、UIのほとんどすべてのコントロールにクリック操作を提供できます。 例は次のページで提供されます。
フォームライブラリには、名前が示すように、リストボックス、チェックボックス、ラジオボタン、テキスト領域、およびテキストフィールドコントロールが含まれています。 ユーザー入力フォームを設計するために、ライブラリの下にあるこのセクションのコントロールを使用できます。
メニューとテーブルは伝統的な構造をしています。 このような構造は、おそらく水平または垂直形式で、メニューとテーブルと呼ばれるこのライブラリの下で利用できます。
最後になりましたが、マークアップライブラリには、付箋、マーカー、矢印が含まれています。 ほとんどの場合、これはプロトタイプの注釈に使用されます。
設計エリア
これは、UXエンジニアの実際の遊び場です。 このスペースは、要件に応じてプロトタイプを作成するために使用されます。 まず、次のスクリーンショットで番号6で強調表示されている領域を参照してください。
この領域では、ライブラリから目的のコントロールをドラッグアンドドロップできます。 ライブラリを使用してクイックメニューバーを作成しましょう。
例-メニューバー
ライブラリから、[メニューとテーブル]の下にある[Classic Menu-Horizontal]コントロールをデザイン領域にドラッグします。
デザイン領域でコントロールをドラッグすると、次の画面が表示されます。
上記の画面に示されているように、Axure RPは、メニューに目的のテキストを表示するのに十分インテリジェントです。 メニューバーであると見なすと、Axure RPはコントロールのメニューとして、ファイル、編集、表示を自動的に作成しました。
矢印が指すように、インスペクターセクションにはコントロールのプロパティが表示されます。 このセクションを使用して、複雑なプロトタイプを作成するときに、一意の識別のためにコントロールの名前を作成します。
TestMenuとしてこのコントロールに名前を付けましょう。 この名前は、以降の例で使用します。
ページのプロパティ
プロトタイプを計画するときは、ユーザー、つまりプロトタイプが展示/表示されるデバイスについて明確な考えを持つことが理にかなっています。 プロトタイプとの対話の最良の経験のために、Axureはページプロパティを設定する機能を提供しています。
上の図に示すように、番号3で示される領域はページプロパティセクションです。 このセクションでは、インタラクションドロップダウンとサブセクションアダプティブを見ることができます。
これらのセクションについて詳しく説明します。
- インタラクションセクション*は、ページとの可能なインタラクション（ケース）を扱います。 ご覧のとおり、ページがロードされると、OnPageLoadの相互作用のケースがイベントを処理します。 ほとんどのプロトタイプで、UXエンジニアは第一印象を与えるためにアニメーションを配置することを好みます。 アニメーションを表示するこの特定のイベントは、通常OnPageLoadの場合にトリガーされます。
同様に、他の場合には、OnWindowResize、OnWindowScrollが含まれます。 [その他のイベント]プルダウンで、サポートされている他のケースを確認して、ページに関連するインタラクションを設定できます。
- Adaptiveセクション*により、Axure RPはレスポンシブWebデザインに入ります。 今日では、ウェブサイトのエクスペリエンスを設計するだけでは十分ではありません。これに加えて、ビジネスではモバイルサイトがウェブサイトと共存することを好みます。
異なる画面サイズとレイアウトから見た同じページは、異なる適応型ビューを構成します。 通常、アダプティブビューはモバイルとタブレット向けに設計されています。 Axureはアダプティブビューのこの機能を提供するため、UXエンジニアはプロトタイプのレスポンシブな側面を最初から把握できます。
ウィジェットのインスペクターペイン
ウィジェットの相互作用ペインは、Axureの最も重要なセクションです。 このペインは、デザイン領域のウィジェットをクリックして表示できます。
前のセクションで使用したメニュー項目の例を考えてみましょう。 TestMenuという名前のメニュー項目を選択し、次のスクリーンショットで強調表示されているセクションを確認します。
[プロパティ]タブで確認できるように、OnMove、OnShow、OnHide、OnLoadなどのさまざまな相互作用があります。 これらは、メニューコントロール全体に固有のものです。
次に、メニューコントロールの[ファイル]をクリックします。
[ウィジェットのプロパティ]ペインで、インタラクションのタイプが変更されていることがわかります。 また、このメニュー項目の名前を柔軟に指定できます。 OnClickの場合を例に取りましょう。
*OnClick* -プロトタイプを実行するときにコントロールをクリックすると、OnClickがコントロールの動作を定義します。 これにより、ページナビゲーション、メニューポップアップなどのさまざまな対話が可能になります。メモペイン-インスペクタペイン自体には、メモと呼ばれるサブセクションがあります。 メモペインでは、選択したコントロールのために、特定のポイントを追加して記憶することができます。
これらのポイントは、次の章の例に飛び込むと明らかになります。
グリッドとガイド
最高レベルの品質と精度を備えたプロトタイプの場合、UXエンジニアは、コントロールを他のコントロールと整列/配置する機能を必要とします。
たとえば、ログインポップアップを表示するとします。 このポップアップを画面の真ん中に表示する場合は、画面の全体的なサイズが必要です。 また、画面の中央に正確に配置するには、グリッドを適切に配置する必要があります。
Axureはグリッドとガイドの機能を提供するため、デザイン領域を効果的に使用できます。
利用可能なグリッドとガイドを表示するには、デザイン領域を右クリックすると、次のスクリーンショットに示すコンテキストメニューがポップアップ表示されます。
ここで、利用可能なオプションを理解しましょう。
グリッド-コンテキストメニューに表示される最初の3つのオプションは、グリッドに関連付けられています。 それらは、グリッドの表示、グリッドへのスナップ、およびグリッド設定です。
- グリッドの表示-グリッドの表示を有効にすると、次のスクリーンショットに示すように、デザイン領域にグリッドを表示できます。 これは、コントロールを画面上の他のコントロールに合わせるのに非常に便利です。
- グリッドにスナップ-グリッドにスナップを有効にすると、コントロールは周囲に存在するグリッドに従って自動的にアタッチされます。 コントロールをドラッグし、近くのグリッドにアタッチすると、この動作を確認できます。
- グリッド設定-このダイアログには、グリッドに関連するその他の設定があります。 次のスクリーンショットに示すように、グリッド間の間隔、グリッドのタイプなど。 このダイアログで利用可能になります。 都合に応じて、交差タイプのグリッドを選択できます。
ガイド-次のスクリーンショットに示されているコンテキストメニューでは、最初のセパレータの後のオプションはガイドに関連しています。
ガイドで一般的に使用されるオプションについて説明します。
- グローバルガイドを表示-これらのガイドは、デザインエリアの水平ルーラーと垂直ルーラーの両方からドラッグすると表示されます。 自分で試してみてください。
- ページガイドを表示-ガイドはページレベルでも利用できます。 これらのガイドは、垂直ルーラーと水平ルーラーからドラッグすると作成されます。 グローバルガイドよりも一般的です。 ページガイドがあると、ページレベルでの設計の柔軟性が向上します。
- アダプティブガイドを表示-さまざまなアダプティブビュー用にページを設計する場合、アダプティブガイドを配置する価値があります。 このオプションは、適応ガイドの可視性を有効にします。これは、異なる適応ビューにわたってオブジェクトを整列させるために使用されます。
- ガイドにスナップ-デザイン領域に異なる画面要素を配置するとき、この機能によりオブジェクトをガイドにスナップできます。 これは、特定のオブジェクトを画面に配置し、他のオブジェクトに対して配置するときに便利です。
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プロパティ。
Axure RP-マスターとダイナミックパネルの使用
ソフトウェア開発アプローチの多くは、ユーザーインターフェイス開発に関しては、マスターの作成という一般的な手法を採用しています。
マスターは再利用可能なワイヤフレームであり、一度作成され、その後のページで広範囲に使用されます。 Axure RPでは、マスターページを作成すると、このページに加えられた変更が、使用されているページに適用されます。 したがって、すべてのページに共通するコンポーネントの時間を大幅に短縮します。
マスターを開始するには、次のスクリーンショットで強調表示されているように、マスターセクション（5としてマーク）に集中できます。
このマスターセクションを使用して-
- マスターページ/フォルダーを追加、削除、または編集して、プロトタイプのマスターを整理します。
- 編集する特定のマスターを選択します。
ダイナミックパネル
前の章で見たように、Axure RPには、特定のウィジェットに関連付けられたさまざまな状態があります。 特定のウィジェットまたはウィジェットのセットの状態を統合/整理するには、コンテナ/プレースホルダーが必要です。 動的パネルは、ウィジェットの状態のコンテナ/プレースホルダーとして機能します。
例を使用して、動的パネルをよりよく理解しましょう。 メニューバーの例から続けます。
この例で追加されるのは、画像バーとメニューバーの下にあるボタンです。 一般的なウィジェットの下の画像領域とボタンにウィジェットプレースホルダーを使用します。 プレースホルダーにImageAreaPlaceholder、ボタンにshowImageButtonという名前を付けます。
また、メニューバーをマスターに追加してみましょう。 メニューバーを右クリックし、[マスターに変換]をクリックします。 マスターの名前を入力するダイアログボックスが表示されます。 menuBarMasterとして名前を追加します。
上記のスクリーンショットに示すように、メニューバーがピンク色に変わり、マスターのエントリが追加されました。
次に、動的パネルを作成しましょう。 動的パネルのコンテキストは、[画像の表示]ボタンのクリックに基づいて画像領域の可視性を制御することです。 動的パネルを使用すると、画像領域の柔軟性が得られます。
動的パネルの作成方法を見てみましょう。 画像領域を右クリックすると、コンテキストメニューが表示されます。[ダイナミックパネルに変換]を選択します。
動的パネルは、「アウトライン：ページ」の下にあります。 また、インスペクターの下に、動的パネルが表示されます。 動的パネルにshowImageDynamicPanelという名前を付けます。 この動的パネルの名前は、[アウトライン：ページ]セクションで更新されます。
設計領域で、[画像を表示]ダイナミックパネルを右クリックして、コンテキストメニューを表示します。 [非表示に設定]を選択すると、動的パネルが画面から消えます。
ダイナミックパネルにアクセスするには、[アウトライン：ページ]をダブルクリックします。
次に、ボタンにクリックイベントを提供します。 [画像の表示]ボタンをクリックし、[インスペクター]→[プロパティ]で[OnClickインタラクション]をダブルクリックします。
上記のスクリーンショットに示すように、ウィジェットの下にある表示/非表示をクリックします。 アクションを構成するために使用可能なウィジェットが自動的に表示されます。 showImageDynamicPanelを選択してください。 OKをクリックしてください。
次に、「プレビュー」をクリックします。 プレビュー画面で、「画像を表示」をクリックします。 ボタンの別のインタラクションが最終的に作成されます。
Axure RP-条件ロジック
この章では、Axure RPで使用される条件付きロジックについて説明します。
If-Then-Else in Axure
他のプログラミングツールと同様に、Axureは条件付きロジックもサポートしており、プロトタイプで強化された相互作用を作成します。 インタラクションを提供する方法に慣れたら、次のレベルはインタラクションに条件付きロジックを提供することです。
以下は、条件付きロジックのシンプルで簡潔なフローです-
- 特定のウィジェット/画面がクリックされた場合
- 次に、特定のアクション/相互作用を実行します
- それ以外の場合は、ウィジェットまたは画面の状態を維持/変更します
これをよりよく理解するために、前の例からの流れを再開しましょう。 この目的のために、条件ビルダーに精通する必要があります。
条件ビルダー
OnClickなどのインタラクションのいずれかをダブルクリックします。 次のスクリーンショットに示すように、ケースエディターを表示できます。
[ケース名]の近くにある[条件の追加]ボタンをクリックします。 以下のダイアログボックスに表示されます。
「説明」に示すように、条件ビルダーは、条件セクションで選択された条件に従ってIf-Then-Elseフローを作成します。
このボタンに条件を作成しましょう。
動的パネルが表示されたら、画像非表示ボタンを表示します。 前の例の[画像の表示]ボタンのクリックで動的パネルを表示しました。 次に、別のボタンHide Image Hideを作成しましょう。
条件ビルダーを閉じて、設計領域に戻ります。
共通ライブラリの下のライブラリから「画像を隠す」ボタンを挿入します。 繰り返しますが、UIエレメントにデザイン領域に挿入した直後に名前を付けることをお勧めします。
[画像を隠す]ボタンを右クリックして、[非表示に設定]をクリックします。 次のスクリーンショットに示すように、ボタンはデザイン領域から非表示になります。
それでは、Show Imageボタンのインタラクションに戻りましょう。
最初に、[画像の表示]ボタンのインタラクションで[ケース1]をダブルクリックすると、ケースエディターが表示されます。 Show/Hideアクションを使用して、hideImageButtonを選択し、その可視性を表示に設定します。
同様に、Show/Hideアクションを使用して、showImageButtonを選択し、その可視性を非表示に設定します。
[画像を非表示]ボタンの可視性を管理して、[画像を表示]ボタンをクリックするとボタンが表示されるようにしました。
完全な状態は、次のスクリーンショットに示すとおりです。
条件を構築しましょう。
デザイン領域の下で、「画像を隠す」ボタンをクリックします。 [インスペクター]セクションで、[ケースの追加]をクリックします。
[ケースの追加]で、[条件の追加]ボタンをクリックします。 前述の背景に従って、条件ビルダーのドロップダウン値を使用して条件セットを作成します。
簡単に言えば、上記の条件で、動的パネルshowImageDynamicPanelが表示されているかどうかを確認しています
ここで、[画像を隠す]ボタンの相互作用を設計し、次のように構成します。
- アクションの表示/非表示を選択します。
- ウィジェットshowImageDynamicPanelを選択します。
- 可視性を非表示に設定します。
同様に、showImageButtonを表示し、hideImageButtonを非表示にするためのドリルを繰り返します。
完了したら、[OK]をクリックしてケースエディターを閉じます。
次に、[プレビュー]をクリックして、変更内容を確認します。
成功した結果は、次のスクリーンショットに示すとおりです。
[画像を表示]ボタンをクリックすると-
[画像を隠す]ボタンをクリックすると-
Axure RP-高度なインタラクション
これまで、相互作用のためのAxureの基本機能を紹介してきました。 ただし、プロトタイプがインテリジェントである必要がある多くの現実のシナリオがあります。 インテリジェントという言葉で言えば、プロトタイプは、特定の動作を実行/トリガーするために、特定のウィジェットの状態を検出する必要があります。
このような相互作用の典型的な例は、ボタンの色の設定です。 これには、UXエンジニアが思考の帽子をかぶって、プロトタイプの設計を次のレベルに進めることが必要です。
Axureで変数を使用する
- 変数*は、定義により、変化または変化しやすい要因を表します。 Axureでは、変数を使用して、ウィジェット/相互作用の状態を表現または識別することができます。
典型的な例は、あるページから別のページにデータを転送するときにデータ値を保存することです。 例をわかりやすくするために、特定のウィジェットの状態を表示する必要があるシナリオを考えてみましょう。
最後の例を続けて、画像が何回表示されたかを表示したいと考えましょう。
ここに私たちがそれを行う方法があります-
- カウントを0に開始するための変数を作成します。
- [画像の表示]ボタンをクリックすると、この変数の値が増加します。
- テキストラベルに値を表示します。
この例では、ダイナミックパネルの下にテキストを作成します。 テキストが読み取られます–画像は0回表示されます。
クリティカル-ラベルが3つに分かれていることが重要です。 表にリストされているラベル名とテキストに従ってください。
| Label Name | Label Text |
|---|---|
| imageLabel | Image is shown |
| countLabel | 0 (zero in digits) |
| timesLabel | Times |
これは、Show ImageボタンのクリックごとにcountLabel値を制御するために必要です。
最初に変数を定義しましょう。
ボタンがクリックされると制御される変数が必要になります。 Axureの用語でのこの変数は-グローバル変数です。 グローバル変数を定義するには、メニューバーの[プロジェクト]をクリックし、[グローバル変数]をクリックします。 次のスクリーンショットに示すように、ダイアログボックスが開きます。
緑色のプラス（+）アイコンをクリックして、グローバル変数を追加します。 グローバル変数- varDynamicPanel を呼び出しましょう。 デフォルト値は 0 です。
[画像の表示]ボタンの操作で、ケース1をダブルクリックします。 別のアクションを追加します。 次のスクリーンショットに示すように、アクションは CountLabelのテキストをvarDynamicPanel + 1 に設定します*。
テキストラベルを値に選択するのは非常に簡単です。 動的パネルから値を取得する方法を見てみましょう。
上記のスクリーンショットのステップ4に示されているように、 fx ボタンをクリックすると、次のダイアログボックスが開きます。
最初のテキスト領域の下に、次の文字列を入力します。
[[varDynamicPanel + 1]]OKをクリックしてください。
次に、ボタンがクリックされるたびに変数が更新されるようにする必要があります。
ケースエディターダイアログボックスのアクションで、変数→変数値の設定を選択します。
変数としてvarDynamicPanelを選択します。
使用可能なオプションからcountLabelとしてウィジェット上のテキストから値を取得するように変数を設定します。
[OK]をクリックして、ケースエディターを閉じます。 次に、[プレビュー]ボタンをクリックします。
画像を4回表示/非表示にした後、プレビュー画面に結果が表示されます。
Axure RP-ウィジェットライブラリ
Axureで可能なさまざまなインタラクションとイベントに精通しているので、今後の作業を最小限に抑えるために作業を拡張することができます。
たとえば、Classic Menu – Horizontalの最初の例は、Axureバージョンでは異なる利用可能なウィジェットの組み合わせとして存在していました。 つまり、Axureは時間の経過とともに進化し、頻繁に使用されるウィジェットを単一の*ウィジェットライブラリ*の形式で収容できるようになりました。
ウィジェットライブラリの概念は、大規模なUXチームでより顕著に適用されます。 一部の組織では、後続のUXエンジニア向けに承認済みのウィジェットを中央リポジトリに保持しています。
したがって、一言で言えば、Axure Widget Libraryは単一のファイルに保存されたカスタムウィジェットのコレクションです。 Axure Widget Libraryのファイルタイプは RPLIB です。
ウィジェットライブラリの種類
Axure組み込みライブラリ
これらのライブラリには、ライブラリペインからアクセスできます。 これらのライブラリは更新/削除できません。 複雑なプロトタイピングのニーズのほとんどについては、Axureの組み込みライブラリが役立ちます。
このライブラリは、主にダイアグラムの作成に使用される17の一意のフローウィジェットで構成されています。 また、ワイヤフレームライブラリには25個のウィジェットがあります。
ライブラリの簡単な機能は、第3章-ユーザーインターフェイスにあります。
Axureカスタムライブラリ
日々成長しているAxureコミュニティには、ユーザーが作成したライブラリの膨大なコレクションがあります。 -https://www.axure.com/support/download-widget-librariesからアクセスできます。
このコミュニティを成長させることにコミットしている世界中のUX専門家は、上記のリンクで作業を提出してください。
Webサイトからライブラリをダウンロードし、ライブラリの下にある[ライブラリをロード]オプションを使用してAxureに追加できます。 また、アプリケーションインターフェイス自体からライブラリを直接ダウンロードできます。
上記の画面に示すように、https://www.axure.com/support/download-widget-librariesで提供されているさまざまなライブラリをダウンロードできるコンテキストメニューがあります。 また、独自のライブラリを作成することもできます。これは、特定のプロトタイプの反復制御を作成するときに便利です。
ライブラリのダウンロード/ロードの完全な手順は、https://www.axure.com/support/reference/widget-librariesで入手できます。
ロードされたライブラリの1つからカスタムウィジェットを使用する場合は、組み込みウィジェットと同様にデザインエリアにドラッグアンドドロップします。 ウィジェットに変数またはカスタムスタイルが含まれている場合、*インポートウィザード*ダイアログはそのような依存関係にフラグを立てます。
そのような依存関係の中で、インポートされるウィジェットライブラリに付随する特定の互換性のないスタイルがあることに気付くかもしれません。 *キャンセル*してウィジェットのみをインポートするか、*完了*ボタンをクリックしてパッケージ全体をインポートすることができます。
ウィジェットをワイヤフレームにドラッグアンドドロップすると、その特定のインスタンスは元のウィジェットライブラリに関連付けられなくなります。 したがって、インポートされたウィジェットライブラリ内のウィジェットに対する編集および変更は、ライブラリを更新した後でも、プロジェクトファイル内のこれらのウィジェットのインスタンスには適用されません。 インポートすると、インポートされたライブラリ内のウィジェットを、オンラインで利用可能な同じウィジェットライブラリで行われる更新を心配することなく利用できますのでご安心ください。
RPLIBを使用する
Axure RP Libraryファイルの使用は非常に簡単です。 ライブラリをダウンロードすると、ライブラリファイル（.rplib）のアイコンは、Axure RPプロトタイプファイル（.rp）と明確に区別されます。 たとえば、次のスクリーンショットに示すように。
これが機能するメカニズム-iOS Wireframe DemoでiOS Wireframeドキュメントをインポートできます。
このライブラリは複数のプロジェクトに使用でき、コンテキストメニューからライブラリを更新すると、ライブラリファイルの更新が利用可能になります。 前に強調したように、これはチームプロジェクトで作業し、この方法でライブラリを配布するときに非常に便利です。
Axure RP-プロトタイプのエクスポート
Axure RP 8は、機能-チームプロジェクトとのコラボレーションをサポートしています。 この機能は、分散したチームだけでなく、単一のユーザーにとっても有益です。 単一ユーザーにとっての利点は、進行中の作業でバージョン管理を作成できることです。
チームプロジェクトでの作業
チームプロジェクトシナリオでは、各チームメンバーが自分のコンピューターにプロジェクトのコピーを持っています。 このプロジェクトは、共有リポジトリと同期されます。 この共有リポジトリは、チームの他のメンバーに接続されています。
1日の作業の後、各チームメンバーは新しい要素を作成し、ファイルをチェックアウトし、通常はプロジェクトを編集します。 *チェックアウト*は、特定のファイルの進行中の作業を示すために一般的に使用される用語です。
チームメンバーがチェックアウトされたすべての要素をチェックインするまで、変更は共有リポジトリに反映されません。 Manage Team Project コンソールは、すべてのチームメンバーに、システムで管理されている要素の可用性ステータスのリアルタイムビューを提供します。
このビューには、別のチームメンバーがチェックアウトした要素の詳細が表示されます。
チームプロジェクトを開始する
チームプロジェクトを操作または作成するには、[チーム]メニューに移動します。 [チーム]をクリックし、[現在のファイルからチームプロジェクトを作成]を選択します。 次の画面がポップアップします。
チームプロジェクトをホストするために利用可能なオプションは、AxShareとSVNを使用することです。 次のセクションでAxShareについて説明します。 SVNは一般的に使用されるバージョン管理システムであり、ドキュメントをホストするサーバーを提供します。
画面上のガイドラインに従ってチームプロジェクトを作成すると、チーム全体で1つのAxureファイルとのコラボレーションを開始したり、独自の履歴ストレージに使用したりできます。
Axureシェア
プロトタイプの展示に関しては、現在の環境に応じて複数のオプションを利用できます。 プロトタイプをエクスポートする最も一般的に使用される方法は、Axure Share（別名AxShare）を使用することです。
Axure Shareを使用すると、次のコラボレーション機能が可能になります。
- プロトタイプをAxure Shareでホストし、関係するチームメンバー/クライアントと共有できます。
- ディスカッション/コメント機能を使用すると、作成中のプロトタイプに関する外出中の入力を取得できます。
プロトタイプの準備ができたら、[公開]→[Axure Shareに公開]を使用して、プロトタイプをAxShareにアップロードできます。 以下のダイアログボックスが表示されます。
先に進むには、AxShare.comでアカウントを作成する必要があります。 既にアカウントをお持ちの場合は、[ログイン]オプションを使用してログインし、_AxShare_に作業内容をアップロードできます。
アップロードされたデータはHTML、CSS、およびJavaScriptにあります。 アップロードすると、目的の利害関係者/チームに提供できるリンクが提供されます。
