予算配分のためのマルチレンジスライダー
現在、固定予算をさまざまなチャネルに割り当てるために使用されるスライダーを設計しています。以下に現在のデザインの写真をいくつか掲載しました。現時点では、スライダーハンドルをドラッグするだけで割り当てを変更できますが、上部の数字をクリックして値を入力することもできます。
主な問題は、近い将来にいくつかの新しいチャネルが登場することです。このソリューションが非常に多くのオプションでうまく機能するかどうかはわかりません。色分けは混乱し、各セクションの幅は非常に小さいため、後で設定を変更するのは難しいかもしれません。このデザインを改善する方法について何か提案はありますか？これを解決するために完全に異なる何かを行うことさえありますか？
スライダーの主な問題は、順序が重要であることです：€30をチャネル2からチャネル5に簡単に移動することはできません。
以下の操作が関連していると思います。
- 他の1つのチャネルの予算を減らすことによって1つのチャネルの予算を増やす
- 他のチャネルから（へ）ビットを比例的に取得（追加）することにより、1つのチャネルの予算を増加（減少）する
原則として、これらの操作は一連のスライダーでエンコードすることができます。
Channel 1 [---|€20|-------------------------] [lock] [fix]
Channel 2 [------------|€200|---------------] [lock] [fix]
Channel 3 [---------------|€300|------------] [lock] [fix]
Available [----------|€-20|-----------------]
[spread proportionally] [spread evenly]
最後のスライダーは、現在の割り当てを考慮した後の使用可能な予算を示します（予算を超える場合はマイナス）。 [fix]は、単一のチャネルに利用可能な予算を追加します（または不足している予算から減算します）（そのボタンには、より適切な名前が必要です）。
[spread evenly]は、利用可能な予算をすべてのチャネル間で分割します（もちろん、制限に従います）。上記の例では、それぞれ€7/7/6を減算します。
[spread proportionally]は、利用可能な予算を同様に配分しますが、現在の割り当てを重みとして使用します（それぞれ€1 /€8 /€11を差し引きます）
[lock]は、それぞれのチャネルが拡散に参加するのを防ぎます。
核となるアイデアはnotで、UIに「予算」制約を適用します。再割り当ては、本質的に2段階のプロセス（ここから削除し、そこに追加する）であり、「利用可能」です。行はキャリーオーバーとして機能します。
一般的なスライダー：
スライダーはそれを「面白く」見せることができますが、私はそれらに反対するでしょう。精度の割り当ては、選択肢が少ない場合にのみ役立ちます（たとえば、予算が500ユーロで、ステップが10ユーロの場合）。スライダーが€50.01から€49.99の間でジャンプするのをいじるのは腹立たしい。
多数のチャネルの場合、有用なスライダーの範囲はごくわずかです。 （たとえば、10チャネルの場合、スライダーの幅の平均10％が使用されます）。
各チャネルの数値入力と、Niceチャートでのオンザフライの視覚化をお勧めします。
この元のソリューションは魅力的ですが、拡張性がないというあなたの評価には同意します。また、水平でありながら比例しているため、直観に反しているとも言えます。
まず、このインタラクションパターンを一連のリンクされたフェーダーコントロールに変更します。低音と高音を調整するためにここにあるもののようなもの：
このパターンを使用する利点は、予算配分を表すための視覚的な曲線をユーザーに即座に提供できることと、個々のチャネルを利用可能な資金のプールにプログラムで結び付けることができることです。
これを行うことで、将来的に規模を拡大できるようになります。また、必要に応じて、各チャネルに色を割り当てるという考えを維持することができます。必要に応じて、割り当てられた資金の量を表すために、各チャネルの垂直スライダーの上または下に数値スピナー（html数値入力）を追加できます。検証は少し難しいかもしれませんが、ユーザーに調整のための複数の入力を提供することにより、チャネルごとに資金割り当てをすばやくリフローする方法があります。
これがあなたがこれを取る場所についていくつかのアイデアを与えるのに役立つことを願っています。
次の画像を参照してください Humble Bundleの優れた例 で問題が解決されます。
3つの主要なスライダーが表示されます。開発者、慈善団体、控えめなヒントです。他の2つのスライダー（サブスライダー）を動かさずに変更できる他の2つのスライダーに分かれている「チャリティー」スライダーのソリューションを見つける方法を確認できます。
スライダー内のチャネル間のハンドルを削除して、上記の標識をハンドルとして使用することはできませんか？きつい場合は、1つおきにチャンネルの下に配置できますか？
これがすべて失敗し、面倒すぎる場合は、各チャネルを独自のスライダーに分離します。
元のデザインを保持したい場合の代替策として、制限を修正できます。
彼らはあまりきつく絞られないように最小幅を提供します。
金額ポップアップをクリックしてデータ入力フィールドを提供し、より細かい金額を提供します
最後に、チャネルの数が増えると、Petersメッセージのように各チャネルが縦の形式で表示されます。