Office アドインのデザイン言語Office Add-in design language

Office のデザイン言語は、エクスペリエンス全体の整合性を保証するクリーンでシンプルなビジュアル システムです。Office のインターフェイスを定義する、次のようなビジュアル要素のセットが含まれています。The Office design language is a clean and simple visual system that ensures consistency across experiences. It contains a set of visual elements that define Office interfaces, including:

  • 標準的な書体A standard typeface
  • 一般的なカラー パレットA common color palette
  • 文字体裁のサイズと太さのセットA set of typographic sizes and weights
  • アイコンのガイドラインIcon guidelines
  • 共有アイコンのアセットShared icon assets
  • アニメーションの定義Animation definitions
  • 一般的なコンポーネントCommon components

Office UI Fabric は、Office デザイン言語を作成するための正式なフロントエンドのフレームワークです。Fabric の使用はオプションですが、アドインが Office の自然な拡張であるかのように使えるようにする最速の方法です。Fabric を活用して、Office を補完するアドインを設計して作成します。Office UI Fabric is the official front-end framework for building with the Office design language. Using Fabric is optional, but it is the fastest way to ensure that your add-ins feel like a natural extension of Office. Take advantage of Fabric to design and build add-ins that complement Office.

多くの Office アドインは、以前から存在するブランドに関連付けられています。強力なブランドとそのビジュアルまたはコンポーネント言語を、アドインに保持できます。Office と統合する際に、独自のビジュアル言語を保持する機会を探します。Office の色、文字体裁、アイコン、その他のスタイルの要素を、独自のブランドの要素と交換する方法を検討してください。お客様によく知られているコントロールやコンポーネントを挿入する際は、一般的なアドイン レイアウトや UX 設計パターンに従う方法を検討してください。Many Office Add-ins are associated with a preexisting brand. You can retain a strong brand and its visual or component language in your add-in. Look for opportunities to retain your own visual language while integrating with Office. Consider ways to swap out Office colors, typography, icons, or other stylistic elements with elements of your own brand. Consider ways to follow common add-in layouts or UX design patterns while inserting controls and components that are familiar to your customers.

過度にブランド化された HTML ベースの UI を Office 内に挿入すると、お客様が不満を抱く可能性があります。Office にシームレスに適合するためのバランスを見つけるだけでなく、サービスや親ブランドとはっきり調和するようにします。アドインが Office に適合しないとき、ほとんどの場合はスタイル要素の競合が原因です。たとえば、文字体裁が大きすぎてグリッド線を越えている、色が対照的で派手である、アニメーションが余計で Office と動作が異なる場合です。コントロールやコンポーネントの外観と動作が、Office の基準から大幅にそれています。Inserting a heavily branded HTML-based UI inside of Office can create dissonance for customers. Find a balance that fits seamlessly in Office but also clearly aligns with your service or parent brand. When an add-in does not fit with Office, it's often because stylistic elements conflict. For example, typography is too large and off grid, colors are contrasting or particularly loud, or animations are superfluous and behave differently than Office. The appearance and behavior of controls or components veer too far from Office standards.