3つのハンドラーと入力フィールドを持つスライダー
機能に取り組んでいますが、機能値の合計（100％）を4つの要素に分配する必要があります。最善のオプションは入力フィールドだと思いますが、スライダーからの視覚的なフィードバックが好きです、何か提案はありますか？- 
上に示したスライダーのデザインは、アクセシビリティの観点から非常に混乱する可能性があります。誰かが色を適切に見ることができなかった場合はどうなりますか？
3つのスライダー「ハンドル」が4つのフィールドに表示されます。それも奇妙に思えます。
ベクトル1を25％、ベクトル2を26％にする必要がある場合はどうなりますか？これは非常に退屈なマウスのドラッグのようです。
フォームフィールドを使用すると、各フィールドにすばやく移動したり、値を入力した後、自動的に次のフォームフィールドに移動したりできます。
これは正確な作業です。直接番号を入力するのが最善の選択だと思います。
ただし、さらに視覚的なものが必要な場合は、グラフまたは4つの値が100％にどのように分布しているかを示します。たとえば、ベクトル1では、25％と入力します。次に、残りの進捗状況などを示すグラフを描画します。
あなたのスライダーは確かに機能すると思いますが、a）色のアクセシビリティの問題に完全に同意します。b）スライダーのトラックがハンドルの位置に関係なく100％を表すことを確認します。c）いくつかの変更を加えます。関連付けをより明確にするために少し：
フィールドとベクトル名は、関連するセグメントの上/下（可能な限り）に（可能な限り）中央に保ち（両方とも上または下にある可能性があります）、色によって問題が混乱しないようにしてください。 また、ライトグレーは使用しません：低コントラストのコントロールはクールではなく、顧客の一部にとっては使いにくいだけです。
わずか0.02ドル。
100まで自動補完する棒グラフを使用すると、より効果的に作業できます。それらを線形スケールで接続することは、各変数を決定するよりも複雑なアクションです。 1を増やすと、近隣変数が自動的に減少します。
割り当てられていないパーセンテージバーを追加して、少しわかりやすくすることができます...
ユーザーが入力したデータを取得するための最良の方法がフォームフィールドであることに気付いたと思います。バーのハンドルを移動するのと同じくらい難しくはありません。私は考えています フィッツの法則 。ただし、両方を使用できなかった理由はありません。
情報の表示に関しては、棒グラフが適切に機能するか、「ドーナツ」グラフも機能する可能性があります。このアイデアが気に入ったのは、完全な円が表示されるため、合計を最大100％まで簡単に確認できるためです。
興味がありませんが、残りのパーセンテージを常に埋めるデフォルトの要素はありますか？ 20％、20％、15％を入れた場合のように、ファクター4が自動的に45％に入ると言いますか？リニアスライダーは、不足しているパーセンテージがあることを表していない可能性があるので、質問します。 20％、20％、20％、20％と入力した場合、100％がどのように見えるのかわからないため、バーが80％しかないことに気付かない可能性があります。ドーナツグラフを使用した場合、合計が100にならないことを示す不完全な円が表示されます。
線形のスライダー/バーに固執する場合は、「エンドポイント」インジケーターを使用することをお勧めします。これにより、合計が100％に達していないかどうかを確認でき、色以外のものを使用して、要因。
「ドーナツ」または円グラフの例：
