/impeccable harden
Harden
インターフェースをプロダクションレディにする。エッジケース、i18n、エラー状態、オーバーフロー。
いつ使うか
/impeccable harden はインターフェースが現実に出会う日のためのものです。実際のユーザーデータは乱雑です:60文字の名前、ドイツ語の製品タイトル、数十億の価格、500エラー、オフラインモード、右から左へのテキスト。完璧なデータでのみ動くデザインはプロダクションレディではありません。
ローンチ前、新しい市場へのオープン前、またはバグレポートが「あるユーザーの名前が本当に長くて」で始まる時に使ってください。初回起動フロー、空の状態のアクティベーション、オンボーディングデザインには、代わりに /impeccable onboard を使ってください。
仕組み
スキルは4つの次元で現実世界のレジリエンスに取り組みます。
- テキストとデータの極端なケース。長いテキスト、短いテキスト、特殊文字、絵文字、RTL、数十億の数字、1000項目のリスト。
- エラーシナリオ。ネットワーク障害、API 4xx/5xx、バリデーションエラー、権限エラー、レート制限、同時操作。
- 国際化。長い翻訳(ドイツ語は英語より30%長いことが多い)、RTL言語、日付と数字のフォーマット、通貨記号、文字セット。
- デバイスとコンテキスト。タッチターゲット、オフライン動作、低速接続、低電力モード。
各次元で障害モードを特定し、具体的な修正を適用します:オーバーフロー処理、情報提供エラーUI、i18nセーフなレイアウト、複数形化、適切なフォールバック。
試してみる
1ページ1次元から始めます:
/impeccable harden the user profile page for long names
期待される出力:
.user-nameにtext-overflow: ellipsisを追加、完全な値はツールチップで表示.bioを固定高さからmax-heightに変更し、「もっと見る」開示を追加- bioなしのユーザーに空の状態を追加
- 非同期アバターフェッチにスケルトンローダーを追加
- 名前長1、20、60、200文字でテスト
すべて一度にではなく、ページごとに実行してください。最初の実行が最も大きく、その後の実行はパターンが固まるにつれて見つける問題が減ります。
注意点
- バグレポートを待つこと。 Hardenは予防的です。同じクラスのバグを2回修正していることに気づいたら、機能全体で
/impeccable hardenを実行してください。 - エラーと空の状態を後回しにすること。 ハードニング作業の大部分はエラーと空の状態のUIです。単なる
catchブロックではなく、時間を確保してください。 - 「今は英語のみ」だからとi18nをスキップすること。 i18nセーフなレイアウトは、より良いレイアウトでもあります。柔軟なコンテナ、適切なテキスト折り返し、十分な行の高さ。英語にとっても悪影響はありません。