スクリーンの概要
スクリーンのデザイン
「スクリーン」とは？
「スクリーン」は Indigo Studio のユーザー インターフェイス (UI) 部分を表す用語です。その他の候補に「ページ」、「ウィンドウ」、「ダイアログ」、「ポップアップ」、「UI」、「コントロール」、「ユーザー コントロール」、および「ビュー」などがありました。つまり、同じものを指す多数の用語が存在します。この同じものとは、ユーザーが見たり、インタラクションしたりするものです。
どの用語にしても、「しっくりこない」、「意味がわからない」、「特定あるいは制限しすぎる」などの意見があるかもしれません。「スクリーン」には詳細な定義がありません。たとえば、「スクリーン」と「コントロール」(「要素」、「ウィジェット」など) の違いは何でしょう?技術分野によっては、それらの用語の意味は同じなのです。
また、デザインする UI 部分を「スクリーン」と呼ぶか他の用語のどちらが良いか決定する方法はあるのでしょうか？これは「スクリーン」を説明する用語の問題です。「スクリーン」を使用することに至った理由は、ユーザー指向であるからです。ユーザーがソフトウェアを使用する場合、何を見るでしょうか？通常はスクリーンを見ます。また、「スクリーン」はさまざまなデバイスを説明する用語です。ディスプレイ デバイスの一番大きい部分であるとも言えます。Web アプリケーションの場合、「スクリーン」は「ページ」と同じです。デスクトップの場合、「スクリーン」は「ウィンドウ」と同じです。モバイルの場合、「スクリーン」は「スクリーン」です。
「スクリーン」は、モニターまたはデバイスのスクリーンに含まれる UI の大部分を占めます。これが「スクリーン」にした大きな理由です。
Indigo Studio でスクリーンを使用
Indigo Studio ではスクリーンをさざまな用途に使用できます。以下の目的にスクリーンを使用できます。
- スケッチ/模擬表示 (画像) の表示
- ワイヤーフレームの作成
- ページ/ウィンドウ/ダイアログのデザイン
- シングル ページのアプリケーション/プロトタイプのデザイン
- シンプルなアニメーション コンセプトの試行
- 単一インタラクション フローの試行
ソフトウェア アプリケーション同様、スクリーンは Indigo の基本デザイン概念です。
スクリーンを使用する方法の詳細は以下で説明します。
スケッチ/模擬表示 (画像) の表示
紙またはホワイトボードでスケッチし、写真を撮ってスクリーンに画像をドロップできます。その他のグラフィック デザイン ツールの画像モックアップがある場合、それをスクリーンにドロップできます。
クリック可能なモックアップを作成できます。ホットスポットを追加し、次のスクリーンに移動します。
スケッチ/モックアップの上にスクリーン要素を追加し、プロトタイプを作成します。
Indigo Studio は Balsamiq® モックアップのインポートをサポートします。Balsamiq からコピーして Indigo Studio に貼り付けます。モックアップはスクリーン要素で再作成されます。そのモックアップにインタラクションを追加できます。
ワイヤーフレームの作成
「スクリーン」はワイヤーフレームのようなものです。インタラクティブなプロトタイプを作成せずに、Indigo Studio のスクリーン要素を使用して静的なワイヤーフレームをデザインできます。
ページ/ウィンドウ/ダイアログのデザイン
Web サイトまたは複数ウィンドウ/スクリーン アプリケーションのようにプロジェクトを構造化する際に、スクリーンを使用して各ページ/ウィンドウ/ダイアログをデザインします。たとえば、「ホームページ」、「製品リスト」、および「製品」などのページを作成します。
シングル ページのアプリケーション/プロトタイプのデザイン
Web サイトではアプリケーションが単一ページで構成されることが一般化していますが、コンテンツがユーザー インタラクションによって動的に変更します。Indigo Studio では、単一のスクリーンを使用し、複数のステートをデザインします。詳細については以下で説明します。
簡単なアニメーション コンセプトの試行
プロトタイプ全体は必要なく、単一のアニメーション化されたトランジションをテストが必要な場合があります。スクリーンを作成して要素を追加し、アニメーション化された変更を使用してトランジションを試します。
単一のインタラクション フローの試行
プロトタイプ全体は必要なく、単一のインタラクション フローのみのテストが必要な場合があります。たとえば、デザインしたストーリーボードの予定しなかったケースを作成する場合などです。スクリーンを使用して単一のパスのデザインを作成できます。スクリーンをユーザー インタラクションに基づいて変更します。
ステートおよびスクリーン
スクリーンにはステートがあります。では「ステート」とは、何でしょうか?「ステート」は、スクリーンの一時的な表示です。すべての UI 要素が静的に構成されています。ワイヤーフレームに似ていますが、ワイヤーフレームはスクリーンの複数のステートを表示するために使用されます。Indigo Studio では、すべてのステートがスクリーンに含まれています。その他のツールも複数のステートを単一のスクリーン/ファイルに保存しますが、Indigo Studio の用語は違います。
Indigo Studio でインタラクションを定義すると、インタラクションの結果としてスクリーンの新しいステートを作成できます。インタラクションは以下が統合されたものです。
- ユーザー インタラクション - ユーザーのインタラクション (タップするか、マウス ポインターをホバーするなど) がプロトタイプの変更をトリガーします。
- [オプション] スクリーンの変更 - 新しいステートを作成することを決定する場合、以前のステートから開始し、変更します。コピー/貼り付けの必要がありません。
- 結果のステート - 新しい/別のスクリーンに移動するか、URL を開くか、新しい/別のステートに移動します。
ユーザー インタラクションの結果として UI の変更を表すには、スクリーンに複数のステートを使用できます。この方法は、アニメーション化されたトランジションを作成するための一番簡単な方法です。