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

ページネーションの例とベストプラクティス
<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 オプションを変更する複数の方法

推薦する

JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

Vueはel-tableを使用して列と行を動的に結合します

この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...

Vue ページ状態の永続化の詳細な説明

目次コード:補充:要約する要件: 左のツリーと右のテーブル。組織ツリーでノードを選択した後、詳細ペー...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...

Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成

1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...

VMware esxi6.5 のインストールと使用の詳細な手順

目次導入建築ESXIの利点vSphere とは何ですか? 2. 仮想マシンの利点3. 仮想マシンを使...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...

JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...

ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...