Office アドインの UX 設計パターン テンプレート

Office アドインの UX 設計パターン プロジェクトには、アドインの UX を作成できる HTML、JavaScript、および CSS ファイルが含まれています。

UX 設計パターン プロジェクトは、次に使用できます。

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

UX 設計パターンの使用

UX 設計パターン仕様を独自の Office アドインを設計する際のガイドとして使用することも、ソース コードをプロジェクトに直接追加することもできます。

この仕様を使用して、独自のアドイン UI に模擬表示をビルドするには、次を実行します。

  1. 設計リソース ファイルをダウンロードし、独自 UI の設計を開始します。
  2. ガイダンスについては、次の記事を参照してください。

ソース コードを追加するには、次のようにします。

  1. Office アドインの UX 設計パターン プロジェクト リポジトリを複製します。
  2. 資産フォルダーと、アドイン プロジェクトに対して選ぶ個々のパターンのコード フォルダーをコピーします。
  3. 個々のパターンをアドインに組み込みます。たとえば次のようにします。
    • マニフェスト内で、ソースの場所またはアドイン コマンドの URL を編集します。
    • 他のページのテンプレートとして、UX 設計パターンを使用します。
    • UX 設計パターンとの間にリンクを設定します。

注意

一部の UX パターン仕様は、ソース コードに一致しません。 すべての資産を標準化するよう努力しています。 また、一部の仕様がアーカイブとして提供されることに注意してください。 プラットフォームにとっての価値について、これらのアーカイブされた仕様を評価しています。 各パターンは、固有のテンプレートと相互作用のパターンを表現することを目的としています。 パターンは互いに重複しないようにし、Office Fabric UI コンポーネントとは明確に区別する必要があります。

UX 設計パターンの種類

汎用ページ

汎用ページ テンプレートは、アドインの任意のページに適用でき、特定の目的を持ちません。特定の目的を持つページの例は、すべての初回実行時のパターンです。使用可能な汎用ページの一覧は、以下のとおりです。

ランディングブランド バー
landing page brand bar

初回実行時エクスペリエンス

初回実行時エクスペリエンスとは、ユーザーが最初にアドインを開いたときのエクスペリエンスです。初回実行時の設計パターン テンプレートは、以下のとおりです。

  • 開始手順: アドインの使用を開始する手順の、順序付きリストをユーザーに提供します。
  • 価値: アドインの価値提供を明確にします。
  • ビデオ: アドインの使用を開始する前に、ユーザーにビデオを表示します。
  • チュートリアル: アドインの使用を開始する前に、ユーザーに一連の機能または情報を体験させます。
    • カルーセルの仕様 (この UX 設計パターンの名前は「カルーセル」に変更されています。 以前の仕様では、「ページング パネル」と呼ばれていました。 コード アセットでは、「初回実行時チュートリアル」と呼びます。
    • チュートリアルのコード

AppSource には、アドインの試用版を管理するシステムが存在しますが、アドインの試用版エクスペリエンスの UI を自分で管理する場合は、次のパターンを使用します。

  • 試用: アドインの試用版で開始する方法をユーザーに示します。
    • 試用の仕様 (この UX 設計パターンはアーカイブされています。 値を評価するときは、この PDF を参照してください)。
    • 試用のコード
  • 試用版の機能: ユーザーが試用を考えている機能がアドインの試用版では使用できないことをユーザーに示します。または、無料のアドインにサブスクリプションを必要とする機能も含まれる場合は、このパターンの使用を検討します。このパターンでは、試用期間の終了後にダウングレードしたエクスペリエンスを提供することもできます。

重要

自分で試用版を管理し、試用版の管理に AppSource を使用しない場合は、必ず販売者ダッシュボードのテスト用メモに、[追加購入が必要になる場合があります] タグを組み込んでください。

ユーザーに初回実行時エクスペリエンスを 1 回示すか、何回も示すかを検討することがシナリオにとって重要かどうかを検討します。たとえば、ユーザーがアドインを定期的に使用する場合は、使用方法を忘れる可能性があるため、初回実行エクスペリエンスを複数回確認できた方がよいでしょう。

開始手順ビデオ
instruction steps value placemat video placemat
チュートリアルの最初のページ試用試用版の機能
walkthrough 1 trial placemat trial placemat feature

ユーザーは、アドインの別のページ間を移動する必要があります。次のナビゲーション テンプレートには、アドインのページおよびコマンドの整理に使用できるさまざまなオプションがあります。

[戻る] ボタンナビゲーションコマンド付きナビゲーション
back button navigation navigation with commands
ピボットタブ バー
pivot navigation tab bar

通知

アドインでは、ユーザーにさまざまな方法で、エラーなどのイベントや進捗状況を通知できます。使用可能な通知テンプレートは次のとおりです。

  • 埋め込みダイアログ ボックス: ボタンまたはその他のコントロールを使用して、情報や必要に応じて対話型エクスペリエンスを提供するダイアログ ボックスを作業ウィンドウ内に表示します。いずれか 1 つを使用して、ユーザーにアクションの確認を促すことを検討します。ユーザー エクスペリエンスを作業ウィンドウに維持したい場合は、埋め込みダイアログ パターンを使用します。
  • インライン メッセージ - エラー、成功、情報を示します。メッセージは作業ウィンドウ内の指定した場所に表示できます。たとえば、ユーザーがテキスト ボックスに不適切な書式の電子メール アドレスを入力すると、テキスト ボックスの真下にエラー メッセージが表示されます。
  • メッセージ バナー: 情報や必要に応じてアクションの単純な呼び出しを、単一の行に折りたたんだり、複数の行に展開したり、非表示にできるバナーで提供します。メッセージ バナーは、サービスの更新またはアドインを開始するときに役に立つヒントの報告に使用します。
  • 進行状況バー: ユーザーが以降のアクションを行う前に完了する必要がある、実行時間の長い、同期プロセス (構成タスクなど) の進行状況を示します。これは別のスポット ページであり、アドインのブランド化を強化します。進行状況バーは、アドインに戻るまでの定期的な評価をプロセスが送信する際に使用します。
  • スピナー: 実行時間の長い、同期プロセスが進行中だが、どの程度進んでいるのかは提示されていないことを示します。これは別のスポット ページであり、アドインのブランド化を強化します。スピナーは、プロセスがどの程度進んでいるかをアドインが確実に知ることができない場合に使用します。
  • トースト: 数秒で消える簡単なメッセージを提供します。ユーザーがメッセージに気づかない場合があるため、トーストは重要ではない情報にのみ使用します。これは、電子メールの受信など、リモート システムでユーザーにイベントを通知する場合に優れた選択になります。

    埋め込みのダイアログインライン メッセージメッセージ バナー
    embedded dialog inline message message banner
    進行状況バースピナートースト
    progress bar spinner toast

一般的なコンポーネント

以下に、さまざまなシナリオで使用できるアドイン用の一般的なコンポーネントを示します。

クライアント ダイアログ ボックス

クライアント ダイアログ ボックスは、ユーザーが作業ウィンドウ外でアドインを操作できる別の方法を提供します。使用可能なダイアログ ボックス テンプレートは次のとおりです。

Typeramp ダイアログ警告ダイアログ
typeramp dialog alert dialog
ナビゲーション ダイアログ
navigation dialog

フィードバックおよび評価

アドインの可視性や導入を向上するには、AppSource でユーザーがアドインを評価およびレビューできる機能を提供することをお勧めします。このパターンには、アドインからフィードバックおよび評価を提示できる次の 2 つの方法があります。

  • ユーザー側からのフィードバック: ([フィードバックの送信] リンクなどの) ナビゲーション メニューまたはフッターのアイコンを使用し、ユーザーがフィードバックの送信を選択します。
  • システム側からのフィードバック: アドインが 3 回実行された後、メッセージ バナーを介してフィードバックを行うようユーザーが促されます。

いずれの方法でも、AppSource のアドイン用のページを含むダイアログ ボックスが開きます。

重要

このパターンは、現在、AppSource のホーム ページをポイントしています。この URL は、AppSource の自分のアドインのページの URL に更新してください。

フィードバックおよび評価
Feedback and Ratings

設定およびプライバシー

アドインには、アドインの動作をユーザーが制御する設定を構成できる設定ページが必要な場合もあります。また、ご自分のアドインが準拠しているプライバシー ポリシーをユーザーに提供したい場合もあるでしょう。

  • 設定: アドインの動作を制御する構成コンポーネントがある作業ウィンドウを表示します。設定ページには、ユーザーが選択可能なオプションがあります。
  • プライバシー ポリシー: プライバシー ポリシーに関する重要な情報が含まれる作業ウィンドウを表示します。
設定値プライバシー ポリシー
settings privacy

関連項目