開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソースバックグラウンド処理バックグラウンドで実行される処理に必要な状態と画面をまとめています。処理に時間がかかり、操作が完了した状態をすぐに表示できない場合、処理を非同期で行ないます。これをバックグラウンド処理と呼びます。バックグラウンド処理が実行されることがユーザーにも伝わるように、操作直後にはフィードバックとして以下を伝えます。バックグラウンド処理が進行していることバックグラウンド処理の結果をどの画面で確認すればよいかライティングバックグラウンド処理が失敗した場合、エラーメッセージのライティングパターンのバックグラウンド処理に沿ったメッセージを表示してください。エラー状態はユーザーの目的達成を阻害するため、回復方法が理解できるライティングが重要です。よって、一覧画面と詳細画面の表示パターンが変化します。詳細は、一覧画面の構成と詳細画面の構成を参照してください。操作直後のフィードバックユーザーには、バックグラウンド処理であるかどうかはわからないため、操作後に伝える必要があります。バックグラウンド処理をリクエストしたときに表示する文言は、{処理名}を受け付けましたとし、バックグラウンド処理結果の一覧画面へのリンクをフィードバックとして表示します。使用するコンポーネントは以下を状況によって使い分けます。NofiticationBar基本的にはNofiticationBarを使用します。記載する情報は1行に収めてください。InformationPanel記載したい情報が2行以上に及ぶ場合は、InformationPanelを使用します。フィードバックの基本的な考え方もあわせて参照してください。バックグラウンド処理結果の一覧画面バックグラウンド処理として受け付けた処理を一覧で表示する画面です。構成バックグラウンド処理結果の一覧画面は、以下の情報を含むよくあるテーブルです。その他の要素については必要に応じて判断してください。ステータス処理の状態をStatusLabelで表示します。type="blue"を使用します。type="grey"を使用します。type="warning"を使用します。type="error"を使用します。{オブジェクト}の{操作}で記載します。日付はYYYY/MM/DD、時刻はhh:mm:ssという表記で記載します。結果概要では以下のように成功と失敗の件数を伝えます。◯件の{オブジェクト}の{操作}に成功しました。◯件の{オブジェクト}の{操作}に失敗しました。処理中の場合は、何も表示しません。レイアウト各情報を以下のように配置します。バックグラウンド処理結果の詳細画面バックグラウンド処理結果の詳細を伝える画面です。構成バックグラウンド処理結果詳細画面は以下の要素で構成されます。ステータス処理の状態をStatusLabelで表示します。使用するカラーは一覧画面と同様です。一覧画面と同様に、{オブジェクト}の{操作}で記載します。メールアドレスで記載します。日付はYYYY/MM/DD、時刻はhh:mm:ssという表記で記載します。実際に処理に要した時間をhoge分、hoge時間といった形式で記載します。同様の内容もしくは「成功」の場合の次に促したい操作を表示します。エラー内容エラー内容にはエラーの原因を表示します。エラー内容の詳しい書き方についてはエラーメッセージを参照してください。添付ファイルCSVの書き出し操作やエラーの詳細をファイルで伝える場合は、CSVファイルをダウンロードできるボタンを配置します。添付ファイルがない場合にはボタンを非表示にします。レイアウト前提となる処理情報を左に配置します。ユーザーの関心がもっとも高い情報は結果詳細のため、右側に大きく表示します。どちらの情報もファーストビューに表示されるよう、上下でなく左右に配置しています。