web-dev-qa-db-ja.com

レンジスライダーの感度の向上

ここでのコンテキストはハイブリッドAndroid(v 4.4.x +)アプリです。私はかなりよく書かれ文書化された noUISlider のコードから始めました。 「マテリアル」スライダーのように見えるようにします。このコントロールの私の選択は、スクリプトで簡単に制御できる線形および対数スライダーを必要とするという事実によって決定されました。下の画像を見てください。

enter image description here

スライダーの範囲は、30分単位で変更する必要があります。これは、Webアプリで基になるコードを使用し、マウスを使用してスライダーを動かす場合にうまく機能します。ただし、Android電話アプリ(つまり、タッチスクリーン))では、スライダーを正確に移動することはほとんど不可能です-値が低すぎる/高すぎる場合、いくつかの失敗した実験がないと、不可能です。この問題に対処するために私が考えることができる唯一の方法は、スライダーのどちらかの端にかなり太い、+&-ボタンを配置することです。

3
DroidOS

スライダーは使用しないことをお勧めします。 Nielsen Normanがこれに関する記事を公開しました。

https://www.nngroup.com/articles/gui-slider-controls/

以下はその概要であり、知っておく必要のあるすべてがわかるかもしれません。

スライダーが適切に設計されていても、スライダーを使用して正確な値を選択することは、優れた運動能力を必要とする困難な作業です。正確な値を選択することがインターフェースの目標にとって重要な場合は、代替のUI要素を選択します。

そうは言っても、私が見た中で最高の「微調整」スライダーは、YouTubeの長い動画にあります。

スライダーのつまみを押している間、マウスを上に動かすと、スライダーの人のビューが本質的にズームインします。これは、左右の同じ移動範囲が、全体の値の範囲の小さいセクションから選択されていることを意味します。

試してみたい場合は、(デスクトップのウェブサイトで)1時間のYouTube動画を探し、スライダーのつまみをクリックして押したまま、マウスを上方向にドラッグします。スライダーは垂直方向に拡大します。

ただし、これは理想的ではありません。シグニファイアがないため、誰もそれが存在することを知りません。おそらく、同じ問題が発生します。

2
user65243

範囲内のステップが指に対して小さすぎる場合、次のことができます。

  • より高いステップを使用してください:オプションは、スライダーを2つに分割することです
  • 範囲を削除:別の要素を使用するか、ステップを削除します
  • ユーザーが操作しているときにステップを削除します:操作してテストしないとわかりませんが、スライダーが「ジャンプ」していることが問題だと思います定義済みのステップ間。これが当てはまる場合は、ユーザーがドラッグしているときにステップ「ジャンプ」を削除しながら、数値がステップ(30分から30分)で値を表示し続けます。
0
Alvaro

Slider with plus and minus

スライダーにプラスまたはマイナスを追加して、指が少ない労力で正確な時間を選択できるようにすることを検討してください。

別のオプションは、スライダーが移動する増分を決定する別のコントロールを提供することです。これには少し慣れる必要がありますが、必要な機能が提供されます。

Slider with calibrator to the right

ここでの考え方は、「30」はスライダーが移動する増分であり、数値の右側にあるノブでスライダーの増分を変更できるということです。とりあえず、1、5、15、30、60の増分を作成します。キャリブレーションノブを上に動かすと、スライダーの増分が増加し、減少します。

または、これはすべてやり過ぎでまったく機能しない可能性があります-私はこれをテストしていません。

試してみたい場合は、機能するかどうかをお知らせください。

0
Bob