ハイパーリンクの表示と開き方

ハイパーリンクの表示と開き方
<br />関連記事: ハイパーリンクを表示して開く方法
症状<br />ユーザーやデザイナーが遭遇するトラブル:
1. ユーザーはそれがリンクであるかどうか判断できません。マウスをターゲット上に移動して手の形に変わるまで待って、リンクであることを確認する必要があります。
2. 統一されたリンクの色はインターフェースのデザインに適していません。
分析:
baidu/google で表される青い下線は最も古典的なリンク スタイルであり、クリック可能/クリックされたかどうかを直接反映します。ただし、Web サイトごとにスタイルが異なるため、すべての Web サイトに同じリンク スタイルを適用することは不可能であり、デザインに大きな制限が生じます。私はリンクを、推奨クリック(記事のタイトルなど)、プロンプトクリック(著者名、「詳細」、段落内のリンクなど)、機能リンク(ナビゲーション、ボタンなど)に分類しています。
解決:
クリック可能なリンクを使用し、デフォルトのリンク色を設定して、青などのこの色のフォントを見ただけでクリック可能なリンクであることがわかるようにすることをお勧めします。区別しやすいように、この色は通常のテキストの色よりも暗くしてください。
クリック可能なリンクを示すには、リンクの色を周囲のテキストと同じ色にデザインする必要があることが多いため、下線が最適な方法です。
ナビゲーション リンクやボタンなどの機能リンクは、一目でクリック可能なので、色や下線で区別する必要はありません。カスタマイズできます。
開く方法<br />ユーザーが遭遇したトラブル:
1. ポップアップ ウィンドウが多すぎて、画面全体が埋まってしまい、コンピューターがフリーズしてしまうこともあります。
2. すべてのジャンプはこのページへ行われます。前のページの他のコンテンツを閲覧したい場合は、戻る必要があります。
分析:
従来の Web サイトのほとんどは、ユーザーの画面を占有するポップアップ リンクを好みますが、2.0 Web サイトは現在のページへのジャンプを好み、ポップアップは非常に使いにくいと考えています。ユーザーが別のリンクをクリックするために前のページに移動する必要があるのはなぜですか?現在のページに前のページへのリンクがないか、前のページに記事のリストなど同じレベルのフィルタリング可能なコンテンツがあるためです。ページを開く最も理想的な方法は、このページにジャンプするか、新しいタブを開くことです。
解決:
ニュースの見出しのグループなどのリスト内のリンクは、ポップアップ ウィンドウで開きます。
ナビゲーション、カテゴリ、ページング、「その他」などの機能リンクをクリックすると、このページにジャンプするためのウィンドウが開きます。
フレンドリー リンクの段落内のテキスト リンクなどの外部リンクは、ポップアップ ウィンドウを使用して開きます。
ユーザーは、右クリックして「新しいタブで開く」を選択するか、ブラウザを「常にポップアップ ウィンドウを新しいタブで開く」に設定して開くことを選択できます。

<<:  MySQL ページングの制限パラメータの簡単な例

>>:  Linux の Docker コンテナで bash を終了する 2 つの方法

推薦する

VueプロジェクトでReactを書く方法の詳細

jsx/tsxファイルを直接作成できます今回のプロジェクト構成は以下のとおりです。 vueファイルで...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

MySQL が「operate_time」エラーのデフォルト値が無効であると報告する問題を解決する

データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)

私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...

MySQLでconcat関数を使用する方法

以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

JavaScript の寄生的構成継承についての簡単な説明

コンポジション継承組み合わせ継承は、疑似古典的継承とも呼ばれます。これは、昨日説明したプロトタイプ ...

Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

CSS は、小さな鋭角のチャット ダイアログ ボックスで鋭角の吹き出し効果を実現します。

1. CSS を使用して、小さな尖った角のチャット ダイアログ ボックスと尖った角の吹き出しを描画...

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...