次の方法で共有

Office アドインの UI をデザインする

  • [アーティクル]

Office アドインは、ユーザーが Office クライアントで使用できるコンテキストに応じた機能を提供することで、Office のエクスペリエンスを拡張します。 アドインを使用すると、コストのかかるコンテキストスイッチを使用せずに、Office 内の外部機能にアクセスできるようにすることで、ユーザーがより多くのことを実現できます。

アドインの UI 設計は、効率的で自然な対話式操作をユーザーに提供するために、Office とシームレスに統合する必要があります。アドインのコマンドを利用して、アドインへのアクセスを提供します。 アドインのコマンドを利用して、アドインへのアクセスを提供します。また、HTML ベースのカスタム UI を作成するときに推奨されるベスト プラクティスを適用します。

Office の設計原則

Office アプリケーションは、一般的な対話ガイドラインに従います。 アプリケーションはコンテンツを共有し、同様に外観と動作をする要素を持ちます。 この共通点は、一連の設計原則に基づいて構築されています。 この原則は、Office チームが顧客のタスクをサポートするインターフェイスを作成するのに役立ちます。 これらを理解してフォローすると、Office 内で顧客の目標をサポートするのに役立ちます。

Office の設計原則に従って、ポジティブなアドイン体験を作成します。

  • Office に合わせて、わかりやすく設計する。 アドインの機能と外観は、Office 体験を調和的に補完する必要があります。 アドインはネイティブに感じる必要があります。 それらは iPad や PowerPoint on the web で、Word とシームレスに連携する必要があります。 独自のエクスペリエンス、プラットフォーム、Office アプリケーションの 3 つを適切に組み合わせたアドインが、適切に設計されたアドインといえます。 可能であれば、ドキュメントと UI テーマを適用します。 デザイン言語およびツール セットとして、Fluent UI for the web の使用を検討してください。 Web 用 Fluent UI には、2 種類のフレーバーがあります。

    • React以外の UI の場合: 色、アニメーション、フォント、アイコン、グリッドにアクセスできる CSS クラスと Sass mixins のオープンソース コレクションである Fabric Core を使用します。 (歴史的理由から、"Fluent Core" とではなく "Fabric Core" と呼ばれています。) 開始するには、「Office アドインの Fabric Core」を参照してください。

    注:

    Fabric Core は、React以外のアドインを設計するための推奨ライブラリですが、チームは Fluent UI Web コンポーネントに取り組み、新しいソリューションを提供しています。 FAST 上に構築された Fluent UI Web コンポーネント ライブラリを使用すると、Web コンポーネントを使用、カスタマイズ、ビルドして、よりモダンで標準ベースの UI を作成できます。 GitHub を通じたエクスペリエンスに関するクイック スタートとウェルカム フィードバックを完了して、このライブラリをテストすることをお勧めします。

    • 反応 UI の場合: 広範なマイクロソフト製品にシームレスに適合するエクスペリエンスを構築するために設計された React フロントエンド フレームワークである Fluent UI React を使用します。 CSS-in-JS を使用して、高度にカスタマイズ可能かつ堅牢で最新のアクセス可能な React ベースのコンポーネントを提供します。 開始するには、「Office アドインのFluent UI React」を参照してください。

  • クロムよりもコンテンツを優先します。 お客様のページ、スライド、またはスプレッドシートに、体験の焦点を当てたままにすることができます。 アドインは補助的なインターフェイスです。 アクセサリ クロムは、アドインのコンテンツや機能を妨げるものではありません。 体験を適切にブランド化します。 認識可能な独自の体験をユーザーに提供し、操作の邪魔は避けることが重要です。 ブランドに注意を向けるよりも、コンテンツやタスクを完了することに重点を置いてください。

  • 楽しみながらユーザーが制御できるようにします。 機能や視覚に魅力的な製品は使用していて楽しいものです。 体験は慎重に作り上げてください。 すべての相互作用と視覚効果の詳細を検討して、詳細を正しく取得します。 ユーザーが自分の体験を制御できるようにします。 特定のタスクを実行するために必要な手順を明確にし、関連付ける必要があります。 重要な決定は簡単に理解できる必要があります。 アクションは、簡単に元に戻せる必要があります。 アドインは目標ではなく、Office 機能の拡張機能です。

  • すべてのプラットフォームと入力メソッドの設計。 アドインは、Office がサポートするすべてのプラットフォームで動作するように設計されており、プラットフォームやフォーム ファクター全体で動作するようにアドイン UX を最適化する必要があります。 マウス/キーボードとタッチ入力デバイスをサポートし、カスタム HTML UI がさまざまなフォーム ファクターに適応するために応答性を確保します。 詳細については、「 タッチ」を参照してください。

関連項目