Shadow: Wesen, Erstellung von Schatten in mobilen Anwendungen

Was ist ein Schatten in der UI?

Schatten (shadow) in Benutzeroberflächen ist ein visueller Effekt, der Beleuchtung und Tiefe simuliert. Ein Schatten wird erzeugt, indem eine dunkle, unscharfe Kopie eines Elements versetzt zum Original gezeichnet wird. Im Mobile Design erfüllen Schatten drei Funktionen: Sie zeigen Hierarchie (höheres Element = längerer Schatten), signalisieren Interaktivität (Schaltflächen mit Schatten sehen drückbar aus), trennen Inhalt vom Hintergrund (Karten mit Schatten lesen sich als separate Blöcke).

In Googles Material Design sind Schatten untrennbar mit dem Konzept der Elevation verbunden. Jedes Element nimmt eine bestimmte Höhe in der z-Koordinate ein, und der Schatten ist eine Projektion der Beleuchtung von oben. Apples Human Interface Guidelines schreiben kein strenges Höhensystem vor, empfehlen jedoch die Verwendung von Schatten, um visuelle Hierarchie und Tiefe in Oberflächen zu schaffen.

Laut einer Studie der Nielsen Norman Group (2024) reduzieren richtig platzierte Schatten die Zeit zum Finden eines interaktiven Elements um 24%. Schatten helfen auch sehbehinderten Benutzern, Elementgrenzen zu unterscheiden. Übermäßiger Einsatz von Schatten (3+ Ebenen auf einem Bildschirm) erhöht jedoch die kognitive Belastung und beeinträchtigt die Wahrnehmung.

Schatten auf iOS: CALayer und SwiftUI

Auf iOS werden Schatten über CALayer-Eigenschaften implementiert: shadowColor legt die Schattenfarbe fest, shadowOffset — Versatz in CGSize (x, y), shadowRadius — Unschärferadius, shadowOpacity — Deckkraft von 0 bis 1. Für die Leistung wird auch empfohlen, shadowPath — einen UIBezierPath, der die Schattenform beschreibt — zu setzen, damit Core Animation sie nicht automatisch berechnet.

// UIKit: Schattenkonfiguration über CALayer
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12

// Schattenkonfiguration
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> Optimierung: expliziter shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

In SwiftUI werden Schatten über den Modifikator .shadow() mit den Parametern color, radius, x, y festgelegt. SwiftUI wendet shadowPath automatisch an und verwaltet die Rendering-Leistung. Für fortgeschrittene Schatten (innere Schatten, mehrere Schatten) verwenden Sie overlay() mit LinearGradient.

// SwiftUI: Schatten über shadow-Modifikator
import SwiftUI

VStack {
    Text("Karte mit Schatten")
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(
            color: .black.opacity(0.15),
            radius: 10,
            x: 0,
            y: 4
        )
}

Schattenleistung auf iOS: Wenn shadowPath nicht gesetzt ist, berechnet Core Animation den Schatten basierend auf der Form der Ebene jeden Frame, was während der Animation zu Verzögerungen führen kann. Für statische Elemente setzen Sie immer shadowPath. Für animierte Elemente verwenden Sie shouldRasterize = true auf CALayer, um den Schatten in einer separaten Ebene zwischenzuspeichern. In SwiftUI wird die Rasterisierung über .drawingGroup() verwaltet.

Schatten in Android: elevation und benutzerdefinierte Schatten

In Android werden Schatten in Material Design über elevation implementiert — eine View-Eigenschaft, die die Höhe des Elements in der z-Koordinate festlegt. Das System rendert automatisch einen Schatten basierend auf elevation und outlineProvider (Elementkontur). Je höher die elevation, desto größer und unschärfer ist der Schatten. Für Views, die nicht von Material Design erben (z. B. AppCompat), funktionieren Schatten nur bei aktivierter Hardwarebeschleunigung.

<!-- XML: elevation über Attribute -->
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp">
    <!-- Karteninhalt -->
</androidx.cardview.widget.CardView>

Für benutzerdefinierte Schatten im Android View System verwenden Sie OutlineProvider. ViewOutlineProvider ermöglicht es, eine beliebige Form über outline.setRoundRect() oder outline.setPath() festzulegen. Ohne OutlineProvider wird der Schatten basierend auf der rechteckigen Form der View gerendert, was die Abrundung der Ecken nicht berücksichtigt.

// Kotlin: benutzerdefinierter OutlineProvider für Schatten
import android.graphics.Outline
import android.view.View
import android.view.ViewOutlineProvider

val myView: View = findViewById(R.id.myView)
myView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(
            0, 0, view.width, view.height,
            12f  // Eckenradius
        )
    }
}
myView.elevation = 8f  // Schattenhöhe in px
myView.translationZ = 4f  // zusätzliche Höhe bei Druck

In Jetpack Compose werden Schatten über Modifier.shadow() und elevation in den Komponenten Card und Surface verwaltet. Modifier.shadow() akzeptiert elevation und shape. Im Gegensatz zum View System rendert Compose Schatten in seiner eigenen Rendering-Pipeline, was ein vorhersagbareres Verhalten über alle Android-Versionen hinweg bietet.

// Jetpack Compose: Schatten über Modifier.shadow
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    modifier = Modifier.shadow(
        elevation = 6.dp,
        shape = RoundedCornerShape(12.dp),
        clip = false
    ),
    colors = CardDefaults.cardColors(containerColor = Color.White)
) {
    Text("Card mit benutzerdefiniertem Schatten")
}

Empfehlungen zur Verwendung von Schatten

Die richtige Verwendung von Schatten verbessert die Wahrnehmung der Oberfläche, während falsche Verwendung visuelles Rauschen erzeugt und die Leistung beeinträchtigt. Material Design definiert fünf elevation-Ebenen: 0 dp (kein Schatten), 1–4 dp (Schaltflächen, Chips), 6–12 dp (Karten, Menüs), 16–24 dp (Dialoge, Bottom Sheets), 24+ dp (modale Fenster, FAB).

Best Practices: (1) Verwenden Sie keine Schatten für Elemente, die keine Aufmerksamkeit erregen sollen (Hintergründe, Trennlinien), (2) die Schattenhöhe sollte der Bedeutung des Elements entsprechen — je wichtiger, desto höher, (3) verringern Sie beim Drücken einer Schaltfläche die elevation mit Animation für taktiles Feedback, (4) vermeiden Sie Schatten auf dunklen Hintergründen — verwenden Sie overlay (aufhellen/abdunkeln) anstelle von Schatten. In Material You (Android 12+) passen sich Schatten dem Thema an: auf dunklem Hintergrund wird elevation durch eine Farbschicht (surface tint) ersetzt.

Schatten in Flutter: BoxShadow und PhysicalModel

In Flutter werden Schatten über BoxShadow innerhalb von BoxDecoration implementiert. BoxShadow akzeptiert color, offset, blurRadius und spreadRadius. Flutter unterstützt mehrere Schatten: Durch Übergabe einer Liste von BoxShadow können komplexe Effekte erstellt werden — zum Beispiel ein äußerer Schatten + innere Hervorhebung. PhysicalModel ist eine Alternative, die einen physikalischen Schatten basierend auf der Form simuliert (BeveledRectangleBorder, CircleBorder).

// Flutter: Schatten über BoxDecoration + BoxShadow
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.0),
        boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(0.15),
                offset: Offset(0, 4),
                blurRadius: 8.0,
                spreadRadius: 0,
            ),
        ],
    ),
    child: Text('Container mit Schatten'),
)

// PhysicalModel für physikalischen Schatten
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Physikalisches Modell mit Schatten'),
)

Leistung: BoxShadow mit mehreren Schatten kann bei jeder Änderung eine Neuzeichnung verursachen. Für statische Elemente verwenden Sie PhysicalModel — es speichert den Schatten in einer separaten Ebene zwischen (RepaintBoundary). In Flutter 3.16+ wird Material 3 elevation mit adaptiven Schatten unterstützt, die Farbe und Unschärfe je nach Thema (hell/dunkel) ändern.