Normalisierte Benutzeroberfläche (UI) für Frontend-Entwickler Teil 1

Normalisiertes Benutzeroberflächendesign (UI) für Frontend-Entwickler

Als Front-End-Webentwickler ist es wichtig, das Konzept des normalisierten Benutzeroberflächendesigns (UI) zu verstehen. Bei diesem Ansatz werden Software-Workflows auf verschiedene Bildschirme aufgeteilt, um sicherzustellen, dass sich jeder Bildschirm auf eine bestimmte Aufgabe konzentriert. Dies vereinfacht die Benutzererfahrung, indem es Verwirrung reduziert und Interaktionen intuitiver macht.

Schlüsselkonzepte: Workflows, Bildschirme und Frames

Wenn wir über UI-Design nachdenken, berücksichtigen wir oft Funktionen, aber für eine normalisierte UI ist es sinnvoller, sich auf Folgendes zu konzentrieren:

1. Bildschirme: Dies sind Seiten oder Modalitäten in einer Webanwendung.
2. Frames: Dies sind Sätze von UI-Elementen, auf die zu einem bestimmten Zeitpunkt gleichzeitig zugegriffen werden kann. Sie stellen eine Teilmenge des potenziellen Inhalts eines Bildschirms dar.
3. Workflows: Hierbei handelt es sich um Abfolgen von Aktionen, die Benutzer ausführen und die das Wechseln zwischen verschiedenen Frames oder Bildschirmen beinhalten können.

Beispiel: Link-Navigation

Betrachten wir ein Beispiel mit Links, um diese Konzepte besser zu veranschaulichen:

Workflow mit Frames

1. Bildschirm 1: Der Benutzer startet auf der Hauptseite, wo ihm eine Liste häufig gestellter Fragen (FAQs) angezeigt wird. Jede FAQ ist zunächst minimiert und zeigt nur die Frage an. Dieser Zustand ist ein Frame, da er eine Teilmenge des Inhalts auf dem Bildschirm darstellt.

1. Aktion: Der Benutzer klickt auf eine Frage. Diese Aktion zeigt die Antwort auf demselben Bildschirm an und wechselt zu einem neuen Frame.

1. Aktion: Der Benutzer klickt erneut, um die Antwort auszublenden und zum ursprünglichen Frame zurückzukehren.

Workflow mit Bildschirmen

Betrachten Sie nun einen anderen Designansatz mit Bildschirmen:

1. Bildschirm 1: Der Benutzer startet auf der Hauptseite mit einer Liste von Fragen, aber anstatt innerhalb desselben Bildschirms zu erweitern, navigiert das Klicken auf eine Frage zu einer separaten Seite, auf der die Antwort angezeigt wird.

1. Aktion: Durch Klicken auf eine Frage gelangt der Benutzer zu einem neuen Bildschirm (oder Modal), der der Anzeige der vollständigen Antwort gewidmet ist.

Workflow-Diagramme

• Rahmenbasiertes Workflow-Diagramm: Hier ändert jede Aktion den Rahmen, ohne den Bildschirm zu verlassen.

• Bildschirmbasiertes Workflow-Diagramm: In diesem Design navigiert jede Aktion zu einem neuen Bildschirm.

Abschluss

Die Verwendung normalisierter UI-Designprinzipien und deren Visualisierung durch Workflow-Diagramme kann die Benutzeroberfläche intuitiver und benutzerfreundlicher machen. Unabhängig davon, ob Sie Frames innerhalb eines einzelnen Bildschirms verwenden oder zwischen Bildschirmen navigieren, besteht das Ziel darin, die Benutzererfahrung zu vereinfachen und Verwirrung zu vermeiden. Bleiben Sie dran für weitere Einblicke in das normale UI-Design!

Das obige ist der detaillierte Inhalt vonNormalisierte Benutzeroberfläche (UI) für Frontend-Entwickler Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!