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.

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.

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!