A brief introduction to bionic design in Internet web design

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
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)

Recommend

MySQL 8.0.12 installation steps and basic usage tutorial under Windows

This article shares the installation steps and us...

Tips for importing csv, excel or sql files into MySQL

1. Import csv file Use the following command: 1.m...

Tutorial on how to install and use Ceph distributed software under Linux

Table of contents Preface 1. Basic Environment 1....

HTML reuse techniques

HTML reuse is a term that is rarely mentioned. Tod...

How to completely delete the MySQL 8.0 service under Linux

Before reading this article, it is best to have a...

Native JS to implement hover drop-down menu

JS implements a hover drop-down menu. This is a s...

Writing a shell script in Ubuntu to start automatically at boot (recommended)

The purpose of writing scripts is to avoid having...

CSS: visited pseudo-class selector secret memories

Yesterday I wanted to use a:visited to change the...

Vue implements verification code countdown button

This article example shares the specific code of ...

Two special values ​​in CSS are used to control the inherit and initial methods of the cascade

There are two special values ​​that can be assign...

Detailed explanation of the installation and configuration process of mysql8.018 on linux

Installation introduction under Windows: Check ou...

Detailed tutorial on installing Anaconda3 on Ubuntu 18.04

Anaconda refers to an open source Python distribu...

js to achieve sliding carousel effect

This article shares the specific code of js to ac...

MySQL SQL statement performance tuning simple example

MySQL SQL statement performance tuning simple exa...

Various transformation effects of HTML web page switching

<META http-equiv="Page-Enter" CONTENT...