Astrale フロントエンドデザイン は何をしますか？
ドメインを、ランディングページではなく、焦点を絞った製品インターフェースとして構築します。ドメインは Astrale GUI 内に存在し、その周囲のシェルを継承します。ヒーロー画像、大きなプレゼンテーションエリア、冗長なページヘッダー、または有用なコンテンツの前の空きスペースを追加しないでください。
このスキルは astrale-domain ビューガイダンスと一緒に適用してください。タスクが別の方向性を確立しない限り、ホストアプリケーションのビジュアル言語とプロジェクトの既存のプリミティブを再利用します。
情報設計を計画する
UI コードを書く前に、頭の中または一時的なメモでハイレベルなワイヤーフレームをスケッチします。以下を特定します。
- ユーザーの主要なタスク
- 主要なセクションとサブセクション
- それらの間の論理的なリンク
- それらの相対的な重要度
- どの情報が一緒に属するか
- すべてのサブセクションの正しい親
すべてのセクションをひとつの首尾一貫した論理単位にします。情報設計とタスクの優先度に、レイアウト、順序、スペース、視覚的な重みを決定させます。状態とコントロールは、それらが影響を与えるコンテンツの近くに配置します。
インターフェースを抑制的に保つ
AI スロップ美学を避けます。すべての要素をカードに変えたり、実際のグルーピングの必要性なしにコンテナをネストしたり、ホバーでカードを持ち上げたりしないでください。ホバーはインタラクションを明確にするためにのみ使用し、キーボードおよびタッチユーザーにも同じ明確さを提供します。
少数の強力な領域、明確な階層、コンパクトなスペーシング、一貫したコントロールを優先します。デフォルトで装飾的なグラデーション、ピル、特大のメトリクス、アニメーション、または飾りのコピーを追加しないでください。各視覚的デバイスは、構造、状態、優先度、またはアフォーダンスを伝える必要があります。
インタラクション状態を正確にする
フローが完了したと見なす前に、関連する initial、loading、empty、ready、submitting、success、failure、unauthorized、disabled の各状態をモデル化します。
- 実際に待機しているスコープでローディングを表示します。ローカルアクションの場合は送信ボタン内、初期ページコンテンツの場合はページスケルトンを使用します。1つのアクションに対して複数のローダーを決して表示しないでください。
- 重複送信を防止します。失敗時にはユーザー入力を保持し、影響を受けるコントロールまたはコンテンツの隣に実用的なフィードバックを配置します。
- 作成を明確に処理します。アクションが成功したことを示し、ユーザーが期待する場所に結果を挿入し、次のタスクに役立つ場合にのみフォーカスを移動します。
- 削除を明確に処理します。元に戻せる削除と破壊的な削除を区別し、結果が中断を正当化する場合にのみ確認を求めます。
- 結果が予測可能な場合は、楽観的なリスト更新を使用します。失敗時にはロールバックし、失敗を表示し、コミットされた Kernel 状態とインターフェースを調整します。
- ユーザーがドロップダウンの外側をクリックしたとき、または Escape キーを押したときに、開いているドロップダウンを閉じます。キーボードナビゲーションをサポートし、選択されたアイテムを公開し、適切な場合はトリガーにフォーカスを戻します。
- 長いラベルと値をレイアウトテストの一部にします。読み取りが重要な場合は折り返し、本当に固定されたスペースでのみ切り詰め、完全な値へのアクセスを提供します。テキストが隣接するアクションを覆うことを決して許しません。
- ダイアログ、メニュー、フォーム、インラインアクションをキーボードで使用可能にします。可視フォーカス、セマンティックコントロール、正しく関連付けられたラベル、アクセシブルなステータスまたはエラー通知を使用します。
- ホバー、無効、保留中、成功、エラーの各状態を、色だけに頼らずに視覚的に区別できるようにします。
テキストを意図的に削減する
ユーザーが状態を理解し、決定し、行動するのに役立つテキストのみを残します。必要なラベル、フィードバック、アクセシビリティテキストは保持します。導入部、繰り返し、明白なヘルプ、装飾的なコピー、見出しやコントロールを言い換えただけの説明は削除します。
実装後、専用のテキスト削減パスを実行します。すべての可視文字列をコンテキスト内で読み、インターフェースが理解、決定、行動のいずれかにおいてより困難になる場合を除いて削除します。
結果を検証する
代表的なデータ、空のデータ、長いデータ、ローディングデータ、失敗データを使用して、実際のタスクフローを実行します。作成、削除、ロールバック、外部クリックと Escape キーの動作、キーボードの順序、狭いレイアウト、可視フィードバックを確認します。その後、画面全体をもう一度確認し、有用なコンテンツの前にある冗長なカード、エフェクト、コピー、スペースを削除します。