Two types of tab application in Web design

Source: Internet
Author: User

Today, the Web Page Design tab application is very common, but generally can not be separated from the two types of:

The 1th kind of mouse click Switch. in this case, the tab is not linked (but adds more or more links within the selected tab area).

The 2nd kind of mouse suspension switch. in this case a lot of tabs are added links, so the a:hover should be effective, that is, when the mouse docked down or color and other tips. In fact, this is the Norman design concept, for the user appropriate feedback (feedback) practice.
In the actual case, we see some good design, there are some I do not agree with the design, here to share a little.

case One : Yahoo USA home page, belongs to the 1th tab design, but pay attention to the bottom right corner of the box oh.

case two : Taobao home page tab design has three, but look carefully, but found that there are differences. The more puzzled is, why the home page is only 3 tab design, but it is different? Does a page require multiple front-end interventions?


The first tab design belongs to a click Switch with no additional links. Top


The second tab design belongs to the suspension switch, but there is no a:hover to feedback the link on the tab. Flat


The third tab design belongs to the suspension switch, adding the link on the A:hover Feedback tab. Top

case Three : QQ Pinball window.


The most not favorite QQ window, the tab also has no link feedback, I believe qq.com traffic is so innocent to cheat. Flat
Interrupted a paragraph: I have been to the QQ window design has DOJ, a can only put 5 tab position incredibly indirectly put 7, so had to have more than a tumbling tab design. As for adding a seemingly insignificant but more conspicuous [you can drag the page to sort] The real value is how much.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.