ウェブデザインにおける2種類のタブアプリケーション

ウェブデザインにおける2種類のタブアプリケーション

ケース2 :Taobaoのホームページには3つのタブデザインがありますが、よく見るとそれぞれ異なっていることがわかります。さらに混乱するのは、ホームページにはタブのデザインが 3 つしかないのに、それぞれ異なるのはなぜかということです。 1 つのページに複数のフロントエンドの介入が必要ですか?

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。

1 つ目は、マウスをクリックして切り替えるタイプです。この場合、タブにはリンクはありません (ただし、選択したタブ領域に [その他] または [その他] リンクが追加されます)。

2番目のタイプはマウスホバー切り替えです。この場合、多くのタブにリンクが追加されているため、a:hover が有効になり、マウスがドッキングされたときにスライドダウンまたはカラープロンプトが表示されます。実際、これはノーマンのデザイン哲学における、ユーザーに適切なフィードバックを提供する実践でもあります。
実際のケースでは、良いデザインもあれば、私が同意できないデザインもありました。ここで簡単に共有したいと思います。

ケース 1 : Yahoo US ホームページは最初のタブ デザインに属しますが、右下隅のボックスに注意してください。

ウェブデザインにおける2種類のタブアプリケーション
ウェブデザインにおける2種類のタブアプリケーション

最初のタブは、追加のリンクなしで、ボタンをクリックして切り替えられるように設計されています。 (トップ)

ウェブデザインにおける2種類のタブアプリケーション

2 番目のタブのデザインはフローティング スイッチですが、タブ上のリンクをフィードバックする a:hover がありません。 (フラット)

ウェブデザインにおける2種類のタブアプリケーション

3 番目のタブのデザインはフローティング スイッチで、タブに:hover フィードバック リンクを追加します。 (トップ)

ケース3 : QQポップアップウィンドウ。

ウェブデザインにおける2種類のタブアプリケーション

最も人気のない QQ ポップアップ ウィンドウ。タブにリンク フィードバックがありません。qq.com のトラフィックの多くがこの方法で無意識のうちに詐欺されていると私は考えています。 (フラット)
段落を挿入: QQ ポップアップ ウィンドウのデザインについては、常に不満がありました。5 つのタブしか保持できないスペースに、実際には間接的に 7 つのタブが保持されるため、タブを左右にスクロールするデザインが必要です。一見重要ではないが、より目立つ [ページ カードをドラッグして並べ替えることができます] を追加することに関して、実際の価値はどれくらいあるのでしょうか。

<<:  nginx 設定ファイルで環境変数を使用する方法

>>:  CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

推薦する

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用され...

ウェブ開発者はIE7とIE8の共存を懸念している

今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル

1. muttをインストールするsudo apt-get install mutt 2. msmtp...

Linuxプロセス通信におけるFIFOの実装

FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

Dockerレジストリイメージ同期の実装アイデア

はじめに以前は、Docker イメージは Azure のコンテナー レジストリに保存されていました。...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル

1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...

HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。

オプションに属性 selected = "selected" を追加すると、それ...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...

Linux ホスト上で複数の MySQL データベースを起動する方法

今日は、Linux ホスト上で 4 つの MySQL データベースを起動する方法について説明します。...