Dictionary

役割と種類

アプリケーションの読み込み、フォームの送信、更新の保存など、進行中のプロセスのステータスについてユーザーに通知します。現在のアプリケーションの状態を伝え、ユーザーが現在の画面から移動できるかどうかを示します。

読み込みの完了率が検出できる場合

読み込みの完了率を検出できる場合は、プロセスにかかる時間を計算し、割合をIndicatorで示します。

読み込みの完了率が検出できない場合 / かかる時間を示す必要がない場合

進行状況が検出できない場合、またはアクティビティにかかる時間を示す必要がない場合は不特定の待機時間を表すアニメーションを表示します。ただし、途中で読み込みの完了率を検出できるようになった場合は割合をIndicatorで示します。

いつ使うべきか / 使わないべきか

Skeletonを使用したほうがよい場合

描画されるコンポーネントがある程度定まっている場合は、読み込みの体感速度を向上させるため、Skeletonを使用します。また、読み込みの進行の途中で描画されるコンポーネントがある程度定まる場合はそのタイミングでSkeletonに表示を切り替えることも検討すべきです。

画面コンテンツの初期読み込みを示す

LinearやCircularのProgress Indicatorが画面の中央にある場合、画面コンテンツの初期読み込みを示します。

スワイプして更新

「スワイプして更新」ジェスチャにより、UIが更新されていることを示すCircularのProgress Indicatorが表示されます。

新しいコンテンツが表示される場所

既存のコンテンツの上または下にCircularのProgress Indicatorを配置すると、新しいコンテンツが表示される場所に注意が向けられます。

LinearとCircularのつかいわけ

配置する箇所の面積に応じて使い分けます。

コンポーネントに組み合わせて使う

Linear Progress Indicatorをオーバーレイする

Linear Progress Indicatorをコンポーネントの最下部にオーバーレイすることで、進行中の状態を表現できます。この場合、対象のコンポーネント（例：Button）をDisabledにする必要があります。

Buttonのラベルを置き換えない

ButtonのラベルをProgress Indicatorに置き換えると、ユーザーがそのボタンが何をするものかわからなくなる問題があります。そのため、ラベルを置き換えることは避け、上記のオーバーレイ方式を適用してください。

アイコンをCircular Progress Indicatorに置き換える

状態をアイコンの視覚情報で表現している場合は、進行中という状態を視覚的に表現するという役割でアイコンに置き換えてCircular Progress Indicatorを利用してもよいです。

Interaction

読み込みの開始

Progress Indicatorを表示します。

読み込み中

Progress Indicatorをアニメーションさせます。

読み込みの完了

Progress Indicatorを非表示にします。

読み込みの失敗

失敗した理由を通知し、次に行うべきアクションを明確に伝えます。

Style

Linearの外観

LinearのProgress Indicatorは、固定された表示可能なトラックの長さに沿ってIndicatorをアニメーション化することにより、進行状況を表示します。Indicatorの動作は、プロセスの進行状況がわかっているかどうかによって異なります。

読み込みの完了率が検出できる場合は、プロセスの進行状況に同期して、トラックの0から100％まで幅が増加するIndicatorが表示されます。

読み込みの完了率が検出できない場合、またはかかる時間を示す必要がない場合は、プロセスが完了するまで、トラックに沿ってIndicatorが継続的にアニメーションします。

Circularの外観

CircularのProgress Indicatorは、見えない円形のトラックに沿って時計回りにIndicatorをアニメーション化することで進行状況を表示します。

読み込みの完了率が検出できる場合は、Indicatorが0度から360度にアニメーションしながら、円形Indicatorが非表示の円形トラックを色で塗りつぶします。

読み込みの完了率が検出できない場合、またはかかる時間を示す必要がない場合は、円形Indicatorは、目に見えないトラックに沿って移動しながらアニメーションします。

カスタムのProgress Indicatorを使用する

ペパポンなどブランドを表すマーク、忍者スリスリくんなどのキャラクターをProgress Indicatorとして使用できます。アプリケーションごとにカスタマイズしたProgress Indicatorを設計することで、ブランドをより強調することができます。ただし、前述の読み込みの完了率に関する原則に則り、進行中のプロセスがわかりやすい状態で設計してください。また、形状が適さない箇所にはどう対応するかなどのルールも検証の上で妥当だと判断した上で使用してください。

補助テキストを組み合わせる

何を読み込んでいるのかを明確にするために補助テキストを組み合わせることができます。

Assets