Axure プロトタイピングをゼロから学ぶ (上級)_html/css

Axure プロトタイピングをゼロから学ぶ (上級)

Axure は、静的なビジュアルドラフトやページを作成できるだけでなく、プロトタイプ設計に最適なソフトウェアの 1 つです。 Axure のインターフェイスとコンポーネントライブラリを理解したら、それを使用してワイヤーフレームを描画できるようになりますが、静的なワイヤーフレームはインタラクティブプロトタイプほど直感的な表現ではありません。

Axure の上級章では、インタラクションとは何か、Axure で最も頻繁に使用されるダイナミックパネルコンポーネントを操作して、クレイジーでクールなインタラクティブエフェクトを作成する方法を紹介します。さらに、マスター (主にイベントをトリガーする) の使用も導入されます。

インタラクションの基礎知識

Axure をインタラクションに使い始める前に、まず Axure の基礎であるインタラクションの概念を見てみましょう。インタラクションの作成には 4 つのモジュールが含まれます:

Interaction (インタラクション): 3W= When + Where + What 例: マウスをメニューバーの上に置くと、メニューバーが暗くなります。
イベント: ページイベントとウィジェットイベントという 2 つの主要なカテゴリがあります。インタラクションは、アクションを実行するために使用されるイベントによってトリガーされます。
ユースケース: 同じタスクに対して異なるパスを作成します。ユースケースは一連のアクションで構成されます。
アクション: ユースケースによって定義されたイベントへの応答。ポップアップウィンドウ、リンクを開くなど。

ヒント: ユースケースのアクションを他のコンポーネントに移行する場合は、ユースケースを右クリックして [コピー] をクリックし、応答イベントをクリックして選択するだけです。それだけです。

Axure にはさまざまな操作方法があり、原理を理解し、このソフトウェアに慣れていれば、その使い方をマスターできます。

動的パネルの深い理解

実際の作業では、動的パネルは最もよく使用されるコンポーネントであり、これを通じて 画像カルーセル、アコーディオンメニュー、ライトボックス効果、ラベルコントロールとドラッグ などの効果を実現できます。関数変数と組み合わせた後、ユーザーのログインプロンプト、プログレスバーの効果なども作成できます。

動的パネルイベント

状態が変化するとき: このイベントは、パネル状態で一連のインタラクションをトリガーするためによく使用されます。たとえば、状態 1 で画像 1 を表示し、状態 2 で画像 2 を表示します (画像カルーセルを作成します) ）。
ドラッグ: このイベントは、パネルをクリック、ドラッグ、および放すことによってトリガーされます。例: APP プロトタイプで画像を右にスライドすると、次の画像のプレビューが表示されます。
スクロール中: このイベントは、ダイナミックパネルスクロールバーのスクロールによってトリガーされます。特定のスクロール位置のインタラクションをトリガーするには、[[this.ScrollX]] および [[this.ScrollY]] などの条件を追加します。XY は X 軸と Y 軸を表し、設定によって動的パネルの状態を制御します。距離。
サイズ変更時: このイベントはパネルサイズの変更によってトリガーされます。
Loading イベント: このイベントは、動的パネルが最初にページに読み込まれるときにトリガーされます。原理はページロード時のイベントと同じです。
ドラッグイベント:
- ドラッグ開始時
- ドラッグ中
- ドラッグ終了時ドラッグイベントの各段階でインタラクションを追加できます。
ドラッグしながらパネルを移動: このイベントは、コンポーネントをドラッグしながらパネルを移動するアクションです。

ドラッグイベントのオプション
ドラッグ時の使用条件:
- ドラッグ中のカーソル位置: ドラッグ中のカーソルの位置。
- パーツ範囲: ドラッグしたパーツの範囲。

動的パネルの設定

動的パネルで使用できるアクションには、動的パネルのステータスの設定と動的パネルのサイズの設定が含まれます。

動的パネルのサイズ:
- 動的パネルを編集すると、青い点線の輪郭が表示されます。これは、動的パネルの青い点線の輪郭内のコンテンツのみが表示されることを意味します。
- 追加するウィジェットのサイズが動的パネルのアウトライン範囲を超える場合は、コンテンツに合わせてスクロールバーを追加するか、動的パネルのサイズを変更する必要がある場合があります。
動的パネルの状態:
- デフォルトの状態では、動的パネルの状態は空であるため、動的パネルにコンテンツ (ウィジェット) を追加する必要があります。
- 動的パネルのステータスを管理するには、ウィジェットマネージャーを使用します。これにより、動的パネルの各ステータスが表示され、ダブルクリックしてそのステータスの編集状態に入ります。

動的パネルステータスマネージャー

動的パネルの実践例: ホームページ広告カルーセルの作成

主なアイデアは、複数の画像レイヤーを含む動的パネルを作成し、ボタン (前へ、次へ) を使用することです (A)表示される画像を制御すると同時に、画像カルーセルが自動的にループするようにユースケース条件を設定できます。

ステップ 1: 動的パネルをデザイン領域にドラッグするか、画像コンポーネントをデザイン領域にドラッグして右クリックして動的パネルに変換します。そして、左側 (前へ) と右側 (次へ) にボタンを追加します。また、カルーセルドットを設定して、各小さなドットが画像に対応するように設定することもできます。
ステップ 2: パネルのステータスを変更するクリックボタンイベントを追加します。右側のボタンを選択し、イベント「マウスクリック時」を追加し、ポップアップダイアログボックスでアクション「パネルステータスの設定」を選択し、右側のボタンの設定アクションで動的アクションから「次へ」を選択します。パネルステータスドロップダウンリスト。同時に、動的パネル状態のループとアニメーション、トランジション効果を設定します。

画像カルーセルを作成する

記事の最後にあるケースのダウンロードとデモのリンクをご覧ください。

マスターの使い方

マスターとは何ですか？マスターは PPT のテンプレートに似ています。つまり、マスターを一度作成すると、テンプレートを変更すると、そのテンプレートを使用するすべてのページがそれに応じて変更されます。

新しいマスターの作成: マスターパネルで [新しいパネル] をクリックする方法と、デザイン領域でマスターに変換する必要があるコンポーネントを選択する方法があります (一括で選択できます)。 )、「マスターに変換」を右クリックします。
マスターのドラッグアンドドロップ動作:
- 任意の位置: マスターを任意の位置にドラッグできます。
- マスターの位置をロック: マスターの作成時に位置を固定します。
- マスターから切り離します。マスターのドラッグマスターバージョンをデザイン領域に移動すると、そこに含まれるコンポーネントは個別に編集可能になり、マスターバージョンに属さなくなります。
トリガーされるイベント:
- トリガーされるイベント (カスタムイベントとも呼ばれる) は Axure マスター専用であり、Axure マスターのみがイベントをトリガーできます。
- 使用シナリオ: マスター上のトリガーイベントは、マスターの各インスタンスのインタラクティブな動作に表示されます。マスターの 1 つのインスタンスのインタラクティブな動作が別のインスタンスと大きく異なる場合、トリガーイベントを作成して満たすことができます。
トリガーされるイベントの名前は英数字である必要があり、スペースを含めることはできません (例: OnMyButtonClick (マウスのクリック時))。
マスターにイベントを追加するには、ユースケースを直接追加し、ユースケースエディターで「トリガーイベント」アクションを追加し、マスターを他のページにドラッグして、作成されたアクションを確認します。ページ上で作成されたアクションに新しいユースケースを追加できます。