ユーザーが値入力フィールドの横にある値の単位を選択できるようにします
私たちのアプリケーションでは、ユーザー/開発者はエディターを介して独自のWebレイアウトを構築できます。そのため、パーセンテージ（％）またはピクセル（px）でコンテナーサイズを定義する必要があります。現在、この選択は入力フィールド内で行うことができます。同僚がそれについて教えてくれるまで、私はこれさえ知りませんでした-入力フィールド内の単位の選択の配置は私には明白ではなく、新しいユーザーのために学ぶのは難しいです。
現在のソリューション：
私は2つの代替ソリューションを考え出しました：
（1）トグルスイッチャーで値の単位を選択します
（2）ドロップダウンで値の単位を選択します
私が認識している1つの欠点は、フォームが雑然として見え始めることです。
このような使用例での経験は何ですか？これらの代替案についてどう思いますか？
理想的には、フィールドはすべての組み合わせで両方のユニットを受け入れる必要があります。
10px、10px、10％、10％->すべて機能するはずです。インライン検証を追加することもできます
次に、目的に応じて、フォームの先頭またはすべてのフィールドに短い説明文を追加できます。
数値フィールドの増分する矢印を非表示にすることをお勧めします（とにかく小さいです-フィッツの法則を参照してください）。入力は最大10シンボルであるため、フィールドを短くすることもできます。
関連する入力をグループで分割することを検討し、フォームで2列のレイアウトに進む前によく考えます。
ドロップダウンとトグルサックは言うでしょう。
- 良いデフォルト。主に使用する単位をデフォルトのままにします。
- スイッチが機能せず、どれがオンでどれがオフであるかをすばやく判別できません。
- 現在の設定では、他のオプションがあることを知ることができません。 「ねえ、あなたはここをクリックして他のオプションを見つけることができます」
ドロップダウンを使用します。誰もがそれらを使用する方法を知っていて、彼らは働いています。彼らはそれほどきれいではないかもしれませんが、動作します。
（1）トグルスイッチャー：
- +1ワンクリックで切り替え
- -1異なるユニットが選択されていると、少し乱雑に見えます。
- -1一部のユーザーは、現在どのユニットがグレーまたはホワイトに選択されているか混乱しています。
（2）ドロップダウン：
- +1見た目はきれいで意図的なものです。
- -1あなたは2つのアクションを実行する必要があります：照準を合わせてドロップダウンをクリックし、必要なユニットをクリックします
（3）ボタンスイッチャー：現在の単位を表示するシンプルなボタン。押すと他のユニットに切り替わります。
- +1上/下ボタンなし
- +1見た目はきれいで意図的なものです。
- +1ユニットを切り替えるのに必要なのはワンクリックだけです
ドロップダウンまたはトグルボタンを使用するときに直面する可能性のある問題は、ユーザーが新しいユニットに対して無効な値を入力することです。
たとえば、ユーザーは次のように入力します。
Width: 800 [px]
パーセンテージに切り替えます：
Width: 800 [%]
値を自動的に0％にリセットすることもできますが、ユーザーがpxに戻ると、以前に入力した800が失われます。
このシナリオでは、各値に異なる入力を使用することを検討してください。異なるタイプの入力も使用することを検討してください。提案は、パーセンテージ入力の 範囲スライダー です（ユーザーに値を入力する方法を提供したい場合があります）。
フィールドレベルのユニットタイプを使用する機能を提供する場合-マウスオーバーで表示することを考えない限り、それらの要素の繰り返しを避けることはできません。
上記のフォームを見てください。ユーザーがフォーム全体にpxまたは％を使用できるように、フォームレベルのオプションを維持する必要があると思います。ユーザーが最もよく使用しているユニットを少し調査し、それをデフォルトのままにして、フォームの上部にリンク/ボタンを提供します。ユニットを切り替える：
私の経験によれば、パーセント単位の動作はブラウザーによって異なります。つまり、上記のタイプのユーザーがピクセルを選択すると想定しています。
これにはドロップダウンオプションが最も推奨されるため、たとえば、Adobe photoshop->新しいドキュメントウィンドウでは、幅/高さの選択に、このような単位ドロップダウンが表示されます。 
ユーザーがいくつかの値に対して1つの単位を選択する場合は、値を分類して、単位を選択するための共通のドロップダウンを提供できます。このように、単位はすでに設定されているため、ユーザーが値を入力するには、テキスト入力を提供するだけで十分です。