Zwei Arten von Tab-Anwendungen im Webdesign

Zwei Arten von Tab-Anwendungen im Webdesign

Fall 2 : Auf der Taobao-Homepage gibt es drei Registerkartendesigns, aber wenn Sie genau hinsehen, werden Sie feststellen, dass sie unterschiedlich sind. Noch verwirrender ist, warum es auf der Homepage nur drei Registerkartendesigns gibt, die aber unterschiedlich sind. Erfordert eine Seite den Eingriff mehrerer Frontends?

Heutzutage werden Registerkarten häufig im Webdesign verwendet, sie werden jedoch im Allgemeinen in die folgenden zwei Typen unterteilt:

Die erste Art ist das Umschalten per Mausklick. In diesem Fall verfügt die Registerkarte über keinen Link (fügt aber einen „Mehr“- oder „Mehr“-Link im ausgewählten Registerkartenbereich hinzu).

Der zweite Typ ist das Umschalten beim Mouseover. In diesem Fall wurden vielen Registerkarten Links hinzugefügt, sodass ein „Hover“ wirksam werden sollte, d. h., es wird ein „Folien nach unten“ oder eine Farbaufforderung angezeigt, wenn die Maus angedockt ist. Tatsächlich entspricht dies auch der Praxis der Designphilosophie von Norman, den Benutzern entsprechendes Feedback zu geben.
In der Praxis haben wir einige gute Entwürfe gesehen, aber auch einige, mit denen ich nicht einverstanden bin und die ich hier kurz darlegen möchte.

Fall 1 : Die US-Startseite von Yahoo gehört zum Design der ersten Registerkarte, achten Sie jedoch auf das Feld in der unteren rechten Ecke.

Zwei Arten von Tab-Anwendungen im Webdesign
Zwei Arten von Tab-Anwendungen im Webdesign

Der erste Reiter ist so gestaltet, dass er per Mausklick umgeschaltet werden kann, ohne weitere Links. (Spitze)

Zwei Arten von Tab-Anwendungen im Webdesign

Das Design der zweiten Registerkarte ist ein schwebender Schalter, aber es gibt kein „a:hover“ für die Rückmeldung zu den Links auf der Registerkarte. (Wohnung)

Zwei Arten von Tab-Anwendungen im Webdesign

Das dritte Registerkartendesign ist ein schwebender Schalter, der einen Hover-Feedback-Link auf der Registerkarte hinzufügt. (Spitze)

Fall drei : QQ-Popup-Fenster.

Zwei Arten von Tab-Anwendungen im Webdesign

Das unbeliebteste QQ-Popup-Fenster. Auf der Registerkarte gibt es kein Link-Feedback. Ich glaube, dass auf diese Weise viel Verkehr auf qq.com unschuldig betrogen wird. (Wohnung)
Fügen Sie einen Absatz ein: Ich hatte schon immer einige Beschwerden über das Design der QQ-Popup-Fenster. Ein Bereich, der nur 5 Tabs aufnehmen kann, fasst tatsächlich indirekt 7, sodass ein Design zum Scrollen der Tabs nach links und rechts erforderlich ist. Und wie groß ist der tatsächliche Wert des Hinzufügens einer scheinbar unbedeutenden, aber auffälligeren Sache [Sie können die Seitenkarte zum Sortieren ziehen]?

<<:  So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei

>>:  css3-Animation, Ballrollen, js-Steuerung, Animationspause

Artikel empfehlen

Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl

Ich glaube, dass viele Programmierer mit MySQL ve...

Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite

Heutzutage wird die Bildschirmauflösung von Compu...

So verwenden Sie griechische Buchstaben in HTML-Seiten

Griechische Buchstaben sind eine sehr häufig verw...

Wie gut wissen Sie über die Vererbung in JavaScript?

Inhaltsverzeichnis Vorwort Die Beziehung zwischen...

Detaillierte Erklärung der JavaScript-Datentypen

Inhaltsverzeichnis 1. Literale 1.1 Numerische Lit...

Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen

1. Übersicht Gruppieren nach bedeutet, Daten nach...

Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

1. Indizes speichern keine Nullwerte Genauer gesa...

Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben

Guter HTML-Code ist die Grundlage einer schönen W...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...