カスタム電卓に最適なレイアウト（モバイルWebブラウザー用）
携帯電話でエクササイズ（ベンチプレスなど）のために最大体重を記録したい。
これを行うために作成したWebアプリがあります。
私が作成したツールの1つは「バーベル電卓」です。
ウェイトを接続すると、値が報告されます。私はそれが好きですが、私はレイアウトに不満があります：
主に、上下にスクロールするのが嫌いで、画面に追加/ドロップボタンが多すぎます。
jsFiddleのデモ を配置します。
これらの重みの画像の代わりに、標準的な計算機のように見えるレイアウトの方がうまく機能すると思います。
上部のバーベルは同じように見えますが、その下には次のようなものがあります。
ポンドボタンはオプションボタンのように機能し、選択されたウェイトは追加または削除されます（ユーザーが行うアクションによって異なります）。
上記のレイアウトよりも優れたレイアウトがあるかどうか知りたいです。
目標は、重量を計算するために必要なスクロールを減らす（できれば削除する）ことです。
更新
与えられたドラッグアンドドロップの回答に基づいて私の懸念の概要を示す追加の詳細を追加します：
- これは、jQuery MobileでWebブラウザーを使用する偽アプリです。デフォルトでは、画面をスワイプするとWebページが上下に移動します。携帯電話のブラウザでオブジェクトを移動する方法は確かにありますが、現時点では、テクノロジーやそれを維持する能力を信頼していません。
- 重量を最大にすると、プレートは削除されるだけでなく追加されます。提案された回答は、ウェイトを下げるための良い方法を提供していません。確かに、ウェイトを「ドラッグ」できますが、0.25ポンドを表すウェイトは、45＃を表すウェイトよりもはるかに小さくなります。私のAndroidディスプレイの長さは4インチで、妻のiPhoneの画面はさらに小さくなっています。小さなおもりをバーから引っ張って取り除くと、非常にイライラすることがあります。
- 技術者でないユーザーには直感的ではありません。私が書いていない限り、ドラッグアンドドロップを理解できるかどうかさえわかりません。私の画像の追加/ドロップボタンは、ユーザーに何ができる/すべきかを効果的に伝えていると思います。私が間違っていたら訂正してください。
- 画面の不動産が重要です。提案された回答では、65＃は25＃よりも大きいです。理想的なデザインは、25＃ウェイトをバーにドラッグするのが、65＃をドラッグするのと同じくらい簡単であることを意味します。私はあなたが画像間で選択可能なサイズ標準を作ることによってこれを行うと信じています（例えば、25＃は65＃と同じくらいのスペースを占有しますが、透明な背景を持っています）。ここでの問題は次のとおりです。選択可能な領域は、各ウェイトに対して同じサイズでなければなりません。だから私は、ユーザーがそれらが何を意味するのか理解できないほど小さい重みを小さくすることに直面していますOR私は、スクロールする画像でより大きなWebページを作成することに戻ります。
私はその答えに反対しているわけではありませんが、これが携帯電話のブラウザーでどのように実装されるかについて、いくつか見落としていると思います。
私が作成したものは（少なくとも今のところ）モバイルWebブラウザーで動作する必要があるため、最も一般的な答えを使用することはできませんでした。
代わりに、 標準の計算機インターフェイスを作成しました ：
それは迅速で、垂直スクロールを削除します。
あなたはバーへのウェイトの追加と削除を模倣しようとしています。タッチデバイスでは、それを正確に行うことができます。それらをバーの内外にドラッグするだけです。
あなたはこれを多くの方法で強化することができますが、私は主な概念として、これより簡単になるとは思いません。
OP更新後の更新
1-それについてできることはそれほど多くありません... Webアプリの場合、別のアプローチが必要です。
2-すべてのプレートを同じサイズにすることができます。また、それらのサイズの違いは、重量の違いと同じである必要はありません（0.5は0.25の2倍である必要はありません）。うまく機能させる。バーからプレートを削除する別の方法を探している場合は、それをタップするだけで十分です。他にできることは多くありませんが、削除することはできます。 4インチ画面とiPhone画面は、ここで必要とされるよりもはるかに詳細なアプリを表示できます。優れたデザイナーはこれを簡単に処理できます。また、スペースを必要とする場合は、バーの片側だけを表示できます（その重量を構成する特定のプレートに関してではなくても、重量に関しては対称になります）。
3-ユーザーがドラッグアンドドロップを期待するタッチデバイス。より正確には、オブジェクトの 直接操作を期待する です。それがタッチスクリーンのすべてです。バーとプレートの束を表示する場合、最も直感的なのは、プレートをバーにドラッグすることです。このケースの美点は、ユーザーのメンタルモデルが非常に明確で、デジタルの世界に完全に翻訳できることです。実際には、電卓を持っている方が自然であると思われる技術者よりも、技術者ではないユーザーにとってより直感的である場合があります。
4-2を参照.