--- title: "App Design Best Practices" slug: "app-design-best-practices" updated: 2025-01-08T11:12:52Z published: 2025-01-08T11:12:52Z canonical: "support.tulip.co/app-design-best-practices" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Bewährte Praktiken für das App-Design x:::(Info)Bevor Sie sich mit den Best Practices für das Design befassen, erfahren Sie, wie `Benutzerforschung{target=_blank}` die Grundlage für ein erfolgreiches App-Design ist. So können Sie die effektivsten Apps für Ihren Betrieb erstellen und den maximalen Wert Ihrer Zeitinvestition sicherstellen. Dieser Artikel bezieht sich auf zwei Tulip Library Apps: [App Design](https://tulip.co/library/apps/design-template/) `Templates{target=_blank}` und [App Design Best](https://tulip.co/library/apps/app-design-best-practices/) `Practices{target=_blank}`. ::: Gutes Design ist kontextabhängig, d.h. Entscheidungen werden unter Berücksichtigung der spezifischen Bedürfnisse Ihrer Branche, Ihrer Mitarbeiter und Ihres Prozesses getroffen und ändern sich je nach Zweck und Funktion der einzelnen Anwendungen und Schritte. Bewährte Verfahren für Anwendungen im [Bereich Life](/r230/docs/best-practices-for-gxp-app-building) `Sciences{target=_blank}` werden sich von den bewährten Verfahren im allgemeinen Fertigungsdesign unterscheiden. Alle Branchen werden jedoch App-Layouts und Farbschemata standardisieren und, wo immer möglich, klonbare Komponenten erstellen wollen. App-Vorlagen und Styleguides reduzieren die Anzahl der Entscheidungen, die App-Entwickler zu einem bestimmten Zeitpunkt treffen müssen, während eine Komponentenbibliothek die Nacharbeit reduziert und eine schnellere App-Erstellung ermöglicht. Um loszulegen, schauen Sie sich unsere Designvorlagen in der [Tulip](https://tulip.co/library/apps/design-template/) `Library{target=_blank}` an und verwenden Sie die folgenden Best Practices, um diese Vorlagen anzupassen und intuitive und navigierbare Apps zu erstellen. ![Tulip Library Design Template Page 2.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Tulip%20Library%20Design%20Template%20Page%202.png){width="500" height="315"} ## App-Vorlagen standardisieren Ein einheitliches App-Layout in Ihrem Unternehmen ist nicht nur ästhetisch ansprechend. Durch die Erstellung wiedererkennbarer Layouts und die gezielte Auswahl von Farben, die eine bestimmte Bedeutung vermitteln, können Sie den Schulungsbedarf für die Endbenutzer erheblich reduzieren. Sie können die folgenden [Tulip Library](https://tulip.co/library/apps/design-template/) `Vorlagen{target=_blank}` verwenden, um den Anfang zu machen. ![Template - Colors.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Colors.png)*Standardisierte Farbschemata stellen sicher, dass Anwendungen intuitiv sind und die Benutzer schnell und einfach durch die Bildschirme navigieren können.* ![Template - Typography.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Typography.png)*Die Schriftgrößen sollten einheitlich und für den Menschen lesbar sein. Passen Sie die Schriftgröße an die Auflösung Ihres Interface (Anzeigegerät) an.* ![Template - Buttons.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Buttons.png)*Primäre Aktionsschaltflächen sollten die fetteste Farbe auf dem Bildschirm haben und nicht mit dem Hintergrund verschmelzen. Sie möchten nicht, dass die Benutzer Zeit mit der Suche nach dem Gewünschten verschwenden.* ![Template - Button Icons.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Button%20Icons.png)*Durch das Hinzufügen von Symbolen zu Schaltflächen wird ein visueller Kontext zu der von der Schaltfläche ausgeführten Aktion geschaffen.* ## Erstellen Sie eine Komponentenbibliothek Die Erstellung von Komponenten oder Vorlagen, die App-Entwickler mühelos kopieren und einfügen können, beschleunigt die Entwicklung drastisch. Ziehen Sie in Erwägung, eine Bibliothek mit den folgenden häufig verwendeten Anwendungskomponenten zu erstellen: - App-Basislayouts (z. B. Tablet vs. Mobile) - Schritt-Layouts (z. B. Container- und Panel-Ausrichtung) - Navigationsleisten oben und unten - Menüleisten - Routing- oder Terminal-Bildschirme - Dashboards - Formulare (z. B. Ereignis- oder Fehlerformulare) - Prüflisten - Messdatenerfassung - Gemeinsame nebeneinander stehende Informationen (z. B. erscheint eine interaktive Tabelle oft neben eingebetteten Tabellendatensätzen) --- ![Template - Table and Table Records.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Table%20and%20Table%20Records.png)*Beispiel eines 2-Panel-Bildschirms, in dem die Benutzer Daten in einer Tabelle anzeigen und Felder über ein Formular bearbeiten können* ![Template - Side by Side.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Side%20by%20Side.png)*Beispiel eines Bildschirms mit 2 Feldern, bei dem die wichtigsten Informationen im linken Feld eingegeben werden* ![Template - Modals.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Modals.png)*Beispiel für einen modalen Schritt, der die volle Aufmerksamkeit der Benutzer auf die aktuelle Aufgabe lenkt* ![Template - Dashboard.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Template%20-%20Dashboard.png)*Beispiel für ein Dashboard, das Analysen anzeigt* ## Befolgen Sie bewährte Designpraktiken Entdecken Sie die Erkenntnisse von Experten für das Design von Apps im Tulip Library's [App Design Best](https://tulip.co/library/apps/app-design-best-practices/) `Practices{target=_blank}` guide. Tauchen Sie ein in die Tipps zu Farbe, Text und Widgets, um die Attraktivität Ihrer App und das Benutzererlebnis zu verbessern. ### Farbe ![Color 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%201%283%29.jpg) ![Color 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%202.jpg) ![Color 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%203.jpg) ![Color 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Color%204.jpg) ### Text ![Text 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%201.jpg) ![Text 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%202.jpg) ![Text 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%203.jpg) ![Text 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%204.jpg) ![Text 5.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%205.jpg) ![Text 6.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Text%206.jpg) ### Widget ![Widget 1.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%201.jpg) ![Widget 2.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%202.jpg) ![Widget 3.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%203.jpg) ![Widget 4.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%204.jpg) ![Widget 5.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%205.jpg) ![Widget 6.jpg](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Widget%206.jpg) **Interface (Display Device)** Users interact with Tulip applications through physical devices like touchscreens, PC monitors, mobile devices, and LCD screens. We refer to these as **interfac****es.** Interfaces must be assigned to a **station** in order to run applications.