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

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

Beispielcode für ein Mysql-SQL-Überwachungsskript für langsame Abfragen

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

Beispielcode für ein Mysql-SQL-Überwachungsskript für langsame Abfragen

Detaillierte Schritte zur Verwendung von Redis in Docker

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

Implementierung des WeChat-Applet-Nachrichten-Pushs in Nodejs

Detaillierte Erläuterung der Tomcat-Konfigurations- und Optimierungslösungen

Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten

Docker löst das Problem, dass das Terminal kein Chinesisch eingeben kann

Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3

Zusammenfassung und Analyse häufig verwendeter Docker-Befehle und Beispiele

MySQL-Unterabfragen und gruppierte Abfragen

Artikel empfehlen

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

Detaillierte Erläuterung des Mysql-Kommunikationsprotokolls

Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis

Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten

Eine einfache Möglichkeit, das Passwort in MySQL 5.7 zu ändern

So verwenden Sie & und nohup im Hintergrund von Linux

Lösung für das Problem des IP-Verlusts durch das Kopieren der virtuellen Centos8-Maschine unter VMWARE

Linux CentOS6.5 yum installiere mysql5.6

Methode zum Erstellen eines Redis-Clusters basierend auf Docker

Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen

HTML-Tbody-Verwendung

So verwenden Sie Docker-Compose zum Erstellen eines ELK-Clusters

Eine kurze Diskussion über die Magie von parseInt() in JavaScript

Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Anfänger verstehen das MySQL-Deadlock-Problem anhand des Quellcodes