私はデザイナーではありませんが、機能を実装するためのタスクを扱っています。ユーザーがグリッド内のテキストボックスに値を入力できる機能的なUIを開発する必要があります。これらの値を入力する間、ユーザーはグリッド内の各テキストボックスで異なる参照値を持つ必要があります。したがって、ユーザーが値を入力するときに参照値が表示されるテキストボックスを設計したいと考えています。誰もがこの問題を解決するための良いデザインを提案できますか?
私が考えたのは、テキストボックスの左上に編集不可能なラベルが付いたカスタムテキストボックスがあり、テキストボックスの他の領域は(値を入力するために)編集可能です。
上の画像のように、左上は参照する値を表示する場所ですが、空白はユーザーが値を入力できるテキストボックスです。
以下は、私が最終的に達成したいことを含む別の画像です:
私の提案したソリューションが良いものである場合、それをどのように実装しますか?誰かが提案できる他の解決策はありますか?
あなたが提示するアプローチは非常に明確だと思います。斜めの線を追加せずに値を整理し、不透明度を使用して要素を区別します。
画像ではフィールドの1つがホバーされているので、ボタンedit fieldとedit commentが表示され、 簡単なダイアログ が開きます。
編集アイコンは唯一のアクションなので、通常は必要ありません。しかし、あなたの場合には、コメントを追加するという追加のアクションがあります。これらは可能な相互作用である可能性があります。
終了しました。フィールドを編集:
等.
状況に応じて、コメントを変更せずに値を変更する場合は、上記のワークフローのコメント編集(4 + 5)をスキップできます。
UIのデザインのすべての要素と同様に、ラベルの配置との一貫性はユーザーを助け、エラーを最小限に抑えます。つまり、このフォームでは他のフォームと同じアプローチを使用できるのが最善です。
このテーブル(おそらくデータテーブル)のインライン編集を使用し、すべてのセルに参照値をラベルとして入力することになると思います。
開発方法として、ラベルは必ずしも絶対的な位置を持つべきではありません。入力の高さをセルよりも小さくして、ラベルを前に配置できます。
入力の上部にラベルを付けることの利点は次のとおりです。
参照値と実際の値の違いを色分けすると、問題のあるフィールドをすばやく見つけることができます。色を使用するか、テーブルセルを灰色で強調表示することができます。
更新:
実際の値と参照値の間に不一致がある場合、理由を入力する必要があります
目的のフィールドに説明情報を入力するには、Popoverを使用できます。すばやく編集して入力するのに最適です。入力フィールドは関連データとの関連で表示されるため、ユーザーはデータテーブルの向きを失うことがありません。
次に、入力した説明をtooltipとして表示できます。特定のセルに不一致がある理由を確認したい場合、ユーザーはそのセルの上にカーソルを置いて説明を読みます。これにより、多くの画面スペースが節約されます。
テキストボックスと参照値をプレースホルダーテキストとして持つことができ、ユーザーがテキストボックスをクリックすると、古い値が消えて新しい値を入力できます。例:検索ボックス