web-dev-qa-db-ja.com

+/-ボタンで数値を選択するか、手動で入力しますか?

私が取り組んでいるデザインでは、ユーザーが各アイテムに値を割り当てています。その値が1より大きい場合、2番目の依存属性が表示されます(図のように)。数値を大きくし、醜くて忙しいテキストボックスにデフォルト設定しないでください。しかし、私が考えることができる唯一の解決策は、さらに醜くて忙しい-/ +ボタンのコンボであり、これも信じられないほどスペースが高価です(そして、モバイルモードに合わせるのはほとんど不可能です)。

これを行うより良い方法はありますか?

enter image description here

6
JClaussFTW

次のUIコントロールについてはどうでしょう。ユーザーが必要とする任意の数値にアクセスするためのテキストフィールド(数値に制限されています)。

enter image description here

2
TotemFlare

値を選択するためのUIとしてのプラス/マイナスボタンは許容できるソリューションですが、次のような特定の場合に限られます。

  • 可能な選択肢の範囲は狭い(ユーザーが20回左クリックしない)
  • 値を変更するとすぐに目に見える効果があります(例:グラフの更新)

選択肢の数が比較的少ない場合は、ドロップダウン選択ボックスを使用できます。これにより、数字のスタイルをかなり大きくしたり、数字をクリックまたはタップして選択ボックスを開いたりすることができます。

1
devios1

次の方法を試すことができます。通常、追加のボタンやテキストボックスを使用せずに、数値はそのまま表示されます。ただし、ユーザーが数字に触れると、下部に小さなスライダーが表示され、末尾に「+」と「-」のラベルが付きます。数値を右にスライドするとその値が増加し(増加の速度はスライダーの中心からの距離に依存します)、左にスライドすると減少します。ユーザーがタッチを解除すると、番号は元の位置に戻り、残りの番号と整列します。

mockup

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

水平方向のスペースが本当に重要な場合は、代わりにスライダーを垂直にすることができます。その場合、数値を調整するときに、他のすべての数値を暗くして、それらのいくつかの上にコントロールをペイントします。

0
Pasha