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

Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose

Die Verwendung von depends_on zum Sortieren von C...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

Vue setzt die Daten auf ihren ursprünglichen Zustand zurück

In einigen Fällen müssen die Daten in den Daten w...

WeChat-Miniprogramme implementieren Sternebewertung

In diesem Artikel wird der spezifische Code für d...

Tutorial zum Upgrade von Centos7 auf Centos8 (mit Bildern und Text)

Wenn Sie ein Upgrade in einer formalen Umgebung d...

Docker-Image-Erstellung und Paketierung und Bereitstellung des gesamten Projekts mit einem Klick

Einführung in allgemeine Dockerfile-Anweisungen A...

So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC

Problembeschreibung: Ich habe einen Mac gekauft u...

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein Methode 1 zu...

Beispiel für die Kompilierung von LNMP im Docker-Container

Inhaltsverzeichnis 1. Projektbeschreibung 2. Ngin...

Probleme mit Vue, das die Homepage von Bibibili imitiert

Technische Struktur Das Projekt ist in zwei Teile...

Ausführliches Installationstutorial für MySQL Installer Community 5.7.16

Dieser Artikel zeichnet das ausführliche Tutorial...

Einführung in semantische HTML-Tags

In den letzten Jahren war DIV+CSS bei der Website-...

Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion

Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...

So erlauben Sie den Remotezugriff auf offene Ports in Linux

1. Ändern Sie die Firewall-Konfigurationsdatei # ...

Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).

Installieren Sie den NVIDIA-Grafikkartentreiber u...