デザイン・デザイン/無料ツール
UI状態マトリクス生成ツール
読み込み、空、エラー、成功、オフライン、および許可状態のコンポーネント・バイ・ステート・カバレッジ・マトリックスを構築します。 AIなしでUIチェックリストをエクスポートします。
状態の指定
ui-state-matrix.md
UI state coverage requirements
Data table
- Loading: Preserve context, communicate progress, and prevent duplicate actions.
- Empty: Explain why there is nothing here and offer a useful next action.
- Error: Explain the failed action, preserve safe input, and offer a recovery path.
- No permission: Explain missing access and offer a safe destination. Enforce authorization on the server.
Form
- Loading: Preserve context, communicate progress, and prevent duplicate actions.
- Error: Explain the failed action, preserve safe input, and offer a recovery path.
- Success: Confirm the completed action and make the resulting state clear.
- Offline: Explain the connection issue, preserve safe local input, and provide a retry path.
These are required states, not verified implementations. Use existing components and validate the final behavior with real data and keyboard navigation.
単語数: 136詳しくはこちら ↑
出力テキストは英語のままです。入力内容はそのまま保持されます。
サインアップはありません。 AIクレジットなし。 このツールは、お使いのブラウザで出力を組み立てます。
アイデアから何か役に立つものまで。
- 01
画面のコンポーネントを選択します。
- 02
各コンポーネントに適用される状態を切り替えます。
- 03
ステート・バイ・ステート・実装・チェックリストをコピーします。
小さな文脈。
異なるコンポーネントは、異なる回復パスを必要とします。 フォームは、検証フィードバックを必要とします。データテーブルは、読み込み、結果なし、および再試行状態を必要とします。 キュレーションされたデフォルトは開始ポイントを提供し、すべてのセルを変更できます。 選択された状態は、必要なカバレッジを意味し、実装を完了しません。
よくある質問
選択した状態は既に実装されていますか?
いいえ。 チェックされた状態は設計し、テストする条件です。 このツールは、アプリケーションを検査しません。
不当な状態を取除くことはできますか?
はい。 任意の行列セルをトグルします。 エクスポートには、選択したコンポーネントの選択した状態のみが含まれています。