Shadow: essensen, att skapa skuggor i mobila applikationer

Vad är en skugga i UI?

Skugga (shadow) i användargränssnitt — en visuell effekt som efterliknar belysning och djup. En skugga skapas genom att rita en mörk suddig kopia av elementet som är förskjuten i förhållande till originalet. I mobil design har skuggor tre funktioner: visar hierarki (högre element — längre skugga), signalerar interaktivitet (knappar med skugga ser klickbara ut), separerar innehåll från bakgrund (kort med skugga uppfattas som separata block).

I Googles Material Design är skuggor oupplösligt kopplade till konceptet elevation (höjd). Varje element upptar en viss höjd i Z-koordinaten och skuggan är en projektion av belysning uppifrån. Apples Human Interface Guidelines föreskriver inget strikt höjdsystem men rekommenderar att använda skuggor för att skapa visuell hierarki och djup i gränssnitt.

Enligt forskning från Nielsen Norman Group (2024) minskar korrekt placerade skuggor tiden för att hitta ett interaktivt element med 24%. Skuggor hjälper också användare med synnedsättning att urskilja elementens gränser. Alltför många skuggor (3+ nivåer på en skärm) ökar dock den kognitiva belastningen och försämrar uppfattningen.

Skuggor på iOS: CALayer och SwiftUI

På iOS implementeras skuggor via CALayers egenskaper: shadowColor anger skuggans färg, shadowOffset — förskjutningen i CGSize (x, y), shadowRadius — oskärpans radie, shadowOpacity — opaciteten från 0 till 1. För prestanda rekommenderas också att ställa in shadowPath — UIBezierPath som beskriver skuggans form, så att Core Animation inte beräknar den automatiskt.

// UIKit: konfigurera skugga via CALayer
import UIKit

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

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

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

I SwiftUI ställs skuggor in via modifieraren .shadow() med parametrarna color, radius, x, y. SwiftUI tillämpar automatiskt shadowPath och hanterar renderingsprestandan. För avancerade skuggor (inre skuggor, flera skuggor) använd overlay() med LinearGradient.

// SwiftUI: skugga via shadow-modifieraren
import SwiftUI

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

Prestanda för skuggor på iOS: om shadowPath inte är inställt beräknar Core Animation skuggan baserat på lagrets form i varje bildruta, vilket kan orsaka fördröjningar under animering. För statiska element, ställ alltid in shadowPath. För animerade element, använd shouldRasterize = true på CALayer för att cachelagra skuggan i ett separat lager. I SwiftUI hanteras rastrering via .drawingGroup().

Skuggor i Android: elevation och anpassade skuggor

I Android implementeras skuggor i Material Design via elevation — egenskapen för View som anger elementets höjd i Z-koordinaten. Systemet ritar automatiskt en skugga baserat på elevation och outlineProvider (elementets kontur). Ju högre elevation, desto större och suddigare skugga. För Views som inte ärver Material Design (t.ex. AppCompat) fungerar skuggor endast med hårdvaruacceleration aktiverad.

<!-- XML: elevation via attribut -->
<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">
    <!-- Kortets innehåll -->
</androidx.cardview.widget.CardView>

För anpassade skuggor i Android View System används OutlineProvider. ViewOutlineProvider gör det möjligt att ställa in en godtycklig form via outline.setRoundRect() eller outline.setPath(). Utan OutlineProvider ritas skuggan baserat på View:ens rektangulära form, vilket inte tar hänsyn till rundade hörn.

// Kotlin: anpassad OutlineProvider för skugga
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  // hörnradie
        )
    }
}
myView.elevation = 8f  // skugghöjd i px
myView.translationZ = 4f  // extra höjd vid tryckning

I Jetpack Compose hanteras skuggor via Modifier.shadow() och elevation i komponenterna Card och Surface. Modifier.shadow() accepterar elevation och shape. Till skillnad från View System ritar Compose skuggor i sin egen renderingspipeline, vilket ger mer förutsägbart beteende på alla Android-versioner.

// Jetpack Compose: skugga via 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 med anpassad skugga")
}

Rekommendationer för att använda skuggor

Korrekt användning av skuggor förbättrar gränssnittsuppfattningen, felaktig användning — skapar visuellt brus och försämrar prestanda. Material Design definierar fem nivåer av elevation: 0 dp (ingen skugga), 1–4 dp (knappar, chips), 6–12 dp (kort, menyer), 16–24 dp (dialoger, bottenpaneler), 24+ dp (modala fönster, FAB).

Regler för god praxis: (1) använd inte skuggor för element som inte bör dra uppmärksamhet (bakgrunder, avskiljare), (2) skuggans höjd bör motsvara elementets betydelse — ju viktigare, desto högre, (3) vid knapptryckning minska elevation animerat för taktil återkoppling, (4) undvik skuggor på mörka bakgrunder — använd overlay (ljusare/mörkare) istället för skugga. I Material You (Android 12+) anpassar sig skuggor till temat: på mörk bakgrund ersätts elevation med ett färglager (surface tint).

Skuggor i Flutter: BoxShadow och PhysicalModel

I Flutter implementeras skuggor via BoxShadow inuti BoxDecoration. BoxShadow accepterar color, offset, blurRadius och spreadRadius. Flutter stöder flera skuggor: att skicka en lista med BoxShadow gör det möjligt att skapa komplexa effekter — till exempel yttre skugga + inre belysning. PhysicalModel — ett alternativ som simulerar en fysisk skugga baserat på form (BeveledRectangleBorder, CircleBorder).

// Flutter: skugga via 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 med skugga'),
)

// PhysicalModel för fysisk skugga
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Fysisk modell med skugga'),
)

Prestanda: BoxShadow med flera skuggor kan orsaka omritning (repaint) vid varje förändring. För statiska element, använd PhysicalModel — det cachelagrar skuggan i ett separat lager (RepaintBoundary). I Flutter 3.16+ har stöd för Material 3 elevation lagts till med adaptiva skuggor som ändrar färg och oskärpa beroende på tema (ljust/mörkt).