Indigo Studio のプロトタイプのヒント
Indigo Studio の概要
概要
Indigo Studio プロトタイプ モデルは高い柔軟性を持ち、アプリケーションのインタラクションをプロトタイプ化できます。このトピックでは、プロトタイプをデザインするさまざまな方法をご紹介します。
スクリーンとステート
概要
ワイヤーフレーム ツールや一般的な Web サイトを使用しているデザイン プロセスでは、アプリケーションのプロトタイプで異なるステートを表現するために、ページ、スクリーン、ファイル、モックアップを個々に作成します。Indigo では、これらをまとめてスクリーンと呼びます。
一方、Indigo には各スクリーンに含まれるステートがあります。ステートは、通常ユーザー インタラクションに応答するスクリーンでの細かい変化を表します。
スクリーンとステートについて
スクリーンとステート間にははっきりとした境界線がないため状況に応じて対応する必要があります。ここではどちらを使用するかを決定するためのいくつかのヒントを紹介します。
| 問題 | 解決例 |
|---|---|
| レイアウトに違いはありますか？ | 新しいスクリーンを作成します。一方ほとんどのレイアウトと要素が同じ場合で細かい変化のみの場合、新しいステートを作成します。 |
| 別のページ/デザイン (ホームページ、製品リスト、製品詳細など) として使用しますか？ | 新しいスクリーンを使用します。主なページ/デザインの小さな変化の場合は、新しいステートが最適です。 |
| あるステートから他のステートへのトランジションで詳細な制御を必要ですか？アニメーションを使用しますか？ | ステート/インスクリーン インタラクションを使用します。新しいステートを作成する際に、Indigo はステート間の変更をトラックするタイムラインを提供し、それらをアニメーション化できます。スクリーンは、ハイレベルのトランジションのみが可能です。パワーポイントやキーノートでのトランジションとアニメーションの違いを考えた場合、ここではスライドがスクリーンに値します。 |
ストーリー ベースのプロトタイプとアプリライクなプロトタイプ
プロトタイプのスコープに基づきますが、 2 通りの方法があります。
ガイド/ストーリーベースのプロトタイプ デザイン
プロトタイプのスコープは、本来 1 つのパスまたはストーリーを示す特定の連続するインタラクションを介してウォークスルーすることです。
メリット
- 簡単に実行できる。プロトタイプがシンプルで管理が簡単。
- ブランチやエッジのケースの可能性がない場合に、パスを簡単に試行する際に適している。
- 特定のストーリーを表すのに最適。
- アプリケーションの特定部分のインタラクションをプロトタイプ化することが可能。
- アプリケーションエクスペリエンスの特定のスクリーンについて情報共有が可能。
- ユーザビリティー テストが可能。
デメリット
- 1 つのパスだけでは完全なエクスペリエンスを表現することができない。
- 実験的な試行に適していない (ユーザーがしたいことが有効にされていない場合を除く)。
- 多くの問題が後から発生する可能性があり、開発チームと作業する必要がある。
Indigo Studio で作成
- ステートでインタラクションを追加する。
- ストーリー/シナリオに集中できる。
- スケッチとして気軽に利用できる。コンセプトを試行するために必要な最小限のことを行う。
- 上記の項目はストーリーボードが表現できることとほぼ同じです。アプリケーションのデザインをストーリーボードから始めるのは、スケジュールどおりにプロジェクトを進めるためのベスト プラクティスです。
アプリライクなプロトタイプをデザイン
プロトタイプのスコープは、アプリケーション全体のエミュレートするためのもので、アプリケーションで分かりやすいセクション/機能/領域です。
メリット
- デザインを詳細にテストや確認ができる。ブランチを使用した試行なども可能。デザインが正しく動作することをより確実にできる。
- より多くのパスを定義することにより、いつ何が起こるかが明確になる。そのため開発期間でそれらの時間を省くことが可能。
- アプリケーションをよりエミュレートすることにより、デザインをより詳細にテストすることが可能。
- フレーズの後でデザインの基本として使用できる。
デメリット
- 特定のコンセプトを詳細にテストしすぎる可能性がある。作成とメンテナンスのコストが増加するため変更が困難になる。
- 高い費用対効果を期待できる。
- プロトタイプ以上のことができると誤解される可能性がある。
- Indigo でロジックと永続化データがサポートされるまで、アプリケーションの動作をエミュレートする。これらの問題がなくなったとしてもエミュレーションには制限がある。これらの問題がなくなったとしてもエミュレーションには制限があります。
Indigo Studio で作成
- プロトタイプをシーンへどのように分割するかプランニングします。フォルダー構成も合わせて考えておくことをお勧めします。
- 追加するスクリーンステートで要素にインタラクションを追加します。(ボタンが Start にある場合、インタラクションを追加します。それによって、表示されているものすべてがクリック可能になります)
- デザインを重要でより優先度の高いパスから開始し、2 番目、3 番目と作業する。メモをコミュニケーションに使用する。特にあまり重要でない項目や従来既知に基づく事柄 (メインスクリーンでポップアップ デザインとして動作させる) など。
- ストーリーボードの使用を考慮した際に、デザインの確認や特定のパスをより明確にするために、デザインのプロトタイプ化プロセスのを始めに行うか後に行うかによってストーリーボードで可能性のあるインタラクションパスが最小限または最大限になります。