ワイド画面のエラーメッセージ/アラートボックス
幅広の画面を利用するためにWebアプリのUIを作り直しているのですが、揺れることのない微笑みがあります。
広い画面が有利であるアプリ全体の多くのテーブルがあります。表の上で、アラート、エラー、成功などを表示するためのパターンを確立したいと思います。私が直面する課題は、使いやすさよりも美的であると思いますが、人々の意見やベストプラクティスに感謝します。
ワイドスクリーンページの警告ボックスをどうしますか？ページの幅全体でメッセージを実行すると、読みにくくなり、メッセージボックスを狭くすると、ページのバランスが崩れます。
空のスペースで幅を広くするのも不便です。
私は周りに良い探求をしてきました、そしてそれは完璧なフェードボタンの状態を設計するためにスキップされる非セクシーなデザインの挑戦のようです...
興味深いことに、今週も同様のパターンに取り組んでいます。推奨する設計では、エラーメッセージの明確な分類があります。
- タイプに基づく分類：エラー、警告、情報
- ターゲットに基づく分類：画面のどの部分がメッセージを開始しているか。
最初の分類は、色と退色のプロパティを決定するために使用されます。
2つ目は少しトリッキーです。
私たちのアプリケーションはワイドスクリーンモニターで使用できます。これにより、メッセージがアクションを開始したもののすぐ近くに表示されます。私たちのアプリケーションには、画像で示したように、画面要素の明確な境界があります。
メッセージとポップされた場所との間には、簡単なコンテキストリンクがあります。これは主に、ユーザーがアクションを実行し、システムからの何かを待っているときに特にトリガーされるフィードバックアクションに適用されます。
このユーザーアクションがシステム全体に影響を与える場合は、メッセージをページ全体に明確に表示するための準備もあります。これは中央に残り、コンテンツを囲みます。
（メッセージの重大度に基づいて）指定されたタイムアウト後にこの通知をフェードし、アイコン（オプションでEscキーを押す）から通知を閉じるオプションをユーザーに提供するという考え方です。ユーザーがバブルをクリックすることを選択した場合、通知を展開し、ユーザーの明示的なクローズアクションを待ちます。
ユーザーが集中しているエリアの近くでユーザーがフィードバックを受け取る場合、それは非常に関連性があります。視覚的なコンテキストを維持するのに役立ちます。
私たちの画面はエンタープライズアプリケーションであるため、膨大な量のフィールドとデータがあります。したがって、メッセージボックスをオーバーレイとして保持し、UI全体がシフトしないようにします。 （私を信じて、UI全体の下方シフトは、スムーズに行われないとユーザーを困らせます）。
私のユースケースはあなたのケースに直接適用されないかもしれませんが、私が助けになれば幸いです。
同様の問題があります。最初の単一ページアプリケーションに次の画面があります。
警告付きサポートページ 
アラートを閉じた後のサポートページ 
私の最初の解決策は、アラートが上に表示されるように大きなギャップを追加することでした。アラートを却下した後もギャップは続くフロントエンド開発者と話し合ったところ、大きな垂直方向のギャップを作らないことが推奨されるとのことで、多くのコンテンツを不必要に押し下げていると思います。
2番目の解決策は、UIウィジェットの上にアラートを追加してプッシュダウンし、閉じると元の位置に戻ることです。ちらつきのように感じるかもしれませんし、フロントエンドでどのような問題が発生するのかはわかりません。
考え？
Asanaはこれらのアラートの一部をモーダルポップアップで管理しているようです（マテリアルデザインの場合と同じように思われますか？）
考え？
なぜ幅を固定するのですか？
確かに、メッセージボックスのサイズはメッセージのサイズに依存します。短いメッセージ（例で示したような）は、中央に配置することもできる小さなボックスでよりよく見えます。メッセージのサイズが大きくなると、理想的なボックスは画面全体に広がるまで広くなります。
ただし、メッセージsを参照すると、実際に複数のメッセージの水平方向のレイアウト（フローレイアウトなど）を検討する必要があるのか、それとも単一の列に垂直方向に配置するだけなのか疑問に思います。