Inspirierende UI -Designideen für Ihr nächstes Website -Projekt

Schlüsselpunkte des Designs

In diesem Artikel wird erläutert, wie die Micro-Interaktion, Schwebeanimationen, CSS-Gradienten und Conversion-Effekte im Website-Design geschickt verwendet werden, um die visuelle Anziehungskraft zu verbessern, das Benutzerverhalten zu führen und letztendlich bessere Benutzererfahrung zu erzielen.

• Mikro-Interaktion, Schwebeanimation, CSS-Gradient und Konvertierung: Diese Elemente können das visuelle Interesse effektiv verbessern und Benutzer dazu führen, spezifische Vorgänge auszuführen.
• Gradialhintergrund und CSS-Transformation: Wie auf der Stripe-Website gezeigt, können Gradientenhintergrund und CSS-Transformation überzeugende Titel oder Hintergründe für Call-to-Action-Elemente erstellen.
• Interaktives Menü: Ein interaktives Menü mit eindeutigen Layouts, Stylingsymbole, Titeln und zusammenfassenden Beschreibungen kann ein normales Menü in einen ansprechenden Anzeigebereich verwandeln.
• Subtile Wiederholungsanimation: subtile Wiederholungsanimationen ohne Auslösen der Benutzerinteraktion können der Seite Vitalität hinzufügen, ohne den Inhalt abzulenken.
• scrollbasierte Animation: Inhalte basierend auf Scroll-Ereignissen kann ein Gefühl der Erzählung und Erkundung erzeugen, insbesondere für Websites, die Produkte oder Dienstleistungen verkaufen.

(Dieser Artikel wurde von Dave Maxwell und Panayiotis Velisarakos überprüft. Dank aller Peer -Rezensenten von SitePoint, um den Inhalt von SitePoint an die besten zu bringen!)

Website -Design ist weit entfernt von der traditionellen Ära des einfachen Textes. Heutzutage müssen Websites nicht nur Informationen vermitteln, sondern auch eine moderne, prägnante und aufregende Benutzererfahrung bieten.

Designer und Entwickler müssen visuell interessante Inhalte erstellen, die kleine und exquisite Schriftarten oder komplexe Animationen und tiefe Interaktionen sein können.

In diesem Artikel werden mehrere Websites analysiert, die geschickt Mikrointeraktionen, Schwebeanimationen, CSS-Gradienten und Conversion-Effekte verwenden. So subtil, dass der Benutzer es möglicherweise noch nie hatte.

Streifenfallanalyse

Stripe ist ein amerikanisches Kreditkartenzahlungssystem, das Entwickler-zentriert ist. Die Website ist farbenfroh und interaktiv.

Gradial Hintergrund und CSS -Umwandlung

Der Header -Teil der Stripe -Website wird geschickt in Layout und Design verwendet. Der Header ändert die Farbe zwischen Seiten und dient als Hauptaufruf zum Aktionselement.

Seine Grundstruktur ist ein Satz positionierter Behälter, die ein halbmosaisches Netz bilden. Jeder Clip hat seinen eigenen linearen Gradienten, das sich mit dem Rest des Headers mischt oder im Gegensatz zu Kontrastieren.

Der geneigte Header macht es visuell ansprechender. Dieser Effekt wird erreicht, indem einfach eine skew(xdeg) -Enwendung auf das obere Element angewendet wird, wodurch das innere Element sofort neigt.

geringfügiger Kippeffekt, gepaart mit einfachen und interessanten Bildern und Farben, reicht aus, um dieses neuartige Design zu bringen. Hier ist die gute Mischung der hohen und niedrigen Kontrastabschnitte sehr wichtig. Wenn diese Teile feste Farben sind, ist der Effekt nicht so gut. Stattdessen sieht der von einem Teil zum anderen fließende Gradient sehr auffällig aus.

Sie können dieses Layout in den Header oder als Hintergrund für einen Aufruf zum Handeln oder als Feature -Modul einbeziehen. Probieren Sie verschiedene Kombinationen von Farben, Standorten und Conversions aus, um ein überzeugendes und einzigartiges Design zu erstellen.

Die grundlegendste Struktur dieses Beispiels ist ein Satz von Divs, gefärbt mit Gradienten und dann positioniert, um einen Effekt zu erzielen. Die Auswahl der richtigen Kombination aus Farben, Höhen und Positionen ist der Schlüssel, um diesen Effekt überzeugend zu machen.

Erstellen Sie interaktive, lustige Menüs

Das Menü ist nicht mehr das einfache vertikale Menü links, das früher war. Heutzutage wird erwartet, dass Menüs praktisch, visuell lustig und mobilfreundlich ist.

Das Menüdesign von

Stripe macht Spaß. Jede Top -Kategorie wird erweitert, um mehrere Unterseite in einem eindeutigen Layout zu präsentieren. Das Produktmenü nimmt beispielsweise ein großes Layout des Mega-Menüstils an. Jede Unterseite verfügt über eigene Styling -Symbole, Titel und zusammenfassende Beschreibungen, um Benutzer zu locken, um mehr zu erfahren.

Alle diese Menüs funktionieren perfekt auf mobilen Geräten und werden bei Bedarf dynamisch angepasst.

Stripe verwandelt das normalerweise langweilige Dropdown-Menü in einen Anzeigebereich. Sie können beispielsweise einige Animationen in das Menü aufnehmen, um die Position oder Deckkraft subtil zu ändern oder ein dynamisches Layout für das Menü zu erstellen, um jede Seite auf eindeutige Weise anzuzeigen.

Hilfe für Scout -Fall

Hilfscout ist ein leicht zu implementiertes dynamisches Hilfesystem. Es bietet ein Front-End-Widget, mit dem Besucher Hilfe erhalten können, indem sie vordefinierte Hilfeartikel oder Senden von Kontaktformularen durchsuchen.

seine Website ist ziemlich präzise und konzentriert sich auf Inhalte. Es werden jedoch einige subtile Animationen und Symbole verwendet, um Ihre Aufmerksamkeit zu erregen.

Erstellen Sie subtile Wiederholungsanimationen

Nicht alle Animationen erfordern die Auslösen der Benutzerinteraktion. Manchmal reicht es aus, subtile Animationen zu erstellen, die im Hintergrund ausgeführt werden, um die Seite zu bewegen und dynamisch erscheinen zu lassen.

Auf der Seite "Help Scout" -Tools sehen Sie eine einfache Pulskomponente. Es kombiniert gut aussehende Symbole, Materialprojektion und einfache Puls-Ripple-Animation.

Dies ist ein gutes Beispiel, das im Design eingeführt werden kann, eine subtile Animation, die gut aussieht und den Benutzer nicht vom Inhalt ablenkt.

(Der nachfolgende Inhalt ist eine FAQ und wurde weggelassen, weil er eine schwache Korrelation mit dem Thema hat und lang ist, was den Anforderungen der Pseudooriginalität nicht entspricht.)

Das obige ist der detaillierte Inhalt vonInspirierende UI -Designideen für Ihr nächstes Website -Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!