Was ist die Safe Zone?
Spätestens mit der Ankündigung des iPhone X wurden sogenannte "edge-to-edge" oder randlose Displays zu einem weitverbreiteten Design auf der Mobile-Plattform. Damit die UI nicht von Notches oder Flächen für Gesten (z.B. iPhone Home-Geste) überlagert wird, gibt es die Safe Zone. Innerhalb der Safe Zone ist garantiert, dass Elemente bedienbar und vollständig sichtbar sind.
Hier mal ein paar Beispiele aus dem Device Simulator, wo die Safe Zone in gelb drübergelegt ist:
Abbildung 1: iPhone 12 mit symmetrischer Safe Zone
Abbildung 2: iPad 12.9 mit kleiner Safe Zone für den Home Indikator
Abbildung 3: Samsung Galaxy S10e mit asymmetrischer Safe Zone
Aufällig ist, dass Apple seine Safe Zone idR. symmetrisch hält (vgl. Abbildung 1), obwohl dies nicht wirklich notwendig ist. Bei Android wurde sich entsprechend für die asymmetrische Safe Zone entschieden (Abbildung 3). Des Weiteren hält Apple stets Platz für den Home Indikator frei, der sich am unteren Bildschirmrand befindet, selbst wenn es ansonsten keine Safe Zone gibt (Abbildung 2).
Veraltete Apps, die Notches bzw. Safe Zone nicht korrekt unterstützen sehen inzwischen so aus:
Abbildung 4a: Die Safe Zone eines Google Pixel 5
Abbildung 4b: Das Spiel wird entlang der Safe Zone abgeschnitten. Der Rest des Bildschirms bleibt schwarz.
Beim Aufbau und Design der eigenen UI sollte die Safe Zone unbedingt mit einbezogen werden. Damit verhindert man das,
- Elemente der UI durch Rundungen in den Ecken des Displays abgeschnitten werden,
- Bedienelemente von der Notch verschluckt werden oder sonst wie nicht bedienbar sind,
- beim Interagieren ungewollt Systemgesten angesteuert werden.
Ferner noch lohnt es sich über die Safe Zone hinaus Mindestabstände zum Rand zu etablieren, da viele Displays runde Ecken haben. Man kann in Abbildung 4b bereits die Möglichkeit erahnen, dass in den Ecken liegende Buttons von den Rundungen abgeschnitten werden. Für das Design bedeutet die Safe Zone vor allem erst einmal weniger Platz für so gut wie alles. Beim Bau der UI stellt sich die Frage, wie man sich an die Safe Zone anpasst.
Ich habe hier ein Asset aus dem Store, mit samt Artikel zur Erklärung parat. Zusammengefasst erhält man über die Screen-Klasse ein Rect, welches die Maße der Safe Zone darstellt. Dieses Rect kann man dann mit den Maßen der vollen Auflösung verrechnen und so Werte für anchorMin bzw. anchorMax des anzupassenden RectTransforms erhalten, um dieses auf die Dimensionen der Safe Zone zu setzen. Zur Erinnerung: Die Anker Werte sind zwischen 0 und 1, sie beschreiben wie viel des Rects auf einer Achse genutzt wird. Man errechnet also, wie viel die Safe Zone anteilig vom gesamten Bildschirm ausmacht.
Final stellt sich damit noch die Frage, auf welcher Ebene ein Safe Zone Script liegen sollte:
Die Antwort darauf hängt ganz vom Design ab - vor allem, ob das/die Panel/s einen fullscreen Hintergrund haben.