次の方法で共有


スタイルと整合性のバランス

注: この記事は、Windows 10 RS2 の初期のドラフトです。 機能名、用語、機能は最終的なものではありません。

製品を設計するときは、顧客を支持します。 私たちは皆、私たちの意図に適した、真の最高のデザインを作り出すために努力しています。 この記事では、一貫性のあるユーザー エクスペリエンスを作成するための次の規則と、アプリを区別する独自の機能とエクスペリエンスの作成のバランスについて説明します。

整合性の重要性

整合性が重要な理由 一貫性により、アプリを使いやすくすることができます。 優れた設計の重要な部分は学習可能性です。アプリ間で一貫した設計を行う場合、エンド ユーザーがアプリの使用方法を "再学習" する必要がある回数が減ります。 実際の例を見てみましょう:ガスペダルは常に右側にあり、ドアノブは常に反時計回りに回転して開き、停止記号は常に赤です。

ただし、アプリの整合性を保つということは、すべてのアプリが互いに同じように見え、動作することを意味するわけではありません。 実際の例に戻って、椅子のデザインのほぼ無限の数がありますが、それらのほとんどは座る方法を再学習する必要があります。 これは、重要な要素 (座っているサーフェス) は、ユーザーがそれらを理解するのに十分な一貫性があるためです。

優れたアプリ設計を作成する場合の課題の 1 つは、一貫性を保つ必要がある場所と、一意であることが重要な場所を理解することです。

一貫性のスペクトル

整合性は、次の 2 つの反対の端を持つスペクトルと考えると役立ちます。

一貫性のスペクトル

使い慣れたエクスペリエンスの要素は次のとおりです。

  • 確立された UI パラダイム (マウス クリックでの動作、要素の長押し、似たアイコン)
  • 複数の製品に適用するブランドの要素 (文字体裁、色)

差別化要因は次のとおりです。

  • 製品のユニークな「魂」を形成する要素
  • 目的のフォーム ファクターに合わせてエクスペリエンスを調整するのに役立つ要素

このスペクトルを利用してデザイン モデルを作成し、アプリの主要な要素に適用してみましょう。

設計整合性モデル

このモデルでは、基本レイヤーは一貫性の基礎を試してテストし、上位レイヤーは柔軟性とカスタマイズに重点を置きます。

  1. 私たちのモデルの第一層を構成するのは、アプリの基本であるレイアウト グリッド、カラーパレット文字体裁規則、および アイコンスタイルです。 これらの基本機能は一貫して適用する必要があります。

  2. 2 番目のレイヤーでは、UWP は、効率と柔軟性のバランスを取る 一般的なコントロール のコア セットを提供します。 また、同じ単語を使用してアプリエクスペリエンスを通じてユーザーを説明し、ガイドする、一貫した音声とトーンを確立するためのガイドラインも作成しました。 アプリが設計に使用できる一連のパターンを作成し、設計がさまざまなサイズのデバイスと入力にまたがってスケーリングできることを確認しました。

  3. レイヤー 3 では、さまざまなデバイスとコンテキストに合わせてナビゲーションを調整します。 たとえば、スマートフォンでタッチ操作を行う方法は、キーボードとマウスを備えた 32 インチ のモニターや、ジェスチャを備えた Hololens、84 インチのサーフェイス上の 100 ポイントのタッチとは異なる可能性があります。

  4. レイヤー 4 は、ブランドのパーソナリティを定義する場所です。 ブランドを強化し、競合と差別化する署名デザイン要素は何ですか? これは、さまざまなエンド ユーザー向けにアプリを調整する場所でもあります。 ゲーマー、インフォメーション ワーカー、K-12 学生または教師向けのアプリです。 これらの異なる顧客に対する固有のニーズは何ですか?また、設計をより適切に機能させることができますか? 同じにするだけでなく、さまざまな顧客に対してより多くの価値を生み出すことに引き続き目を向けてください。

設計の原則

このモデルを効果的に使用するには、適切なトレードオフを行うのに役立つ一連の設計原則が必要です。 作業設計の整合性の原則を次に示します。

同じように見えるのであれば、同じように振る舞うようにする

  • ユーザーがテキスト ボックスまたはハンバーガー コントロールを見ると、ほとんどの場合、異なるデバイスで同じように動作することが期待されます。 確立された動作から逸脱する正当な理由がある場合は、ユーザーの期待を設定して、異なるように見えるようにします。

要素が既存の要素または規則によく似ている場合は、同じ要素にすることを検討してください

  • "新しいドキュメント" アイコンが必要です。 ユーザーによって既に認識されている新しいものを使用できる場合に、少し異なる新しいものを設計する理由。

使いやすさが一貫性を切り捨てる

  • 一貫性を保つよりも、使用可能な方が適しています。 場合によっては、使いやすさを高めるために新しいコントロールや動作を開発する必要があります。 片手で電話を使用する場合、固有の課題があります。 80インチの画面でも動作します。 優れた設計により、ユーザーは専門家を感じさせます。

エンゲージメントは重要です

  • 退屈にしないでください。 すべてが平らで、正方形で同じ色の場合、お客様はそれを拾って使用しますか? 喜びを生み出す。 学習可能性を損なうことなく驚く新しい要素を導入します。

行動は 進化します

  • これは難しい作業です。業界が進化するにつれて、新しい規則が確立されます。 現在の動作が薄れる可能性があり、一貫した動作の多くは新しい標準を採用する必要があります。 ピンチとズームを見てください。 以前は +/- UI を使用して拡大/縮小することが一般的に期待されていましたが、モダン UI ではピンチとズームが期待されます。 新しいエクスペリエンス パラダイムを見て、進化します。