web-dev-qa-db-ja.com

水平スライダーによる大まかな微調整

私はFirefoxの矢印キーと同じくらい効果的にスクロールすることに慣れています。

スライダーにカーソルを合わせ、スクロールホイールを使用して、値をすばやく大まかに調整できるようにしたいと思います。細かい調整は矢印キーで行うことができますが、ユーザーがマウスからキーボードに切り替える必要はありません。

Mockup of horizontal slider

その他のオプション?私はそれらを強制的に保持することに完全に満足しているわけではありません。スクロール中のCtrlキー。

マウスホイールをクリックしても、うまく機能しないようです。

編集:多くの人は、スライダーをドラッグしても通常は機能しないのではないかと誤解しているようです。心配しないでください。そうなる。あ、キーボードによる数値入力も可能です。

主に:このスレッドをスクロールと水平スライダーに関連する微調整に集中したかった。

そうであることを説明するモックアップ。そこにareそれを行う他の方法なので、お願い:スライダーとスクロールホイールに関連する大まかな微調整:)

Mockup – Possible layout

5
Jonta

まず第一に、私はスライダーにスクロールホイールを使用することは非常に実用的ではないと思います:

  • スクロールホイールの速度によっては、制御できない場合があります(つまり、スライドが速すぎる)。
  • スクロールは通常垂直、スライダーは水平です(例外:マルチタッチ入力)。
  • それは一般的ではありません、人々はそれを期待しません(私はこれをしているアプリケーションを知りません)
  • スクロールすると、とにかくマウスを使用しているので、クリックとドラッグが自然になります(キーボードからマウスに切り替える必要はありません)。

したがって、私の提案は、スライダーにスクロールをまったく使用しないことです。私はPhotoshopのようなものに行きます:

  • クリックまたはドラッグしてマウスで調整するか、
  • キーボードによる数値入力または
  • 微調整のための上下矢印

それはPhotoshopでそれがどのように見えるかです:

Photoshop slider

このスライダーを改善するためのアイデア:

  • ドラッグするための大きな矢印
  • マウスで微調整するための上下矢印を追加

そして最後に:それでもスクロールを使用したい場合は、それを微調整に使用します(大まかな調整にはクリック/ドラッグがうまく機能するため)。

8
Phil

マウスホイールには、ユーザーがよく知っている特定の機能があります。ページをスクロールします。 1つのウィジェットがハイジャックすることを示唆しています。おそらく、何が起こっているのかを説明する視覚的な手がかりがなく、まったく別の目的で使用します。そのため、私のページ全体では通常どおりに動作し、この動作を変更する領域が1つあります。それがどこで始まるか、またはどこで終了するか、実際にはわかりません。

一部のWebサイトはこれを実行します(このWebサイトの1つ-応答/コメントボックス内)-しかし、それは通常、明確な境界線を持つ大規模で明確に定義された要素(通常はテキスト領域、またはスクロールバーを持つ他のコントロール)で発生します。スライダーを使用すると、視覚的なアフォーダンスは、ユーザーにこの動作を期待させるか、誤ってトリガーされたときにすぐに理解するのに十分ではないと思います。

3

矢印の上にカーソルを置くと表示される、ドラッグ可能な水平の「ボリュームコントロール」がありますか。あなたはまだ矢印でマクロ調整をすることができ、これはあなたに現在の値の+/- 5調整を与えるでしょう。例えば(YouTubeコントロールからのモックアップ):

enter image description here

2
icc97

このような広範囲の値を提供する必要がありますか?この状況を回避することは可能でしょうか?

可能な解決策:別のコントロールを追加できますか?おそらくユーザーがクリックしてスライダーを1単位移動できる上下の矢印ですか?これも矢印キーをサポートします。または、ユーザーが値を入力できるようにしますか?

1
Sheff

頭の上からアイデアを出します:スクローラーをそのままにしますが、微調整の場合はスライダーを微調整から緩調整に切り替えるチェックボックスを追加します(または微調整以外の用語を使用する場合、私の心は空白です)その用語は何ですか。これにより、ユーザーはキーボードに戻る必要がまったくなくなります。

1
JonW

これについて少し遅れて、これがあなたのニーズに合っているかどうかはわかりませんが、スライダーを使用して値を制御することを受け入れ、少し後戻りして、のような3つの相互にリンクされたスライダーの1つを介してユーザーがサイズを制御できるようにします下の画像:

彼らは、どちらが原動力であるかを選択します(実際の寸法、スケール、またはディスク上のサイズ)。各スライダーを変更すると他のスライダーに影響しますが、各スライダーには独自のレベルの細分性があります。

最も細かいレベルの制御はディメンションによるもので、中程度の制御はスケールであり、最も粗い制御はファイルサイズです。

enter image description here

1
Roger Attrill