7 einfache Regeln für die Erstellung eleganter UI -Interaktionen

exquisites UI -Interaktionsdesign: Gewinnen Sie mit Eleganz, anstatt

zu zeigen

Schlüsselpunkte

• Die Eleganz des UI-Interaktionsdesigns besteht darin, einen reibungslosen, benutzerfreundlichen Übergang zu gewährleisten, um Benutzeroperationen und nicht ausgefallene Ablenkungselemente zu unterstützen.
• Mikrointeraktionen wie Dropdown-Menüs oder Produktdetails anzeigen sollten sorgfältig entwickelt werden, um die Benutzerfreundlichkeit zu verbessern und positive emotionale Reaktionen von Benutzern auszulösen.
• Schlüsselregeln für die Erstellung von eleganten UI -Interaktionen sind: Vernommen von Übergängen, aber die Verwendung von Toggle -Switches anstelle von Schaltflächen; Betrieb in einer Reihe von Operationen;
• Je mehr die UI -Interaktion den physischen Gesetzen der realen Welt entspricht, desto natürlicher und eleganter fühlt sie sich an. Es ist entscheidend, diese Interaktionen zu testen und zu optimieren, um sicherzustellen, dass sie intuitiv, konsistent, effizient sind und den Benutzern ein angemessenes Feedback geben.

Der neue Begriff "interaktives Design" wurde eng mit dem UX -Designprozess verbunden. Nach 2015 reicht es nicht mehr aus. Heute sind Wörter wie "Slide", "Bounce" und "Bounce Back" Teil der Diskussion darüber geworden, wie gute Benutzeroberflächen funktionieren.

Auf dem Gebiet der Interaktion - wie teure Uhren - bedeutet „glamouröser“ jedoch nicht unbedingt „Eleganz“. Während wir vielleicht neugierig auf die Komplexität dieser ausgefallenen Uhr (Bild) unten sind, vermute ich, dass nur wenige von uns sie wirklich tragen möchten. In unserem Schnittstellendesign überwiegt die natürliche Eleganz fast immer die Dekoration.

Wenn Sie so kreativ sind wie ich, ist es leicht, ausgefallene Interaktionen zu schaffen, nur um Ihre Website moderner und engagierter zu machen. Natürlich wissen wir in unseren Herzen, dass dieser Ansatz eine der zuverlässigsten Möglichkeiten sein kann, die gesamte Benutzererfahrung zu stören.

Ich fand es also sehr wichtig, mich auf die reibungslosen, erfreulichen Animationen zu konzentrieren, die unsere Benutzer kaum bemerken. Zu dieser Zeit entfernen sich unsere Animationen vom Rampenlicht und unterstützen das, was der Benutzer ausführen versucht.

Warum ist das wichtig?

Warum verbringt Apple so viel Zeit und Geld für Verpackungen aus, die oft sehr schnell in Recyclingbehälter geworfen werden? Warum passen Luxusauto -Unternehmen den Abschluss der Türen an?

Dies liegt daran, dass wir feststellen, dass subtile, scheinbar unwichtige Details einen unverhältnismäßigen Einfluss auf ein gutes Design haben und die UX von "gut" bis "ausgezeichnet" erhöhen können.

bereichern Sie Ihre Website mit wunderschön gestalteten "Mikrointeraktionen", die es nicht nur einfacher zu verwenden, sondern auch positive Emotionen unter den Benutzern auszulösen (genau wie das Öffnen einer Apple-Box). Erleben Sie diese Emotion bedeutet, mehr Dopamin zu konsumieren, was ihnen tatsächlich hilft, von Ihrer Website/App abhängig zu werden.

Was ist "Mikro-Interaktion"?

Wenn der Benutzer eingibt (z. B. Klicks, Ziehen, Inhalte eingeben), reagiert Ihre Website - dies ist die Interaktion. Dies ist eine Möglichkeit für Benutzer, mit Ihrer Website zu kommunizieren, daher ist dies Teil des Gesprächs. Wenn Sie den Verhaltensfluss von Benutzern auf Ihrer Website entwerfen, können Sie immer verschiedene Arten von Interaktionen verwenden:

1. Navigationsinteraktion: Wenn der Benutzer schließlich eine brandneue Seite/einen brandneuen Status eingibt.
2. Modale Interaktion: Wenn der aktuelle Status der Website eingefroren ist und ein temporärer Zustand darüber angezeigt wird (z.
3. microinteraction: Wenn Sie nur einzelne Elemente innerhalb der Seite auf die Benutzereingabe reagieren möchten, zeigen Sie beispielsweise ein Dropdown-Menü an oder können Sie weitere Details des Produkts anzeigen.

Wie machen wir diese Mikrointeraktionen eleganter?

Eine Website sollte sich wie ein Konzert interaktiver Schnittstellenelemente anfühlen und zusammenarbeiten, um Sie zu beeindrucken. Eleganz ist das Schlüsselkriterium, um diesen Eindruck zu machen. Es ist zwar schwierig, Eleganz in rein technischen Begriffen zu definieren, aber wir können einige logische Tricks verwenden, um elegante Interaktionen zu erstellen. Schlüssel Regel Nr. 1 - Kein sofort Sprung

Die Idee ist einfach - Verwenden Sie immer Übergänge, wenn Sie Elemente auf einer Seite ändern. Dies bedeutet, dass Ihre GUI keinen schnellen Schnitt geben sollte. Jedes Element, das erscheint, verschwindet oder verwandelt wird, sollte mit Lockern oder/und Animationen implementiert werden.

Dies hilft dem Benutzer, sich auf den Bereich zu konzentrieren, auf den sie sich konzentrieren sollen. Dies schafft natürlich auch ein Gefühl eines eleganten und konsequenten Flusses.

### Regel 2: Toggle Switch ist besser als die Taste

Zu Hause verwenden Sie normalerweise denselben Schalter, um das Licht ein- und auszuschalten. Das gleiche Konzept gilt für die Umschaltsteuerungen auf Ihrer Website. Wenn ein Umschaltungssteuerung einen neuen Zustand eines bestimmten Elements auslöst, sollte die Steuerung mit demselben

diesen Zustand zurückrollen.

Darüber hinaus sollten nach Fitz's Law solche Kontrollen wenig Anstrengungen erfordern, um schnell zwischen den Staaten und außerhalb der Zustände zu wechseln. ### Regel 3: Trigger sollten in der Nähe

sein

Der Übergang erfordert immer einen Auslöser. Bei der Interaktion konzentrieren sich unsere Benutzer normalerweise auf dieses Triggerelement. Dies bedeutet, dass der Übergang bei

oder sehr nahe am

-Rigger beginnen muss. Wenn Sie den Übergang zu weit vom Triggerelement entfernt beginnen, ist es für Benutzer einfach, ihn zu verpassen, und der Prozess wird unterbrochen.

Zusätzlich sollte sich der Übergang normalerweise vom Trigger auf die Aufmerksamkeit Ihres Benutzers ausbreiten. Der Trick ist einfach - Sie führen die Augen des Benutzers vom Abzug zu dem Ort, an dem er den nächsten Schritt gehen soll. Auf diese Weise verliert der Benutzer den Fokus nicht und wird direkt dorthin gelangen, wo Sie sie möchten.

### Regel 4: Verwenden Sie die natürliche Übergangszeit

Die Übergangszeit definiert die Dauer der Animation. Das Hauptproblem bei der Zeit ist, dass es keinen Zauberstab gibt, der dies kann. Wenn Sie Ihren Übergang zu lang machen, werden Benutzer, die dieselbe Interaktion häufig oder schnell wiederholen, einen Schmerzpunkt.

hingegen, wenn es zu kurz ist, wird es sich unnatürlich anfühlen - oder der Benutzer kann es insgesamt verpassen. Leider können Sie nur Ihre Zündaugen und Intuition verwenden, um den Übergang zu bewerten. Der beste Rat, den ich gefunden habe, ist nicht, dass alle Übergänge die gleiche Zeit haben. Versuchen Sie es einfach beiläufig und finden Sie den richtigen Gleichgewichtspunkt. Beachten Sie auch, dass selbst der Unterschied von 0,05 Sekunden wichtig ist.

### Regel 5: Der Übergangsrollback sollte das Gefühl der Kontrolle des Benutzers nicht zerstören

Manchmal ändern Benutzer während des Übergangsprozesses schnell ihre Meinung. In diesen Fällen ist die Übergangsreaktionsfähigkeit von entscheidender Bedeutung. Wenn der Benutzer die letzte Interaktion abgebrochen hat (z. B. zwei Klicks auf die Trigger -Schaltfläche), sollte die Übergangsanimation sofort umgekehrt werden. Wenn nicht, verlieren unsere Benutzer sofort die Kontrolle. Darüber hinaus werden Sie Ihre Benutzer glauben, dass sie etwas falsch machen.

### Regel 6: Konzentrieren Sie sich immer automatisch auf den nächsten Vorgang in einer Reihe von Operationen

Diese Technik richtet sich an die Interaktion von Benutzern, die eine Reihe von Aktionen ausführen. Beim Entwerfen solcher Sequenzen sollten Sie immer unnötige Interaktionen vermeiden und sich immer auf die nächste Steuerung in der Sequenz konzentrieren. Das grundlegendste Beispiel für diese Interaktion ist die Taste [bearbeiten] , die ein Formular öffnet und sich auf magische Weise auf das erste Feld konzentriert, damit der Benutzer nicht manuell klicken muss.

### Regel Nr. 7: Sagen Sie dem Benutzer immer, wann er

vervollständigt muss

Der Benutzer sollte immer in der Lage sein zu identifizieren, wenn die Interaktion abgeschlossen ist. Wenn sich Ihre Interaktion bei der Fertigstellung nicht in gewisser Weise ändert, sollten Sie immer eine visuelle Feedback implementieren und dem Benutzer "Hey, Sie sind fertig!" Wenn Sie dies überspringen, wiederholen Benutzer dieselbe Aktion mehrmals, machen Sie Fehler und zerstören möglicherweise sogar etwas Wertvolles.

Wenden Sie diese Tipps an Kurz gesagt, Sie können diese Tipps als Cheat-Blätter für Mikrointeraktionen auf Ihrer Website verwenden. Es sollte Ihnen helfen, die Details der Interaktion vor der Implementierung der Micro -Interaktion zu entwerfen.

Es besteht jedoch eine hohe Wahrscheinlichkeit, dass Sie beim ersten Mal keine Perfektion erreichen können. In diesem Fall müssen Sie sich an Ihre eigene Situation anpassen - seien Sie also bereit, es ein wenig zu geben. Und ... schließlich gibt es einen weiteren Vorschlag für Sie. Je mehr Ihre Interaktionen den Gesetzen der realen Physik befolgen, desto natürlicher und elegant sind sie im Allgemeinen.

Ich wünsche Ihnen eine glückliche Animationsproduktion!

häufig gestellte Fragen zur Erstellung eleganter UI -Interaktionen

Welche Schlüsselprinzipien müssen beim Entwerfen von UI -Interaktionen berücksichtigt werden?

Beim Entwerfen von UI -Interaktionen halten Sie den Benutzer unbedingt im Auge. Die Interaktion sollte intuitiv und leicht zu verstehen sein. Konsistenz ist auch der Schlüssel - Benutzer sollten nicht erraten, wie sie mit Ihrer Schnittstelle interagieren. Die Interaktion sollte dem Benutzer auch Feedback geben und ihn wissen lassen, dass ihre Vorgänge identifiziert und verarbeitet werden. Schließlich sollte die Interaktion effizient sein und die Schritte minimieren, die Benutzer ausführen müssen, um ihre Ziele zu erreichen.

Wie kann meine UI -Interaktion attraktiver werden?

Um Ihre UI -Interaktion attraktiver zu machen, sollten Sie Animationen hinzufügen. Animation kann die Interaktion energischer anfühlen und dem Benutzer auch wertvolles Feedback geben. Verwenden Sie jedoch unbedingt Animationen mit Vorsicht und lassen Sie sie nicht von der Hauptaufgabe ablenken. Darüber hinaus kann angenommen werden, dass ein solid- oder haptisches Feedback verwendet wird, um die Interaktion zu verbessern.

Welche häufigen Fehler sollten beim Entwerfen von UI -Interaktionen vermieden werden?

Einige häufige Fehler, die beim Entwerfen von UI -Interaktionen vermieden werden sollten, sind die Interaktion zu komplex, nicht genügend Feedback für den Benutzer und Inkonsistenz. Zu komplizierte Interaktionen können Benutzer verwirren und Ihre Benutzeroberfläche schwierig machen. Das Mangel an Feedback kann die Benutzer nicht sicher sein, ob ihre Handlungen identifiziert wurden. Inkonsistenz kann Ihre Schnittstelle unvorhersehbar und frustrierend machen.

Wie testet ich die Wirksamkeit meiner UI -Interaktion?

Sie können die Effektivität der UI -Interaktion durch Benutzertests testen. Dies beinhaltet die Beobachtung der Interaktion des Benutzers mit der Schnittstelle und das Sammeln von Feedback. Sie können auch Analyse -Tools verwenden, um zu verfolgen, wie Benutzer mit der Schnittstelle interagieren und schwierige oder verwirrende Bereiche identifizieren.

Wie verbessert man die Zugänglichkeit der UI -Interaktion?

Um die Zugänglichkeit von UI -Interaktionen zu verbessern, überlegen Sie, wie Benutzer mit unterschiedlichen Funktionen mit Ihrer Schnittstelle interagieren. Stellen Sie beispielsweise sicher, dass Ihre Interaktionen die Tastatur verwenden können, damit Benutzer, die die Maus nicht verwenden können, auch verwenden können. Stellen Sie außerdem sicher, dass Ihre Interaktionen mit Bildschirmlesern und anderen Hilfstechnologien kompatibel sind.

Wie kann man das Geschichtenerzählen in meine UI -Interaktion einbeziehen?

Geschichtenerzählen können in Ihre UI -Interaktion aufgenommen werden, indem Erzählungen um Benutzerreisen erstellt werden. Dies kann durch die Verwendung von Animationen, Klängen und visuellen Hinweisen erreicht werden, um den Benutzer durch Interaktionen zu führen.

Was sind die Ressourcen, um mehr über die UI -Interaktion zu erfahren?

Es gibt viele Ressourcen, um mehr über die UI -Interaktion zu erfahren. Einige beliebte Ressourcen umfassen Online -Kurse, Blogs und Bücher zu diesem Thema. Sie können auch viel lernen, indem Sie die UI -Interaktionen beliebter Anwendungen und Websites untersuchen.

Wie wichtig ist die Geschwindigkeit in der UI -Interaktion?

Geschwindigkeit ist bei der UI -Interaktion sehr wichtig. Benutzer erwarten, dass Interaktionen reaktionsschnell und schnell sind. Jede Verzögerung kann zu Frustration führen und dazu führen, dass der Benutzer die Aufgabe aufgibt.

Wie kann man Farben verwenden, um meine UI -Interaktion zu verbessern?

Farben können verwendet werden, um die UI -Interaktion zu verbessern, indem wichtige Elemente aufmerksam gemacht werden, was den Status angibt und Feedback bereitstellt. Es ist jedoch wichtig, Farben sorgfältig und konsequent zu verwenden und Farbblindheit in Ihrem Design zu berücksichtigen.

Wie kann man mit dem Trend der UI -Interaktion Schritt halten?

Um mit dem Trend der UI -Interaktion Schritt zu halten, folgt es am besten, den Blogs der Branche zu verfolgen, an Designtreffen teilzunehmen und der Online -Community von UI -Designern beizutreten. Sie können auch viel lernen, indem Sie UI -Interaktionen zwischen neuen und beliebten Apps und Websites studieren.

Das obige ist der detaillierte Inhalt von7 einfache Regeln für die Erstellung eleganter UI -Interaktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!