Two types of tab applications in web design

Two types of tab applications in web design

Case 2 : There are three tab designs on the Taobao homepage, but if you look closely, you will find that they are different. What is more confusing is why there are only 3 tab designs on the homepage, but they are different? Does one page require the intervention of multiple front ends?

Nowadays, tabs are widely used in web design, but they are generally divided into the following two types:

The first type is switching by clicking the mouse. In this case the tab has no link (but adds a More or More link in the selected tab area).

The second type is mouse hover switching. In this case, many tabs have links added, so a:hover should take effect, that is, there will be a slide down or color prompt when the mouse is docked. In fact, this is also the practice of providing appropriate feedback to users in Norman’s design philosophy.
In actual cases, we have seen some good designs, and also some designs that I do not agree with, which I would like to share briefly here.

Case 1 : Yahoo US homepage belongs to the first tab design, but pay attention to the box in the lower right corner.

Two types of tab applications in web design
Two types of tab applications in web design

The first tab is designed to be switched by clicking a button, without any additional links. (top)

Two types of tab applications in web design

The second tab design is a floating switch, but there is no a:hover to feedback the links on the tab. (flat)

Two types of tab applications in web design

The third tab design is a floating switch, adding a:hover feedback link on the tab. (top)

Case three : QQ pop-up window.

Two types of tab applications in web design

The most unpopular QQ pop-up window, there is no link feedback on the tab. I believe that a lot of qq.com traffic is innocently defrauded in this way. (flat)
Insert a paragraph: I have always had some complaints about the design of QQ pop-up windows. A space that can only hold 5 tabs actually indirectly holds 7, so a design for scrolling tabs left and right is necessitated. As for adding a seemingly insignificant but more conspicuous [You can drag the page card to sort], how much real value is there?

<<:  How to use environment variables in nginx configuration file

>>:  css3 animation ball rolling js control animation pause

Recommend

Vue detailed explanation of mixins usage

Table of contents Preface 1. What are Mixins? 2. ...

MySQL Series 4 SQL Syntax

Table of contents Tutorial Series 1. Introduction...

Detailed explanation of CSS sticky positioning position: sticky problem pit

Preface: position:sticky is a new attribute of CS...

How to monitor and delete timed out sessions in Tomcat

Preface I accidentally discovered that the half-h...

mysql8.0.23 msi installation super detailed tutorial

1. Download and install MySql Download MySql data...

7 useful new TypeScript features

Table of contents 1. Optional Chaining 2. Null va...

Specific steps for Vue browser to return monitoring

Preface When sharing a page, you hope to click th...

MySQL password is correct but cannot log in locally -1045

MySQL password is correct but cannot log in local...

innodb_flush_method value method (example explanation)

Several typical values ​​of innodb_flush_method f...

Troubleshooting MySQL high CPU load issues

High CPU load caused by MySQL This afternoon, I d...

Solve the Linux Tensorflow2.0 installation problem

conda update conda pip install tf-nightly-gpu-2.0...

Detailed steps for IDEA to integrate docker to achieve remote deployment

1. Enable remote access to the docker server Log ...