Browse commands

/impeccable harden

Harden

インターフェースをプロダクションレディにする。エッジケース、i18n、エラー状態、オーバーフロー。

いつ使うか

/impeccable harden はインターフェースが現実に出会う日のためのものです。実際のユーザーデータは乱雑です:60文字の名前、ドイツ語の製品タイトル、数十億の価格、500エラー、オフラインモード、右から左へのテキスト。完璧なデータでのみ動くデザインはプロダクションレディではありません。

ローンチ前、新しい市場へのオープン前、またはバグレポートが「あるユーザーの名前が本当に長くて」で始まる時に使ってください。初回起動フロー、空の状態のアクティベーション、オンボーディングデザインには、代わりに /impeccable onboard を使ってください。

仕組み

スキルは4つの次元で現実世界のレジリエンスに取り組みます。

  1. テキストとデータの極端なケース。長いテキスト、短いテキスト、特殊文字、絵文字、RTL、数十億の数字、1000項目のリスト。
  2. エラーシナリオ。ネットワーク障害、API 4xx/5xx、バリデーションエラー、権限エラー、レート制限、同時操作。
  3. 国際化。長い翻訳(ドイツ語は英語より30%長いことが多い)、RTL言語、日付と数字のフォーマット、通貨記号、文字セット。
  4. デバイスとコンテキスト。タッチターゲット、オフライン動作、低速接続、低電力モード。

各次元で障害モードを特定し、具体的な修正を適用します:オーバーフロー処理、情報提供エラーUI、i18nセーフなレイアウト、複数形化、適切なフォールバック。

試してみる

1ページ1次元から始めます:

/impeccable harden the user profile page for long names

期待される出力:

  • .user-nametext-overflow: ellipsis を追加、完全な値はツールチップで表示
  • .bio を固定高さから max-height に変更し、「もっと見る」開示を追加
  • bioなしのユーザーに空の状態を追加
  • 非同期アバターフェッチにスケルトンローダーを追加
  • 名前長1、20、60、200文字でテスト

すべて一度にではなく、ページごとに実行してください。最初の実行が最も大きく、その後の実行はパターンが固まるにつれて見つける問題が減ります。

注意点

  • バグレポートを待つこと。 Hardenは予防的です。同じクラスのバグを2回修正していることに気づいたら、機能全体で /impeccable harden を実行してください。
  • エラーと空の状態を後回しにすること。 ハードニング作業の大部分はエラーと空の状態のUIです。単なる catch ブロックではなく、時間を確保してください。
  • 「今は英語のみ」だからとi18nをスキップすること。 i18nセーフなレイアウトは、より良いレイアウトでもあります。柔軟なコンテナ、適切なテキスト折り返し、十分な行の高さ。英語にとっても悪影響はありません。