Eine kurze Einführung in das bionische Design im Internet-Webdesign

Eine kurze Einführung in das bionische Design im Internet-Webdesign
Beim Stichwort Bionik-Design denken viele an die Erfindung des Flugzeugs, das Burj Al Arab in Dubai, Brustschwimmen und so weiter. Die besonderen Fähigkeiten lebender Organismen nachahmen und deren Struktur- und Funktionsprinzipien für die Konstruktion von Produktmaschinen nutzen.
Die Bionik umfasst biomimetische Morphologie, biomimetische Struktur, biomimetische Funktion, biomimetische Farbe, biomimetische Bilder und so weiter.
Unter bionischem Design versteht man hierbei die interaktive, das reale Leben nachahmende Gestaltung im Internetbereich.
1. Pufferzone, Anti-Ermüdung
Bionisches Design des Internets 123WORDPRESS.COM
Das Bild oben zeigt eine Fußgängerbrücke. Beim Gehen auf einer solchen Brücke verspüren Sie möglicherweise keine Ermüdung, da sie eine Pufferzone (roter Kreis im Bild) hat, die die langen Schritte in zwei kürzere Abschnitte unterteilt, was die Akzeptanz für Fußgänger erleichtert und psychischen Druck und Angst verringert. Die Stufen zum Besteigen des Berges sind auf die gleiche Weise angelegt. Stellen Sie sich vor, die Pufferzone würde aufgehoben und eine Treppe vom Fuß des Berges direkt zum Gipfel gebaut. Wie viele Menschen würden diesen Berg besteigen? Fußgänger würden einfach fernbleiben.
Abbildung 1 zeigt die Mini-News-Schnittstelle des Tencent-Clients und Abbildung 2 die Schnittstelle nach dem Entfernen der Leerzeichen und gepunkteten Linien. Das Lesen der Nachrichten in Abbildung 1 fühlt sich angenehm und natürlich an, während das Lesen der Nachrichten in Abbildung 2 etwas ermüdend ist und es schwierig ist, sich auf eine Nachricht zu konzentrieren. Nachdem der Benutzer mehrere Nachrichten gelesen hat, wird ein leerer Puffer (der rote Bereich im Bild) mit einer kurzen visuellen Pause angezeigt, um die visuelle Ermüdung des Benutzers zu verringern und somit das Benutzererlebnis zu verbessern. Als Benutzer ist Ihnen dieses Detail vielleicht nicht aufgefallen, aber es ist tatsächlich in den Verzeichnis- oder Listenseiten vieler Websites vorhanden.
2. Schalten Sie beim Ansehen eines Films das Licht ein und aus
Beim Ansehen eines Films im Kino werden alle Lichter ausgeschaltet, um eine ansprechende Atmosphäre für das Publikum zu schaffen. Wenn der Film zu Ende ist, geht das Licht an, die Atmosphäre wird laut und einige Leute beginnen, über den Film zu diskutieren.
Tatsächlich bieten Youku, Xunlei usw. beim Online-Anschauen von Videos eine „Licht aus“-Funktion, um den Benutzern ein besseres Erlebnis zu bieten. Wenn das Licht ausgeschaltet wird, wird die gesamte Seite bis auf das Video dunkel, sodass die Benutzer in den Film eintauchen können. Wenn jedoch der Abspann des Films erscheint, wird die Seite nicht automatisch beleuchtet (d. h. das Licht wird nicht eingeschaltet), und der Benutzer schließt die Seite und führt zu diesem Zeitpunkt andere Vorgänge aus. Wenn das Licht am Ende des Films automatisch eingeschaltet wird, ist das Erlebnis für die Benutzer angenehmer. Nach dem Einschalten des Lichts können Benutzer Kommentare hinterlassen, verwandte Filmempfehlungen ansehen usw.
3. Online-Shopping
Im wirklichen Leben betreten die Kunden das Einkaufszentrum mit einem Einkaufswagen, wählen die gewünschten Artikel aus und gehen anschließend zur Kasse, um zu bezahlen. Dies ist jedoch nur ein Teil der Nutzer. Es gibt auch eine Gruppe von Menschen, die das Einkaufszentrum betreten, nur einen Artikel mitnehmen und dann zur Kasse gehen, um zu bezahlen, ohne einen Einkaufswagen zu benutzen. Solche Menschen sind keine Seltenheit.
In der Taobao Mall können Benutzer ein Produkt auswählen, das ihnen gefällt, und es sofort kaufen oder es in den Einkaufswagen legen und dann andere Artikel auswählen. Dieses Design entspricht ganz dem Einkaufsmodell im realen Leben und wird auch den unterschiedlichen Bedürfnissen der Benutzer gerecht. Auch die QQ Mall von Tencent verfügt über dieses Design; Amazon bietet nicht nur die Funktion „In den Einkaufswagen“, sondern auch das Einkaufen mit einem Klick, was den Online-Einkauf für Benutzer bequemer macht.
Es gibt viele Verhaltensweisen und Aktivitäten im Leben, die nachgeahmt und auf das Internet übertragen wurden und dort Erfolg hatten. Schenken Sie dem Leben mehr Aufmerksamkeit, dann werden Sie mehr Inspiration daraus schöpfen.

<<:  Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen von Minio und Java SDK

>>:  Verständnis und Beispielcode des Vue-Standardslots

Artikel empfehlen

Die neueste Installations- und Konfigurationsmethode für MySQL-5.7.21

1. Entpacken Sie das heruntergeladene MySQL-Kompr...

Vue erzielt einen nahtlosen Karusselleffekt

In diesem Artikel wird der spezifische Code von V...

css Alle Elemente ab dem n-ten abrufen

Der spezifische Code lautet wie folgt: <div id...

MySQL 5.7.19 neueste Binärinstallation

Laden Sie zunächst die Zip-Archivversion von der ...

Vue-Router erlaubt keine Navigation zum aktuellen Standort (/Pfad) Fehlerursachen und -behebungen

Inhaltsverzeichnis Fehlermeldung Ursache Fehlerde...

Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL

0. Bereiten Sie relevante Tabellen für die folgen...

Einführung und detaillierte Verwendung von React Fragment

Inhaltsverzeichnis Vorwort Motivation für Fragmen...

Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad

Inhaltsverzeichnis 1. Grundlegende Konfiguration ...

Erstellen einer KVM-Virtualisierungsplattform auf CentOS7 (drei Möglichkeiten)

KVM steht für Kernel-based Virtual Machine und is...

Analyse von MySQL-Lock-Wait- und Deadlock-Problemen

Inhaltsverzeichnis Vorwort: 1. Verstehen Sie Lock...

Lösung für das Problem der MySQL-Transaktionsparallelität

Ich bin während der Entwicklung auf ein solches P...

So fragen Sie die neueste Transaktions-ID in MySQL ab

Vorne geschrieben: Manchmal müssen Sie möglicherw...

Liste häufig verwendeter Escape-Codes für HTML: Größer als, Kleiner als, Leerzeichen, Anführungszeichen usw.

Die Tabelle sieht wie folgt aus: HTML-Quellcode E...

Detaillierte Erklärung der Verwendung von Vorlagen-Tags (einschließlich Zusammenfassung der Verwendung in Vue)

Inhaltsverzeichnis 1. Template-Tag in HTML5 2. Ei...

JavaScript zur Implementierung der Login-Schiebereglerüberprüfung

In diesem Artikelbeispiel wird der spezifische Ja...