This repository is a library of common UX design patterns for Office Add-ins. It represents a set of best practices for add-in interfaces. The patterns are built using Office UI Fabric components and styling. They complement Office experiences and follow add-in UX design principles. As you design your own Office Add-in, refer to the design patterns list below.
To download the entire set of code samples navigate to the following repo: Office-Add-in-UX-Design-Patterns-Code.
- Review the UX design patterns list of components and patterns located under design resources.
- Download the prototyping assets to begin mocking up your add-in located under design resources.
- Download the code to begin building your add-in located at the following repo: Office-Add-in-UX-Design-Patterns-Code.
- Authentication Dialog Flow - Multiple Identity - Present a multi authentication screen to your end users.
- Authentication Dialog Flow - Single Identity - Present a single identity authentication screen to your end users.
- Carousel - Takes users through a series of features or informational steps before they start.
- Value Placemat - Provides a clear value proposition and list of features.
- Video Placemat - Provides value through video content.
- Back Button - Shows a task pane with Back and Next Page buttons.
- Contextual Menu - Provides links to the main areas of an add-in. Also called "left nav" or "navigation pane."
- Pivot - Allows users to navigate between different content.
- Tab Bar - Shows navigation links at the top of the add-in space using icons and labels.
- Brand Bar - A space in the footer to include your brand name, logo and an optional settings access location.
- Command Bar - A surface that houses commands that operate on the content or parent region it resides above.
- Embedded Dialog - Displays a dialog inside of the task pane or content add-in.
- Settings - Displays common components that may be used within an add-in's settings menu.
- Splash Screen - This is a screen to display your company branding while the add-in is loading.
- Progress Indicator - Shows the completion status of an operation lasting more than 2 seconds.
- Spinner - Indicates to the user that things are processing.
- Toast - Provides a brief message that fades away after a few seconds.
- Prototyping
- Components - Desktop - Individual components for add-ins styled for desktop devices.
- Patterns - Desktop - Templatized patterns built from the Office UI Fabric components.
- Prototyping - Desktop
- Outlook Mobile - iOS - Individual components for add-ins styled for iOS devices.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
Copyright © 2017 Microsoft Corporation. All rights reserved.