UX デザインをより簡単によりリアルにする Axure RP

Axure RP は、プロトタイプ作成をクリック操作のみで実現し、開発期間およびコストを削減します。また、様々な機能を提供し、より完成品に近いプロトタイプを作成することができます。その 1 つにリピーター機能があります。リピーター機能を使用することで、上記のようなレイアウトが簡単に作成することができます。今回は、リピーター機能を使用し上記のようなレイアウトを作成します。まだ、Axure RP をダウンロードしていない場合は、是非、30日間無償評価版を下記よりダウンロードください。

[30 日間無償評価版ダウンロード]

ステップ 0: リピータートレーニングファイルをダウンロードします。

まずは、以下のトレーニングファイルをダウンロードします。

[AxureRepeaterTraining.rp をダウンロード]

ダウンロードした AxureRepeaterTraining.rp を Axure RP 上で開きます。このファイルには、様々な機能を紹介するチュートリアルに対応したページが含まれています。

ステップ 1: グリッドレイアウトを作成します。

AxureRepeaterTraining.rp 内の [Advanced Repeater – Product Listing] という名前のページを開きます。[Books] という名前のリピーターウィジェットが 9 つのデータセット列と [Backgrouund]、[Info]、[Cover] の3 つのウェジェットアイテムと共にキャンバス上に配置されています。

リピーターウィジェットの [Books] を選択し、インスペクター (Inspector) 上のスタイルタブを開きます。[Layout] セクション内の [Horizontal] を選択し、リピーターの方向を変更します。そして、[Wrap (Grid)] というボックスにチェックを入れ、[Items per row] を[3] に設定します。リピーターアイテムは、3X3 のグリッドとして表示されているはずです。

今度は、リピーターの間にスペースを入れていきます。スタイルタブの [Spacing] セクションまでスクロールダウンします。[Column] と [Row] をそれぞれ [15] に設定します。

ステップ 2: 画像を設定します。

リピーターの [Books] を選択したまま、インスペクター上のプロパティタブに変更します。データセット内に、3 つの列があります。[Title] 列にはテキストとして book のタイトルが含まれ、[Author] 列にはテキストとして book の著者名が含まれ、[Cover] 列には、book のカバー画像が画像ファイルとして含まれています。

メモ: セルを右クリックし、Context Menu 内の [Import Image] を選択します。

プロパティタブ上部の [OnItemLoad] をダブルクリックし、新しい OnItemLoad ケースを設定します。

Case Editor 内の [Set Image] アクションを選択します。[Configure actions] 以下で、[Cover] という画像ウィジェットをチェックします。

右列の下部に、5 つの異なる種類のインポート可能な画像があります。初めの [Default] は、画像ウィジェットのデフォルト画像になります。その他 4 つは、画像ウィジェットの [interaction styles] を示します。[Cover] 画像ウィジェットに対してインタラクションスタイルは設定しないので、[Default] 画像にのみ設定します。

[Default] 下のドロップダウンで、[value] を選択します。テキストフィールドが表示され、[fx] ボタンをクリックし Edit Value ダイアログが表示されます。

ダイアログ上部の [Insert Variable or Function] をクリックします。表示されたメニュー上で、[Repeater / Dataset] 以下の [Item.Cover] をクリックします。ダイアログ上部に [Item.Cover] が表示されます。

[OK] をクリックし、Edit Value ダイアログを閉じ、[OK] をもう一度クリックし、 Case Editor を閉じます。各リピーターアイテムの画像ウィジェットは、ブックカバーを表示しているはずです。

ステップ 3: 複数のデータセット列値と共にテキストを設定します。

[Blocks] リピーターを選択したまま、インスペクターのプロパティタブ内の [OnItemLoad] 以下の [Case 1] をダブルクリックし、ケースを更に編集することができます。

Case Editor 内で、[Set text] アクションを選択します。[Configure actions] 以下の長方形ウィジェットの [info] をチェックします。

右のコラム下で、ドロップダウンを [Set text to] から [rich text] へ変更します。[Edit text] ボタンをクリックします。

ポップアップされた Enter Text ダイアログで、上部の既存のテキストを削除します。そして、テキストフォーマットオプション以下の [Insert Variable or function] をクリックします。表示されたメニューで、[Repeater / Dataset] 以下の [Item.Title] をクリックします。上部に [Item.Title] が、太字の 18 サイズで表示されます。

[Enter] / [return] をクリックし、テキストに新しいラインを追加し、[by] とタイプします。そして、[Insert Variable or Function] をもう一度クリックします。メニュー上で、[Repeater / Dataset] 以下の [Item Author] をクリックします。[Item Author] が [by] の横に表示され、[by [ItemAuthor]] とラインが表示されます。

2 行目をすべて選択し、太字設定を解除し、フォントサイズを 16 に変更します。