ページネーションの例とベストプラクティス

ページネーションの例とベストプラクティス
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理されていればいるほど、ユーザーがあなたの主張を理解し、伝えたいメッセージを受け取りやすくなります。 Web では、これはさまざまな方法で実行されます。
見出しとリストは、テキスト本文内で論理的に独立した情報ブロックとして使用されます。もう 1 つの解決策は、ページネーションと呼ばれるメカニズムです。これは、特定の記事の 1 つのセクション内を閲覧するための追加のナビゲーション オプションをユーザーに提供します。記事内のこれらの場所には、「前へ」ボタンと「次へ」ボタンに加えて、数字、プロンプト、矢印も表示されます。
検索エンジンはほとんどの場合ページネーションを使用しており、新聞では複数のセクションがある大きな記事をナビゲートするためにページネーションを使用することが多いです。場合によっては、ブログ (ウェブログ) でもページ区切りが必要になります。追加のナビゲーションにより、一部のサイト ページへのアクセスが簡素化され、たとえば、ユーザーはサイトのアーカイブを簡単に参照できるようになります。
ほとんどの場合、ページネーションは従来の「前のページ、次のページ」のナビゲーションよりも優れており、訪問者はサイト内をより速く簡単に移動できます。必須ではありませんが、あれば便利な機能です。
ページングの適切な実践方法と、ページングを実行するタイミングと方法の例をいくつか見てみましょう。
ページネーション設計のベストプラクティス (Faruk Ates による 7 つの側面):
    クリック可能な領域を大きくします。現在のページに下線を付けません。Web リンクを分離します。前のページと次のページのリンクを提供します。最初のページと最後のページのリンクを使用します (該当する場合)。最初のページと最後のページのリンクを外部に配置します。

関連文献
    ページネーション 101、Faruk Ates がページネーションの最終ドラフトを完成させました。ページネーション用のいくつかのスタイル。必要なページネーション スタイルをダウンロードできます。 ブログが WordPress をベースにしている場合は、プラグイン WP-PageNavi をインストールしてページネーションを生成できます。インストールは非常に簡単ですが、テーマのソースコードの一部を変更する必要があります。

間違い #1: ページネーション オプションが表示されていない<br />ページネーションの主な目的はナビゲーションの改善であるため、訪問者が現在どこにいるのか、どこにいたのか、次にどこに移動できるのかを明確にする必要があります。これら 3 つの事実により、ユーザーはシステムがどのように機能し、ナビゲーションをどのように使用すべきかを完全に理解できます。
しかし、最も重要なのは、ナビゲーション オプションが表示されることです。 hugg.com はこのポリシーに従いません。リンクの色は白い背景とのコントラストが非常に低いです。マウスオーバー効果は提供されません。
ページネーションの例とベストプラクティス
間違い #2: 直感的でないページネーション<br />かなり複雑 (ただし美しい) なナビゲーションと、必要な機能を備えたシンプルなナビゲーションのどちらかを選択しなければならない場合は、常にシンプルなアプローチを選択してください。ユーザーがページネーションの仕組みを理解していない場合、ページネーションを使用できず、その結果、サイトを使用しなくなります。
Helium.com はこの間違いの好例です。下のスクリーンショットを見てください。これらの矢印は何を表しているのでしょうか?訪問したページを表しますか、それとも訪問中のページを表しますか? 2 ページ目へのリンクの背景が白なのはなぜですか?矢印の色が違うのはなぜですか?これは直感的ではありません。
ページネーションの例とベストプラクティス
直感的でないデザインは、構造、階層、および熟慮されたデザイン上の決定の欠如から生じます。空のナビゲーションは、混雑したソリューションと同じくらい直感的ではありません。
ページネーションの例とベストプラクティス
スペースのない Web リンクはスキャンやナビゲートが困難です。 Make-Believe.org は、直感的ではないよう設計されたサイトの例です。
ページネーションの例とベストプラクティス
前のページ1 2 3 4 次のページ 全文を読む

<<:  WebpackはCSSファイルを読み込み、その設定方法

>>:  HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法

推薦する

IIS 7.5はURL書き換えモジュールを使用してWebページのリダイレクトを実現します。

Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

Linux コマンドラインターミナルで画面を分割するための 2 つのツール

ターミナル分割画面ツールは2つあります: screen と tmux 1. 画面分割を使用する(上下...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

Vue は水の波紋効果のクリックフィードバック指示を実装します

目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

MySQL スロークエリ関連パラメータの原理の分析

MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...

純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法

プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...

Nginx を使用してグレースケール リリースを実装する

グレースケールリリースとは、白と黒をスムーズに移行できるリリース方法を指します。 ABテストとは、グ...

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

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

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...