web-dev-qa-db-ja.com

ネストされた作成フォーム

この質問は、大量のポップアップなしでリレーショナルデータベースにオブジェクトを作成する方法についてです。

フォーム内にフォームがあるWebアプリに取り組んでいます。つまり、オブジェクト作成ダイアログ内でリンクされたオブジェクトを作成できます。これは概念を説明するための例です:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

等...

宝石は複数の魔法の力を持つことができます。または何でも。 (私は実際に金融商品に取り組んでいます。)

醜くない、混乱しない、できればワンウィンドウの方法でこれを行う方法についての良いアイデアはありますか?

-編集1-

これが私の特定の状況に関する詳細情報です。私はこれをより一般的なものにしたいと思いますが、良いデザインが私の状況にしか現れない場合は問題ありません。他にご不明な点がありましたらお知らせください。

  • ユーザーはnoobzとパワーユーザーの両方です。一部の人はこのアプリケーションを終日使用し、自分の道を知っています。他の人は重要な設定を変更するため、または新しいアイテムを作成するために1回または2回ログインします。
  • このフォームは、クライアント用のアイテムを作成するために使用されています。彼らはそれを迅速に、そしてエラーの可能性が低いことを望んでいます。
  • このアプリケーションは、企業の銀行の設定で使用されます。主なユーザーは、主要企業のアカウントマネージャーです。 (これらのユーザーは、アプリケーションに多くの時間を費やし、クライアント向けのものを作成します。)
  • このパターンはよく出てきます。深さが2レベルしかない場合もありますが、場合によっては、非常に多くのレベルに達することがあります。 (15〜20)再帰的なループの場合もあります。よく分かりません。この質問のために、私はそれが無限であると仮定したいと思います。 (ただし、非常に素晴らしい場合は、限られた量の素晴らしい答えを受け入れます。)
  • 個々のアイテムはかなり複雑になる可能性があります。最大100個までのフォーム要素。一部のアイテムフォームには、長いリストやドキュメントのアップロードなどの奇妙なフィールドがあります。
  • レベルごとに異なる種類のアイテムが存在する可能性があります。例:人はエンチャント、パワー、フレンズなども持つことができます。私はこれらを人フォームから作成し、自分の人に追加することができるはずです。
  • 各レベルは、アイテムの複数のプロパティを持つことができます。たとえば、ジュエルには、重み、色、組み合わせロジック(他の特定のジュエルと組み合わせないようにするルール参照)、または魔法の力(他のオブジェクトへの参照)があります。

-編集2-

回答がすべての関係タイプに対応できれば理想的です。 (例: one-to-oneone-to-many および many-to-many 関係。つまり、Daggerオブジェクトはボブが単独で所有するか、多くの人が共有します。

質問がたくさんあることは承知していますが、アイデアには本当に感謝しています。

19
Sauce McBoss

これは、フォルダ構造とよく似ており、深いネストを使用して、好きなだけ多くのレベルとレベルごとのアイテムを追加できます。

私は、ユーザーにとって同様のビューがより自然に発生すると想像します。

enter image description here

このモックアップは、ユーザーが「トッ​​プダウン」で作業するという考えに基づいて構築されているため、「新しい項目の追加」要素が一番下にあります。ユーザーは個々のアイテムを折りたたむことができ、ネストとそのすべての影響を示すための多数のオプション(およびすでに学んだ隠喩)があります。

それでも、情報量が限られているため、情報に基づいた提案を行うことは困難です。

  • 私たちはパワーユーザーを扱っているのですか?
  • これはどの環境で使用されますか?
  • ユーザーが達成したい主要なタスクは何ですか?
  • ネストは通常​​どのくらい深くなりますか?
  • ネストには最小/最大レベルがありますか?
  • 個々のアイテムはどのくらい複雑になりますか?
  • 1つのネストレベルにさまざまな種類のアイテムを含めることはできますか? (例:装備の「宝石」、「弾薬」、「エンチャント」)

など。

-更新-追加された情報で、私はこのようなものを考えています:

improved mockup

パワーユーザーの場合、新しいアイテムを追加するには、より一般的なケースに応じて、新しい子アイテムまたは兄弟アイテムを追加するショートカット(CMD/CTRL + N)が必要です。高度なショートカット(CMD/CTRL + SHIFT + N、CMD/CTRL + ALT + N)は、子/親アイテムの追加をカバーできます。特にパワーユーザーにとっては、キーボードナビゲーションが重要です(そこで何をしたかを参照してください)。矢印キーでアイテムを、タブでフォームを閲覧することで、画面をすばやく移動できます。

モックアップは、カジュアルユーザーをカバーしていません(ドラッグして新しいアイテムを追加するために保存します-私がかっこいいと思ったもの)–おそらく、アイテムを削除する方法についてさらにガイダンスが必要でしょう。また、項目リストが画面の境界を越えて拡大する場合、特にスクロールの動作を考慮する必要があります。完全にスクロールするか、現在の階層を常に表示したままにする必要があります(たとえば、関連しない項目のみをスクロールし、常に現在の選択ツリーを保持します)。頂点で?

15
Christian

これはすべて、いくつの深さまで行くかにかかっていると思います。いつものように、ワンサイズのデザインはすべての状況に適合しません。

あなたが本当にすべてのサブフォームを同じページに保つ必要があるなら、以下は私が状況について考えることができる最高のものです。一般的な考えでは、メインフォームがあり、子領域のツールバーの[新規]ボタンをクリックすると、子領域はサイドバーに折りたたまれます。次に、サイドバーの横に、要素を編集/作成するための新しいミニフォームがあります。データ構造にさらに深みがある場合は、サイドバーを重ねるだけです。

明らかに、このソリューションはデータが深くなるにつれてますます弱くなります。データが2レベル以上の深さである場合、またはいずれかのレベルで長いフォームが必要な場合は、強くモーダルダイアログまたは新しいウィンドウに新しいデータを入力することを強くお勧めします。このようにして、ユーザーはデータの各「層」により多く焦点を合わせることができ、データのレイヤーを重ねるだけで素早くそしてだらしなく入り込むことはありません。 paceユーザーに良いこともあります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

4
GotDibbs

すべてのアイテムにユーザーに表示されるフィールド(名前)が1つしかない場合は、コンボボックス(オートコンプリートなど)を使用して問題を回避できます。入力中に、データベース内の一致するアイテムを動的に検索し、一致がない場合(またはユーザーが一致を選択しなかった場合)、カンマ/リターン/その他のキーを押すと、そのアイテムは新商品。

これにより、子供モデル(宝石など)を操作するために、アコーディオンのメタファー(クリスチャンが答えで模倣したものと同様)を実装できます。

最終結果は次のようになります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ご覧のとおり、理論的には各レベルでネストを続けることができます。必要に応じて、宝石以外のものも含めるように機器属性ボックスを拡張できます。

2
Kit Grose

ネストされたフォームをフォームのカルーセルとして想像してみてください。これがあなたができることです。

モックアップに示されているように、ユーザーがnew equipmentnew person formは左にスライドして見えなくなる可能性があり、new equipment formは、カルーセルを模倣して、右からスライドインできます。

enter image description here

ネストされたフォームまたはユーザーを(現在のフォームから)別のフォームにリダイレクトする場合の最も重要な点は、以前のフォームデータが失われないようにすることです。

したがって、この場合、古いフォームがスライドアウトし、新しいフォームがスライドインすると、この現在のフォームを保存して前のフォームに戻り、変更が適用されないことをユーザーに知らせるボタン/通知を作成できます。負けた。私はこの問題を解決するためにボタンを使用しました。1つ考えていれば、より良いオプションを自由に選択できます。

2
irrational_pai

このアプリにはいくつか問題があります。

一般的な解決策として、Christian'sはかなり雑然としているが、雑然としていると感じている。それ自体、クリスチャンのせいではありません。雑然としたアプローチです。

また、モバイルでツリーウィジェットを管理すること自体もかなり困難です。私はiPad向けのOmniOutlinerが大好きです。これまでのところ、彼らはツリー管理のアプローチが最も優れていると思いますが、それでも難しい状況です。

通常のTreeViewと比較して、さらに制約があります。各レベルには、オブジェクトの1つのタイプのみが含まれます。

オブジェクトがsharedであるか、それともbelongであるか、私にとって大きな問題ですルートに。例としてはRPGが考えられます。たとえば、すべてのヒューマノイドは「ヒーラーの魔法の指輪」を身に着けることができ、そのような指輪は不特定(おそらく無限)であり、特別な特性を持つ指輪はありません。現在の所有者。

この場合、新しいタイプのリングの追加はめったに起こりません。通常、「共有タイプ」の種類の所有権は、追加を頻繁に必要としません。

したがって、以前のコンテキストを少し片付けて(たとえば、モーダルウィンドウを開き、これはiOSの制約とは何の関係もない)、新しい種類のリングを作成するために必要な詳細情報を要求することはかなり問題ありません。

ブレッドクラムを提供することで、モーダルウィンドウを「回避」できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

(戻るも保存)

編集するものがオブジェクトの部分である場合、それがインレーである方が良いと思います。

mockup

bmmlソースをダウンロード

また、実際には並行して実行する必要のある複数のフローがあり、画面が分割された方がよい場合もあります。残念ながら、実際のアプリケーションとその実際のドメインはわかりません。また、各ドメインへの追加の頻度や、それが発生するタイミングもわかりません(たとえば、顧客がドメインの真正面にいるときや、バックオフィスで)...

1
Aadaam

アプリ内タブを使用できます。オブジェクトを作成すると、新しいタブが開き、そこに移動するか、オブジェクトの作業を続けます。これにより、必要なだけ多くのレベルに到達することができ、ネストされたダイアログの束がなく、常に1つのエンティティから別のエンティティに切り替えることができ、エンティティごとに多くの不動産を利用できます。また、これはWebアプリであるため、タブナビゲーションモデルに既に慣れているユーザーに頼ることができます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

1