Silicon インターフェースビルド
デザイン意図を実際の動作に反映させます。編集前に製品のDESIGN.md、フレームワーク、現在のUI、コンポーネント、アセット、コンテンツを確認してください。変更は要求された範囲内に留めてください。小さな修正の場合は既存の方向性に従い、主要な構築で方向性が不足している場合は、概要から簡潔な暫定方向性を確立してください。
代表的なスライスを構築する
人物、タスク、主要情報、次のアクションを特定します。製品の代表的なコンテンツを使用し、架空のフィクスチャやプロトタイプアクションにはラベルを付けます。テストモニアル、顧客ロゴ、測定値、統合成功事例を捏造しないでください。
内容に応じて構造を選択します：読み物は散文、比較には行またはテーブル、独立したオブジェクトにはカードを使用します。ウェブサイトはその約束と証拠を理解可能にし、アプリはアクションをサポートする作業と状態を公開する必要があります。信頼性のあるコンポーネントセマンティクスを維持しつつ、ビジュアルシステムを適応させます。
スタイルを製品全体に広げる前に、1つの完全なフローをエラー状態を含めて実装します。関連する読み込み中、空、エラー、利用不可、成功のフィードバックを含めます。回復可能なエラーでは有用な入力を保持し、利用できないアクションを説明します。セマンティックコントロールと永続的なラベルを使用します。
一貫したタイプ、色、スペーシングの役割を確立します。特定の情報またはアイデンティティ目的のために、適切な権利と代替テキストを備えたアセットを使用します。重要なコンテンツは装飾的な動きや音声に依存しないようにします。
選択した方向性を最初の画面を超えて、タスク、エラー状態、結果（範囲内の場合）にまで持ち込みます。言葉遣い、視覚的関係、動作に製品固有の詳細を含めます。コンテキストを保持し、コレクションが空の理由を説明し、繰り返し操作を効率的に保ちます。ラッピング、光学的配置、トリミング、アイコンのウェイト、単位、フィードバックを明確なクラフトパスとして仕上げます。印象的な瞬間を作るためだけに範囲外の機能を追加しないでください。
結果を検査する
利用可能な場合は、実際の実装をブラウザで開きます。狭い、中間、広いレイアウト、コンテンツの極端なケース、サポートされているテーマ/言語を検査します。マイクロポリッシュの前に、オーバーフロー、弱い階層、不自然なラッピング、不完全な状態を修正します。
キーボードナビゲーション、フォーカス、完了したタスク/リカバリパスを練習します。関連するコントラストペア、テキスト拡大、動きの軽減動作を確認します。ビューポートリサイズと実際のブラウザズームを区別し、スクリーンショットと入力テストを区別します。変更に適したプロジェクトチェックを実行し、スタイルの選択を単に繰り返すテストは追加しないでください。
ブラウザ/ランタイムが利用できない場合は、有用なソースチェックを実行し、レンダリングされた動作が未確認であることを明示的に報告します。UIが正しく見えるという主張で証拠を置き換えないでください。
操作とキャラクターを別々に評価します。結果を具体的かつ一貫性のあるものにする要素を指摘し、導入部だけでなく内部も検査し、繰り返し使用による中断をウォークスルーします。合格したビルドやコントラストチェックは、これらのデザイン上の質問に答えるものではありません。感情的な効果や記憶に残る程度は、実際の観客の観察がサポートしない限り、仮説として扱います。
実装されたフロー、変更されたサーフェス、利用可能なレンダリング証拠、実行したチェック、残っている制限を納品します。観察された問題を範囲内で修正し、フローが基準を満たすまで続けます。
オプションの詳細：Silicon Design レビューチェックリスト