不明な数のパラメーターのGUIパターン
ユーザーがパラメータと値の長いリストを設定する必要があるフォームを設計しています。フォームの各エントリには、任意の数のパラメータを含めることができますが、一部には典型的な値があります。
以前は、2つのテキストボックスを隣に+記号を付けて作成し、新しい行に移動できるようにしていました。しかし、これにはもっと良い方法があるはずだと私は感じています。よりユーザーフレンドリーな方法。
これが私が通常行うことの例です。しかし、私は本当にそれが好きではありません。 
編集：現在のデザインで私が抱えている問題は次のとおりです：
- 水平方向と垂直方向の両方にスペースを取りすぎます。 （垂直は水平よりも私にとって問題です）
- ユーザーとして使うのは少し面倒です。入力してからマウスに切り替える必要があります。そして、あなたが正確に何に取り組んでいるのかについては、それができるほど明確ではありません。
- 私はそれがかなり醜いことがわかりました。
- ページの複数回の使用には適していません。 （ポイント1に戻ると思います）
- 「不格好」な感じ
スプレッドシートのようなインターフェースは、タスクに良い経験を提供するようです。事実上無限の行数–行の追加、簡単なナビゲーションなどの労力なし.
次のようなスプレッドシートの動作を模倣できます。
- 多数の行が必要で
Add rowは常にユーザーフレンドリーではありません - タスクはキーボードに大きく依存するため、キーボードを使用した行と列の間の簡単なナビゲーション
- 現在の行とセルの強調表示
この機能により、現在のコンテキストに対してより効率的な対話を作成できます。
最後の項目は、フィールドをすばやく追加するためのプレースホルダー入力である可能性があります。あなたが挙げた例が最終的なデザインであるかどうかはわかりませんが、入力を大きくすることで読みやすく、アクセスしやすくすることをお勧めします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
あなたは主に不動産（必要なスペースを最小限に抑える）とユーザーの効率（労力の削減）に関心があるようですが、審美性は二次的な関心事です。私の知る限り、あなたのデザインはすでにこれらすべてでかなり最適に近く、どんな改善もほとんどトリミングとサンディングです。
不動産
あなたのデザインは、可能な限り少ない不動産を使用します。ユーザーがリストにパラメーターを追加するときに領域を拡張すると仮定すると、使用するすべてのスペースは、ユーザーが提供したデータで満たされます。何も無駄になりません。はい、それぞれに多くのアイテムを含む複数のリストがある場合、長い形式になりますが、他に何ができますか？たくさんのデータがあります。すべてを同じページに表示したい場合は、長い形式になります。
スペースをより効率的にする唯一の方法は、「クリックしてフィールドを追加する+」を移動できるため、それだけで行全体を占めないようにすることです。ただし、ユーザーがパラメーターを追加しようとしているときにユーザーが見る可能性が高い場所なので、リストの一番下に配置した方がよいでしょう。移動する価値はないかもしれません。ここに、さらにいくつかの「サンディング」があります。
列ヘッダーのフォントを縮小できます。それらの位置と大胆さは、視覚的な階層を示すのにすでに十分です。それはまた、美的懸念のいくつかに対処するかもしれません。
リストが長くなる傾向がある場合（例のように）、テキストボックスの「 コンパクトプレゼンテーション 」を試すことができます。これは、いくつかの審美的な懸念（BUBOF（フィールドの大きな醜いブロック）効果）にも対処できます。
リストが長くなる傾向がある場合は、リストを独自の調整可能およびスクロール可能なペインやエキスパンダーに配置して、リスト上のパラメーターの数に関係なく、ユーザーが使用するスペースの量を制御できるようにすることができます。これは、ユーザーが一度にすべてのデータを入力してほとんど戻らないのではなく、時々フォームを編集する場合にのみ意味があります。
効率
デザインの非効率性の主な原因は、キーボードからマウスへの移行です。それはまた、「不格好な」感じに最も貢献します。最も簡単な解決策は、Add関数にアクセラレータキーを与えることです。 キーの挿入が適切です 。主な課題は、アクセラレータキーの可用性を伝えることです。コンピュータユーザーを訓練または経験したことがある場合は、[（Ins）]を[追加]ボタンのキャプションの中または横に配置するだけで十分な場合があります。ただし、ボタンの横に「（Insertキーを使用できます）」などのより明確な指示が必要な場合があります。
テーブルビューに挿入してボタンまたは空白行を追加する場合に最適な方法 の説明に従って、リストの一番下に空白行を自動的に追加することは、設計の主な代替案です。オーバーフロー、およびこの質問の他の回答でも。 [追加]ボタンの代わりに、リストの一番下に空白行があるため、これ以上の領域を必要としません。自動追加の設計は、最初から複数のパラメーターを入力するのに適していますが、追加ボタンの設計は、既存のリストを編集するのに適しています（詳細については、スタックオーバーフローの投稿に対する私の回答を参照してください）。
追加の考慮事項は、リストの平均の長さと1行あたりのフィールド数です。 Tabキーを押して自動追加デザインの空白行に移動するのは、挿入ボタンまたはCtrlを押しながら任意のアクセラレータを押して、追加ボタンデザインに空白行を追加するよりも少し簡単です。追加するパラメーターが多いほど、InsertキーよりもTabキーの方が優れています。ただし、追加ボタンのデザインでは、Tabキーを1回押すだけでフォームの次のフィールドのリストを離れますが、自動追加のデザインでは、ユーザーはリストを離れる前に空白行のすべてのフィールドをタブで移動する必要があります。各行のフィールド数が多いほど、問題は大きくなります。
Terserプロンプトとキャプションを使用して、不格好な感じを減らすこともできます。たとえば、「ここをクリックしてフィールドを追加するには」を読むのに時間がかかります。 「追加」というラベルの付いたボタンを試してください。ボタンであることは、ページに対して（ナビゲーションではなく）コンテンツ編集アクションを実行することをユーザーに知らせ、リストの一番下にあることは、パラメーターを追加するためであることをユーザーに知らせます。
美学
あなたのデザインのイラストは批評を意図したものではなく単なるスケッチであると理解していますが、それでも見た目を損なうよりもいくつかのことを示しています。これは、審美的な「サンディング」に役立つ場合があります。醜さは、不規則で厳しい、不均衡な形状から生じます。フィールドが多いほど、まとめて詰め込まれたこれらすべてのコントロールの過酷さを打ち消すために、グラフィックデザインをより控えめで規則的なものにする必要があります。コンパクトなプレゼンテーションと小さな列ヘッダーについてはすでに触れました。あなたもすることができます：
デザインをフラット化します。ラジオボタンや3Dドロップシャドウを避けてフォーカスします。
より単純な「グリッド」を使用して、列ヘッダーを左揃えにして、テキストボックスのコンテンツに合わせます。
それぞれのゼブラストライプ内のフィールドを垂直方向に中央揃えにします。
白いゼブラストライプを端まで延長し、シアンの背景のボックスのように見えないようにします。
より微妙な（淡く、彩度の低い）ゼブラストライプを使用します。リストがほとんど常に5つ以下のパラメータである場合は、ゼブラストライプを使用しないでください。