To download the app, visit: [tulip](https://<span translate=).co/library/apps/mobile-app-design-template/">Library
Dieser Artikel stellt vor, was die UI-Vorlage enthält und wofür sie verwendet werden kann.
Zweck
Der Zweck dieser App besteht darin, App-Entwicklern dabei zu helfen, benutzerfreundliche, einheitliche und optimierte mobile Anwendungen zu erstellen. Indem Apps unter Berücksichtigung der mobilen Benutzererfahrung entwickelt werden, sind sie auf mobilen Geräten nützlicher.
Die App liefert ein Beispiel dafür, wie eine Tulip-Anwendung aussieht, und zeigt gängige Schrittlayouts, die in Anwendungen verwendet werden können. Sie skizziert die Elemente, die ein Basis-Layout, eine Kopfzeile und eine Fußzeile enthalten sollten, und erleichtert App-Entwicklern so den Einstieg in die Erstellung von Tulip-Anwendungen. Die Vorlage vereinfacht die App-Erstellung erheblich, da App-Entwickler Schrittlayouts per Kopieren und Einfügen in ihre Anwendungen übernehmen können. Dies spart nicht nur Zeit, sondern gewährleistet auch ein einheitliches Erscheinungsbild aller Apps, die anhand dieser Anleitung erstellt werden.
Einrichtung
Die Auflösung ist für mobile Apps aufgrund der großen Bandbreite an Bildschirmgrößen auf verschiedenen Geräten von entscheidender Bedeutung. Die App bietet derzeit zwei Optionen für mobile Einstellungen: „Mobile Landscape“ und „Mobile Portrait“. Für neuere Mobilgeräte empfehlen wir die Verwendung der Auflösungen 19,5:9 im Hochformat und 19,5:9 im Querformat.
Funktionsübersicht
Die ersten 6 Schritte dienen als Design-Leitfaden und zeigen die in den Anwendungen verwendeten Farben, Schaltflächen, Schaltflächensymbole und die Typografie. Durch die Definition dieser Elemente wird es einfacher, eine einheitliche Benutzeroberfläche unternehmensweit oder instanzweit zu gewährleisten.
Im Schritt „Farben“ können Nutzer alle bei der Anwendungserstellung verwendeten Farben zusammen mit den entsprechenden Hex-Codes einsehen. Wenn eine Farbänderung über mehrere Schritte hinweg angewendet werden muss, ist es möglich, jede Farbe als Variable zu speichern, um die Konsistenz in der gesamten App zu gewährleisten.
In den Schritten „Schaltflächen“ und „Schaltflächensymbole“ werden häufig verwendete Schaltflächen für Apps im hellen und dunklen Modus sowie die dazugehörigen Symbole definiert. Schaltflächensymbole können zusammen mit Text verwendet werden, um die Lesbarkeit zu verbessern und Platz zu sparen, wenn die Bedeutung des Symbols sofort ersichtlich ist. Jedes Symbol sollte über alle App-Schritte hinweg und idealerweise über alle Apps im Arbeitsbereich hinweg eine einheitliche Bedeutung haben.
Der letzte Schritt in diesem Abschnitt ist der Schritt „Typografie“, in dem die Schriftgrößen und -stile für Titel und Fließtexte festgelegt werden. Bei mobilen Apps wird empfohlen, die Schriftgröße über 20px zu halten und einen hohen Kontrast zum Hintergrund zu gewährleisten, um die Lesbarkeit zu verbessern.
Der nächste Abschnitt hilft App-Entwicklern dabei, das Basis-Layout zu entwerfen, das am besten zu ihrer App passt. Er bietet verschiedene Kopf- und Fußzeilen, die kopiert und in das Basis-Layout eingefügt werden können. Das Hinzufügen einer Navigationsleiste zum Basis-Layout verbessert den Arbeitsablauf der Nutzer, da sie so zu verschiedenen Schritten springen, die Seite aktualisieren oder den Status der Maschinen überprüfen können. Der App-Entwickler kann zwischen einem Basis-Layout mit hellem oder dunklem Design wählen.
Die App enthält außerdem eine Reihe von Schritten für Schrittvorlagen und eine Reihe von Schritten für Schrittlayouts. Dazu gehören Menüs, Modalfenster, Arbeitsanweisungen, Bildaufnahmen und mehr.
Weiterführende Informationen
Informationen zu Best Practices für das App-Design finden Sie in diesem Artikel.
Weitere Informationen zum Entwerfen von Anwendungen für mobile Geräte finden Sie in der Community-Diskussion zu Best Practices für mobile UI/UX.