ステータスバー

ステータスバーには、時刻と天気情報のほか、接続やバッテリー残量などのシステム ステータスの詳細が表示されます。

このセクションでは、ステータスバーの要素と、さまざまなレベルの背景透明性のオプションについて説明します。

解剖学

ステータスバーは画面上部に表示され、以下の要素が表示されます。ユーザーは [設定] で天気情報の表示をオンまたはオフに切り替えることができます。

ステータスバーの要素は、左ハンドル車と右ハンドル車で同じ順序で表示されます。

ステータスバーの構造
ステータスバーの構造
  1. 時計 - 現在の時刻をデジタル表示します。
  2. 天気情報 - 気温と天気アイコン。
  3. 接続 - Wi-Fi とモバイル通信。
  4. バッテリー残量

背景オプション

ステータスバーの背景には、次の 3 つのオプションがあります。

  • Opaque
  • 透明
  • 半透明のグラデーション

デフォルトでは不透明な背景になっていますが、アプリのデベロッパーはアプリのステータスバーに透明または半透明の背景を選択することもできます。

Opaque

デフォルトでは、ステータスバー エレメントの判読性をできるだけ保護するため、ステータスバーは不透明な背景でレンダリングされます。ただし、ある程度の透明性を選択すると、ステータスバーとアプリ コンテンツの切り替えがよりシームレスになり、アプリ コンテンツの表示範囲を広げることができます。

透明

ステータスバー要素の背後に十分なコントラストがある画面のアプリは、透明な背景を使用できます。このオプションは、ほとんどのメディア アプリとコミュニケーション アプリ、およびアプリ ランチャーなどのシステム エクスペリエンスで使用されます。

アプリ ランチャーと iHeartRadio メディア再生画面のスクリーンショット
これらの例では、画面の上部にすでに単色の背景があるため、ステータスバーの背景を透明にすると、シームレスに統合できます

半透明のグラデーション

画面の上部まで視覚情報を表示するアプリは、ステータスバーにリニア グラデーションの半透明の背景を設定できます。グラデーションは、ステータスバーの要素を読み取るのに十分な不透明度を提供し、部分的な透明性はアプリの情報を表示したままにします。

ナビゲーション アプリのスクリーンショット
ナビゲーション アプリでは、ステータスバーの背後に半透明のリニア グラデーションを使用することで、地図要素を表示したまま、ステータスバー要素を読みやすくできます