web-dev-qa-db-ja.com

多くのページのサークルページインジケーターの代替?

ユーザーが画面をスワイプして次/前のアイテムを取得したり、現在の位置を表示したりできることを示すために、多くのページがあることを考慮して(通常は数十、場合によっては100を超える)、代わりにすべてのページの可能性はありません。

Example of pagination on Android with page indicator visible

「2 of 22」のようなページ番号を表示するのは、少し退屈に思えます。それを円の方法と組み合わせるのは良いのでしょうか、それとも混乱するだけでしょうか?

編集:(私の特定の問題について)物事を明確にするために、これは階層の3番目のレベルです:最初にカテゴリのリストから選択し、次にそのカテゴリのアイテムのリストからアイテムを選択すると、このアイテムの詳細。左または右にスワイプすると、2番目のリストに戻る必要がなくなります。

11
Lescai Ionel

Amazon Kindleはこの正確な問題を解決しました。ブック/ドキュメントに関する情報を表示すると、画面の下部にパーセンテージを示すスライダーがあります。継続的で、簡単にスケーラブルであり、パーセンテージを使用して、圧倒的に見えないようにします(100は多くのように見えるかもしれませんが、パーセンテージとして表示すると、100の異なるパーセントポイントとしてではなく、1つの全体の一部として表示されます)。私は彼らのリードに従ってください! enter image description here

11
Frank B

Androidのベストプラクティス:子孫と横方向のナビゲーションの提供 から:

水平ページング(スワイプビュー)

別の一般的な横方向ナビゲーションパターンは、スワイプビューとも呼ばれる水平ページングです。このパターンは、カテゴリー(世界、ビジネス、テクノロジー、健康の話)のリストなど、コレクション関連の兄弟画面に最適です。タブと同様に、このパターンでも、親が独自のレイアウトに埋め込まれた子画面のコンテンツを提示するという点で、画面をグループ化できます。

Example horizontal paging navigation interface with relevant screen map excerpt

水平ページングUIでは、1つの子画面(ここではページと呼ばれます)が一度に1つずつ表示されます。ユーザーは、画面をタッチして隣接するページの方向に水平にドラッグすることにより、兄弟画面に移動できます。このジェスチャの相互作用は、多くの場合、現在のページと使用可能なページを示す別のUI要素によって補完され、発見を容易にし、ユーザーにより多くのコンテキストを提供します。この方法は、このパターンをセクション関連の兄弟画面の横方向のナビゲーションに使用する場合に特に必要です。このような要素の例には、目盛り、スクロールラベル、タブなどがあります。

Example paging companion UI elements

子画面に水平方向のパンサーフェス(マップなど)が含まれている場合は、このパターンを回避することをお勧めします。これは、これらの競合する相互作用が画面の使いやすさを妨げる可能性があるためです。

さらに、兄弟関連の画面では、コンテンツタイプにある程度の類似性があり、兄弟の数が比較的少ない場合に、水平ページングが最適です。このような場合、このパターンをコンテンツ領域の上のタブと共に使用して、インターフェースの直感性を最大化できます。コレクション関連の画面の場合、水平ページングは​​、各ページが連続する暦日を表す場合など、画面間に自然な順序の関係がある場合に最も直感的です。無限のコレクション(ここでも、暦日)の場合、特にコンテンツが両方向にある場合、このページングメカニズムは非常にうまく機能します。

6
Sam Blake

表示は番号で表すことができ、次のようにページ番号を続けて表示します。

24 25 26 27 28

3
Sashko Valyus

最近、タブレットの複数ページのサークルの代替のユーザーテストを行いました。私は多くのページでテストしませんでしたが、数字と円のテストをしました。興味深いことに、数字が多い場合、ほとんどの人はコンテンツを読みづらく感じ、3回または4回の視聴後にスワイプをあきらめました。彼らはそれを重くて冗長だと説明しました。同じコンテンツがサークルでテストされ、人々はさらに探索する傾向があったので、よりスワイプし、コンテンツをテキストが重くなく、インターフェースが楽しくて使いやすいと感じました。

これはタブレットでしたが、電話で同じものをテストした場合、同様の結果が得られると思います。したがって、ユーザーにもっと探索してもらいたい場合は、数字ではなく円を使用します。ただし、私たちの場合、すべてのページが点の行に含まれ、ユーザーにフィードバックと向きを提供するために、スワイプごとに変更されました。あなたの場合、ページが多すぎてこれができないので、Circleデバイスが機能するかどうかはわかりません。

3
user25368

私はあなたの質問に答えることを避けます質問の背後にある実際の問題に焦点を当てます

マーカーとして円を使用した水平スワイプは、少数のページ用に設計されており、少なくともiOSの推奨事項は、約5以下に保つことです。

水平方向のスワイプでナビゲートする多数のページが必要な場合、問題は状況に応じた間違ったタイプのナビゲーションがあることです。サークルに代わるものはそれを解決しません。

他にどのナビゲーションソリューションが最適かは、他の多くの要因によって異なります。これらの要素について質問があれば、私はいくつかの提案をさせていただきます。

1
JohnGB

この問題の解決方法を説明するUXファイルを生成した方がいいと思いました。ユーザーがページを閲覧するために使用できる主に3つのジェスチャー(図に示されている)がある可能性があります。

  • 左スワイプで次のページに
  • 前のページに右スワイプ
  • 左端を引くと、すべてのページのサムネイルビューにアクセスして、検索を高速化できます(おそらく上部にもボタンがあります)。

画像は千の言葉より優れていると思いますので、理解を深めるために次の画像を参考にしてください。

enter image description here

また、(メインページ用)に記載されているソリューションを統合できると思います

Amazon Kindleはこの正確な問題を解決しました。ブック/ドキュメントに関する情報を表示すると、画面の下部にパーセンテージを示すスライダーがあります。

0
Ankit

他の2つの答えに基づいて、私はそれを仮定します:

a)円(または他の同様の形状)は、複数のページがあり、スワイプして別のページに移動できることを瞬時に示すインジケーターです。また、円は数字よりも優先されます。

b)ページが多い場合は、ある種のプログレスバーも適しています。

したがって、これら2つの組み合わせが適していると思います。

表示するページが少ない場合は、通常の円のページインジケーターと円の数をページ数と同じにします(5ページ/アイテムには5つの円があり、1つの円が他の円より目立ちます)。表示できる円の数よりも多いアイテムの場合、表示できる円の最大数を設定し、1つの円を強調表示します。たとえば、100アイテムの場合、アイテム1〜10は最初の円を強調表示し、11〜20は強調表示します2番目の円など。

編集:Samsung Galaxyのウィジェットページで同様のパターンが見つかりました:11個の円のみが表示されます(奇数に注意してください)。最初のページでは最初の円が強調表示され、2番目のページでは2番目の円が強調表示されます。ただし、中央の円には合計9ページあります。

0
Lescai Ionel