インターフェースの磨き上げ
インターフェースを、読みやすく、狙いやすく、移動しやすいものにします。存在するプロダクト、その書体、アイコン、色、密度、コンポーネント、フレームワークから始めます。それらの選択の間の関係性を改善します。観察された問題やユーザーの要請によって正当化される場合にのみ、視覚的な慣習を変更します。
使用時の摩擦を見つける
実際の画面を通じて代表的なタスクをトレースします。メニューを開き、行を選択し、ペインを狭め、フィルターを適用し、コンテンツに戻ります。目に見える問題の背後にあるコンポーネントとトークンの定義を読みます。スクリーンショットは階層と間隔を明らかにし、インタラクションはクリップされたフォーカス、到達不能なコントロール、そしてカクつくモーションを明らかにします。
見た目の不整合よりも、読書や操作を妨げる致命的な問題を優先します。各提案された変更を具体的な症状に結び付けます：消えるメタデータ、ビューから押し出された後続アクション、ジッターする数字、またはスケールが跳ねながら不透明度がフェードするメニュー。幅広いリクエストには、一貫したパスを選んで実装します。レビューのみのリクエストには、場所と証拠とともに調査結果を提供します。
編集前に、リポジトリの指示、サポートされているツールチェーン、既存のチェックを検査します。現在のカスケードと重複する変更を読みます。あるブランチでは同じように見えるトークンの置換でも、別のブランチでそのトークンが更新された後にはジオメトリが変わる可能性があります。
テキストとアイコンに明確な役割を与える
少数のテキストロールを確立します。行タイトルが先導し、メタデータが説明し、アクションが認識可能なままであるようにします。高密度のデスクトップインターフェースでは、14px/600のタイトル、12px/400のメタデータ、16pxのセクションラベルを使用する場合があります。これらを出発点として扱います。読み物中心やタッチファーストのアプリでは、より大きなテキストが必要になる場合があります。必要なウェイトを表現できるのであれば、確立されたフォントを維持します。
ボックスや色を追加する前に、間隔とウェイトを使用してロールを分離します。関連するメタデータは、意図的なギャップを挟んでそのタイトルの下に配置します。更新されるカウントには表形式の数字を使用し、予想される最大値に十分な幅を確保します。短い見出しのバランスを取るか、サポートされている場合はより良い段落の折り返しを使用しますが、折り返しルールに頼って小さすぎるペインを修正することは避けます。
セカンダリテキストを、サポートされているすべてのテーマで実際の背景に対して測定します。通常のテキストには、少なくとも4.5:1のコントラストが必要です。不透明度はサーフェスカラーと複合されるため、もっともらしいトークン値だけではあまり証明できません。プロダクトのパレットとセマンティックカラーロールを維持します。特定のフォント、アクセントカラー、アイコンライブラリ、またはニュートラルのみのテーマは必須ではありません。
アイコンのサイズと光学ウェイトを、ロール内で一貫させます。線幅を変更する前に既存のセットを検査します。ライブラリによって異なるジオメトリを使用するためです。小さなグリフは、より大きなボタンの中に配置できます。アイコンのみのコントロールにはアクセシブルな名前を付け、装飾的な重複は支援技術から隠します。
ジオメトリをアクションをサポートするようにする
既存の角丸スケールを一貫して使用します。スケール自体に手を加える必要がある場合は、すべてのコーナーを1つの半径に置き換えるのではなく、サイズを小さなチップ、コントロール、フローティングパネルなどのロールにマッピングします。ネストされた形状の場合、内側の半径は外側の半径から実際のインセット（境界線とパディングを含む）を差し引いて導出します。必要に応じてゼロでクランプします。
インタラクティブターゲットのサイズは、表示されるアイコンやテキストとは別に設定します。コンパクトなコントロールでは少なくとも24×24 CSSピクセルを目指し、スペースが許せばより寛大なタッチターゲットを目指します。WCAGには間隔やその他の例外があります。それらに依存する前に、それらの例外を明示的に確認します。ボタンのパディングまたはラッピングラベルを優先します。不可視のヒットエリア拡張は、クリッピング、オーバーラップ、隣接するコントロールの誤ったアクティベーションがないかチェックする必要があります。
グループ化、状態、またはエレベーションのために、境界線とシャドウを役立つ場合に使用します。別のシャドウプレーンは、弱い階層の最初の修正として使用することはほとんどありません。クリップされたリスト内で可視フォーカスを維持し、適切な場合はインセット処理を使用します。ホバーなしでも、タッチデバイスを含め、必須のアクションを発見可能に保ちます。
コンポーネントの持つスペースに応答する
広いウィンドウでも、サイドバーやインスペクタが開いた後は、狭い作業領域が含まれる場合があります。再利用可能なヘッダー、行、コンポーザーのサイズは、利用可能なペイン幅から決定します。関連する祖先にコンテナクエリを配置し、その子孫を適応させます。サイズクエリは自身のクエリコンテナのサイズを変更できません。コンテインメントを導入した後は、オーバーレイの配置とスタッキングを確認します。
何が最初に譲歩するかを決定します。ラベルを min-width: 0 で縮小させ、後続のアクションのために安定したトラックを確保し、次にプライマリタスクを圧縮する前にセカンダリクロームを格下げします。非表示のラベルにもアクセシブルな名前が必要です。装飾的な開示を削除することは、行をアクティベートする唯一の方法を削除することとは異なります。
長いタイトル、大きなカウント、実際のメタデータ、空のリスト、フィルターされた結果をテストします。ビューが空である理由を説明し、フィルターのクリアやアイテムの作成など、適切な回復方法を提供します。バックグラウンドリフレッシュ中は、既存のコンテンツが有効である限り維持します。リクエストが開始されたという理由だけで、ロードされた行をスケルトンに置き換えないでください。
ペインのレスポンシブ対応、ネストされたコントロール、またはオーバーレイを変更する際は、実装の落とし穴を参照してください。
モーションを状態変化に一致させる
既存のアニメーションシステムとイージングトークンを使用します。クラスやトークンの置換がモーションを変更すると主張する前に、計算されたスタイルを検査します。実際に変化するプロパティを明示的にトランジションします。個々のCSS scale と translate は transform とは別のものです。
ルーチンのコントロールには、小さな移動距離と高速な着地を優先します。エントランスは約150～250ms、より短いエグジットが有用な場合がありますが、頻度と目的がタイミングを決定します。行を無からスケーリングすること、作業中のリストでの遅いスタagger式の到着、ストリーミング更新ごとのアニメーションは避けます。誰かが変更を追跡するのに役立つものだけをアニメーション化します。
ホバーを伴う動きは、ホバー可能なファインポインター条件の背後に維持します。必須のコントロールは、キーボードおよびタッチユーザーが引き続き利用できるようにします。開く動作中の閉じる動作は、表示されている状態から逆方向に進む必要があり、終了する要素は入力を停止する必要があります。ダイアログやメニュープリミティブがすでにプレゼンスとフォーカスを管理している場合は、そのサポートされている終了ライフサイクルを使用します。2つ目のアンマウントタイマーや競合するフォーカスハンドラを追加しないでください。論理的な解除とフォーカスの復元は、装飾的な終了モーションを待たずに、プリミティブの動作に従う必要があります。
モーション削減の設定では、空間的な移動を行わずに同じ使用可能な最終状態に到達します。トランジションが削除された場合の完了ロジックを確認します。複雑なスプリング、振り付け、アニメーションアーキテクチャには、専用のモーションスキルを使用してください。このパスでは、別のスキルパッケージをインストールする必要はありません。
人々が使用する結果を検証する
すべての変更後の結合結果を、同じデータを使用して変更前と変更後で検査します。広い画面で狭いペイン、スマートフォンサイズのビューポート、サポートされているテーマ、キーボード操作、タッチスタイルのアクセスを含めます。モーション編集では、遷移途中の逆転とモーション削減を確認します。静止したスクリーンショットでは、エグジットが正しくアニメーションすることを確認できません。
リポジトリの該当するテスト、リント、型チェック、ビルドを、サポートされているランタイムを使用して実行します。パッチのせいにする前に失敗の原因を調査します。ベースライン比較が必要な場合は、同じランタイムと構成で再現します。変更されたパスには動作チェックを優先します。CSS文字列のアサーションだけでは、コントラスト、ジオメトリ、フォーカスの可視性、アニメーションの連続性を確認できません。
何が変更され、なぜ変更されたか、実際に実行されたチェック、および残っている不確実性を報告します。観察された改善と、目に見える効果のないトークンクリーンアップを区別します。統合後も説明と証拠を最新の状態に保ちます。上流からのインスピレーションについては、現在のソースを検査し、原則をこのプロダクトに適応させ、公開ソースをクレジットします。引用や支持をでっち上げる代わりに、ソースにアクセスできなかった場合はその旨を述べてください。