Axure RP を使用したプロトタイピング演習 01、使用方法の概要_html/css_WEB-ITnose

まず、Axure RP Pro 7.0 ソフトウェアのデフォルトのインターフェイス レイアウトを理解します。上部はツールバー領域、左上はサイトマップ領域 (sitemap)、左中段はウィジェット領域 (Widgets)、左下はテンプレート領域 (Masters)、中央上はページ領域、中央の下はページ設定エリア、右上はコンポーネントプロパティエリア、右下はダイナミックパネルエリアです。

「公開」、「プレビュー」を順にクリックするか、ショートカット キー F5 を直接押すか、ツールバーのプレビュー ボタンを直接押して、ブラウザで現在のプロジェクトをプレビューします。

「公開」、「プレビューオプション...」をクリックするか、Ctrl+F5を同時に押してプレビューを設定します。

上で、使用するブラウザと、プレビュー用にサイトマップを表示する必要があるかどうかを選択できます。

「公開」をクリックしていくつかの設定も含めます:

上の「その他のジェネレーターと構成」は、ジェネレーターをカスタマイズするために使用されます。 「HTML ファイルの生成」は、すべての HTML ページと各種設定を保存するために使用されます。 「現在のページをHTMLに再生成」は、現在のHTMLページと各種設定を保存するために使用します。

左側のサイト マップでノード名を変更する場合は、ノードを右クリックし、[名前の変更] をクリックしてノードの名前を変更します。

新しいページを作成し、サイトマップエリアの左上隅にある「ページを追加」ボタンをクリックします。

フォルダーを追加するには、サイトマップ領域の左上隅にある「フォルダーを追加」ボタンをクリックします。

サイトマップエリア内のページノードの位置関係を調整するには、まずページノードを選択し、左上隅にある上矢印または下矢印をクリックします。

サイトマップエリアでノードを削除するには、まずノードを選択してから、上の「削除」ボタンをクリックします。

サイトマップエリアの右上隅にある「検索」ボタンをクリックしてノードを検索します。

サイト マップ領域のノードをダブルクリックして、ページの編集を開始します。

[ウィジェット] の下のウィジェットをページ領域にドラッグできます。

左上隅にある [ライブラリの選択] ドロップダウン ボックスからさまざまなパーツを選択でき、パーツを検索することもできます。

● テキスト フィールド: 入力ボックス
● HTML ボタン: ボタン
● 画像: 画像を配置し、ダブルクリックして画像ソースを選択します。また、インポートされた画像をページ レイアウトに合わせて複数の画像に切り取ることもできます
●ドロップリスト: ドロップダウン ボックス
● 長方形: 背景で塗りつぶしたり、テキスト リンクとして使用したり、さまざまな形に変形したりできる長方形のコンポーネントです
● プレースホルダー: ページ上の領域を予約する必要があるが、予約できない場合に使用します何を配置するかまだ決めていない
● テーブル: テーブル
● テキストエリア: 複数行のテキストボックス
● リストボックス: 複数選択ボックス
● チェックボックス: チェックボックス
● ラジオボタン: ラジオボタン
● ボタンの形状: タブのようなボタンを作成、マウスオーバーで背景を変更 色付きボタンなど
● インラインフレーム: iframe、1 ページ内に別のページを表示
● ダイナミックパネル: 複数の状態を持つスーパーコンポーネントとみなすことができ、そしてイベントを通じて特定の状態を選択します。たとえば、12 か月に対応する 12 個の状態を含む動的パネル コンポーネントを作成すると、状態が現在の月と一致する場合、特定の背景色が表示されます。動的パネルには、デフォルトで最初の状態が表示されます。他のコンポーネントを含むコンポーネントとして理解できます
● クラシック メニュー - 垂直: 複数レベルの垂直メニューを作成します
● クラシック メニュー - 水平: 複数レベルの水平メニューを作成します
● ツリー: ツリー ディレクトリ
● 下のコンポーネントフロー グループは、フローチャートの作成に使用されます

......

サードパーティまたは公式コンポーネントをロードまたはダウンロードすることもできます。

各ウィジェットには、名前、座標、サイズ、フォント、フォント サイズ、フォント スタイル、フォント配置、フォントの色、境界線の色、境界線の太さ、境界線のスタイル、塗りつぶしの色、配置、前面、背面、などの共通のプロパティがあります。ロック部分など。

ナビゲーション、Web サイトのヘッダー、Web サイトの下部、Web サイトのロゴ、頻繁に繰り返されるモジュールなど、いくつかの再利用モジュールをマスターの下に配置します。

ページ領域は HTML が生成される領域です。ページのスケールはピクセル単位であり、左上隅がページの元の座標です。ページの空白部分を右クリックすると表示されるメニューに「グリッドとガイド」があり、「グリッド設定」をクリックしてグリッド間の間隔を設定します。 10 ピクセル、グリッド スタイルを設定できます。ガイドを設定することができ、横軸または中縦軸をクリックしてドラッグすることでガイドを作成できます。ここの基準線は現在のページのものです。

グローバル ガイドを作成するには?ページを右クリックし、[グリッドとガイド]、[ガイドの作成] の順にクリックし、次を参照してください:

グローバル ガイドは列に基づいて作成されます。 Preset 属性には、幅 960 ピクセルが 12 列に分割され、幅 960 ピクセルが 16 列に分割され、幅 1200 ピクセルが 12 列に分割され、幅 1200 ピクセルが 15 列に分割されます。列; 列グループは列の設定に使用され、列数は列の合計数を示し、列幅は列間の距離を表し、マージンは空白のままにします。行を設定するには、[列] グループと同様の設定を行います。 3 列、列幅 100、列間隔 20、左右のマージン 10 の列を作成するとします。

効果は次のようになります。

したがって、レイアウト全体の幅 = 10*2+100*3+20*2=360 ピクセル

ページ設定領域の「ページメモ」を使用してテキスト情報を入力します要件を説明する情報など。「ページ インタラクション」ページ レベルのイベントで設定します。背景画像、背景色、配置、フォント、間隔などのページ フォーマットを設定します。

ウィジェットに関する [ウィジェット インタラクションとメモ] パネルでは、インタラクションは、フォーカス喪失イベントなどのウィジェット イベントを設定するために使用されます。メモは、メモを追加するために使用されます。

関連するウィジェットの [ウィジェット プロパティとスタイル] パネルで、ウィジェットのさまざまなスタイルを設定します。

「ダイナミック パネル」コンポーネントをページにドラッグすると、一連の状態が Photoshop のレイヤーに似ており、操作のニーズに応じて 1 つのレイヤーと他のレイヤーを表示できます。 . レイヤーが非表示になります。各状態の後にある小さな青いアイコンを使用して、状態の表示を制御することもできます。

参考: Axure RP 高忠実度 Web ページのプロトタイピング、Lu Haoyue、Yang Changtao による