無限のスクロールサイトの作成をやめる!



TL; DR。 場合によっては無限スクロールが適切ですが、問題が発生する可能性があります。

無限スクロールは混乱を招き、制御不能となり、ユーザーにストレスを与える可能性があります。

この記事では、無限スクロールのサイトの作成を停止する必要がある理由を説明します。 しかし、最初に、問題の簡単な歴史を考慮してください。

スクロールの簡単な歴史


スクロールとは何かを理解するために、 単語の起源を見てみましょう。

スクロール(スクロール) (n。):c。 1400、「羊皮紙または紙のロール」

巻物は元々、ドキュメントが長すぎたときに使用されました(たとえば、宗教的なコンテンツ)。 コンテンツが非常に多いため、管理が難しくなり、読み取りと書き換えが困難になりました。

コンピューターが私たちの生活に入ったとき、私たちはまだ大量のコンテンツをナビゲートする方法を必要としていました。

コンピューターの巻物の進化


1.行(および列)


ウェブの出現後、デザイナーはコンテンツをページ分割/スクロールする多くの方法を発明/学習しました。 インターネットの前に、画面上の行をスクロールしました。

水平スクロールは、コンテンツを読むためだけでなく、画面をナビゲートするためのツールをスクロールしました。

2. Windows(オペレーティングシステムではありません)


スクロールの存在により、人々はウィンドウインターフェイスを作成するようになりました。 ウィンドウを使用すると、複数のコンテンツを同時に表示できます。


Windows 3.1プログラムマネージャーにはいくつかの「スクロール」があります

3. Webページ


スクロールは、Webを閲覧する際の最も基本的な問題を解決します。 ただし、それはユーザーに多くの問題を引き起こし、ユーザーに干渉する可能性があります。 よく見てみましょう。

Webページのナビゲーションオプション


開発者とデザイナーがWebページを操作するためのインターフェイスをどのように作成したかを判断しようとします。

いくつかのページネーションサーバーシステムから始めましょう。

オフセットベースのページネーション


最も有名なページネーションシステム。 この手法では、最初にページ分割する要素の数を見つける必要があります。

-- All posts count
SELECT COUNT(*) AS total FROM posts

. , 10 :

-- First page items
SELECT * FROM posts LIMIT 10

3, 30 , (OFFSET):

-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30

:

{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

:




, ( Twitter). , : (cursor).

. :

-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11

, (ID ) . :

{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end of data.
  },
  "items": [...]
}

:

-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

:



.


:
:

. . , .


WordPress


:
:

-, . , , .




Google :




:
: , ,

, .


« »

« » (Load More), .


:
: , ,

— .

, 2005 Microsoft.
Metafizzy open source , .




!


, . , .


 — -, . : , , . , .

, . ( ).

(, Twitter) , .  — , . .


Twitter

,


. , . . , .

-, , , — , . . . .


, , UI, .

- . , , ( ). UI . - .

. .

« », . . ( , , ).


, , ..

. . , .

, . , .

, « », . , K, .

, . , , , .


, , , . , . !

Source: https://habr.com/ru/post/J427615/


All Articles