プロトタイプの作成

はじめに

このトピックの最後にモバイルアプリのサインアップのプロトタイプがあります。ユーザーのサインアップ後、サインアップ完了のメッセージが表示されます。ユーザーはアプリのコンテンツ領域に移動できます。

以上の画像は Experience Flow のプロトタイプです。このプロトタイプは cloud.indigo.design にあります。プロトタイプの作成方法についてはビデオをご覧ください。

以下は主な手順です。

アプリケーションメニュー の 開く/新規 ペインで [新しいプロジェクトの開始] ボタンをクリックします。

Indigo は新しい空のプロジェクトを作成し、プロジェクトホームへ移動します。
ダイアログのスクリーンを選択します。

Indigo Studio は新しい空のスクリーンを作成します。デフォルトで、ビューポートはジェネリックに設定されます。
プラットフォームピッカーから iPhone 6 オプションを選択します。
スクリーンに要素を追加します。

ツールボックスの要素をドラッグアンドドロップ、またはデザイナーで Alt + クリック を押して、テキストボックスに追加する要素の名前を入力します。

この例は、サインアップと *Twitter でサインイン *ボタン、そして画像を追加します。

**Alt + クリック** または **Alt + ドラッグ** を使用してすばやく要素を追加できます。ツールボックスを非表示にして十分なデザインスペースを確保できます。

Sign up ボタンを選択し、プロパティパネルでインタラクションの追加ボタンをクリックします。

インタラクション選択リストは既定値の Taps (タップ) オプションのままにしておきます。
スクリーンの変更 をクリックし、次に新しいステートを作成をクリックします。

スクリーンに新しいステートが作成されました。このスクリーンでユーザー操作による変更が必要です。
新しいステートでは、サインアップフォームに Container Box を追加します。サインアップとサインアップボタンをカバーするよう配置します。
コンテナーをダブルクリックしてコンテンツを更新し、フォーム要素に追加します。

この例では、閉じるアイコン、アカウント詳細のための 3 つのテキストボックス、ボタン、テキストを追加します。
画像に透明度を追加します。コンテナー編集モードを終了します。
変更をアニメーション化します。

タイムラインで追加および不透明度の設定操作をドラッグして間隔を設定します。

両方の操作でダイアログが表示され、徐々に画像がより透明になります。

スクリーンの実行を使用してデザインやインタラクションを確認できます。デザイナーの上にボタンがあります。

`インタラクションエクスプローラー`でスクリーンフローを確認します。スクリーンの実行ボタンの隣りのステート名をクリックして開きます。
![][img-14]

Continue ボタンにインタラクションを追加します。ここでは新しいステートを作成せずにプロジェクトのスクリーンへ移動を選択します。

他のスクリーンがない場合、ピッカー内から作成できます。このスクリーンは、アプリコンテンツを表示します。

他のスクリーンを使用は、コンテンツフローを変更するときに便利です。