この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも、多くの場合、情報を 1 ページにすべて表示することはできません。そのため、ページ情報を拡張できるインタラクティブ モード (ページ区切りや連続スクロール) を使用する必要があります。ページネーションと読み込みは、私たちが毎日遭遇する非常に一般的なインタラクション モードです。非常に一般的なため、その存在すら感じません。ページの下部を閲覧し、ページネーションが表示されたらクリックし、自動的に読み込まれたら読み続けます。 しかし、この小さな点こそが、ユーザーに非常に異なった微妙な感覚をもたらすのです。この記事では、これらの小さな違いがもたらす大きな違いについて説明します。 ページネーション ページネーションを使用すると、大きなコンテンツを小さな部分に分割し、別々の連続したページに表示できるため、ユーザーが理解したり見つけたりしやすくなります。これにより、ユーザーは閲覧したいコンテンツの量、閲覧した部分、残りの量を明確に把握できるようになります。ページネーションにより、ユーザーは閲覧しているコンテンツについて明確な期待を持つことができます。 記事が長くなると、必ずページ区切りが必要になります。まず、ユーザーにコンテンツの量を予想させ、次に視聴者に休憩を与えます。ユーザーが記事を読んでいる間に 10 画面以上スクロールしても、スクロール バーがブラウザの上部中央に留まったままだとしたら、どれほどイライラすることでしょう。 ![]() ![]() ページング コントロールは、Web サイトのコンテンツに自然な休止を作り出します。この休止をうまく利用すれば、製品にリズムを与えることができます。ただし、ユーザーはページの閲覧を終えると、読むのをやめてクリックしてジャンプし、さらにコンテンツを取得する必要があります。この一時停止によってユーザーの思考がある程度中断されることは否定できません。ページネーションに遭遇すると、ユーザーは閲覧を続けるか、Web サイトを離れるかを考える可能性が高くなります。そのため、ページネーションに遭遇すると、一部のユーザーは迷ってしまうことがよくあります。 連続読み込み 連続読み込みはページングとは逆の対話モードで、メッセージ間に明確な境界や一時停止はありません。ページを一番下までスクロールすると、新しい情報が自動的に読み込まれます。 さまざまなソーシャル ネットワークでは、特にこのタイプのコントロールを使用することを好みます。これにより、ユーザーは中断されることなく、スムーズにブラウジングして没頭することができます。 ![]() ページング コントロールを使用する場合、ユーザーはクリックしてさらにコンテンツを表示する必要があるため、情報の取得はユーザーによって積極的に要求されます。継続的な読み込みを使用すると、新しい情報が自動的に読み込まれ、ユーザーはそれを受動的に受け入れます。 妥協策 ページングと読み込みにはそれぞれ長所と短所があります。最近の多くの Web サイトでは、ページングと読み込みを併用する妥協策も採用されています。 たとえば、Quora では、自動的に 4 回読み込まれた後に「詳細」ボタンが表示され、連続した情報の流れの後にユーザーに一時停止を与え、ユーザーが積極的により多くの情報を取得できるようにします。 ![]() ![]() ![]() ![]() ![]() |
<<: ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション
>>: Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...
導入Ubuntu のデフォルトのソースは国内サーバーではないため、更新されたソフトウェアのダウンロー...
最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...
Dockerデーモンのアクセラレータを構成する設定ファイルから Docker を起動し、/etc/d...
1. 設定ファイルをユーザー環境にコピーし、新しい.vimフォルダを作成し、バンドルサブフォルダを作...
問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...
この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...
Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...
1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...
1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...
背景コメントに似た機能を開発する場合は、必要に応じてすべてのコメントのサブセットをクエリする必要があ...
概要この記事では、ゲームクライアントでよく使用される MVC アーキテクチャについて紹介します。ゲー...
アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...