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!