ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明
インタラクション: ページネーション 123WORDPRESS.COM
機能: 前のページまたは次のページにジャンプします。
要素: ページングの基本要素は、前のページ + ページ番号 + 次のページ (マーク 1 など)、合計ページ番号 (マーク 2 など)、ジャンプ ページ (マーク 3 など)、「確認」ボタン (マーク 4 など) です。
シナリオ:上記の基本要素に基づいて、異なるシナリオで異なる組み合わせが存在します(シナリオ1)19階フォーラム:
フォーラムのページ数が多い場合は、数千に達することもあります。ページ分けされたコンテンツのほとんどは、継続的に更新されるトップ投稿またはオリジナル投稿であるため、ほとんどのユーザーはホームページでオリジナル投稿を確認し、次にいくつかのメッセージページを選択的に確認します。これらすべてを手動でめくる可能性はほぼゼロです。そのため、フォーラム形式のページングには次の機能があります。
1. ほとんどのユーザーは、元の投稿を読んだ後、直接ページをめくるか、投稿リストに戻ることを選択するため、下部に加えて、上部にページめくりを追加し、「リストに戻る」ショートカットを設定します。 2. したがって、「1番目」ページがホームページであり、常に「1番目」ページがあります。 中央の「...」は、表示されないページ番号を示すために使用されます。
3. ページ番号は「ホームページ 1 + 連続する 5 つのページ番号 + 最終ページ」のみを提供します。開発者は、平均的なユーザーが連続して表示できるコンテンツは最大 5 ページであることを考慮する必要があります。または、表示する最後のページに直接ジャンプすることもできます。そのため、最後のページ番号と、最後のページに直接ジャンプするためのショートカット ボタンが表示されます。
(シーン2)Weibo:
ユーザーが閲覧する情報は興味のある情報であり、新聞を読むようにページごとに閲覧するため、「前のページ」と「次のページ」が最もよく使用されます。2番目はページジャンプです。軽量マイクロブログの概念を反映するために、従来のページめくりの中央のページ番号部分をドロップダウンメニューに簡素化し、現在のページ位置を示すとともにページを切り替えることができます。
新浪微博:1ページあたり45のマイクロブログ、さらにページをめくると、前のページ、次のページ、ページ番号が表示され、デフォルトで10ページがプッシュされます
(シーン3)百度検索ページ:
1. 検索結果は初回は 10 ページのみ表示されます。通常、この 10 ページ内でも目的の情報が見つからない場合は、ユーザーは検索内容を変更する必要があります。フットプリントグラフィックとそれに対応するページ番号をクリックするとページをめくることができ、ページの関心度が高まります。 2. ユーザーは通常、ページを検索するときにホームページに戻らないため、ページには前のページと次のページのショートカットボタンのみがあります。 3. 任意のページ番号をクリックして閲覧を続けると、次のページ番号が現在のページ + 9 として表示されます。これは、ユーザーが検索範囲を拡大するのに便利です。
4. ページ幅に合わせて最大20ページまでページ番号を付与
(シーン4)情報のスクロール:
1. テンセント微博:1ページあたり45のマイクロブログ、デフォルトで1つ以上のボタンが表示され、それをクリックするとさらに45個が下に表示されるなど。テンセントはユーザーが選択できるページめくりモードも導入し、よりユーザーフレンドリーになっている。
2. 花びらの「無限スクロール」では、ユーザーがページの一番下まで閲覧すると、ページが自動的に更新され、新しい情報が表示されます。連続して多くのページをめくった後、表示するコンテンツがなくなると、関連情報ボタン「詳細情報を表示」が自動的に表示され、ユーザーが他の関連情報を閲覧するように誘導します。ページが長すぎる場合は、「先頭に戻る」ボタンが提供されます。
拡張: 以下は他のさまざまなページング形式です
上記は、ページングに関するインタラクション チームからの簡単な共有です。

<<:  HTML におけるメタの役割について (インターネットから収集および分類)

>>:  CSS 8 目を引く HOVER 効果のサンプル コード

推薦する

JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

Centos7にGitLabサーバーをインストールして展開する方法

私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...

Tomcatサーバーのセキュリティ設定方法

Tomcat は、Java Community Process を通じて Sun が開発した、広く使...

MySQL InnoDB トランザクション ロック ソースコード分析

目次1. ロックとラッチ2. 繰り返し読み取り3. インサートロックプロセス3.1 ロックモード3....

CSS による要素の中央揃えの原理の分析

CSS で要素の水平方向と垂直方向の中心を設定することは、非常に一般的な要件です。しかし、理論的には...

Apacheドメイン名設定の落とし穴の詳細な説明

私はApacheを使ったことがありません。仕事を始めてからはずっとnginxを使っていました(運用保...

Ubuntu 16.04 で MySQL マスター スレーブ同期を設定する方法

準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

冗長カーネルを削除するLinuxディープインの実装方法

前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...

Dockerfileを使用してDockerイメージを構築する手順

Dockerfile は、命令を含むテキスト ファイルです。各命令はレイヤーを構築するため、各命令の...

ElementUIはel-formフォームリセット機能ボタンを実装します

目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...

js の Array.forEach でループを終了する方法の例

目次forEach() メソッドjs の Array.forEach のループから抜け出す方法解決:...

IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています

これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...