モバイルでのモーダルボタンの配置
私は自分の会社の設計システムを設計しています。現在、デスクトップ（タブレットも）とモバイルの両方のモーダルとダイアログの設計を検討しています。
モーダルの右下にプライマリアクションを配置し、左側にキャンセルや「ドラフトを保存」などのセカンダリアクションを配置しました。これはCSSフロートを使用するだけです。
ただし、モバイルでは、ボタンが2つ以上ある場合にボタンを配置する方法がわかりません。キャンセルして送信しただけの場合、これは画面サイズに応じて1行に収まるか、または互いにスタックします（CSSを更新してこれを実行できるようにする必要があります）。ユーザー。
ただし、2つ以上ある場合、それらがすべてスタックされる順序は、ユーザーにとって特に直感的ではありません。
グリッチを無視する-ほんの少しのCSSでこれを修正できますが、似たようなものを設計した人の意見を聞きたかったのです。
次のようにそれらを積み重ねる-
キャンセル
下書きを保存
参加する
特に意味はないが、そうでもない
キャンセルドラフトを保存
参加する
ここで一般的なパターンを知らせてくれる手助けをいただければ幸いです。
本当にありがとう
送信はフォームで最も重要なボタンなので、2行目で全幅にすることができます。他のボタンは、最初の行で50％の幅を持つことができます。このアプローチは Material Design Guidelines で確認できます。
「キャンセル」ボタンは削除できます。ユーザーはモバイルのUIが小さいため、同じアクションの閉じる（X）ボタンを見つけることができます。
2つの別々のボタンではなく、両方のアクションを持つドロップダウンボタンを追加できます。
例えば：
