最大値がない場合のスライダー制御
ユーザーが最大値のないFigureを入力できるコントロールを設計しようとしています。たとえば、その年にその人が旅行したいマイル数。
直接入力するためのテキストフィールドがありますが、これを調整できるようにしたいと考えています。コントロールは別のフィールドをリアルタイムで更新するため、この「マイル」フィールドに変更を加えると、他の場所のマップが更新されて、世界中で何回うまくいったか、または特定の国への距離が示されます。そういうこと。
テキストフィールドはあまり「調整可能」ではありません。ただし、ボックス内の合計は何でもかまいません（10の場合もあり、10,000の場合もあります）。スライダーを追加して、値をそのように調整しました。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ただし、スライダーの欠点は、コントロールの性質上、最大値が存在することです。だから私は代替案を考え出そうとしました。
私のアイデアは、水平方向の「サムホイール」を模倣することでした-ボリュームコントロール（またはマウスのスクロールホイールも）で得られるスクロール可能な歯車のようなものですが、終わりのない歯車です-スクロールすると回転し続けるだけです。
ユーザーが最後に到達すると親指が中央に戻るか、ユーザーが指を離すと親指が再び中央に戻るように設計しました。これにより、ユーザーは再び最後までスクロールして、無限に広告を繰り返すことができます。 。
残念ながら、これにはスライダーと同じ問題があります。ユーザビリティテストの結果、このコントロールは依然としてスライダーのように扱われ、バーの一端に引き寄せて離さず、期待どおりに使用できることがわかりませんでした。
私のサムホイールという比喩は、ここでは理想的ではなかったと思います。残念ながら、私には水平方向のスペースしかありません。 だから私は何が間違っているのですか？ユーザーがテキスト図を上下に調整できるようにするためのより良いコントロールはありますか？
ボックス内の合計は何でもかまいません（10の場合もあれば、10,000の場合もあります）。標準の+/-オプションを使用するのは、かなり苦痛です。
私は常に、SafariでMP3を表示するときにiOSクイックタイムアプリケーションが機能する方法に夢中になっており、この方法はあなたの使用に適応できると思います。通常のスライダーバーを使用できます。おそらく、ハンドルを通常の円から変更して、違いを示すことができます。バーにティックマークを追加し、両端で変化する数値を追加できます。次に、ユーザーにmovingマーカーをfixedスライダーバーに沿ってドラッグする代わりに、方程式を反転させます-マーカーを修正し、アニメーション化してスライダーバーの動きを示しますダニ。ユーザーがマーカーから指/マウスをスライドさせ、この入力のy軸を使用してスクラブ速度を調整できます。マウス/指がマーカーから離れているほど、指定された方向のスクラブ速度が速くなります（ x軸を使用して前方/後方を決定できます）。マーカーを少し視覚的にオフセットして、現在の移動方向を示すこともできます。目盛りはアニメートし、両側の数字が変化して現在の範囲を示します。
これがうまくいくかもしれないと思う理由：
- あなたが言及した可変範囲は存在します
- 微調整が可能-乗数を低くしたい場合は、指をバーに近づけるだけです
紛らわしい理由：
- スライダーバーから指を動かして値を調整できることはすぐにはわからない場合があり、ユーザーはスライダーバーの扱いに慣れており、これが異なる動作をするため、混乱が生じる可能性があります。
- 指の代わりにマウスポインターを使用すると、より難しいアナロジーになる可能性があります
私はiOSデバイスを持っていないので、（うまくいけば）これをよりよく説明するために小さなスケッチも含めました。 
ええと、1年の秒数には限りがあり、光速を超えることはできないため、誰かが1年間に移動できるマイルの最大数があると思います。
より現実的な制限は、3日ごとに1000マイル、つまり1年で約100,000マイルになる可能性があります。
通常のスライダーを使用することをお勧めしますが、対数スケールを使用します。
つまり、次の値の等間隔のノッチ：
0、10、100、1000、10000、100000
または、さらに解像度が必要な場合：
0、10、20、50、100、200、500、1000、2000、5000、10000など.
[〜＃〜]代わりに[〜＃〜]：
あなたはプラスとマイナスのボタンと数字を持つことができます。
[-] 5000 [+]
さらに、最も重要な数値を1つ増やします（マイナスを減らします）。
ただし、数値のサブセットしか取得できません。
1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200など.
次に、300〜900、1000、9000、10,000〜90,000など。
まだ提案されていない興味深いソリューションの1つは、ユーザーが希望する数に設定できる一種の「走行距離計」です。これには、ユーザーが小さい数字をスクロールして大きい数字に移動する必要がなくなり、ユーザーが望むとおりに正確になり、キーボードをいじる必要のないプレーンテキスト入力と同じくらい簡単になるという利点があります。
ユーザーが数値の上部または下部をクリックした場合に、目的の方向に次の数値に回転するようにすることができます。さらに、ユーザーはダイヤルを上下にドラッグして、必要な数に合わせることができます。このソリューションは最初に要求されたように「無限」ではないことを認めますが、十分に十分な数のダイヤルを追加することも、ユーザーがより大きなオーダーを希望する場合は左側に+ボタンを追加することもできます。
循環コントロールに関する@Henrik Ekblomのコメントを読んだとき、タイマーアプリがどのように機能するかを思い出しましたAndroid電話（下の画像はTimelyアプリからのものです）。タイマーには何分/時間も追加できます時計の周りの円でカーソルをドラッグし続けるために必要です。明らかに、円形の形式は時計のような機能に非常によく機能し、タッチベースのインターフェイスではなく、マウスベースのインターフェイスで使用するのがより困難になる可能性があります。
ただし、最大値なしで特定の金額を指定するためのコントロールの最良の例であり続けます。ラベルに使用する番号とラベルを配置する場所に応じて、ユーザーに必要なだけ具体的なコントロールを与えることができます。
円形コントロールの最大の欠点は、水平スライダーよりもかなり多くのスペースを占めることであり、それは時計と時間に強く関連しています。
次のようになるように、サムインジケーターを削除し、両側に矢印を追加して、スライダーをダイヤルに置き換えることをお勧めします。
私はオンラインシミュレーション中に、同様のダイヤルを使用して周波数を制御するプログラムを職場で使用していますが、誰もが混乱するのを見たことはありません。インターフェースは次のとおりです。
あなたのユーザーは、大きなステップで、詳細度の低い走行距離領域を最初に選択する何かを必要としているようです。その領域が選択されたら、微調整する時間です。これを行う1つの方法は、下の画像のようになります。
ユーザーがスパンコントロール（A）をクリックしてドラッグするとすぐに、赤いマーカーが続き、より細かく調整された領域（B）が表示されます。ユーザーは、マウスをエリアBに移動して、走行距離を微調整できます。
（青色のテキストはコメントです）
私はあなたの一般的な考えが好きですが、ユーザーが比喩を理解していないようです。次の2つのオプションがあります。
veryを変形させ、ヒントを得られることを期待します。スライダーを使用する代わりに、左または右に多かれ少なかれ押すことができる物理的なレバーのようなものを使用し、その横にチェイスサンドマンの回答のような回転数の表示があり、それに応じて速くまたは遅くなりますレバーをどれだけ押したかそれはおそらくポイントを取るでしょうが、それは非常に派手で、おそらくそこにあるほとんどのデザインに適合しません。
メタファーを完全に忘れて、サムホイールとは何の関係もないシンプルでわかりやすいデジタルコントロールを使用します。これは私の好みのオプションです。私の最初の試みは、いくつかのインクリメントおよびデクリメントボタンです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ここに示す手順では、Chaseによって提案されたスピナーと意味的に同等ですが、スペースをとるという欠点があります。しかし、10の累乗だけでなく、必要に応じてステップを選択できるため、より柔軟です。たとえば、+ 1、+ 10、+ 50、+ 250など、意味のあるものを使用できます。無限の数については、通常の範囲で意味のある数から始めると言いますが、ユーザーが予想外に高い数に達したときに追加のボタンを表示します。
これらのボタンを通常のボタンだけでなく、実際の時計のコントロールのように、長押しすると着実に増加するようにするのは、おそらく良い感じです。この機能は発見可能性は低くなりますが、発見した人はおそらくその遊び心を高く評価します（あなたはいくつかを紹介したいと言ったので、私はそれで大丈夫だと思います）、それを発見しない人は妨げられません複数クリックで効率的に情報を入力します。
どの提案が機能するかを見つける前に、ここで提案されている他の提案に対してこの提案をテストする必要があります。私は実際にそれを見たことがないので、それが落とし穴がないことを保証することはできません。
何か不足しているかもしれませんが（「標準+/-値」と言ったときにこれを参照していた可能性があります）、これはスピナーの完全なユースケースのようです。
スピナーの設計は、「ある時点でのスピナーの外観は関連する値の量を表さない」（Wikipedia）ものです。したがって、スライダーが現在直面している問題に遭遇することはありません。スライダーには明確なエンドポイントがあります。
さらに、スピナーを使用すると、テキストボックスに直接入力する、上下ボタンをクリックする、上下ボタンを押すなど、いくつかの方法で値を入力できるため、ユーザーは任意の値（大、小、正確）を簡単に選択できます。キーボードの矢印。オプションをすばやくスクロールしたい場合は、ボタン/キーを押したままにすることができます。最後に、スピナーはよく知られているUIオブジェクトであるため、ユーザーはスピナーとの対話方法を既に知っています。
[〜＃〜]編集[〜＃〜]
ユーザーがテキストボックスに入力した数値、つまりスライダーの中央の値です。左（マイルを減らす）または右（マイルを増やす）にスライドすることで、その数を調整できます。中央の数値と上限および下限の範囲との距離はあなた次第です
あなたの場合、最大数があります。
1年は365日または8,760時間が移動時間として利用できます。
飛行機の平均速度は550 mphです。
ボーイング777-200LRは長距離旅客機であり、その最大負荷距離は10,800マイル、または約19.6時間上記の速度で移動すると仮定します。
したがって、文字通り着陸してすぐに離陸しても（そして何とかして瞬時に燃料を補給しても）、777は最大距離を447回移動できます。
したがって、ばかげているが防御可能な、1年間に人が移動できる最大距離は4,827,600マイルです。
これはどう：
ユーザー（またはデフォルト）がスライダーの最大数を設定できるようにします。したがって、スライダーの右側の値は常にテキストフィールドと等しくなります。そうすれば、人々は数値を入力するか、数値を増やして、数値を下げるとどうなるかを確認できます。このアプローチのバリエーションを試すこともできます。
スライダーに対数目盛を置きます。大きな値を正確にする必要はほとんどないため、非常に大きな上限を設定できます。この入力に対して考えられる最大の値を取り、50％を追加します。
実質ではなくボリュームを必要とするシステムに対応して、上記の段落で述べたことを再度述べます。
質問は、スクラバー/スライダースタイルのコントロールを必要としていますが、上限が非常に高くなっています。スクラバーに対数スケールを配置すると、下端で詳細が得られ、上端で非常に広い範囲が得られます。これが「対数」の意味です。重要な数字のルールによると、「104,253」はほとんど必要ありません。通常、100,000で十分ですが、20対25が重要です。
うまくいけば、あなたが「サムホイール」の概念をどのように実装したか理解できたので、同じ考えを単純に再ハッシュするのではなく、次の概念は、主にすでにレイアウトしたものに基づいています。
現時点では、サムホイールを設計した方法は、大きな値（10,000マイルを追加する場合など）を通過するために、同じアクションを何度も繰り返す必要があることを意味します（最後までドラッグして離します）。 。これは、このタスクを何度も繰り返すと疲労が生じる可能性があるため、ユーザーにとって問題になる可能性があります。これに対するより良い解決策は同じ概念を使用することかもしれませんが、ユーザーが特定のポイントにドラッグして離した後にのみ値を増やすのではなく、ユーザーが円を中心の休憩から離している間、値を継続的に増やします。ポイント。
詳述すると、これは円が中心にとどまっている間、値はまったく変化しないことを意味します。円を少し右にドラッグすると、円を中央からどれだけ遠くに移動したかに基づいて値が増加し、これがxミリ秒ごとに行われます。これは、ユーザーが円を特定の距離だけ移動し、テキストフィールドが小さい値の増分で増加するまで待つか、円を右端に移動して値が非常に速く増加するのを待つことを意味します。
このアイデアの実際の例は、Webページでマウスの中央クリックを使用してスクロールするときに見つかります。十分に長いページに移動した場合、スクロールホイールを下にクリックしてからマウスを上下に移動すると、少しだけ移動すると、後ろのページが同じ方向に速度で移動することがわかります。カーソルの開始点と現在の点の間の距離を表します。この場合、カーソルは提案されたコントロールを表し、後ろのページは増分または減分されているカウンターを表します（比較は少し拡大されていますが、それ以外の説明は比較的困難です）。
この種のアプローチの利点は、ユーザーがスライダーを右端に動かしてそこに保持し、必要な値に近づいたときに停止（または減速）することで、ユーザーが大量に移動できることです。また、コントロールを操作している限り値が増加し続ける可能性があるため、最大値がないという問題を回避します。
このアイデアは新しいものではありませんが、コントロールが伝統的にどのような名前を付けられたかはわかりません。また、過去に物理的に適用されたのを見たことは比較的確かですが、どこにあるかは完全にはわかりません。
（1）位置インジケーター（たとえば、マイル数を表示する）と（2）「スピードノブ」（スライダーのつまみ）を表示することをお勧めします。
速度ノブの位置が-1から1に変化するとします。次に、位置xにあるとき、クロックの1ティックごとに1回（たとえば、60秒ごとに1回）、位置インジケーターをCtan（pix/2）値Cを実験的に選択します。これは、人々が移動できる速度に依存します。 xが1と-1に近づくと、この増加率はプラスまたはマイナス無限大に移動するため、非常に速く移動できます...しかし、中間制御では、かなり合理的で制御可能です。
五十嵐はかつて地図スクロールについて何か賢いものを提案しました-参照を思い出すことはできません-しかし、考えは、マウスをどれだけ動かすかに比例して地図がスクロールするということでした...マウスをさらに動かすと、地図は「ズームアウト」したため、マップ全体の実効速度は非常に高速でした。
あなたの場合、それらの「目盛り」が10個ごとに赤くなるように想像してください。マウスを右に動かすと、彼らは回転を始めます...しかし、それらの間の距離も少し縮小します...そして、さらに右に動かすと、灰色の目盛りが消えるまで、縮小します。あなたはただ赤い目盛りが動いているのを見るだけです...そして、10番目ごとに青くなっていることがわかります...そして、複数のレベルのスクロールを通して、等々です。基本的に、位置が-1/2と1/2の間にある場合、灰色の目盛りと赤の目盛りが時折表示されます。 +/- 1/2に達するまでに、実際には赤い目盛りだけが表示され、時折青い目盛りが表示されます。このパターンは、1/2から3/4に移動しても維持されます。この時点で、青が表示され、時折緑が表示されます。 3/4から7/8まで...ええと、あなたはアイデアを思いつきます。
もちろん、最初は灰色のものをフェードアウトさせ、赤いものは互いに近づくにつれて次第に灰色になり、新しいBRIGHT赤いものは10ステップごとに、というようにして、新しい色を発明し続ける必要はありません。
つまり、間隔である使用可能なカーソルスペースから実数の大部分へのマッピングを使用します-1 /（1-x ^ 2）のようなもの、または先に提案した正接関数。
範囲またはスケールを選択するプルダウンまたは「ズーム」コントロールと、指定された範囲内または適切なスケールの数値を選択するスライダーの2つのコントロールがあるとどうでしょうか。
値を入力する必要がある精度に応じて、対数目盛を使用して、1、3、10、30、100、300、1,000、3,000、10,000の値がほぼ等間隔になるようにする方法もあります。これにより、大きな値を選択しながら、小さな値である程度の精度を確保できます。
[0,1]の導関数が[0, Infinity)、x=0の導関数がInfinity、0のx=1をy=500からx=0.5にマップできます。たとえば、f(x) = 1000*x*tan(0.5*pi*x)は次のようになります。
このスケールでは、次の値があります。
- 0 <-> 0マイル
- 0.1 <-> 16マイル
- 0.25 <-> 103マイル
- 0.5 <-> 500マイル
- 0.75 <-> 1810マイル
- 0.9 <-> 5682マイル
もちろん、使用できる変換は他にもたくさんあります。他の変換を試してみることもできます。問題の1つは、スケールの右側に行くほど、微調整が難しくなることです。 x=0.1での1％の増加は、3マイルの増加に相当します。 x=0.9での1％の増加は、700マイルの増加に相当します。
視覚的な開始と停止を示すあらゆる種類のコントロールは、基準にとって問題になります。スクロールを使用して入力フィールドを変更しないのはなぜですか？ピクセルと距離の単位の比率はカスタマイズできます。スクロールすると、繰り返しクリック/タップしたり、数直線を注意深くナビゲートしたりするよりもはるかに自然な操作が可能になります。それがどのように機能するかを示すために例を用意しました：
http://codepen.io/jessejackson/pen/taAbB
変更する必要があるのは、次のものだけです。
- フォーム/ページのフロー内でスクロール可能な要素にする
- ユーザーが手動で値を入力した場合にスクロール位置を変更するEventListenerを追加します（ユーザーが後でもう一度スクロールした場合、ユーザーが入力した位置から値を変更し始めます）。この手順では、ユーザーが要素の最大値を超えて[とんでもない]値を入力した場合に、スクロール可能な要素の高さを増やす機能も追加します（20 000 000から開始しました）。