iOS インターフェースレベル入門
Appleのプラットフォームには、インターフェースレベルという概念があります。
これに関してまとまった資料をあまり見かけなかったので、自分なりにまとめてみます。
インターフェースレベルとは
インターフェースレベルは、ユーザーが操作する画面がメインのウィンドウに対してどんな相対関係かを表す概念です。
現在 baseとelevatedの２つのレベルがあります。
具体例
iOSの場合、アプリを起動した直後に表示される画面はbaseとなります。
1枚モーダルを表示すると、モーダル画面のレベルはelevatedになります。
| base | elevated |
|---|---|
 |
 |
スクリーンショットを見ると分かる通り、デフォルトの背景色は、このインターフェースレベルによって背景色を決定します。
これにより、適切な背景色が自動的に決定します。
この概念はアラートやメニューでも取り入れられており、ダークモード下では手前にあるコンテンツ（elevated）は背景色が明るくなります。
| elevated | elevated | elevated |
|---|---|---|
 |
 |
 |
インターフェースレベルの存在意義
このようにインターフェースレベルは、ナビゲーションの奥行きを表します。
インターフェースレベルがあることで、画面は自身に対して影や色の明るさを付けるべきか判断することができます。
これによって、ユーザーは画面上に複数のコントロールがある場合でも、操作できる画面がどれであるかを視覚的に判断することができます。
フルスクリーンの場合
インターフェースレベルは、視覚的にメインのウィンドウよりも前に無くてはelevatedになりません。
フルスクリーンのモーダル表示の場合、モーダル側もbaseが適用されます。
これは、モーダル以外に操作出来るコントロールが無いためと考えられます。
| base | elevated |
|---|---|
|
 |
ライトモードの場合
ライトモードの場合は、背景色が変更されません。
これは、影による効果によってユーザーが操作出来る画面を判断できるためと考えられます。
| elevated | elevated |
|---|---|
 |
 |
なお、モーダル表示の場合は背景画面を覆うようにdimmingをかけて強調しているようです
| elevated | elevated |
|---|---|
 |
 |
Discussion