A brief introduction to bionic design in Internet web design

When it comes to bionic design, many people will think of the invention of the airplane, the Burj Al Arab in Dubai, breaststroke and so on. Imitate the special abilities of living organisms and use their structural and functional principles to design product machinery.
Bionics covers biomimetic morphology, biomimetic structure, biomimetic function, biomimetic color, biomimetic image and so on.
The bionic design here refers to the interactive design in the Internet field that imitates real life.
1. Buffer zone, anti-fatigue
Bionic Design of the Internet 123WORDPRESS.COM

Bionic Design of the Internet 123WORDPRESS.COM

The picture above is a pedestrian bridge. You may not feel tired walking on such a bridge because it has a buffer zone (red circle in the picture), which divides the long steps into two shorter sections, making it easier for pedestrians to accept and reducing psychological pressure and fear. The steps for climbing the mountain are designed in the same way. Imagine if the buffer zone is eliminated and a staircase is built from the bottom of the mountain directly to the top of the mountain, how many people will climb this mountain? Pedestrians will simply stay away.

Figure 1 is the mini news interface of Tencent client, and Figure 2 is the interface after removing the blank space and dotted lines. Reading the news in Figure 1 feels comfortable and natural, while reading the news in Figure 2 is a bit tiring and it is difficult to focus on one piece of news. After the user has read several messages, there will be a blank buffer (the red area in the picture), with a brief visual pause, to reduce the user's visual fatigue and thus improve the user experience. Perhaps as a user, you have not noticed this detail, but it actually exists in the directory or list pages of many websites.
2. Turn on and off the lights while watching a movie

When watching a movie in a cinema, all lights are turned off to create an engaging atmosphere for the audience. When the movie ends, the lights turn on, the atmosphere becomes noisy, and some people start discussing the movie.

In fact, when watching videos online on Youku, Xunlei, etc., they provide a "lights off" function to give users a better experience. When the lights are turned off, the entire page becomes dark except for the video, allowing users to immerse themselves in the movie. However, when the end credits of the movie appear, the page does not automatically light up (that is, turn on the light), and the user will close the page and perform other operations at this time. If the lights are turned on automatically when the movie ends, it will give users a more considerate experience. After turning on the light, users can leave comments, view related recommended movies, and so on.
3. Online shopping

In real life, customers enter the mall with a shopping cart, select the items they need, and then go to the checkout counter to pay. However, this is only a part of the users. There is also a group of people who enter the mall, pick up only one item and then go to the checkout counter to pay without using a shopping cart. Such people are not rare.

On Taobao Mall, users can choose a product they like and buy it immediately, or add it to the shopping cart and then choose other items. This design is fully in line with the shopping model in real life, and also meets the various needs of users. Tencent's QQ Mall also has this design; Amazon not only provides the "add to cart" function, but also provides one-click shopping, making online shopping more convenient for users.
There are many behaviors and activities in life that have been imitated and applied to the Internet and have achieved success. Pay more attention to life and you will get more inspiration from it.

<<: CSS3 realizes various graphic effects of small arrows

>>: Detailed process of deploying MySQL with docker (common applications deployed with docker)

A brief introduction to bionic design in Internet web design

JavaScript function syntax explained

Solution to navicat automatically disconnecting from the database after a period of time

MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation

Detailed explanation of the process of deploying SpringBoot project through Docker plug-in in IDEA

Sample code for the test script for indexes and locks at RR and RC isolation levels

Detailed explanation of web page loading progress bar (recommended)

Example code for implementing auto-increment sequence in mysql

Vue Page Stack Manager Details

JavaScript to implement simple carousel chart most complete code analysis (ES5)

View MySQL installation information under Linux server

Recommend

Nginx forwarding based on URL parameters

Detailed explanation of the idea of xshell remote login to CentOS7 without password login

About ROS2 installation and docker environment usage

8 tips for Vue that you will learn after reading it

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Automatic file synchronization between two Linux servers

Hide div in HTML Hide table TABLE or DIV content css style

Learn Vue middleware pipeline in one article

Solution to the MySQL error "Every derived table must have its own alias"

Detailed explanation of the process of building and running Docker containers

61 Things Every Web Developer Should Know

React+Koa example of implementing file upload

Tutorial on logging into MySQL after installing Mysql 5.7.17

mysql 5.7.11 winx64 initial password change

Summary of uncommon js operation operators