スライダー内の多すぎる弾丸をどのように処理しますか？

Question

モバイルアプリケーションの単純な画像スライダーに問題があります。スライダーは、箇条書きを使用してスライダーのページを示します。さて、ナビゲーションの弾丸が画面を簡単にオーバーフローできることがすぐに明らかになりました...

スライダー、通常はjQueryスライダーでオーバーフローするナビゲーションリストを処理するための一般的な方法を検索してみました。それらもオーバーフローするか、2行になってしまいます。

誰かがモバイルデバイスで溢れるナビゲーション弾丸に対処する適切な方法を知っていますか？

Answer 1

完全な詳細を知らなければ、次のような一般的なページネーションを思いつくでしょう。

<5/23>

前/次の矢印はテキストより大きく、タッチ可能でなければなりません。ただし、スワイプは依然として1つのページから別のページに移動するための主要な相互作用です。

これは完全に明確になると思います。前/次以外のページに直接ジャンプするオプションは失われますが。ただし、ドットのサイズと数が原因で、これもアプローチに問題があったでしょう。

Answer 2

現在のデザインでは、弾丸は小さすぎてクリックできません。情報としてのみ使用されているため、形状をさらに縮小できます。箇条書きを水平方向に積み重ね、代わりに四角形を使用すると、大幅なスペースを節約できます。良い例は見つかりませんでしたが、長方形は画像よりも薄い場合があります。 ||||||||||||||||||||||||||||||

Answer 3

弾丸がほんの一握り以上になると、ユーザーにとっての価値は低下します。とにかく、特にスワイプが主に使用されるタッチデバイスでは、ナビゲーションに実際に使用されることはほとんどありません。弾丸は、スライダー内の位置を示すためにほとんどそこにあります。だから私は箇条書きをドロップしてプログレスバーを表示するか、UIパターン全体を再考します。おそらく、そのコンテンツを表示して操作するために使用するより良いパターンがあるでしょうか？

Answer 4

私の提案は、それをそのままの状態に保つことですが、弾丸の左側と右側をフェードアウトすることです。それは彼らがシリンダーの周りを回転しているように見えるかもしれません。そうすれば、見た目がすっきりしませんが、ユーザーは左右にページがあることを確認できます。

Answer 5

それらをオーバーフローさせてはどうですか？空の弾丸が部分的に画面の端を超えているように見える限り、ユーザーは左/右にさらにページがあることを認識できます。