ウェブページコンテンツの閲覧設計手法に関する議論

ウェブページコンテンツの閲覧設計手法に関する議論
<br />コンテンツ ページの記事の場合、記事が長すぎる場合やカテゴリ (ランキング) がある場合は、ページ区切りで読むのが間違いなく最適な選択です。
小説など、記事の内容に分類が関係ない場合は、内容に一貫性があり、途中の内容を飛ばして次の内容を直接読むことは考えにくいため、ページ番号は通常どおり表示できます。

しかし、記事の内容に分類が含まれる場合はどうなるでしょうか?例えば、非常に一般的なデジタルランキングには、記事コンテンツの分類(ランキング)が含まれます。このとき、ページ番号の付け方を変更したり、ページ番号のコンテンツプレビューを追加して表示することを検討する必要がありますか?

ランキングなどのコンテンツは、実際には完全かつ独立したコンテンツページで構成されているため、1位と2位は2つの完全かつ独立した存在であり、このランキングのためにまとめられているだけです。2位を飛ばして3位の情報を直接確認しても問題ありません。

上の写真のように、記事全体が完結しているように見えますが、中身はさまざまなカテゴリーに分けて読むことができます。
このページ番号の下にコンテンツ プレビュー ナビゲーションがない場合、ユーザーはこの記事に表示されているコンテンツをどのようにして知ることができるでしょうか?ユーザーはコンテンツをページごとにしか閲覧できないため、受動的な状態になります。
しかし、ページ番号の下にこのようなコンテンツプレビューナビゲーションがあると、ユーザーにもたらされる読書体験はまったく異なります。このような完全かつ明確なプレビューナビゲーション構造により、ユーザーは全文を読まなくても、記事で紹介される内容を事前に理解できます。このプレビューナビゲーションを見ると、ユーザーはその記事が自分にとってまだ興味深いものかどうかを判断できます。同時に、すでに理解している内容や理解したくない内容をスキップして、興味のある部分に集中することもできます。
単にページ番号を並べただけのページナビゲーションに比べ、プレビューナビゲーションを配置したページは、より深い印象をユーザーに残します。ユーザーは「概要」の情報を飛ばして「本質」に直接進むことができるため、概要情報と抽出された情報によってユーザーに残る印象に大きな違いが生じます。
これは、RSS サブスクリプションが人気がある大きな理由でもあります。

<<:  CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。

>>:  MySQL データベース分離レベルと MVCC の詳細な説明

推薦する

Vueでアイコンをカスタマイズする手順

ant-design-vue は Ali iconfont icons の使用をカスタマイズします\...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

Docker+nacos+seata1.3.0 のインストールと使用設定チュートリアル

これに先立ち、1日かけてやってみました。Seataは使い方が簡単で超シンプルですが、インストールや設...

HTML タグのメタ概要、HTML5 のヘッド メタ属性の概要

序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

SELINUXの動作原理の詳細な説明

1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...

Web ページは何ピクセルで設計すればよいでしょうか?

多くのウェブデザイナーは、ウェブページのレイアウトを設計する際に、インターフェースウェブページの幅に...

ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。

⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

vue プロジェクトで rem を使用して px を置き換える例

目次道具プラグインをインストールするプロジェクトのルートディレクトリに.postcssrc.jsファ...

Web開発で使用される基本的な概念と技術の紹介

本日は、Web 開発で使われる基本的な概念と技術を初心者向けに紹介します。A から Z まで合計 2...

ApacheBench でマルチ URL をサポートする方法

標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...