web-dev-qa-db-ja.com

2つのスライダーを備えたタッチ可能なスライダー-ベストプラクティス

1つのスライダーだけで2​​つの値を変更するユーザーフレンドリーなソリューションを探しています。 enter image description here
各しきい値はスライダーのノブで表されるのに対して、私には上限と下限のしきい値があります。私がタッチスクリーンを扱っているので、各ノブにはクリック可能な領域があります。ノブが互いに近く、つまり領域が重複している場合、ユーザーは常に上にあるノブを選択します。これを解決する唯一の方法は、ユーザーがもう一度クリックして、他のノブを選択できるようにすることです。
次の状況を想定します：
1）ユーザーは左のノブを右のノブに近づけます
2）ユーザーは右ボタンをさらに右にシフトしたいのですが、これはデフォルトで上に重ねられているため、左ボタンをつかみます。
3）ユーザーは領域をもう一度クリックして他のボタンを選択する必要があります
4）この後、ユーザーはもう一度押してドラッグできます。他の解決策は、2回目のクリックが実行されるとすぐにドラッグを開始することです。

別の解決策は、いくつかのラジオボタンを近くに配置し、スライダーを選択することです。
別の問題は、もちろんスライダーの微調整です。そのため、どこかに+/-ボタンを配置する必要があります。 +/-のセットを両方ではなく1つだけ配置すると、常に1つのノブがアクティブになります。


そのような問題に対処するガイドラインはありますか？

touch-screensliders
6
blaster

同じコントロール上に2つの異なるドラッグ可能なアイテムをオーバーレイすると、問題が多すぎます。 1つは、両方の値を同じにしたい場合、2つのインジケーターがあることを確認するのが難しくなるか、またはそのうちの1つを調整したい場合、正しいアイテムを取得していることを確認するのが困難になります。

ドラッグポイントが2つしかない場合は、上/下のアプローチで行ってみませんか？これにより、どのインジケーターがどのインジケーターであるかがわかりやすくなり、より細かい調整が可能になります。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

（おそらく、アイテムをドラッグしたくない、またはドラッグできない人のために、そこにもいくつかのテキストフィールドが必要です。しかし、それは実際には別のポイントです）

24
JonW

複数のスライダーを用意してリンクすることで同様の要件を解決し、スライダーを相互に「検証」しました（シフトを構成するためのUI-最終的に開始時間になります）。右の写真は境界条件を示しています（最小および最大、いわば）：

Shift 1: --|--------------------- 02:00        |-----------    ---------|--
Shift 2: ----------|------------- 10:00        -|----------    ----------|-
Shift 3: ------------------|----- 18:00        --|---------    -----------|

これを適用するには、値の範囲が不連続であることを要件とする必要がある場合があります（私の場合、シフトは30分単位で開始される場合があります）。

2
Astrogator

私はJonWのソリューションをより気に入っていますが、別の可能性として、2つの親指が十分に近づいたら、各親指のクリック可能な領域を半分にして、左手の親指のクリック可能な領域を左半分にし、右手の親指のクリック可能な領域を右半分にすることができます。 （または、クリック可能な領域間の距離が変化するにつれて、クリック可能な領域を継続的に調整することができます。ポイントは、それらが重複しないようにすることです。）

1
jamesdlin

別の選択肢。親指の「アクティブな」ポイントを親指の中央から左親指の右側に、右親指の左スライドをAndroidがテキストカット/コピー機能。

Android-like slider

これには、両方の親指が同じ側にあるという利点があり、必要な垂直方向のスペースの量が減り、必要に応じて両方の親指を同時に移動でき、しかも互いに重ならないという属性があります。

1
Bill Dagg

JonWの解決策は、スライダーをユーザーに視覚的に区別させるという点でおそらく最良であり、私がこれを実装しているのであれば、おそらく私はそうするでしょう。

ただし、上/下を使用せず、元の設定を使用する場合、別の解決策として、領域が重複しているかどうかを確認し、重複している場合は、入力ポイントに最も近い原点を持つスライダーを選択します。

on_input()
{
    if(MinSlider.Contains(inputLocation) AND MaxSlider.Contains(inputLocation))
    {
        minLength = DistanceBetween(MinSlider.Origin, inputLocation)
        maxLength = DistanceBetween(MaxSlider.Origin, inputLocation)
        if(minLength <= maxLength)
        {
            //Select Minimum Slider
        }else{
            //Select Maximum Slider
        }
    }else{
        //Regular selection based on region
    }
}
0
JonBee