Entwurfsrichtlinien für Outlook-Add-InsOutlook add-in design guidelines

Add-Ins sind eine großartige Möglichkeit für Partner, die Funktionalität von Outlook über unsere Kernfunktionen hinaus zu erweitern. Add-Ins ermöglichen Benutzern den Zugriff auf Erfahrungen, Aufgaben und Inhalte von Drittanbietern, ohne den eigenen Posteingang zu verlassen. Nach der Installation sind Outlook-Add-Ins auf jeder Plattform und jedem Gerät verfügbar.Add-ins are a great way for partners to extend the functionality of Outlook beyond our core feature set. Add-ins enable users to access third party experiences, tasks, and content without needing to leave their inbox. Once installed, Outlook Add-ins are available on every platform and device. The following high-level guidelines will help you design and build a compelling add-in, which brings the best of your app right into Outlook – on Windows, Web, iOS, Mac, and Android.

Die folgenden allgemeinen Richtlinien helfen Ihnen beim Entwerfen und Erstellen eines überzeugenden Add-Ins, das das Beste aus Ihrer App direkt in Outlook zur Verfügung stellt – unter Windows, im Web, unter iOS, auf dem Mac oder unter Android.—The following high-level guidelines will help you design and build a compelling add-in, which brings the best of your app right into Outlook—on Windows, Web, iOS, Mac, and Android.

GrundsätzePrinciples

  1. Konzentrieren Sie sich auf einigen wichtigen AufgabenFocus on a few key tasks; do them well

    Die am besten gestalteten Add-Ins sind einfach zu verwenden und konzentrieren sich darauf, Benutzern einen echten Mehrwert zu bieten. Da das Add-In in Outlook ausgeführt wird, liegt ein besonderer Schwerpunkt auf diesem Grundsatz. Outlook ist eine Produktivitätsanwendung, mit der Benutzer können mit dieser Ihre Aufgaben erledigen.—The best designed add-ins are simple to use, focused, and provide real value to users. Because your add-in will run inside of Outlook, there is additional emphasis placed on this principle. Outlook is a productivity app – it's where people go to get things done.

    Sie erweitern unsere Funktionen, deshalb ist es wichtig, dass die bereitgestellten Szenarien und das Verhalten sich nahtlos in Outlook einfügen. Denken Sie sorgfältig darüber nach, welche gemeinsamen Anwendungsfälle am meisten von Hooks profitieren, auf die sie direkt in der E-Mail- und Kalenderoberfläche zugreifen können.You will be an extension of our experience and it is important to make sure the scenarios you enable feel like a natural fit inside of Outlook. Think carefully about which of your common use cases will benefit the most from having hooks to them from within our email and calendaring experiences.

    Ein Add-In sollte nicht das tun, was die App bereits tut. Der Fokus sollte auf den am häufigsten verwendeten und entsprechenden Aktionen im Kontext von Outlook-Inhalten liegen. Denken Sie an Ihre Handlungsaufforderung und machen Sie klar, welche Aktionen der Benutzer durchführen sollte, wenn Ihr Aufgabenbereich geöffnet wird.An add-in should not attempt to do everything your app does. The focus should be on the most frequently used, and appropriate, actions in the context of Outlook content. Think about your call to action and make it clear what the user should do when your task pane opens.

  2. Sorgen Sie für eine möglichst native ErfahrungMake it feel as native as possible

    Das Add-In sollte mithilfe von Mustern entworfen werden, die für die Plattform nativ sind, auf der Outlook ausgeführt wird. Um dies zu erreichen, berücksichtigen Sie unbedingt die Interaktion und visuelle Richtlinien, die für die jeweilige Plattform gelten. Outlook verfügt über eigene Richtlinien, welche ebenfalls berücksichtigt werden müssen. Ein gut entworfenes Add-In stellt eine entsprechende Mischung aus der Funktionalität, der Plattform und Outlook dar.Your add-in should be designed using patterns native to the platform that Outlook is running on. To achieve this, be sure to respect and implement the interaction and visual guidelines set forth by each platform. Outlook has its own guidelines and those are also important to consider. A well-designed add-in will be an appropriate blend of your experience, the platform, and Outlook.

    Das bedeutet, dass Ihr Add-In in Outlook für iOS und Outlook für Android jeweils anders aussehen muss. Eine Möglichkeit, die Darstellung und den Stil Ihres Add-Ins anzupassen, bietet Ihnen Framework7.This does mean that your add-in will have to visually be different when it runs on Outlook for iOS vs Outlook for Android. We recommend taking a look at Framework7 as one option to help you with styling.

  3. Machen Sie die Nutzung zum Genuss und achten Sie auf DetailsMake it enjoyable to use and get the details right

    Benutzer nutzen gerne Produkte, die sowohl funktional als auch optisch ansprechend sind. Sie können den Erfolg Ihres Add-Ins sicherstellen, indem Sie ein Erlebnis schaffen, bei dem Sie jede Interaktion und jedes visuelle Detail sorgfältig bedacht haben. Die notwendigen Schritte zur Erledigung einer Aufgabe müssen klar und relevant sein. Im Idealfall sollten für eine Aktion nicht mehr als zwei Klicks erforderlich sein.People enjoy using products that are both functionally and visually appealing. You can help ensure the success of your add-in by crafting an experience where you've carefully considered every interaction and visual detail. The necessary steps to complete a task must be clear and relevant. Ideally, no action should be further than a click or two away. Try not to take a user out of context to complete an action. A user should easily be able to get in and out of your add-in and back to whatever she was doing before. An add-in is not meant to be a destination to spend a lot of time in – it is an enhancement to our core functionality. If done properly, your add-in will help us deliver on the goal of making people more productive.

    Vermeiden Sie es, dass Benutzer außerhalb des Kontexts eine Aktion ausführen müssen.Try not to take a user out of context to complete an action. Die Benutzer sollten problemlos das Add-In aufrufen und verlassen können, unabhängig davon, welche Aufgaben Sie vorher durchgeführt haben.A user should easily be able to get in and out of your add-in and back to whatever she was doing before. Ein Add-In soll nicht viel Zeit in Anspruch nehmen, sonder eine Erweiterung der Kernfunktionen darstellen.—An add-in is not meant to be a destination to spend a lot of time in—it is an enhancement to our core functionality. Wenn dies ordnungsgemäß geschieht, dient das Add-In als Unterstützung dabei, zu mehr Produktivität von Benutzern beizutragen.If done properly, your add-in will help us deliver on the goal of making people more productive.

  4. Branding mit BedachtBrand wisely

    Wir schätzen großartiges Branding und wissen, dass es wichtig ist, Benutzern eine einzigartige Erfahrung zu bieten.We value great branding, and we know it is important to provide users with your unique experience. Wir sind der Meinung, dass man den Erfolg von Add-Ins am besten sicherstellen kann, indem eine intuitive Benutzeroberfläche sichergestellt wird, die Elemente Ihrer Marke enthält, statt dauerhafte oder störende Markenelemente, die den Benutzer davon ablenken, frei Ihr System zu verwenden.But we feel the best way to ensure your add-in's success is to build an intuitive experience that subtly incorporates elements of your brand versus displaying persistent or obtrusive brand elements that only distract a user from moving through your system in an unencumbered manner.

    Eine gute Möglichkeit, Ihre Marke auf sinnvolle Weise einzubinden, ist die Verwendung von Markenfarben, Symbolen und VoIP, vorausgesetzt diese stehen nicht in Konflikt mit den bevorzugten Plattformmustern und Barrierefreiheitsanforderungen stehen.—A good way to incorporate your brand in a meaningful way is through the use of your brand colors, icons, and voice—assuming these don't conflict with the preferred platform patterns or accessibility requirements. Legen Sie den Fokus auf Inhalte und Aufgaben, nicht auf die Marke.Strive to keep the focus on content and task completion, not brand attention.

    Hinweis

    Anzeigen sollten nicht innerhalb von Add-Ins unter IOS oder Android angezeigt werden.Ads should not be shown within add-ins on iOS or Android.

EntwurfsmusterDesign patterns

Hinweis

Während die oben genannten Prinzipien für alle Endpunkte/Plattformen gelten, sind die folgenden Muster und Beispiele für mobile Add-Ins auf der iOS-Plattform spezifisch.While the above principles apply to all endpoints/platforms, the following patterns and examples are specific to mobile add-ins on the iOS platform.

Damit Sie ein Add-In mit ansprechendem Design erstellen können, gibt es Vorlagen, die mobile iOS-Muster enthalten, die innerhalb der Outlook Mobile-Umgebung funktionieren. Durch Nutzung dieser bestimmten Muster können Sie eine systemeigene Erfahrung des Add-Ins auf der iOS-Plattform und in Outlook Mobile sicherstellen. Diese Muster werden weiter unten detailliert beschrieben. Die Beschreibungen sind zwar nicht vollständig, es ist jedoch der Beginn einer Bibliothek, die wir weiter ausbauen werden, sobald weitere Paradigmenpartner ihre Add-Ins mit aufnehmen möchten.To help you create a well-designed add-in, we have templates that contain iOS mobile patterns that work within the Outlook Mobile environment. Leveraging these specific patterns will help ensure your add-in feels native to both the iOS platform and Outlook Mobile. These patterns are also detailed below. While not exhaustive, this is the start of a library that we will continue to build upon as we uncover additional paradigms partners wish to include in their add-ins.

ÜbersichtOverview

Ein Add-In besteht in der Regel aus den folgenden Komponenten.A typical add-in is made up of the following components.

Ein Diagramm mit grundlegenden UX-Mustern für einen Aufgabenbereich unter iOS

Ein Diagramm mit grundlegenden UX-Mustern für einen Aufgabenbereich unter Android

LadevorgangLoading

Wenn ein Benutzer auf das Add-In tippt, sollte UX so schnell wie möglich angezeigt werden. Wenn eine Verzögerung eintritt, verwenden Sie eine Statusanzeige oder einen Aktivitätsindikator. Eine Statusanzeige sollte verwendet werden, wenn die Zeitspanne bestimmt werden kann. Ein Indikator für Aktivität sollte verwendet werden, wenn die Zeitspanne nicht bestimmt werden kann.When a user taps on your add-in, the UX should display as quickly as possible. If there is any delay, use a progress bar or activity indicator. A progress bar should be used when the amount of time is determinable and an activity indicator should be used when the amount of time is indeterminable.

Ein Beispiel für das Laden von Seiten unter iOSAn example of loading pages on iOS

Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter iOS

Ein Beispiel für das Laden von Seiten unter AndroidAn example of loading pages on Android

Beispiele für eine Statusanzeige und einen Aktivitätsindikator unter Android

Anmelden/RegistrierenSign in/Sign up

Stellen Sie sicher, dass der Anmeldevorgang (und Registrierungsvorgang) unkompliziert und benutzerfreundlich ist.Make your sign in (and sign up) flow straightforward and simple to use.

Ein Beispiel für Anmelde- und Registrierungsseiten unter iOSAn example sign in and sign up page on iOSExamples of sign in and sign up pages on iOS

Beispiele für Anmelde- und Registrierungsseiten unter iOS

Ein Beispiel für eine Anmeldeseite unter AndroidAn example sign in page on AndroidExamples of sign in page on Android

Beispiele für eine Anmeldeseite unter Android

MarkenleisteBrand bar

Im ersten Bildschirm des Add-Ins sollte Ihr Brandingelement enthalten sein. Die der Erkennung dienende Markenleiste hilft ebenfalls dabei, den Kontext für den Benutzer festzulegen. Da die Navigationsleiste den Namen Ihres Unternehmens/Ihrer Marke enthält, ist es nicht erforderlich, die Markenleiste auf nachfolgende Seiten zu wiederholen.The first screen of your add-in should include your branding element. Designed for recognition, the brand bar also helps set context for the user. Because the navigation bar contains the name of your company/brand, it's unnecessary to repeat the brand bar on subsequent pages.

Ein Beispiel für Branding unter iOSAn example of branding on iOSExamples of brand bars on iOS

Beispiele für Markenleisten unter iOS

Ein Beispiel für Branding unter AndroidAn example of branding on Android

Beispiele für Markenleisten unter iOS

SeitenränderMargins

Seitenränder in mobilen Umgebungen sollten auf 15 Pixel (8 % des Bildschirms) für jede Seite festgelegt werden, damit dies mit Outlook iOS übereinstimmt. Für eine Übereinstimmung mit Outlook Android sollten 16 Pixel für jede Seite eingestellt werden.Mobile margins should be set to 15px (8% of screen) for each side, to align with Outlook iOS and 16px for each side to align with Outlook Android.

Beispiele für Seitenränder unter iOS

TypografieTypography

Typografienutzung wird an Outlook iOS ausgerichtet und ist zur Wahrung der Lesbarkeit einfach gehalten.Typography usage is aligned to Outlook iOS and is kept simple for scannability.

Typografie unter iOSTypography on iOSTypography samples for iOS

Typografiebeispiele für iOS

Typografie unter AndroidTypography on AndroidTypography samples for Android

Typografiebeispiele für Android

FarbpaletteColor palette

Die Farbverwendung ist subtil in Outlook iOS. Zur Anpassung sollte die Verwendung von Farben an Aktionen und Fehlerstatus angepasst sein. Nur für die Markenleiste sollte eine einzigartige Farbe verwendet werden.Color usage is subtle in Outlook iOS. To align, we ask that usage of color is localized to actions and error states, with only the brand bar using a unique color.

Farbpalette unter iOS

ZellenCells

Da die Navigationsleiste nicht für die Bezeichnung einer Seite verwendet werden kann, verwenden Sie Abschnittstitel hierfür.Since the navigation bar cannot be used to label a page, use section titles to label pages.

Beispiele für Zellen unter iOSExamples of cells on iOSCell types for iOS

Zellentypen unter iOS


Dos für Zellen unter iOS


Don’ts für Zellen unter iOS


Zellen und Eingaben unter iOS

Beispiele für Zellen unter AndroidExamples of cells on AndroidCell types for Android

Zellentypen unter Android


Dos für Zellen unter Android


Don‘ts für Zellen unter Android


Zellen und Eingaben unter Android – Teil 1

Zellen und Eingaben unter Android – Teil 2

AktionenActions

Überlegen Sie, welche der vielen Aktionen Ihrer App für das Add-In besonders wichtig sein, und konzentrieren Sie sich auf diese.Even if your app handles a multitude of actions, think about the most important ones you want your add-in to perform, and concentrate on those.

Beispiele für Aktionen unter iOSExamples of actions on iOSActions and cells in iOS

Aktionen und Zellen unter iOS


Dos für Aktionen unter iOS

Beispiele für Aktionen unter AndroidExamples of actions on AndroidActions and cells in Android

Aktionen und Zellen unter Android


Dos für Aktionen unter Android

SchaltflächenButtons

Schaltflächen werden verwendet, wenn andere UX-Elemente unten vorhanden sind (im Gegensatz zu Aktionen, bei denen die Aktion das letzte Element auf dem Bildschirm ist).Buttons are used when there are other UX elements below (vs. actions, where the action is the last element on the screen).

Beispiele für Schaltflächen unter iOSExamples of buttons on iOSExamples of buttons for iOS

Beispiele für Schaltflächen unter iOS

Beispiele für Schaltflächen unter AndroidExamples of buttons on AndroidExamples of buttons for Android

Beispiele für Schaltflächen unter Android

RegisterkartenTabs

Registerkarten können bei der Organisation des Inhalts hilfreich sein.Tabs can aid in content organization.

Beispiele für Registerkarten unter iOSExamples of tabs on iOSExamples of tabs for iOS

Beispiele für Registerkarten unter iOS

Beispiele für Registerkarten unter AndroidExamples of tabs on AndroidExamples of tabs for Android

Beispiele für Registerkarten unter Android

Symboleicons

Symbole sollten nach Möglichkeit dem aktuellen Outlook iOS-Design entsprechen. Verwenden Sie unsere Standardgrößen und -farben.Icons should follow the current Outlook iOS design when possible. Use our standard size and color.

Beispiele für Symbole unter iOSExamples of icons on iOSExamples of icons for iOS

Beispiele für Symbole unter iOS

Beispiele für Symbole unter AndroidExamples of icons on AndroidExamples of icons for Android

Beispiele für Symbole unter Android

End-to-End-BeispieleEnd-to-end examples

Bei Version 1 von Outlook Mobile-Add-Ins haben wir eng mit unseren Partnern zusammengearbeitet, die Add-Ins erstellen. Zur Präsentation des Potenzials von Add-Ins für Outlook Mobile hat unser Designer End-to-End-Flüsse für jedes Add-In zusammengestellt, in denen unsere Richtlinien und Muster berücksichtigt werden.For our v1 Outlook Mobile Add-ins launch, we worked closely with our partners who were building add-ins. As a way to showcase the potential of their add-ins on Outlook Mobile, our designer put together end-to-end flows for each add-in, leveraging our guidelines and patterns.

Wichtig

In diesen Beispielen werden ideale Möglichkeiten zum Erzielen von Interaktion und des visuellen Designs dargestellt. Sie weichen möglicherweise von den tatsächlichen Funktionssätzen in den veröffentlichen Versionen von Add-Ins ab.Important note: These examples are meant to highlight the ideal way to approach both the interaction and visual design of an add-in and may not match the exact feature sets in the shipped versions of the add-ins.

GIPHYGIPHY

Ein Beispiel für GIPHY unter iOSAn example of GIPHY on iOSEnd-to-end design for the GIPHY add-in on iOS

End-to-End-Design für das GIPHY-Add-In unter iOS

Ein Beispiel für GIPHY unter AndroidAn example of GIPHY on AndroidEnd-to-end design for the GIPHY add-in on Android

End-to-End-Design für das GIPHY-Add-In unter Android

NimbleNimble

Ein Beispiel für Nimble unter iOSAn example of Nimble on iOSEnd-to-end design for the Nimble add-in on iOS

End-to-End-Design für das Nimble-Add-In unter iOS

Ein Beispiel für Nimble unter AndroidAn example of Nimble on AndroidEnd-to-end design for the Nimble add-in on Android

End-to-End-Design für das Nimble-Add-In unter Android

TrelloTrello

Ein Beispiel für Trello unter iOSAn example of Trello on iOS

End-to-End-Design für das Trello-Add-In Teil 1 unter iOS


End-to-End-Design für das Trello-Add-In Teil 2 unter iOS


End-to-End-Design für das Trello-Add-In Teil 3 unter iOS

Ein Beispiel für Trello unter AndroidAn example of Trello on Android

End-to-End-Design für das Trello-Add-In Teil 1 unter Android


End-to-End-Design für das Trello-Add-In Teil 2 unter Android

Dynamics CRMDynamics CRM

Ein Beispiel für Dynamics CRM unter iOSAn example of Dynamics CRM on iOSEnd-to-end design for the Dynamics CRM add-in on iOS

End-to-End-Design für das Dynamics CRM-Add-In unter iOS

Ein Beispiel für Dynamics CRM unter AndroidAn example of Dynamics CRM on AndroidEnd-to-end design for the Dynamics CRM add-in on Android

End-to-End-Design für das Dynamics CRM-Add-In unter Android