Richten Sie Ihre App ein
Mit Designtools, Richtlinien und Philosophie loslegen.
Mit Stripe Apps können Sie Ihre eigene App auf der Plattform von Stripe erstellen. Sie können Ihrer App eine Nutzeroberfläche im Stripe-Dashboard geben, indem Sie eine Erweiterung der Nutzeroberfläche erstellen. Wenn Sie eine Nutzeroberfläche für Ihre App erstellen möchten, verwenden Sie die bereitgestellten Tools und Richtlinien, um die Gestaltung zu vereinfachen.
Verfügbare Tools
Stripe-Apps bieten Nutzeroberflächenkomponenten, gängige Designmuster und ein Figma UI-Toolkit.
Markenausdruck und angepasstes Design
Angepasstes Design
Die nutzerdefinierte Gestaltung von Elementen der Nutzeroberfläche ist absichtlich eingeschränkt. Dies geschieht, um die Konsistenz der Plattform mit zentralen Elementen der Nutzeroberfläche zu wahren und eine hohe Zugänglichkeit zu gewährleisten. Insbesondere begrenzen wir die Farben, die Sie für jedes Element verwenden können, da der farbliche Kontrast ein wichtiger Aspekt der zugänglichen Nutzeroberfläche ist.
Branding-Elemente
Damit Ihre App visuell einmalig ist, verwenden Sie den App-Indikator, einen farbigen Balken und ein Symbol am oberen Rand der App, über die Nutzer/innen schnell erkennen können, in welcher App sie sich befinden. Anders als bei anderen Elementen der Nutzeroberfläche können Sie für den App-Indikator eine beliebige Farbe wählen.
Wählen Sie eine Primärfarbe und ein dazu passendes Symbol oder Logo aus. Geben Sie mithilfe der Props brandIcon und brandColor der ContextView-Komponente Ihrer App die Farbe und das Symbol an.
Wie Ihre Markenfarben und -symbole den Nutzer/innen angezeigt werden
Komponenten und Muster
Stripe Apps bietet eine Reihe von Komponenten der Nutzeroberfläche, die zur Erstellung komplexerer Nutzeroberflächen kombiniert werden können.
Muster sind Anordnungen von Komponenten, die zeigen, wie die neuesten Komponenten der Nutzeroberfläche effektiv eingesetzt werden können. Die Verwendung von empfohlenen Mustern für die Erstellung Ihrer App ist der schnellste Weg, um sicherzustellen, dass Nutzer/innen eine qualitativ hochwertige, konsistente Nutzeroberfläche erhalten. Außerdem wird dadurch die App-Überprüfung beschleunigt.
Figma UI-Toolkit
Das Figma UI-Toolkit enthält alle Komponenten, Muster und ein paar Beispiel-Apps. Es ist unter @stripedesign in der Figma-Community verfügbar.
Das Figma UI-Toolkit
Nutzeroberfläche
Stripe-Nutzer/innen erwarten ein einheitliches Erscheinungsbild des Stripe-Dashboards und Stripe-Apps stellen Komponenten für die Nutzeroberfläche bereit, mit denen sie diese erstellen können. Diese Komponenten befinden sich in einem erweiterbaren Drawer für Stripe-Apps im Dashboard.
Nutzer/innen sehen die Erweiterung der Nutzeroberfläche Ihrer App im Stripe-Dashboard
Wenn Nutzer/innen eine App installieren, die Erweiterungen der Nutzeroberfläche nutzt, wird die App in einem Dock angezeigt. Wenn Sie auf das Dock klicken, wird ein Drawer mit Details zu Ihrer App und den Aktionen, die Nutzer/innen durchführen können, geöffnet.
Verfügbare Oberflächen
Der App-Drawer dient als Einstiegspunkt für alle Apps, die ein/e Nutzer/in installiert hat. Sie können ihn auf mehreren Oberflächen anzeigen. Eine Oberfläche ist ein Darstellungsfeld, das einer Seite des Stripe-Dashboards entspricht.
Detailseiten
Detailseiten ermöglichen Einblicke in ein bestimmtes Stripe-Objekt wie beispielsweise eine Detailseite für eine Einzelzahlung, eine Rechnung, ein Abonnement, einen Kunden/eine Kundin oder ein Produkt. Über Detailseiten erhält Ihre App Zugriff auf Daten zum aktuellen Objekt unter Verwendung des SDK für UI-Erweiterungen. (Aus Sicherheitsgründen ist dafür eine Berechtigung nötig. Weitere Informationen hierzu finden Sie unter Berechtigungen).
Prüfen Sie, welche Stripe-Objekte am besten zu Ihrem Produkt passen, und schaffen Sie relevante App-Erlebnisse für jedes Objekt. Mit Stripe Apps können Sie eine kontextbezogene App entwickeln, die Nutzer/innen in ihren bestehenden Abläufen unterstützt.
Listenseiten
Listenseiten bieten einen Überblick über die Kontoaktivität. So werden auf der Kundenseite alle Kund/innen aufgeführt, während die Zahlungsseite sämtliche Zahlungen erhält.
Nicht jede App benötigt eine Ansicht für Listenseiten. Man braucht sie aber, wenn man Funktionen anbietet, die sich nicht auf ein bestimmtes Objekt beziehen.
Startseite
Die Startseite des Stripe-Dashboards verschafft Nutzer/innen einen schnellen Überblick über das Unternehmen und leitet sie zu den zentralen Abläufen weiter. Wenn Sie einen relevanten Überblick über das Unternehmen der Nutzer/innen geben können, der zu Ihrem Produkt und dessen Schnittstelle zu Stripe passt, sollten Sie die Erstellung von Apps für die Oberfläche der Startseite in Betracht ziehen.
Nicht jede App muss eine Ansicht für die Oberfläche der Startseite haben. Erstellen Sie nur dann eine solche Ansicht, wenn Sie den Nutzer/innen relevante Übersichtsinformationen anzeigen können.
App-Anatomie
Die Komponenten einer Stripe-App
Am App-Indikator lässt sich ablesen, in welcher App man sich gerade aufhält. Er wird kontextabhängig auf den Seiten angezeigt, für die Sie eine App erstellt haben. Über das App-Symbol lässt sich die App identifizieren und per Mausklick öffnen.
Die Kopfzeile enthält den Namen der App, den Namen der Ansicht, einen externen Link zu dem Produkt und einige übergeordnete Aktionen, die die Nutzer/innen in der App durchführen können.
Beim Inhalt handelt es sich um den leeren Canvas für die App, der mithilfe der verfügbaren Komponenten der Nutzeroberfläche gefüllt werden kann.
Der Einstiegspunkt für den App-Marktplatz ist das Tor zu neuen Apps. Fügen Nutzer/innen eine App aus dem App-Marktplatz hinzu, wird das jeweilige Symbol im Dock angezeigt.
Ein aktives App-Icon ist ein Icon, das die aktuell ausgewählte Anwendung darstellt. Sind weitere Apps installiert, werden die App-Icons ober- oder unterhalb des App-Docks angezeigt. Hilfe zur Festlegung von App-Icons finden Sie in der Dokumentation zum Thema App-Manifest.
Arten von Ansichten
Eine App kann anhand von drei verschiedenen Ansichtstypen erstellt werden:
Mit der Ansicht wird festgelegt, was die Nutzer/innen an verschiedenen Stellen für die Interaktion mit der App sehen. Die Ansichten lassen sich mit den verschiedenen HTML-Seiten einer Website vergleichen.
ContextView ist die Standardansicht Ihrer App. SettingsView bezieht sich dagegen auf die Einstellungsseite. Bei beiden handelt es sich um ansichtsbezogene Root-Komponenten, die als Container der jeweiligen Komponenten dienen. Jede Komponente benötigt dabei eine ansichtsbezogene Root-Komponente.
ContextView
Darstellung der ContextView
Die erste Ansicht der App muss eine ContextView sein.
Mit ContextView können Apps direkt neben Stripe-Inhalten in einer Schublade gerendert werden. So können die Nutzer/innen beides nebeneinander sehen und den Kontext innerhalb der App und des Stripe-Inhalts teilen.
Mit diesen kontextbezogenen Modulen kann die App Nutzer/innen in ihren bestehenden Abläufen unterstützen und diese mit Kontextinformationen und Aktionen erweitern.
Die Interaktion der Nutzer/innen mit einer App beginnt immer mit einer ContextView. Jede App muss mindestens über eine ContextView (pro Darstellungsfeld) verfügen, die beim Laden als Standardansicht fungiert (ähnlich wie index. auf einer Website).
FocusView
Darstellung der FocusView
Eine FocusView ist für tiefergehende oder längere Arbeitsabläufe gedacht, die von einer ContextView ausgelöst werden.
In der FocusView wird ein blockierender Hintergrund auf den Rest der Seite angewendet, um die Aufmerksamkeit der Nutzer/innen auf die aktuelle Ansicht zu lenken. So können die Nutzer/innen sich verstärkt auf die Ausführung ihrer Aufgaben von Anfang bis Ende konzentrieren.
Der Hintergrund ermöglicht es Nutzer/innen nicht, mit dem Inhalt der Seite hinter dem Drawer zu interagieren.
Wählen Sie FocusView aus, wenn:
- Nutzer/innen füllen ein Formular aus oder durchlaufen einen Workflow, für den der unmittelbare Kontext der Stripe-Seite nicht benötigt wird und der nicht leicht unterbrochen werden sollte.
- Für eine komplexere Ansicht (z. B. für die Vorschau eines fremden Objekts, wie eines Support-Tickets) benötigen Sie eine breitere Arbeitsfläche.
Sie sind sich nicht sicher, welche Ansicht Sie wünschen?
Wenn Sie Wahl haben zwischen ContextView und FocusView wählen Sie standardmäßig ContextView. In dieser Ansicht werden bietet Nutzer/innen Stripe-Inhalte und die Inhalte Ihrer App nebeneinander angezeigt.
Wählen Sie FocusView, wenn es wichtig ist, dass der/die Nutzer/in eine zielgerichtete Aufgabe von Anfang bis Ende erledigt, oder wenn Sie eine breitere Arbeitsfläche für eine komplexere Ansicht benötigen.
SettingsView
Darstellung der SettingsView
Eine SettingsView erscheint auf der Konfigurationsseite Ihrer App, damit Sie nutzerspezifische Einstellungen für Ihre App vornehmen können. So können Sie eine App-Einstellungsseite hinzufügen.