web-dev-qa-db-ja.com

ラベルと値を持つカスタムテキストボックスを作成する方法

私はデザイナーではありませんが、機能を実装するためのタスクを扱っています。ユーザーがグリッド内のテキストボックスに値を入力できる機能的なUIを開発する必要があります。これらの値を入力する間、ユーザーはグリッド内の各テキストボックスで異なる参照値を持つ必要があります。したがって、ユーザーが値を入力するときに参照値が表示されるテキストボックスを設計したいと考えています。誰もがこの問題を解決するための良いデザインを提案できますか?

私が考えたのは、テキストボックスの左上に編集不可能なラベルが付いたカスタムテキストボックスがあり、テキストボックスの他の領域は(値を入力するために)編集可能です。

enter image description here

上の画像のように、左上は参照する値を表示する場所ですが、空白はユーザーが値を入力できるテキストボックスです。

以下は、私が最終的に達成したいことを含む別の画像です:

enter image description here

私の提案したソリューションが良いものである場合、それをどのように実装しますか?誰かが提案できる他の解決策はありますか?

9
Chetan

あなたが提示するアプローチは非常に明確だと思います。斜めの線を追加せずに値を整理し、不透明度を使用して要素を区別します。

画像ではフィールドの1つがホバーされているので、ボタンedit fieldedit commentが表示され、 簡単なダイアログ が開きます。

編集アイコンは唯一のアクションなので、通常は必要ありません。しかし、あなたの場合には、コメントを追加するという追加のアクションがあります。これらは可能な相互作用である可能性があります。

  1. 空のフィールドTでクリック(編集/コメントアイコンはありません)
  2. フィールドTからシンプルダイアログに値を追加
  3. Enter
  4. フィールドTからシンプルダイアログにコメントを追加
  5. Enter

終了しました。フィールドを編集:

  1. クリックフィールドT(編集またはコメントアイコンではない)
  2. フィールドTからシンプルダイアログの値を編集
  3. タブ
  4. フィールドTからシンプルダイアログのコメントを編集
  5. タブ
  6. シンプルダイアログのフィールドUから値を編集
  7. タブ
  8. シンプルダイアログのフィールドUからコメントを編集

等.

状況に応じて、コメントを変更せずに値を変更する場合は、上記のワークフローのコメント編集(4 + 5)をスキップできます。

6
Alvaro

UIのデザインのすべての要素と同様に、ラベルの配置との一貫性はユーザーを助け、エラーを最小限に抑えます。つまり、このフォームでは他のフォームと同じアプローチを使用できるのが最善です。

このテーブル(おそらくデータテーブル)のインライン編集を使用し、すべてのセルに参照値をラベルとして入力することになると思います。

開発方法として、ラベルは必ずしも絶対的な位置を持つべきではありません。入力の高さをセルよりも小さくして、ラベルを前に配置できます。

入力の上部にラベルを付けることの利点は次のとおりです。

  • ユーザーはラベルとフィールドを一目で確認できる場合があります。
  • さまざまなラベル長が可能で、幅がコーナーにある場合よりも広くなります。
  • 実装が簡単です。
0
Madalina Taina

色分けを使用する

color coding of data table cells

参照値と実際の値の違いを色分けすると、問題のあるフィールドをすばやく見つけることができます。色を使用するか、テーブルセルを灰色で強調表示することができます。


更新:

実際の値と参照値の間に不一致がある場合、理由を入力する必要があります

目的のフィールドに説明情報を入力するには、Popoverを使用できます。すばやく編集して入力するのに最適です。入力フィールドは関連データとの関連で表示されるため、ユーザーはデータテーブルの向きを失うことがありません。

popover input field in a data table

次に、入力した説明をtooltipとして表示できます。特定のセルに不一致がある理由を確認したい場合、ユーザーはそのセルの上にカーソルを置いて説明を読みます。これにより、多くの画面スペースが節約されます。

0

テキストボックスと参照値をプレースホルダーテキストとして持つことができ、ユーザーがテキストボックスをクリックすると、古い値が消えて新しい値を入力できます。例:検索ボックス

0
shankar .m