デザイン・オープンブック

ローディングと進捗表示

スピナー、プログレスバー、スケルトンはどう使い分ければいいですか? 1秒以内なら何も出さず、1~3秒はスピナー、それ以上や画面全体の読み込みはスケルトン、3段階以上の流れはステップインジケーターを使います。

待ち時間や進み具合を示すバーや点です。何を待っているかによって、選ぶものが変わります。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. スピナー

    Spinner

    くるくる回る表示。残りがどれくらいか分からないとき

  2. プログレスバー

    Progress bar

    何%終わったか分かるときに伸びていくバー

  3. スケルトン

    Skeleton screen

    内容の場所を灰色の塊で先に描いておくローディング

  4. ステップインジケーター

    Step indicator

    1段階→2段階→3段階のうち現在位置を示す

  5. ストーリーバー

    Story progress bar

    区切られたバー。複数枚を順に切り替えるとき

  6. 読了バー

    Reading progress bar

    文章をどこまで読んだかを最上部に伸びる線で示す

  7. 強度メーター

    Password strength meter

    パスワードの安全度に応じて目盛りが埋まる表示

  8. ホームインジケーター

    Home indicator

    iPhone最下部の横バー。進捗表示ではなくジェスチャーのつまみ

使い方

  • 1秒以内に終わるなら、何も表示しません。1~3秒はスピナー、それより長い場合や画面全体を読み込む場合はスケルトンを使います。
  • 決済・登録のように3段階以上続く流れは、ステップインジケーターで「今何番目で、あといくつ残っているか」を見せます。
  • ホームインジケーターのすぐ上にはボタンを置きません。上にスワイプするジェスチャーと重なります。

コピーして使うプロンプト

3段階の決済

決済画面を3段階で作ってください: 配送先 → 支払い方法 → 確認。
- 最上部にステップインジケーター(Step indicator)。完了した段階はチェック、現在の段階は強調、残りは薄く。
- 次の段階のデータを読み込む間は、スケルトン(Skeleton screen)を表示。
- 決済ボタンを押したらボタンの中に小さなスピナー(Spinner)を入れ、ボタンは無効化してください。

参考にした投稿: @uxwoodytips, @ui_motion_prompts

すべてのカード (27)