Verwenden Sie die Symbolkräfte in Ihren Formularen

Ich habe kürzlich ein Video von der Invision App zum Erstellen flexibler Formulare gesehen: https://www.invisionapp.com/blog/creating-flexible-forms-sketch/

Sie haben tolle Tipps und ich kann Ihnen nur empfehlen, es sich anzusehen. Ich arbeite an vielen Formularseiten und möchte noch ein wenig weiter gehen, um Ihnen zu zeigen, wie ich meine Formulare eingerichtet habe.

Schritt 1: Beginnen Sie mit den Grundlagen

Erstellen Sie Ihren Beschriftungsstil, Ihr Eingabefeld und Ihren Eingabetextstil.

Ich habe mir überlegt, ob ich ein Symbol als Eingabestil verwenden soll. Sie könnten einen Hilfstext und einen Eingabetext haben. Der Vorteil ist, dass Sie den Status des Texts mit den Außerkraftsetzungen leicht ändern können. Der Nachteil ist, wenn Ihr Text länger als das Symbol ist, müssen Sie die Breite des Textbereichs erhöhen.

Im obigen Fall habe ich gerade im rechten Bereich Textstile für die Beschriftung und die Eingabe erstellt. Sie können zwei Textfelder einfügen, eines mit Hilfstextstil und dann mit einem Eingabetextstil. Wenn es sich dann um ein Symbol handelt, können Sie die Leertaste in dem Feld drücken, das Sie nicht möchten.

Schritt 2: Erstellen Sie die Zustände Ihres Eingabefelds

Hier müssen Sie über die verschiedenen Zustände Ihres Formulars nachdenken. Der aktive Zustand, der abgeschlossene Zustand, der Fehlerzustand und möglicherweise die Fehlermeldung.

Beginnen wir also damit, das Eingabefeld in ein eigenes Symbol zu unterteilen.

Dann erstellen Sie die verschiedenen Zustände. Ich habe in allen das gleiche Grundkastensymbol verwendet. Wenn ich mich dann entscheide, das Kästchen in eine Linie umzuwandeln, wird es quer reflektiert.

Da mein Eingabefeld nur geändert werden soll, wenn es aktiv ist, habe ich nur das aktive Feldsymbol erstellt. Ich wollte, dass mein Inline-Fehler und mein vollständiger Status außerhalb der Box liegen. Also habe ich ein Symbol am Ende meines Hauptformulars hinzugefügt und es auf der rechten Seite angeheftet.

Sie werden im nächsten Schritt sehen, warum ich das getan habe.

Schritt 3: Erstellen Sie die verschiedenen Arten von Eingabefeldern

Dies kann Suchfelder, Dropdown-Listen und Datumsauswahl enthalten. Es gibt viele andere Arten von Feldern, die Sie erstellen können. In meiner Firma gibt es ungefähr 8 verschiedene Arten von Eingabefeldern.

Ich verwende in allen Eingabetypsymbolen dasselbe Basis-Eingabefeldsymbol. Wenn ich auf diese Weise das grundlegende Eingabefeld ändere, wird es über die Symbole hinweg wiedergegeben.

Ich weiß, dass Sie einige dieser Symbole leicht kombinieren können. Zum Beispiel: Symbolsymbole für die linke Hand und Symbolsymbole für die rechte Hand. Beim Erstellen eines Formulars ist es einfacher, den Typ des Eingabefelds auszuwählen. Anstatt zu versuchen, alle verschiedenen Optionen für den gewünschten Eingabetyp zu finden.

Ich wollte, dass der Fehler und die korrekten Symbole außerhalb des Haupteingabefelds ein Dropdown-Menü anzeigen oder eine Datumsauswahl abgeschlossen ist, ohne dass die Symbole kollidieren.

Schritt 4: Erstellen Sie Ihr Formular

Jetzt können Sie mit einem Symbol die Status und eindeutigen Eingabefelder erstellen.

Fazit

Es gibt keine perfekte Lösung, die für alle funktioniert. Invision eingerichtet gibt es ein wenig anders, weil ihre Beschriftungen durch den Fehlerstatus beeinflusst werden. So können Sie entscheiden, was für Sie und Ihre Formulare am besten funktioniert.

Schon als ich diesen Artikel schrieb, dachte ich über bessere Möglichkeiten nach, um das zu verbessern, woran ich gerade arbeite. Es gibt so viel zu tun, um effektivere Formulare zu erstellen, und das könnte die Art und Weise ändern, wie Sie Ihr Dokument einrichten.

Hoffe, dies wird Ihnen helfen, die beste Lösung für Sie oder Ihr Team zu finden.