スタックされたモーダルダイアログ（マテリアルデザインを使用）
ユーザーがライトボックススタイルのモーダルダイアログを介してアイテムを編集できるマテリアルデザインアプリを設計しています。 これは厳しい制約であるため、ライトボックスを回避することはオプションではありません。
ダイアログ内には、別のパネルを必要とするオプションのサブワークフローがあります。
を説明するには（クリックして拡大）：
マテリアルデザインガイドライン は、スタックモーダルのUXの動作については触れていません。それらは スクロールコンテンツ のガイドラインを提供しますが、私はサブワークフローを扱っているため、ダイアログにコンテンツを追加することは実際には適切なオプションではありません。
私が検討しているいくつかの選択肢：
ダイアログのコンテンツをサブワークフローのコンテンツ（クロスフェード）に置き換えます。これにより、厄介な入れ子になったモーダルはなくなりますが、クロスフェードがマテリアルデザインの物理に準拠しているかどうか、またはユーザーを混乱させる可能性があるかどうかはわかりません。
ダイアログをキャンバスから完全にまたは部分的に移動し、サブワークフローダイアログをスライドさせるウィザードスタイルのアニメーションで、ダイアログを左に押します。これにより、垂直に積み重ねられたモーダルですが、サブワークフローよりもウィザードスタイルのUXの動作に関連しています。
ダイアログを反転して、「カードの裏面」のサブワークフローを表示します。 this のようなもの。 MD物理学は回転ではなくXYZ平行移動モーションを優先するため、これはマテリアルデザインに準拠していないと確信しています。
スタックされたモーダルを保持します。これは、サブワークフローに最適なアフォーダンスを提供するようですが、明らかにネストされたモーダルは視覚的にかなり扱いにくく、方向を乱す可能性があります。
質問
- 複数のモーダルを使用する方法に関するマテリアルデザインのガイダンスはありますか？
- または、スタックされたモーダルを回避しながら、適切なワークフローを提供する、私が使用できる一般的なUXパターンがあります
->サブワークフロー->ワークフローアフォーダンスに戻りますか？
私は1と4の混合を行います。
私はあなたの2番目のモーダルをオプションの写真を追加ボックスと同じサイズにし、その後ろに隠します。
オプションの写真を追加するボックスをクリックすると、2番目のモーダルのZインデックスが変更され、前面に表示されます。同時に、モーダル全体のサイズに合わせてフェードインおよびアニメーション化されます。すべて非常に単純なjQuery。
そうすれば、元のモーダルを失うことなく、ユーザーがキャンセルまたは写真を追加をクリックしたときに、単に非表示にして基本的にやり直すことができます。
次のようになります。
（それは明らかにjQueryまたはあなたが使うものなら何でもスムーズですが、それはアイデアを与えます）
これはウィザードまたはガイド付きワークフローが問題を解決する場所だと思いますが、私は通常、モーダルウィンドウ内でワークフローを作成するのが好きではありません。ただし、これは長い間デスクトップソフトウェアをインストールするための標準的なパターンであり、ユーザーからの追加入力を受け入れることで、オプションの条件付きワークフローをステップに組み込むことができます。これは、少なくとも3つのステップを含むワークフローに役立ちます。そのため、アプリケーションの多くの場所で発生するものではない場合、これはやり過ぎと考えるかもしれません。
一般に、設計パターンの一貫性を保ちたい場合は、プロセスを再設計する方がよいことがわかります。また、ワークフローとプロセスをシンプルに保つという追加の利点もあります。そのため、事前の作業が少し増えるため、後で設計に伴う多くの頭痛の種を省くことができます。