ウェブデザインにおける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 コントロールアニメーション一時停止

推薦する

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

画像の盗難を防ぐために Nginx で Referer を設定する方法

サーバーの画像が他のウェブサイトからホットリンクされると、サーバーの帯域幅とアクセス速度に影響します...

Vueプロジェクトのパッケージングと展開の実際のプロセスの記録

目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

Docker デプロイメント MySQL8 クラスター (マスター 1 台とスレーブ 2 台) の実装手順

目次1. CentOS 7.9 20にDockerをインストールする2. MySQL クラスターをデ...

JS配列メソッドsome、every、findの使用に関する詳細

目次1. いくつか2. すべての3. 見つける1. いくつかsome()メソッドは、指定された関数の...

Vue は動的なプログレスバー効果を実現します

この記事では、動的なプログレスバー効果を実現するためのVueの具体的なコードを例として紹介します。具...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...

React ルーティング リンク構成の詳細

1. 属性へのリンク(1)ルーティングパスを配置する(2)指定された形式でオブジェクトを配置する{パ...

Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

CSS の clip-path プロパティの使用方法の詳細な説明

クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...

WeChatミニプログラムページで値を返す4つの解決策のまとめ

目次使用シナリオ解決1. globalDataを使用して実装する2. ローカルキャッシュストレージを...