24週間のWindows Phone向けMetro Design | ＃2 Windows Phoneのアプリケーション設計プロセス

今日は、使用するWindows Phoneアプリケーションの設計プロセスについて説明します。 これの多くは設計プロセスの通常の手順を表していますが、Windows Phoneのアプリケーションの設計の観点から、それらを正確に説明しようとします。 コメントや質問がある場合は、Twitterでメールを送信するか、ブログにコメントを残してください。



この記事では、最初から最後までのプロセスを取り上げているため、高レベルの概念について説明します。次の記事では、各段階の詳細な調査を開始します。 たとえば、次の記事では、ストーリー、スケッチ、ストーリーボード、ラフ（紙）プロトタイプに関するすべてのアイデアとコンセプトを思い付くことから始めます。 このプロセスの説明は、後続の記事の基礎となります。 あなたのフィードバックに基づいて、いくつかの手順を改善し、さらにサンプルを追加できることは間違いありません（実行するとすぐに）。



スキームは下から上に読み込まれます... :-)





Windows Phoneの設計プロセスは、Webサイト、モバイルアプリケーション、および同様の設計領域からの他のオブジェクトの開発に使用される他の設計方法と変わりません。 世界中のデザイナーは特定の設計プロセスを使用しますが、プロジェクトごとに個性を与え、微調整し、改善し、変更します。 同一のプロジェクトはありませんので、設計プロセスを一連の固定ルールとしてではなく、一連の推奨事項として検討してください。 それらに柔軟に誘導されます。

「デザイン」は「一度きりの」タイプのアクティビティではないことを理解することが重要です。多くの訪問があります。 反対に、最初の試みの直後にデザインを修正する必要はありません-芸術作品を作成するときの彫刻家のように、それは反復的なプロセスです。 大理石を手に取るとき、眉毛、指の爪、髪の毛などの細かい部分から始めません。 代わりに、大理石のブロックを取り、最初のパスで一般的な形状を与え始め、正しい体積と質量の分布を設定します。 その後、2番目のパッセージが続き、腕、胸、頭、脚のより具体的な輪郭を描き始めます。 次に、3番目の通路、4番目と5番目。 細部に至るまで作業を開始できる時点に達する前に、多くの反復が行われます。



ユーザーインターフェイスの設計も同様です。 最初から詳細を練り始めることはできません-そうしようとすると、獣（つまり、アプリケーション）が確実にこっそりとあなたを食べます：0。 たとえば、ビジュアルデザインを開始する前に、アプリケーションのフローを定義する必要があります。 私はこれに何度も出くわしました：私たちは一歩先を行くためにいくつかのステップをスキップしてすべてをより速く仕上げようとしますが、最初の段階での設計の可能性に関する不十分な研究のために、プロジェクトが進むにつれて後で支払います。 ブライアン・アグネッタ/ブライアン・アグネッタ/は、これをカンファレンスBUILDのセッションで説明しています（25:49から開始）。

アプリケーションテーマ

プロセスはアプリケーションテーマから始まります。 待って！ これが、すべてがバラバラになる最初のポイントです！ 「しかし、私たちは始めたばかりです、アルトゥーロ！」 私は知っていますが、アプリケーションのテーマは、次の数段階で成功するために非常に重要です。 私が何度も繰り返し気づいたのは、アプリケーションの設計プロセスを開始するとき、 1）必要なものについて既に非常に明確なアイデアをすでに持っているか、 2）既存のAPIとアクセス可能なWebに目標を設定することです。サービス。 私の意見では、どちらのアプローチも間違っています。



あなたが望むものの非常に明確なアイデアを持っている場合、あなたはあなた自身とあなたのチームを、自分が順番に探索することさえ許可していない決定に制限します。 既存のAPIまたはWebサービスに基づいてアプリケーションを構築することにした場合、別のTwitterクライアントであるYelpになります！ または、FoursquareまたはYahoo!からデータを取得する別の株式市場アプリ 金融、またはCNNからニュースを受信する別のRSSアグリゲーター... CNNでMarketplaceを検索すると、私が話していることを理解できます。



これらのアプリケーションはトレーニングの良い例になる可能性がありますが、私は信じていますが、ブレークスルーにつながることはなく、多数のユーザーに貢献することもありません。 この時点では、APIやRSSフィードについては考えないでください。 ユーザーエクスペリエンスについて考えます。 そのため、「CNNでRSSフィードが利用できます」と考えるのではなく、「ユーザーにとって最新かつ最も関連性の高いニュースを受信できるようにするために、どのような貢献ができますか？」 あなたがそれについて考え始めるとすぐに、あなたはすぐにあなたとあなたのチームのために巨大な研究の世界を開きます。 これはもはやRSSアグリゲーターではなく、より高い目標を持っています。勇敢なタスクは、ユーザーが最も関連性の高いニュースにアクセスできるようにすることです。



目標がより広いので、決定はより具体的ではなく、これは現時点でまさに必要なものです。 革新的なアイデアを探求し、思い付くためには、目標を開いたままにしておく必要があります。 APIの観点から考えるのではなく、ランニングエクスペリエンス、ランチエクスペリエンス、セーリングエクスペリエンスなどのユーザーエクスペリエンスの観点から考え、ユーザーのためにこのエクスペリエンスを強化する方法をご自身とチームにお尋ねください。 これは必ずしもユーザープロセス全体の問題を解決することを意味するわけではないことに注意してください...これは、ユーザーが困難を感じる傾向があるXエクスペリエンスまたはYエクスペリエンスの一部のみを改善することを意味する場合があります。 アプリケーションの開発プロセスの後半で、任意のソースからAPIフィードまたはRSSフィードを使用するかどうかを決定しますが、技術的な解決策は出発点ではありません。 Twitter（Seesmic）およびFoursquare（4th and Mayor）で最も人気のあるクライアントアプリケーションは、APIではなく主にエクスペリエンスについて考えるため、まさに成功しています。



ただし、特定の製品またはサービスを持つクライアント用のアプリケーションを作成する場合、またはiPhoneまたはAndroidからWindows Phoneにアプリケーションを転送する場合、もちろんテーマ（およびその他の詳細）は既に定義されています。 これらのほとんどの場合（予算と顧客のニーズに応じて）、情報アーキテクチャ段階にすぐに進む必要があります。 正直に言うと、まだアイデアとコンセプトを開発するのに時間をかけることができますが、実際の世界では、iPhone / AndroidアプリケーションをWindows Phoneに移植するためにあなたを雇うクライアントがいるなら、全体として、テーマ、概念、さらには情報アーキテクチャーもすでに定義されています。



これは悪いニュースではありません:-)実際、情報アーキテクチャとインタラクティブデザインの段階に到達するとすぐに、Metroデザイン言語から最高の成果が得られます。ピボットページ、パノラマ、アプリケーションパネル、リスト、タイポグラフィ、デザイン要素のレイアウトと動き。 他のプラットフォームからアプリケーションを移植する場合、あなたの作業は1）現在の情報アーキテクチャを理解し、2）Metroで正しい画面、コンテンツビュー、ナビゲーションメタファーに変換するという課題になります。



基本は、iPhoneおよびAndroidから移行する場合、ユーザーインターフェイスを移行しないことです。 情報アーキテクチャを移行しています。 このように考えて行動することにより、誤った変換プロセスを防ぐことができます...一部の人々がiPhoneから戻るボタン（通常、このボタンは左上にある）をWindows Phoneの画面上のボタンとして転送しようとするとき...そして何を知っていますか？ハードウェアの戻るボタンがあるため、Windows Phoneで戻るボタンを作成する必要はありません。 したがって、「ユーザーインターフェースの移行」という観点よりも「情報アーキテクチャの移行」の観点で考える方が適切です。



アイデアと概念の形成

アプリケーションのテーマ（またはミッション）を入手したので、次はアイデアの生成を開始します。 アイデアとコンセプトを形作ることは楽しいフェーズです！ -ゲームをするようなものです。 ブレーンストーミング、スケッチ、ストーリーテリングゲーム。 アイデアと概念の形成段階には、 1）ブレーンストーミング、 2）研究、 3）統合という3つの主要な段階があります。 一言で言えば、ブレーンストーミングの段階で、 たくさんのアイデアを作成し、研究の段階でこれらのアイデアの多く （すべてではありません）を分析し、研究し、統合の段階で、どのアイデアがアプリケーションの一部になるかを決定します。 それらのいくつかだけが彼を生き生きとさせます。







ブレーンストーミング -完全な自由



これはステージであり、その目的は、たとえば「ホテルの部屋を予約する体験を改善する」など、ミッションに当てはまる膨大な数のアイデアを作成することです。 想像力、クレイジーなアイデア、クレイジーなアイデアさえも発明することは、この時点で役立つ便利なスキルです。 遊び、どんな種類のフレームワークにも制約されません。 「主題+動詞+物」などのブレーンストーミングのための特別な演習や、思考プロセスを強化するさまざまな方法（代替世界、不可能なシナリオ、他の人のイメージなど）があります。 これらすべての方法については、次の記事で説明します。



独立した開発者であれば、これらのゲームをチームや友人とプレイすることもできます。 この段階の目標は、「これまたはそれがどのように構築またはプログラムされるか」を見つけることではありません。 そして、何かがどう見えるかさえも。 それはアイデアを生み出すことです-クレイジーな方が良いです。 次の数段階で、これらのアイデアが開始され、具体化されます。 最後に、私たち皆が知っているように、周りのどこかに百万の素晴らしいアイデアがありますが、適切に実装された1つか2つだけが成功します。



研究 -批評/研究/検証



研究段階では、ブレーンストーミング段階から生まれた（すべてではない）アイデアの一部を取り上げて、それらについてさらに学習しようとします。 分析、テスト、およびテストすることで、それらをよりよく理解できます。 この瞬間のアイデアは生まれたばかりで、まだ赤ん坊であり、完全な発展や成熟に達していない。 ブレーンストーミングセッション中に作成された可能性のあるクレイジーなアイデアの一部は、バラバラになりますが、さらに進むものもあります。 あなた自身またはあなたのチームの他のメンバーが、いくつかのアイデア、つまりあなたの子供たちを称賛し、適応させ、失望することに間違いなく気付くでしょう。 これは良くないと言いたいのですが、同時に、特定のアイデアを選択して愛さなければならないので、それらを本当に前進させることができます。



自分自身を完全に表現するために、アイデアを開発する必要がある場合があります。 アイデアをあきらめるのが早すぎると、良い機会を逃してしまうかもしれません。 幸いなことに、この段階では、アイデアを探求し、良いアイデアを見つけることができる4つの非常に便利なツールがあります。 スケッチ、ストーリーボード、プロトタイプ（紙）、ストーリーテリングです。 これらのツールは、開発者とデザイナーがアイデアをテストするのに役立ちます。



最初の予想にもかかわらず、 スケッチは学習でき、通常、描画スキルが低いと、この時点でより抽象的なものになります。 ストーリーボードを使用すると、PixarまたはDreamworksのアニメーターとほぼ同じ方法でストーリーを伝えることができます。 ここでは、アプリケーションを使用してユーザーエクスペリエンスを向上させるアイデアを示すために、ユーザーとのシーンを含む図面とボードを使用します。 これは視覚的なツールです。



プロトタイプは個別の研究のための全世界ですが、この段階では紙のプロトタイプに焦点を当てます。 それらを作成する方法はいくつかあります。そのうちの1つは、文字通り、紙、ステッカー、厚紙、粘着テープで作られたアナログプロトタイプの作成です。 一部の画面を他の画面の上に重ねて相互作用を伝えることにより、スクリプトを手動でテストできます。 このタイプのペーパープロトタイピングには、リーダーシップと、ユーザーの反応をテストする献身的な人物が必要です。



これはまったく馬鹿げた活動のように聞こえます。 :-)しかし、真剣に、これはそうではありません...これは非常に深刻なことです。 紙のプロトタイプを作成するために0ドルとわずか15〜60分を投資することでどれだけ多くのフィードバックを得ることができるかは驚くべきことです。 設計プロセスの後の段階で紙のプロトタイプを作成することはお勧めしませんが、現時点ではこれが最良のツールです。



別の方法は、Expression Blend（またはPowerpointまたは他の「インタラクティブツール」）を使用して紙のプロトタイプを作成することです。 これは、アナログとデジタルが混在した手法で、Jared Potter /-Sr. デザインスタジオのデザインインテグレーター。 簡単に言うと、紙に画面をスケッチし、写真を撮り、それらの写真をExpression Blendに貼り付け、「クリック可能な」領域の上に透明なボタンを追加して、ナビゲーションを接続します。 できた！ 彼はそれを15分間のペーパープロトタイピングと呼んでいます。これについては今後の記事で説明します。







バインディング -意思決定



ブレーンストーミングセッション中に一連のアイデアからプロセスを開始しました。 あなた自身とあなたのチームがこれらのアイデアの多くを探求することを許可しました...しかし、ここでは、統合の段階で、最高のアイデアである少数のアイデアだけが生き残ります。 これはまさに、アプリケーションに何を実装し、何を実装しないかを決定する段階です。 チームがリストを絞り込み、優先順位でアイデアのリストをソートするのに役立つさまざまな演習があります。 ここでの目標は、不確実性を可能な限り取り除くことです。 この時点で、アイデアは単なる概念以上に進化し、ほとんどの場合、ユーザースクリプト（または情報スクリプト）になりました。 優先シナリオのリストは、次のステップに進むために必要なものです。

情報アーキテクチャ

情報アーキテクチャを作成する目的は、情報、タスク、およびそれらの間の関係を定義することです。 これは、ユーザーがデジタル形式で受け取るものです。情報と、この情報を使って何かをする能力です。情報を消費して、意思決定や何かについての知識を得る、または情報を作成します。



情報アーキテクチャ（IA）はまったく別の分野です（ 情報アーキテクチャ研究所もあります）。 情報アーキテクチャの目的は、情報を整理することです。



アイデアとコンセプトを生成する段階で、素晴らしいアイデアを作成しました。 これらのユーザーシナリオは、名前、日付、価格、画像、温度範囲などの情報の形のないクラスターに関連付けられています。情報アーキテクチャの段階で、この形のない部分を取り、情報構造を形成します。 初めてこれを行うことは不可能です。 これには多くのパスが必要です。



IAを定義するのに役立つ2つの非常に便利なツールがあります。 アプリケーションフローチャート（アプリケーションフロー図）とラフプロトタイピングです。







したがって、最初のアイデアを情報アーキテクチャに適用し、アプリケーションフロー図を作成してテストします。 成熟度にはさまざまなレベルがあります。通常、タスクのフローから始めて、詳細画面 + コンテンツビュー + ナビゲーション図に進みます 。



ソフトウェア開発（またはその他のプロセス）の古き良きフローチャートを覚えていますか？ これらはアプリケーションの同じフロー図であり、使用する視覚的表現のみがユーザーフローとユーザーエクスペリエンスと相互作用を設計するタスクに焦点を合わせています。 アプリケーションのフローチャートを作成したら、対応するユーザースクリプトのストーリーを伝えることができます。 その結果、情報アーキテクチャを処理するためのフィードバックとアイデアを受け取り、その説明に戻って磨きをかけることができます。



その後、戻ってもう一度確認し、より正確なアプリケーションフロー図などを作成します。 少しずつ、アプリケーションフロー図がより詳細になり、単純なタスクフローから、コンテンツやナビゲーションの表示のアイデアを示す画面に移行します。 高品質のアプリケーションフローチャートをワイヤフレームとは呼びませんが、多くの人はそうします。 もちろん、低精度の回路。



もう1つのツールは、 ラフ（低品質）プロトタイプです。 現時点では、紙のプロトタイプは低コストであるため（お金と時間の点で）引き続き有用ですが、アプリケーションのフロー図は段階的にますます正確になり、これらの図を使用してプロトタイプを作成できます。 。 アプリケーションのフローチャートを印刷して、（印刷物を使用してサムネイルを使用する代わりに）アナログプロトタイプを組み立てるか、Expression BlendでプロトタイピングにJaredテクニックを使用できますが、サムネイルの写真を撮る代わりに、アプリケーションフローから画面を取得します。



最終的には、構造化された情報、アプリケーションフロー図の強固なセット、さらにはこれらの図に基づいたいくつかの大まかなプロトタイプを備えた堅牢な情報アーキテクチャドキュメントが作成されます。



Windows Phoneのアプリケーション設計プロセスの図を作成した後、私は1つのことに気付きました。情報アーキテクチャは、インタラクティブデザイン（次のステップ）とほぼ同じように、全高のほぼ35％を表します。 私の図は必ずしもプロジェクト内の段階の規模を反映しているわけではありませんが、これはかなり正確な評価であると言わなければなりません-情報アーキテクチャはこれまでずっと価値がありました。 IAを理解すれば、他のすべてがはるかに簡単になります。



数週間以内に、Windows Phoneアプリケーションの情報アーキテクチャに関する特別な記事を作成します。

インタラクションデザイン

情報の構造と、この情報を使用してユーザーが実行できるタスクを決定しました。 ここで、これらすべてを復活させるために、これらすべてのユーザーインターフェイスの開発を開始する必要があります。



インタラクションデザインの本質は次のとおりです。適切に構成された情報を表示できるユーザーインターフェイス要素とインタラクションエクスペリエンスのセットを作成し、ユーザーがこの情報に関連するタスクを正常に完了できるようにします。 この段階で達成したいのは、情報とタスクを実装する可能性を最大限に高めることです。 インタラクティブなデザインが完全に開発されていない場合、情報アーキテクチャは完璧かもしれませんが、これは情報がアプリケーションに完全に表示されず、ユーザーが目的のタスクを完了できないという事実につながります。



私の意見では、デフォルトでは、対話型設計（対話型設計）は情報とタスクのフィルターです。 定義上、これは情報でもタスクでもないため、これはまさにフィルターであり、単なる手段にすぎません 。 インタラクションデザイン（またはユーザーインターフェイス）は、ユーザーと情報の間です。 言い換えれば、ユーザーインターフェイス（インタラクティブデザインの結果）は、他の方法で証明されるまでは有罪でなければなりません。 :-)



このコンセプトは、Metro-designの原則が示すものとよく一致していると思います。仮想シーンの主役はユーザーインターフェイスではなく情報です。 ユーザーインターフェイスは、情報を投稿し、タスクを完了できるようにするためだけに存在します。 これは、ユーザーインターフェイスレイヤーが薄くてほとんど見えないカーテンであるか、 厚くて重いメンブレンであるかに関係なく、すでに適切な（または不十分な）デザイン実行の問題です。 そして、私は視覚的なデザインについても話していません-インタラクションデザインについてだけです：ユーザーがこの接続に関連して可能な情報とタスクと対話する方法。



Windows Phone用のMetroデザイン言語がなかった場合、やり取りのメタファーをゼロから作成する必要があります。次の記事では、Metroの原則に基づいて前進する方法について詳しく説明し、独自のイノベーションを導入する方法についていくつかのアイデアを説明しますが、この記事では、そのMetro言語に基づいたインタラクションデザインの定義に焦点を当てます。 Windows Phone用に既に用意されており、私たちの味方として使用できるデザイン。



この取り組みでは、デザインパターンが友人になります。シームレスな情報アーキテクチャを持つことは、Metroコントロールに情報構造を投影するのに役立ちます。情報アーキテクチャとタスクにより、ページ、ピボットページ、またはパノラマなどのコントロールが表示されます。情報の階層と構造が投影されますコンテンツの提出。異なる情報、個々のタスク間の関係、および情報とタスク間の関係によりナビゲーションが生成されます（アプリケーションパネルを思い出してください）。情報アーキテクチャの説明のすべてが、特定のWindows Phoneコントロールに変換されます。不確実性はないはずです。不確実性がある場合、できることはいくつかあります。ニーズに合わせて設計パターンをカスタマイズするか、独自のパターンを作成します。







繰り返しになりますが、まず、情報アーキテクチャの説明に基づいて、Windows Phoneに適したいくつかの組み込み設計パターンを選択します、たとえば、検索、ローカル検索のカード、または「連絡先」ハブのメール、プレイリスト、連絡先カードなど。さらに、情報アーキテクチャのニーズを完全または一般的に満たすデザインパターンが見つからない場合は、かなり近いデザインパターンをカスタマイズするか、独自のパターンを作成することもできます。



独自のデザインテンプレートのカスタマイズまたは作成に関しては、使用できる3つの優れたツールがあります。1） Windows Phoneのデザイングリッド2）構造化された情報を伝えるためのさまざまなサイズと彩度のフォント、3）Metroのさまざまな組み込みコントロールの使用。もちろん、この3つはあなたが自由に使える武器ではありませんが、最も重要なコンポーネントです。武器庫の最も完全な説明については、Windows Phoneユーザーインターフェイスガイドを参照してください。



Windows Phoneアプリケーションを開発するためのデザインパターンアプローチを提供していますか？はい！:-)これは、Windows Phone用のMetroアプリケーションを開発する唯一の方法ではありません。先ほど述べたように、今後の記事では基本的なデザインパターンを超えてMetroを促進する方法について説明しますが、この記事と次のいくつかでは、Windows PhoneのMetroデザイン言語の習得に焦点を当てたいと思います。これに対処する場合、私の意見では、組み込みのコントロールやメタファーとはまったく異なる外観の独自のデザインパターンを作成する準備ができます（ただし、Metro-designの原則に基づいています）。



あなたはいくつかを見つけることができますPhotoshopリストデザインテンプレート（ListView_PSD.psd）、パノラマパネル（Panorama_PSD.psd）、およびその他のコントロールはこちら。それらの多くについて詳しく説明します。











設計パターンを選択し、一部を自分用にカスタマイズし、さらにいくつかを作成したので、一般的にはアプリケーションが設計されます。簡単すぎるようですね！ -これは...そうではありません:-)現実には、設計パターンの正しい選択、およびそれらの設定は多くの作業です。興味深いことが1つ見つかりました。WindowsPhoneのデザインスタジオは、Windows Phoneの対話操作とユーザーインターフェイスの作成と開発に2年以上投資しています。携帯電話で見つけるデザインパターンは非常に柔軟で詳細です。昨年の秋のWindows Phone Design Dayツアーで200近くのアプリケーションを研究した結果、それらの90％が既存のデザインパターンまたは洗練されたデザインパターンを使用して作成できたことがわかりました。



デザインスタジオで最初に仕事を始めたとき、Metro-designに精通していなかったので、それは美しいように思えましたが、同時に、すべてのアプリケーションは同じように見えます。現在、既存の設計パターンを再利用してアプリケーションを開発することについてお伝えしています。:-)何か変更がありましたか？はい！-6か月前、Windows Phoneのすべてがピボットまたはパノラマであるという印象を受けました。しかし、これらの月の後、Windows Phoneアプリは、1つの統合されたページまたは単一のパノラマを使用するよりも豊富なパスを持っていることがわかりました。



Windows Phoneアプリケーションは、ページ、ピボットページ、およびパノラマで構成されています。それらの多く。すべてが相互接続されています。同様に、これらの3種類の画面は、アプリケーションで無限の数の合成オプションにつながります。これは、アプリケーション間の差別化が発生する場所です（開発者からのよくある質問）。パノラマパネルと概要ページを改良する可能性は無限です。 Metro設計言語を使用するWindows Phoneアプリケーションは、非常にリッチでユニークな場合があります。しばらくの間、「背景が黒でなければ、これはメトロではない」という神話さえありましたが、これは真実とは程遠いものです。Mike Kruzeniskiによるこの記事、またはWindows Phone向けのCore77 アプリケーションデザインコンテストの受賞者に関する記事を読んでください。



リストの大きなタスクの1つは、Photoshop、Illustrator、Expression Design、XAMLなど、さまざまな形式の膨大なデザインパターンを作成することです。これまでのところ、ここで提供するものはあまりありません。使用することをお勧めするテンプレートは電話に組み込まれています。ただし、必要な資料を便利な形式で提供するために、こちら側でいくつかの作業を行う必要もあります。購読してください！ :-)



プロセスに戻ると、デザインパターンの選択、その改良、および新しいパターンの作成は、ページレイアウト（ワイヤフレーム）の形で具体化されます。レイアウトは白黒になります。着色されていません！ブランド化されていない（まだ）...パノラマ背景なし！これらのレイアウトは、理想的には、Expression Design、Visio、Photoshop、またはIllustratorで作成されます（これにより、Visio形式のデザインテンプレートも提供する必要があると思います...うーん）。







インタラクションデザインフェーズの次の段階に進む準備ができています。ユーザーインターフェイスコントロールのモーションスタイルと仕様を定義します。。実際、これらの概念のほとんどは、以前に選択したデザインパターンに既に付属しています。結局のところ、このコンテキストでのデザインパターンは、視覚的なデザインパターンだけでなく、相互作用デザインパターンです。レイアウトの上部に署名された



モーションスタイルは、画面Aから画面Bに移動するとき（たとえば、ターン-ターンスタイル）またはリストアイテムの詳細を表示するときに（おそらく連続的な動き-連続体を使用して）発生する動きを指定するのに役立ちます。モーションはWindows Phoneのアプリケーションの重要な部分であるため、使用するモーションスタイルをデザインが決定することが非常に重要です。



同時に、示すことも必要ですユーザーインターフェイスコントロールの仕様（通常はレイアウトの上部）。これにより、アプリケーションを作成するときに、開発者は、たとえば、形成されたインタラクションエクスペリエンスを作成するために必要なキーボードの種類を知ることができます。または、通知に関しては、通知A、B、またはCの内容と、アプリケーション内でこれらの通知を使用できる場所の仕様も追加します。同じことがロードインジケーターにも当てはまります...ロードの割合または待機カーソルが必要ですか？



この段階の最後に、組み込み、修正、または独自に開発されたデザインパターンに基づいて作成された、アプリケーション全体の完全なレイアウトセットが作成されます。これらのレイアウトには、モーションスタイルとユーザーインターフェイスコントロールの仕様が含まれます。これで、次のステップであるビジュアルデザインの準備が整いました。

ビジュアルデザイン

この瞬間までに、あなた（そしておそらく私も）の多くはinしているでしょう。 -そのように。私が言ったように、（何かの）設計プロセスは線形ではありません。あなたが私だったら、Expression Designを開き（おそらくPhotoshopまたはIllustratorを使用します）、すぐにいくつかのアイデアに取り組み始めます:-)私はそれが大好きです-私はお気に入りのツールを取り、アプリケーションを掘り下げ始めます。スケッチもレイアウトも不要で、見た目もきれいで見た目も完璧です！ -ほとんどのビジュアルデザイナーはそのように考えています（開発者がすぐにVisual Studioに切り替えてぶらぶらするように！）。



私はインタラクションデザイナーというよりもビジュアルデザイナーであることを認めなければなりません。何かがどのように見えるかによって確実に導かれるので、プロジェクトの最初の段階で視覚デザインに引き寄せられますが、重要な設計プロセスがあることを自分でコントロールし、覚えておく必要があります。このステップをスキップすると、プロジェクトが美しくなることがあります、ただし、情報アーキテクチャの誤解と不適切に設計された対話-アプリケーションが機能するために必要です。それにもかかわらず、私たちは皆、外観が販売するものを知っており、顧客は設計プロセスのかなり早い段階でアプリケーションにグラフィックを送信するように私たちに依頼します。これは、すぐにビジュアルデザインを掘り下げる必要があるという意味ではありません（ただし、一部のお客様はこれがまさに必要なことだと考えたいと思いますが）が、できることは重要ですデザインを販売します。「



顧客、企業幹部、マーケティングマネージャーにとって、情報アーキテクチャとインタラクションデザインがいくら好きでも、1つの画像には1,000ページの情報アーキテクチャがかかります。WindowsPhoneアプリケーションの美しい視覚画像は、より多くの資金を調達し、同僚に進捗レポートを提供し、上司に見栄えを良くします:-)それはまさにその通りです。さらに、情報アーキテクチャが完全に形成されていないか、インタラクティブなデザインがまだ定義されていない設計プロセスのかなり早い段階でこれを開始しますが、最終的に実現されるものを想像するために最善を尽くします。



人々はこのビジョンが最終製品であると常に考えていますが、いや、これは私たちがどこに動いているかを示す単なるモデルです。問題は、チームまたはクライアントがこの初期のビジュアルデザインを唯一の方向としてサポートする場合です。情報アーキテクチャを作成し、相互作用を設計した後にのみ視覚設計を完全に実現できるため、プロジェクトにその後の失望がないように期待を設定する必要があります。



情報アーキテクチャとインタラクションが設計されたので、カラーパレットの定義、独自のアイコン、背景画像の開発、ユーザーエクスペリエンスへのブランディングの追加、ライブタイルの設計など、視覚的なデザインを作成するためのいくつかの快適な手順を実行します。 。







開発者が設計を行うべきかどうかについての典型的な議論がありますか？さて、ここまでは、正式な設計トレーニングを受けていない開発者がここに来ることができたと言えます。情報アーキテクチャは、非常に体系的で構造化された、論理駆動型の分野です。個人的には、開発者は情報アーキテクチャを行うための適切な頭脳を持っていると思います。



インタラクションデザインにはより多くの経験が必要です。ここでは、インタラクティブデザインのスペシャリストがこのプロセスで成功することができますが、開発者がデザインパターンに従うと、間違いなく正しいことができると思います。この段階での問題は、十分な数の設計パターンとこのタスクを完了するために必要なツールが不足していることです。これらはすべて、正式な設計教育を受けていない人々の複雑さのレベルを高める問題です。



最後に、ビジュアルデザインフェーズ。グラフィック/ビジュアルデザイナーまたはイラストレーターとして訓練された人を雇う方が良いと思います。istockphoto.comのような場所からデザインを学び、アイコン、写真、その他のアイテムのライセンスを取得する方法はたくさんありますが、資格のあるデザイナーを雇うほど高品質で効果的ではありません。それでも、次の記事のいずれかで、既成の資料に基づいて視覚的なデザイン要素を準備する最善の方法を開発者が理解できるように、実用的なアドバイスを提供できることを願っています。

赤と緑の線

レッドラインとは何ですか？そして、緑色の線とは何ですか？答えは簡単です。これらは、相互作用の経験を説明するための図面です。また、建築のように、すべてのサイズの建物の平面図、側面図、家の正面を見ることができる図面があり、このドアの大きさ、この窓、この壁の厚さ、水がパイプを通る場所、コンセントの場所を理解する床からの高さ、床に使用する材料、塗装色など。など...一般的に、インタラクティブなデザインでは、「赤線」と呼ばれる設計図もあります。なぜ赤ではないのかわかりません...紫と言えば...しかし、これは通常赤が本当に目立つ色だからだと思うので、この方法でインターフェースのサイズやその他の特性を読みやすくなります。



赤い線は、さまざまなアプリケーション画面の上部に多数の測定値が重ねて表示されている画像です。これらの数値は、マージン、パディング、要素サイズ、およびWindows Phoneの画面上部のステータスバーなどの一時要素を定義します。なぜ赤い線が必要なのですか？ 「Expression Blendは私たちの問題の解決策だと思いました！」 :-)これまでのところ、設計プロセスでは、Expression Blendをまったく使用していません。これは非常に長い間議論できることを知っているので、このシリーズの「Windows Phoneアプリケーションを設計するためのツール」記事に詳細を残します。



ただし、XAMLでインターフェイスを構築するように指示された場合、赤い線は設計者がユーザーインターフェイスをチェーンに渡すための最良のメカニズムを表していると言えます。この人は、いわゆるインテグレーター（この世界の本当のヒーロー）、XAMLとBlendを知っている別のデザイナー、または開発者でさえあります。いずれにせよ、アプリケーション設計を開発したのは別の人かもしれません。それがチームの仕組みです。



そのため、この他の人にはXAMLでユーザーインターフェイスを再現する方法が必要です-赤い線はこれを実現するのに役立ちます。 「赤い線」にはあいまいさはありません（常に質問がありますが）：このボタンのサイズが30 x 150ピクセルで、画面の左端から24ピクセル、上から427ピクセルの位置にある場合、これがまさに必要なことです。ポイント。議論なし。過去には、「赤い線」がなければ、デザイナーはWebサイトを作成し、レイアウトをJPGに転送できました（レイアウトにJPGを使用しないでください。PNGのみ！-圧縮アーチファクトなし）。このプロセスは常に設計を混乱させ、結果は元のビジョンとは異なります。 「赤い線」は「契約書」であり、両当事者が文字通り合意に達することができる文書です。また、「赤い線」とそれらの作成方法については、今後の記事で説明します。



緑の線とは何ですか？デザインスタジオのWindows Phoneは、タッチエリアの定義が基本であることに気付きました。一部のボタンは直径10ピクセルと表示されますが、タッチ領域は20ピクセルになります（指で押すのがより便利になります）。「緑の線」はこれらの感覚領域を示します。それらがオブジェクトのサイズと一致するかどうかは関係ありません。多くの場合、クリックをトリガーするオブジェクトの拡大サイズです。緑の線は赤の線とは別に描かれます。

結論として

その結果、「赤線」、「緑線」、ビジュアルデザインの完全に高品質の洗練された構成、および情報アーキテクチャを説明するドキュメントが得られます。アプリケーションが設計されると、統合チームに進み、選択されたプラットフォームでユーザーインターフェイスが構築されます。 Windows Phoneの場合、XAMLになります。 Windows 8の場合、これはHTML / CSSでもあります。しかし、使用するプラットフォームに関係なく、この時点で設計は非常に完成しており、画面は非常にきれいで、パノラマとピボットは非常によく考えられているため、コードで実装する準備ができています。



現実の世界では、開発チームは設計チームが作業を開始するのを待たないでしょう...開発チームと設計者は並行して作業します。場合によっては、プロジェクトのスケジュールが長いか十分に柔軟である場合、これは当てはまらないかもしれませんが、一般に、常に並行して設計計画と開発が行われます。デザイナー/開発者のコ​​ラボレーションは、個別の議論のためのトピック全体です。これに関する記事はないようですが、おそらく追加する必要があります。



それだけです再び、長い記事が出ました。これはプロセスの一般的な概要でしたが、次の記事から始めて、プロセスの詳細を検討します。



次の記事| ＃3アイデアとコンセプトの形成



前の記事| ＃1 Metro Design PrinciplesとMetro Design Language



著者：Arturo Toledo

翻訳：Petrishko、kichik

イラストのローカライズ：kichik



PSロシア語のメトロに関するその他の資料は、MSDNのメトロデザインハブに集められています。