画面には1対多のマッピングがあり、その後多対多のマッピングが表示されるため、ユーザーにフローを完了するように強制します。それにはより良いUXが必要です
私たちは、いくつかの属性を持つ画面を作成する必要があるWebアプリケーションに取り組んでいます。画面には1対多のマッピングがあり、多対多のマッピングがあるため、画面のデザインが複雑になり、提案が必要になります。グループに関連付けられているアイテムがあり、グループは私の属性としてカテゴリに関連付けられています。例：グループに関連付けられ、カテゴリにリンクされている複数の機能または仕様を持つマウス[アイテム]を購入したいとします。
シナリオ：以下を含む請求書を追加するための画面が必要です。1.要素の数2. Mouse1、Mouse2、Keyboard2などのアイテムを追加3。アイテムを追加するには、そのアイテムの選択グループ。 4.グループを選択すると、その属性が選択されます。 5.すべての属性に値を指定し、アイテムを追加します。 6.アイテムを追加したら、請求書を追加します
アプローチ1：請求書で、最初に、No、Date、Addressなどの請求書生成に必要な要素を更新します。項目を追加するときに、ドロップダウンからグループ化し、グループを選択すると、関連するカテゴリ属性が表示されます。アイテムを追加、更新、削除、保存するためのボタンを備えたインラインの固有属性として、請求書に複数のアイテムを含めることができます。[画面1を参照]
問題：複数のアイテムを1つの画面に追加して、[保存]ボタンを押すとすべてのデータを保存できる優れたUXデザインを探しています。
アプローチ2：請求書で、まず、No、Date、Addressなどの請求書生成に必要な要素を更新します。項目を追加するときに、ドロップダウンからグループ化し、グループを選択すると、関連するカテゴリ属性が表示されます。ここでは、固定属性として数量があります。数量に値を指定し、[GO]をクリックすると、挿入テンプレートを含むポップが開きます。挿入テンプレートの数は数量によって異なります。一意の属性値を入力して、[保存]をクリックします。
問題：「go」をクリックしてポップアップを表示することも、UXが良くない。 
このフローに最適なUXを提案していただけますか。
これを段階的に整理し、いくつかのJavaScriptを使用して、2019年にポップアップを使用するというひどい決定を防ぐことができます。
私は、あなたが持っている多くのオプションの1つだけを示す単純なテンプレートを作成しました。
特に、プログレスバー、フィールドの境界線、ボタン、および背景の色を操作して、ユーザーが何か間違ったことをしたことをユーザーに早期に警告します。
もう3つの重要な点は次のとおりです。
- Type = "number"/type = "password"のような入力の書き込み名を使用して、モバイルで入力しやすくします。ここのリストを参照してください： https://www.w3schools.com/html/html_form_input_types.asp
- ユーザーがキーボードのタブを使用してナビゲートするために入力するためにフィールドを配置します。
- すべてに同じではなく、入力に正確な幅を使用します（各フィールドの文字数制限がわからないため、この例ではこのようにしています）。
