クロスプラットフォームのモバイルアプリにMetroスタイルデザインを使用することは適切ですか
AndroidとiosのUIをWindows Metroのデザインに恋した後、設計するのは本当に難しいと思います。
すべてのプラットフォームにメトロスタイルのアプリを提供することは、個人的にはWindows Phoneアプリよりもはるかに優れたエクスペリエンスになるとは思えないほど悪いことではないかと思いました。
すべてのプラットフォームで単一のMetroスタイルUIを使用するのは悪い考えでしょうか？
マイクロソフトは、各プラットフォーム用のXbox Liveコンパニオンアプリでこのアイデアを実験しました。
これがiOS用のMy Xbox LIVEアプリです：
iTunes App StoreのMy Xbox LIVEアプリリストから取得した画像
…そして、これがAndroid上の同じアプリです。
Google PlayのMy Xbox LIVEアプリリストから取得した画像
…そして最後に、iPadバージョンの画面をいくつか示します。
iTunes App StoreのMy Xbox LIVEアプリリストから取得した画像
これはすべて（比較的）簡単に設計できますが、技術的に実装するのは非常に困難です。たとえば、注意すべき点がいくつかあります（静的なスクリーンショットではすぐにはわからない場合があります）。
- これらのアプリは、Metroスタイルのパノラマ（次のペインの端を表示して水平にスクロールできることを示す）を使用するのではなく、カルーセルスタイルのドットインジケーターを使用して、現在のパノラマにある画面の数（およびどれがどれか）を通知しますあなたは今です）。他のようなもの
- このアプリは、ユーザーが自分のXboxでMetroを体験したため、Metroにいることをやめます。ユーザーは、それがどのように機能するかについて合理的な期待を持っています（特にiPadのインターフェースでは、TVのインターフェースとよく似ています）。
- Segoe UI（またはその姉妹フォントSegoe WP）は、MetroMetroを構成する重要な要素であるため、 アプリで使用するためのフォントのライセンス
- Windows Phone用のMetroアプリは、ハードウェアの戻るボタンを想定して設計されています。これはiOSでは利用できないため、ソフトウェアの戻るボタンの必要性を考慮に入れる必要があります（上記の「アバター」画面に表示されますが、MicrosoftではiOSではそうしていますが、Android which doesにはハードウェアの戻るボタンがあります）
- メトロはアニメーションに大きく依存しています 。アニメーションを念頭に置いて設計し、すべてのアニメーションを自分で（各プラットフォームに）実装する必要があります。
- ネイティブ言語とMetro設計言語を混在させることはできません。 every関数のカスタムコントロールを実装する必要があります（ドロップダウンメニューなどのフォーム要素から、スロバーの読み込みなどのUI関数まで）。 My Xbox LIVE iOSアプリは、iOS
UISwitchコントロールを表示することにより、設定画面でこれに違反しています。 - 存在さえ知らない操作をエミュレートする必要がある場合があります（Windows Phoneでは、タッチジェスチャとして任意のメニューバーを上にフリックできますが、My Xbox LIVE iOSアプリでは、非常に小さな「…」ターゲットをタップする必要がありますそうする）。
- 考慮する必要があるアクセシビリティには多くの影響があります。 iOSでは、My Xbox LIVEアプリは組み込みのVoiceOverスクリーンリーダーと特に互換性がありません（特にホーム画面では）（たとえば、「Gamer Spotlight：Say hello to Dr. Black Bones」というラベルの付いたボタンは「淡色表示」と表示されます他の一部の画面（「最近のゲーム」画面など）は完全に読み取り可能ですが（新しい音声テキストを追加しても）画面に表示され、「フルーツニンジャ：17のアチーブメントを獲得しました。ゲーマースコアは200のうち170」です。もちろん、ネイティブコントロールを使用しても、優れたアクセシビリティが保証されるわけではありません。他のプラットフォームの期待と特に異なることを何もしていないときに適用する方が簡単です。
Metroに対するあなたの感情（または彼らが現在それを呼んでいるものは何でも）を完全に理解しています。シンプルで、クリーンで、生きており、全体的に素晴らしいです。しかし、他のすべてのプラットフォームに分散するのはひどい考えだと思います。
各プラットフォームには、ユーザーが慣れている一連の設計と機能の標準があります。そのため、他のプラットフォームのユーザーにMetro UIを導入することで、ユーザーが慣れ親しんでいるすべてのものに反対することになります。また、ユーザーがMetro UIを気に入らない可能性があることも考慮する必要があります。誰もがMetroを望んでいるなら、誰もがWindows Phoneを購入するでしょうが、他の場所でサポートするユーザーがいるため、そうではありません。
どのプラットフォームに焦点を合わせているかに関係なく、ユーザーにとってなじみのある方法でそのプラットフォーム用に特別に構築する必要があります。ユーザーがアプリでくつろげるようにしたい場合は、プラットフォームのガイドラインに従うことで実現できます。
一般的な混乱は、Metro UI（または現在呼ばれている現代のUI）はすべて大きなフラットタイルの使用に関するものであり、それをクロスのデザインに統合する方法について混乱があると思いますプラットフォームアプリ。ただし、Microsoftがライブタイルまたはフラットタイルを参照ポイントとして使用することで、シンプルさを重視し、大きなタイポグラフィとアニメーションを使用してコンテンツに焦点を合わせ、情報フローに流動性をもたらすことを理解する必要があります。適用可能なMetro Designの設計原則everywhereは次のとおりです。
職人の誇りを示す：簡単に言えば、デザインを可能な限り完璧なピクセルにするために取り組み、細かいディテールが提供されるようにします
速くて流動的：簡単に言えば、ユーザーとのやり取りに反応し、各やり取りで意味のあるユーザーフローを作成できるように、次のやり取りに備える
本物のデジタルであること：簡単に言うと、デジタルメディアを扱っていることを認識し、デジタルメディアで提供されている機能をユーザーフローを示す方法として使用してみてください。適切な使用の例としては、鮮やかな色を使用してユーザーにフォーカスを移したり、大きなフォントを使用してコンテンツにアクションを呼び出したりします。言い換えれば、スキューモーフを避けようとする
lessでより多くのことを実行：簡単に言えば、ユーザーが邪魔な要素をたくさん処理することなく、コンテンツを直接操作できるようにします。
Win as one：簡単に言うと、最小限の冗長性があり、複数の要素とレイアウトにわたって設計に一貫性があることを確認します。
これらの設計原則はすべて、任意の設計インターフェースに適用でき、以下に示すように、それをうまくうまくいくことができたアプリがかなりあります。
つまり、アプリの設計中は、設計対象のプラットフォームの設計原則に従っていることを確認してください。これにより、ユーザーはアプリ内を移動する方法を知ることができます。ナビゲーション。
メトロスタイルにも感銘を受けました。他のプラットフォームで試してみる価値はあります。ユーザーがWindows PhoneとiPadを持っている場合、同じ一貫したエクスペリエンスを提供することは間違いなく素晴らしいことです。一方、iOSでの操作とは大きく異なる操作を導入する場合、またはAndroidユーザーを混乱させないようにするために注意が必要です。たとえば、iOSではクリックコンテンツはツールバーを表示する可能性があります。ユーザーはこれがアプリで機能することを期待している可能性があります。iOSの操作ガイドラインに厳密に準拠していないインターフェイスもあります（iPadのTwitterアプリなど）が、アプリは非常に直感的で簡単です。使用する。
私の 最新のアプリ は フラットなデザインを使用しています（そうです、ベンダー中心の用語よりもこの中立的な用語を好みます）。
これまでのところ、フィードバックは positive です。どのUIスタイルが常に優れているかわかりません。それにもかかわらず、次の引用は私にインスピレーションを与えました：
「ウェブで人気の製品は、ほぼ同じ種類のベベル、インセットシャドウ、ドロップシャドウを使用して、同様のデザインの美学を共有しています。デザイナーにとって、このレベルの「舐める」インターフェースを実現することは、誇りのポイントです。私たち、そして世の中の少数のUIデザイナーにとって、それは間違っていると感じています。」
〜アラングリンシュタイン（Layervault）
ある程度まで。
ボックスを使用するアイデアは、モダンUIではありません（ところで、もはやMetroと呼ばれていません）。ボックスは問題ありませんが、使用することは本当に良い考えですが、別のUIに深く入りすぎると、ユーザーがデバイスを操作する際に学んだ一般的な方法が悪用されます。
唯一の例外は、別のインターフェースの機能を提示したい場合です。その後、野生に行くことができます。