web-dev-qa-db-ja.com

単一の範囲から複数の範囲を選択する

個人のアカウントを収益で分割する必要があるアプリケーションを作成しています。ユーザーがこれらのセグメントを作成する最も簡単な方法を見つけようとしています。このタスクでは、単一の収益範囲(この例では$ 1〜$ 10,000)を複数のより小さな範囲に分割します。

関係:-アプリケーションには収益範囲があります(大きい方)。 -各セグメントには、アプリケーションの収益範囲内の収益範囲があります。 -各アカウントには毎月の定期的な収入数があります。

multiple segments

上記は私の現在の解決策です-セグメントの名前と、ユーザーがセグメントの下限と上限を入力するためのフィールドの表。これは混乱を招き、アプリケーション内の合計範囲のどこにこれらの範囲が含まれるかを示していないのではないかと心配しています。

スライダー内の一連のスライダーに移動することを検討しました。おそらくPhotoshopがグラデーションを処理する方法ですが、混乱を招くのではないかと心配しています。

これらの範囲の重複は許容されますが、好ましくありません。

誰かがこの問題に取り組む前に、またはそれを解決する最良の方法について考えたことはありますか?


アップデート10.7.2016

この問題のより良い解決策を見つけたかもしれません。 Elessar と呼ばれるライブラリがあり、Photoshopのグラデーションピッカーのようなものを実行しようとします。

slider

ライブラリは範囲付きのスライダーを提供します。エリアにカーソルを合わせると、より広い範囲内に新しい範囲を作成できます。新しい範囲が作成されたら、エッジをドラッグして、どちらの方向にも拡大および縮小できます。このツールでは、範囲の重複は許可されていません。

そのままでは表示されませんが、セグメントを削除する方法があります。簡単な解決策は、ホバリング時に表示されるXを表示することです。ホバーし、Xをクリックします。よろしいですか?ダイアログが表示され、セグメントが削除されます。これが小さなセグメントでどのように見えるかについて少し心配です。

このソリューションで考えられるその他の問題:

  • スライダーは正確な数値を入力するほど正確ではありません。たとえば、スライダーを$ 499で正確にヒットさせるのは難しい場合があります。
  • 範囲が非常に大きいと、正確であることが難しくなります。

アップデート10.10.2016

Madalinaのアプローチは、おそらくこの機能を使用するのに最適なアプローチだと思います。スライダーをデータの表現として保持しますが、編集はテーブルに限定します。

multiple ranges with bar visual

棒グラフを使用してアプリケーションの収益範囲とその中のより小さな範囲を表すことにより、ユーザーはセグメントのサイズをより簡単に視覚化できます。

さらに、これはスライダーを使用する場合よりも開発にかかる時間がはるかに短くなります。

3
Sam Solomon

スライダーは、テーブルで変更されたデータの表現としてのみ保持し、そこでもデータを変更する可能性はないと考えます。

行の更新後、間隔もスライダーで強調表示できます。範囲スライダーが使いやすいとわかった場合は、ユーザーが行を更新するときにモーダル/ポップアップで使用できますが、インライン編集を好みます。混乱の少ないものが必要だと言ったので、複雑ではなく単純にしてください。

複数の範囲スライダーを使用するソリューションは高速ですが、データを保存するための直感的ではありません。

3
Madalina Taina