次の方法で共有

Office アドイン用 UX 設計パターン

  • [アーティクル]

Office アドインのユーザー エクスペリエンスの設計では、Office ユーザーにとって魅力的なエクスペリエンスを提供し、既定の Office UI 内でシームレスに適合させることにより Office 全体のエクスペリエンスを拡張する必要があります。

この UX パターンはコンポーネントで構成されています。 コンポーネントは、お客様がソフトウェアやサービスの要素を操作するのに役立ちます。 ボタン、ナビゲーション、メニューは、整合性のあるスタイルと動作を持つことの多い、一般的なコンポーネントの例です。

Fluent UI React コンポーネントは、Office UI Fabric JS のフレームワークに依存しないコンポーネントと同様に、Office の一部のように見え、動作します。 いずれかのコンポーネント セットを利用して Office と統合します。 または、アドインに独自の既存のコンポーネント言語がある場合は、破棄する必要はありません。 Office と統合する際に、それを保持する機会を探します。 スタイル要素の入れ替え、競合の削除、ユーザーの混乱を取り除くためのスタイルと動作の採用を行う方法を検討してください。

提供されるパターンは、一般的な顧客シナリオとユーザー エクスペリエンス調査に基づくベスト プラクティス ソリューションです。 これらは、アドインを設計および開発するための簡単なエントリ ポイントと、Microsoft ブランド要素と独自の要素のバランスを取るガイダンスの両方を提供することを目的としています。 Microsoft の Fluent UI デザイン言語とパートナー固有のブランド ID とのバランスを取った、クリーンで最新のユーザー エクスペリエンスを提供することで、アドインのユーザーリテンション期間と導入を増やすことができます。

UX パターン テンプレートを使用して、次のことを行います。

  • よくある顧客のシナリオにソリューションとして適用する。
  • 設計のベスト プラクティスとして適用する。
  • Fluent UI コンポーネントとスタイルを組み込みます。
  • Office の既定の UI に視覚的に溶け込むアドインをビルドする。
  • UX を観念化および可視化する。

はじめに

パターンは、キーの動作またはアドインに共通のエクスペリエンスによって構成されます。 主なグループは次のとおりです。

各グループを参照して、ベスト プラクティスを使ってアドインを設計する方法を理解します。

注:

このドキュメント全体を通して表示されている画面例は、1366x768の解像度で設計および表示されています。

関連項目