Design-Vorlage

::: (info) () Um die App herunterzuladen, besuchen Sie: Bibliothek:::

Zweck

In diesem Artikel wird vorgestellt, was die Designvorlage enthält und wofür sie verwendet werden kann.

Welchem Zweck dient die Designvorlage?

Diese Designvorlage unterstützt Anwendungsentwickler bei der Erstellung benutzerfreundlicher, konsistenter und schlanker Anwendungen.

Sie bietet weniger erfahrenen Anwendungsentwicklern eine brauchbare Vorlage, mit der sie anfangen können zu arbeiten. Die Anwendung bietet ein Beispiel dafür, wie eine Tulip-Anwendung aussieht und was einige gängige Schritt-Layouts sind, die sie in ihren Anwendungen verwenden können. Sie zeigt auch, welche Elemente ein Basislayout, eine Kopf- und eine Fußzeile enthalten sollte, so dass der Einstieg in eine Tulip-Anwendung einfach ist.

Sie hilft auch erfahreneren Entwicklern, die Entwicklung zu beschleunigen und eine einheitliche Schnittstelle zu erhalten. Die Vorlage vereinfacht die Entwicklung von Anwendungen, indem sie es dem Entwickler ermöglicht, Step-Layouts zu kopieren und in seine Anwendung einzufügen. Auf diese Weise spart die App nicht nur Zeit für den Entwickler, sondern bietet auch ein einheitliches Erscheinungsbild für alle mit diesem Leitfaden erstellten Apps. Im ersten Schritt der Anwendung kann der Benutzer die Farben, Schaltflächen, Schaltflächensymbole und die Typografie sehen, die in den Anwendungen verwendet werden. Durch die Definition dieser Elemente wird es einfach, eine einheitliche Schnittstelle für jedes Unternehmen oder jede Instanz zu erhalten.

Überlegungen und Anwendungsfälle

Die wichtigsten Grundsätze bei der Erstellung dieser Vorlage:

Einfachheit: Eine einfache Designvorlage hilft Anwendungsentwicklern, die Designrichtlinien für ihr Unternehmen zu verstehen und sich daran zu erinnern. Außerdem bietet sie ein sauberes Design, das den Anwendungsbenutzern die Navigation in der Anwendung erleichtert.

Leicht anpassbar: Die Vorlage ist so konzipiert, dass jeder Benutzer seine UI-Vorlage in nur wenigen Schritten erstellen kann. Die Grundfarben der Designvorlage sind verschiedene Grautöne, eine grüne "Erfolgs"-Farbe und eine rote "Zerstörungs"-Farbe. Darüber hinaus verwenden wir Blau für die primären Schaltflächen. Indem Sie dieses Blau in die Markenfarbe Ihres Unternehmens ändern, können Sie eine individuelle Designvorlage erstellen, die Sie verwenden können.

Geeignete Kontraste für die Anwendung in industriellen Bereichen: Es ist wichtig, dass Ihre Anwendung nicht nur gut aussieht, sondern auch gut funktioniert. Bei der Gestaltung der Designvorlage war es wichtig, dass die App für den Einsatz in der Werkstatt geeignet ist. Das bedeutet, dass die Farbkontraste und die Schaltflächen groß genug sind, die Schriftgrößen klar und lesbar sind und die Schrittanordnungen einfach und leicht zu implementieren sind.

Klare und einheitliche Beschriftungen: Oftmals arbeitet ein Benutzer mit mehreren Anwendungen, daher ist es wichtig, dass die gleichen Beschriftungen in allen Anwendungen die gleiche Bedeutung haben. Aus diesem Grund haben wir uns überlegt, Schaltflächen und Schaltflächensymbole so zu definieren, dass die erforderlichen Aktionen so klar wie möglich sind.

Funktionsorientiertes Design: Die Schrittvorlagen in der Designvorlagen-Anwendung basieren auf häufigen Anwendungsfällen und bewährten Verfahren, die in Tulip-Anwendungen zu sehen sind.

Funktionsübersicht

Allgemeiner ÜberblickIm ersten Schritt der Anwendung kann der Benutzer einen allgemeinen Überblick über den Zweck der Anwendung und eine Inhaltszusammenfassung lesen.

Designleitfäden und App-Elemente (Farben, Schaltflächen, Schaltflächensymbole, Typografie) Nach dem allgemeinen Überblick dienen die folgenden vier Schritte als Designleitfaden für die Erstellung der Anwendung. Im Schritt Farben kann der Benutzer alle bei der Anwendungserstellung verwendeten Farben mit ihren Hex-Codes sehen. In den Schritten Schaltflächen und Schaltflächensymbole werden alle häufig verwendeten Schaltflächen für Anwendungen im hellen und dunklen Modus mit den dazugehörigen Symbolen definiert. Der letzte Schritt dieses Abschnitts ist der Schritt Typografie, in dem die Schriftgrößen und -stile für Titel und Absatztexte definiert werden.

Anleitungen für das Basislayout (Kopfzeilen, Fußzeilen, Basislayout für hellen und dunklen Hintergrund) Der zweite Abschnitt hilft App-Erstellern, das Basislayout zu entwerfen, das am besten zu ihrer App passt. In den Schritten werden verschiedene Kopf- und Fußzeilen aufgelistet, die sie per Copy-and-Paste in das Basislayout einfügen können. Der App-Builder kann auch zwischen dem hellen und dem dunklen Thema wählen.

Schritt UI-Vorlagen