web-dev-qa-db-ja.com

100Kの増分で100K-1Bの数値を入力するユーザーインターフェイスを設計する方法

ユーザーに数値を入力するように要求し、数値が100Kの倍数で100Kと1Bの間であることを検証し、そうでない場合はエラーメッセージを表示するだけです。 1つの小さな改善として、そこにあるカンマをすべて取り除くことができます。

これを改善する方法はありますか?ユーザーに100、000などの数字を入力できるように、K、M、またはBサフィックス付きの数字を入力できるようにする必要がありますか(もちろん大文字と小文字は区別されません)。しかし、それを行う方法についてのドキュメントを提供する必要がありますが、本当に役に立っているかわかりません。

適切な範囲とステップの数値スピナーコントロールを使用する必要がありますか?

機能するスライダーコントロールはありますか?

4
David Levine

最小のステップサイズが100kの数値ログスケールスライダーを使用します。

mockup

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

スライダーの私のルールは、スライダーウィジェットよりも好きなユーザーのために、タブ/キーボードを介して数値を入力できる「リンクされた」テキストボックスを常に提供することです。

4
J. Dimeo

数値を入力する最も簡単な方法は、入力することです。番号を入力できる簡単なテキストボックスを提供します。

サフィックスも機能しますが、次の点に注意してください。

  • 可能な最大値は10億であるため、Bサフィックスは実際には必要ありません。
  • Mは1000を表すローマ数字で、1000の接尾辞としてよく使用されます。 (MMは100万です。)混乱する可能性があります。

ユーザーについて詳しく知らなければ、次のような説明のテキストボックスを使用します。

0.1(10万)から1000(10億)の間の数を百万単位で入力します。値は、10万(10万)の増分である必要があります。

テキストボックスには小数点以下1桁まで入力でき、小数点以下2桁を追加する入力は無視されます。

1

このようなものは仕事をしますか?

この例では、最初の5桁はユーザーが0から9までの数字を選択できるドロップダウンであり、2番目の5桁はゼロに固定されて無効になっています。

enter image description here

または、それぞれ最大1文字を入力できる5つの入力ボックスを用意し、クライアント側のスクリプトを使用して、非数値の入力と送信前の検証を防止します

enter image description here

0
Darren H