Name: Office-Add-in-UX-Design-Patterns
Owner: Office Developer
Description: A library of common Office Add-in design patterns
Created: 2016-03-11 16:33:39.0
Updated: 2018-03-14 13:50:45.0
Pushed: 2018-01-09 01:03:10.0
Homepage:
Size: 322175
Language: null
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Email | Most Recent Commit | # Commits |
|---|
README
Office Add-in UX Design Patterns
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.
Table of contents
Get started
- 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.
UX design patterns list
Authentication
First-Run
- 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.
Navigation
- 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.
Utility
- 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.
Notification
- 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.
Design Resources
Additional resources
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.
