Axure RP9 ユーザーガイド

1. ショートカットキー

選択したレイヤーが前のレイヤーに移動します
ctrl + [
選択したレイヤーが次のレイヤーに移動します ctrl
+]
選択したレイヤーが上のレイヤーに移動します
ctrl + shift + [
選択したレイヤーが下のレイヤーに移動します
ctrl + shift +]
に結合グループ
Ctrl + G
で結合を解除
Ctrl + SHIFT + G
で位置とサイズをロック
CTRL + Kロック
を解除
CTRL + SHIFT + K
でページをドラッグします。スペースを押したままマウスでドラッグすると、描画されたページ要素を誤ってドラッグしないでください

2. コンポーネント

(1) 外部コンポーネントライブラリをインポートします。AntDesignとAxhubChartsの共通チャートライブラリの共通コンポーネントを共通で使用します
ここに画像の説明を挿入
(2)コンポーネントライブラリをカスタマイズ
a、新規コンポーネントライブラリを作成
ここに画像の説明を挿入
b、描画完了後(例)
ここに画像の説明を挿入c、dとして保存し
ここに画像の説明を挿入
、コンポーネントライブラリとしてインポート

3.マスター

一部のコンポーネントは再利用する必要がありますが、マスターを構築することは可能です。非常に柔軟に使用できます。
(1) まずパブリックコンポーネントを作成し
ここに画像の説明を挿入、右クリックしてマスターに変換します
(2) 他のページで作成したマスターを選択し、そのページにドラッグします
(3) ドラッグ後に作成したコンポーネントを右クリックすると、現在のロック状態が表示されますマスター内の位置に変更し、テンプレート内のコンポーネントの位置を変更すると、他のページ内のコンポーネントの位置も変更されます。マスターを残すことを
選択した場合、このコンポーネントは通常のコンポーネントになります。

ここに画像の説明を挿入

4. ダイナミックパネル(重要)

状態は動的パネルで設定できます。これは、axure での動的ページ操作の主な手段です。
ここに画像の説明を挿入

(1) ダイナミックパネルをダブルクリックしてステートを作成します。

ここに画像の説明を挿入

(2) ページを切り替えるためのインタラクティブなボタンを追加する

ここに画像の説明を挿入

ボタンを選択した後、新しいインタラクションを作成します

ここに画像の説明を挿入ここに画像の説明を挿入
ここに画像の説明を挿入

(3) ブラウザでプレビュー

ここに画像の説明を挿入

5. インラインフレーム

(1) インラインフレームを作成する

ここに画像の説明を挿入

スクロール バーを削除して、単一ページ アプリケーションをより適切にシミュレートできます。

ここに画像の説明を挿入

(2) このインラインフレームを動的に切り替えたいコンテンツ領域に関連付けます。例えば

ここに画像の説明を挿入
ここに画像の説明を挿入

(3) ブラウザでプレビューして効果を確認

ここに画像の説明を挿入

6.リピーター

リピーターは、スタイル、データ、アクションの 3 つの部分に分けることができます。例に直接移動します

(1) 販売プラットフォームをシミュレーションします。販売量価格で並べ替えることができます。

ここに画像の説明を挿入

(2) リピーターをダブルクリックしてスタイル編集状態に入り、販売した商品の商品名、価格、販売数量を追加します

ここに画像の説明を挿入

保存後:
ここに画像の説明を挿入

(3) データを埋める

リピーターをクリックすると、リピーターのスタイルでデータ プロパティが表示されます。テーブルのヘッダーは属性名で、テーブルの列は特定の値です。
ここに画像の説明を挿入

右クリックして画像をインポートします

ここに画像の説明を挿入

(4) データを追加して接続をスタイルする

a. リピーターをクリックして各ローディングイベントを設定します

ここに画像の説明を挿入

b. テキストを設定します

ここに画像の説明を挿入

c. いずれかのリピーターを選択します

ここに画像の説明を挿入

d. [関数 fx] をクリックします。

ここに画像の説明を挿入

e. 以前に構成したデータ変数に対応する販売数量を選択します

ここに画像の説明を挿入

セットアップが完了したら:

ここに画像の説明を挿入

f. 結果:

ここに画像の説明を挿入

(5) 売上と価格の並べ替え「アクション」を追加します。

a. 販売(価格)ボタンをクリックすると、クリック時の並べ替えが追加されます

ここに画像の説明を挿入

b. 並べ替え方法と対応する変数を追加する

ここに画像の説明を挿入

c. ブラウザでプレビューして結果を表示する

ここに画像の説明を挿入

7. 続きます。

おすすめ

転載: blog.csdn.net/m0_72791534/article/details/127937791