ページネーションのベストプラクティス
非常に大きくなる可能性があるテーブル（5,000行以上）で実行する必要があるページ分割を処理するための最良の方法がわかりません。
私の最初の質問は、ページごとに表示される行数がレイアウトによってのみ決定されるのか、それともページ数も考慮に入れられるべきなのかです。たとえば、<1000は20行を示し、> = 1000は30行を示しますか？
次の質問は、ユーザーがテーブルをできるだけフィルタリングし、50ページの情報が残っていると想定して、ページ間を移動する方法が最もよい方法です。入力ボックスを取得して45ページにジャンプする必要がありますか？または、skip（1）とskip（5）ボタンで十分ですか？現時点では、エンドユーザーがテーブルをどのように使用するかわからないため、どのオプションを最初に試してみるかがわかりません。
最後に、誰かが共有できるページネーションの良い例はありますか？私はいつも良い参考資料を探しています！
これはページ分割が正しく行われている場合とそうでない場合がありますが、以下はWebアプリでページ分割を行う方法です。
|< First, << Previous, Page [5] of 12, Next >>, Last >|
外側の4つのオプションはリンクですが、Page [5] of 12は、[5]を入力フィールドとするフォームです。 JavaScriptが有効になっているユーザーの場合、送信ボタンを非表示にして、unfocusイベントでフォームを送信するか、キーを押します。ユーザーは、表示する行数を選択できます。ドロップダウンメニューから選択できます（10、20、50、100、すべて）。ページネーションに加えて、結果のソートとフィルタリングも提供しますが、すべての状況で意味があるとは限りません。
編集：
これは、より良いアイデアを提供するためのWebアプリのモックアップからのスニペットです。このバージョンでは、単語はボタンから省略されていますが、少し遅れてホバーのツールチップとして表示されます。ただし、単語を保持することで、ユーザビリティが向上する場合があります。
指摘すべき他のいくつかのこと：
- 「最初」および「前」ボタンは最初のページであるため、無効になっています。
- 青色はアクティブなボタンを示します（この特定のテーマをカラーチェッカーで実行して、色覚異常のユーザーが違いを確認できるようにする必要があります）。
- ボタンが無効になっていても、ボタンは常に残ります。これにより、インターフェースの整合性が確保されます。
- 縮尺の関係で、ドロップダウン選択ボックスではなく入力フィールドを選択しました。 3000ページある場合、下にスクロールしてページを見つける必要はありません。
- ページネーションは、目的の類似性を示すために、単一の視覚コンポーネントにグループ化されています。
そのような答えで申し訳ありませんが、それは依存します。どのような種類のコンテンツがあり、ユーザーが探しているものは何ですか？ユーザーの目標は何ですか？それはウェブサイトですか、それともアプリケーションですか？
多くの場合、たとえば無限スクロールを使用すると、ページ分割をまったく回避できます（ Google画像検索 の検索結果を参照）。
ページネーションの問題は、ページ自体に意味がないことです。なぜ45ページに行く必要があるのですか？なぜ38じゃないの？コンテンツがソートされている場合は、ページに意味のある名前を付けるようにしてください（アルファベットの文字や日付の範囲など、意味のある何か）。スクロールは通常、ページをナビゲートするよりもはるかに優れたエクスペリエンスを提供するため、ページあたりの行数はできるだけ大きくする必要があります（ただし、一般的な規則ではなく、いくつかの例外があります）。
そして、例と良い実践のために、ここに 素晴らしい記事 があります。
一般に、ページあたりのアイテム数は、次の基準に基づいて決定するものです。
- 表示しているデータの種類と、指定した数のアイテムがページを作成する期間はどれくらいですか？
- ページ上のXアイテムがアプリのパフォーマンスに与える影響は何ですか？
- ユーザーがページごとに表示されるアイテムの数をカスタマイズできるようにしたいですか？
- ページ間ナビゲーションが気になる場合（たとえば、ユーザーが特定のページ番号512に移動することを気にするか）、ページあたりのアイテム数はページ付けのナビゲート性にどのように影響しますか？
- どのようなページネーションコントロールを利用できますか？
上記の質問に答えると、2番目の質問の答えにうまくつながります。ページネーションは、あなたが持っているデータとあなたが表示しているアイテムの数の積です。私のアドバイスは、ユーザーが表示したいページを指定したいかどうかを判断することです。これは、ユーザーのテストを行い、どのような情報がリストされているかを考えることで理解できます。たとえば、検索結果が「47ページに移動したい」と言えるほど具体的であることはめったにありません。検索結果は通常、暗号化された不透明なアルゴリズムで並べ替えられているためです。しかし、たとえば名前をアルファベット順にリストしている場合、47ページに移動すると非常に直感的になります。
同様に、表示しているデータ型もナビゲーションに影響を与える可能性があるので、ファセットナビゲーションデザインパターンを検討して単純化することをお勧めします。アルファベット順の名前についてだけ説明した例では、データが多い場合は、文字（A | B | C | Dなど）と各文字内のページを使用してページ分割を検討する場合があります。
具体的には：
- ユーザーが望んでいる事実を知らない限り、ユーザーに具体的な制御を与えることはお勧めしません。
- 代わりに、現在のページの周囲にパディングを提供します（1 .. 7 8 [9] 10 11 .. 28）
- パフォーマンス上の理由でできない場合を除いて、アルゴリズムで並べ替える場合は、最初と最後のページを含めます。
- アルゴリズムで並べ替える場合は、さまざまな並べ替えオプション（並べ替え順の逆転など）を検討してください-データの種類によって異なります
正しく行われたページ付けの例：
- Flickr -選択済み、非アクティブ、リンク状態の明確な区別。アクセシブルな色;クリックターゲットが適切な埋め込みリンク。現在のページの周りの適切なパディング。過度に複雑ではありません。個人的なお気に入り。
- Funda.nl -オランダの不動産ウェブサイト。デザインが素晴らしく、シンプルで読みやすく、ページネーションにも反映されています。
- Bing -BSなし、ミニマリストのタイポグラフィデザイン、つまりページ付けは非常に微妙ですが同時に使いやすい
- Google （明らかに）-一種のギミックですが、多くのオプションがあるにもかかわらず、それでもシンプルに感じ、あなたの顔に笑顔をもたらします
- Chris Messinaは、Flickrの彼のデザインパターンアルバムに ページネーションのいくつかの良いショット を持っています。
ページ区切りパターン：
あなたの最初の質問については-私は一貫性のファンです（そしてほとんどのユーザーもそうです）。ユーザーを混乱させて、今回は行数が増える理由を考えさせないでください。「ページごとのアイテム」を選択させることもできます。これは非常に一般的で便利な方法です。
ユーザーはスクロールよりもページングを好みます。小さなナビゲーションリンクを狙うよりも、スクロールホイールを操作する方がはるかに簡単です。