ネストされたレイアウトエディターのUIパラダイム
ドラッグアンドドロップウィジェットの配置、プロパティパネルなどを備えた、Visual StudioのWinFormsエディターに似たレイアウトエディターを備えたアプリケーションがあります。
nestedレイアウトを使用するオプションを追加します。配置された「NestedLayout」ウィジェット（画像内のLayout B）は、他のレイアウト全体を表すことができます。
ユーザーがこれらのネストされたレイアウトを編集できるようにするには、どのようなインターフェースをお勧めしますか？既存のフレームで直接作業するのは面倒です。なぜなら、画面の多くの領域が、残りのトップレベルのレイアウトによってすでに使用されているからです。
可能性としては、ネストされたレイアウトの最大化をトップエディターにロードする（おそらく、何らかのズーム遷移を伴う）、上に新しいエディターをポップアップするなどが考えられます。
この種のシナリオを効果的に処理するエディターアプリケーションの例を見たことがありますか？
上記の画面が表示されたときの最初の反射は、ネストされたレイアウトをダブルクリックして編集することです。ユーザーが既存のフレームのネストされたレイアウトを編集することは適切な解決策ではなく、ユーザーを混乱させる可能性があることにも同意します。
完全にレンダリングされたネストされたレイアウトを灰色またはフェード状態で表示し、編集方法を説明するメッセージをマウスオーバーで表示します（たとえば、「ダブルクリックして編集」）。ズーム効果でネストされたレイアウトを最大化する代わりに、最初のエディターの上に2番目のエディターを開くことも選択します。ズーム効果はかなり賢いものですが、一部のユーザーを簡単に混乱させる可能性があることがわかります。UIに非常に注意して、何が起こったのか、なぜすべてのウィジェットが突然消えてしまったのかを気にしないでください。
WYSIWYG Webデザインツールがiframeを処理する方法を確認しましたか？通常、iframe（または他の埋め込みオブジェクト）は、非インタラクティブオブジェクトとして描画され、その特定のオブジェクトのエディターを表示するには、ダブルクリックするかアクティブ化する必要があります。 iframeの場合、Dreamweaverなどのツールからプロパティペインがポップアップし、そこからiframeのソースページにアクセスできます。
それは最高の使いやすさではないかもしれませんが、あなたの聴衆によっては、WYSIWYGの規則に従うことが良い呼びかけになるかもしれません。
また、親コントロールでNestedLayoutをどのようにレンダリングするかに応じて、期待値を設定することもできます。完全にレンダリングされている場合、ユーザーはそれを操作できると期待するかもしれません。しかし、それが「ウィジェット」または埋め込みオブジェクトとしてのステータスを表すアイコンが付いた単なるフレームの場合は、異なる効果が生じる可能性があります。忠実度の高いインタラクティブなモックアップで両方をテストして、人々が何をしているかを確認してください。これは、「Interest with the NestedLayout」などの特定のテストシナリオに基づいたリモートユーザビリティテストでテストするのに最適です。
IntelliJ IDEA Java IDEをご覧ください。ネストされたレイアウトを持つGUIフォーム用の非常に優れたエディターがあり、非常に使いやすいドラッグアンドドロップ編集をサポートしています。
再利用可能な* control * sを表すことを検討してください。したがって、2番目のレイアウトはまったく新しいレイアウトとして編集しますが、Visual Studioのuser controlのように、デザイナーの別のタブ/ウィンドウで編集します。ユーザーがそれほど多くのスペースを必要としない場合、小さな画面の領域は気になりません（とにかくいくつかのボタンが含まれているだけかもしれません）。
最初に、上記のいくつかと同様の回答を追加しようとしました。たとえば、複合オブジェクトをダブルクリックすると、フラッシュして灰色になり、囲んでいるコンテキストがロックされます。しかし、設計によっては、アプリケーションによっては、「レイアウトB」の編集をあまり簡単にしたくない場合があることに気づきました。あなたの例で示すものが通常GUIエディターで行われるものである場合、それは画面に表示されるすべてが1つのオブジェクトにあることを意味します。ネストされたレイアウトを簡単に編集できるようにすると、この1つのオブジェクトに機能が追加され、レイアウトAにすべてのウィジェットが含まれるようになります。
ネストされたレイアウトの編集に穏やかな障壁を設けると、最終的にはユーザーが実装をバラバラにして、より扱いやすいカプセル化されたオブジェクトを作成するようになります。
例えば。 Qtデザイナーでは、GUIエディター内のウィンドウの各タブのコンテンツを編集できます。注意しないと、すべてのタブの機能を実行するウィンドウの実装が得られます。これは本当に良いことではありません。
Adobe Flash
インタラクティブなコンポジション（Flashのシンボルと呼ばれる）を作成できます。これらのコンポジション内には、レイヤーやその他のコンポジションを含めることができます。 Flashの操作が非常に遅く、ボタンが間違った場所に配置されていてショートカットが不足している過度に複雑なUIがあるため、エクスペリエンスはやや悪いです。しかし、それはインスピレーションの素晴らしい出発点です。
Interface Builder、World Craft、Adobe Flashの間のある種のミックスは、ネストされたコンポジションを編集するために揺るがすでしょう。