Shadow: özü, mobil uygulamalarda gölge oluşturma

Kullanıcı Arayüzünde Gölge Nedir?

Gölge (shadow), kullanıcı arayüzlerinde aydınlatma ve derinliği simüle eden görsel bir efekt. Bir öğenin koyu, bulanık bir kopyasının orijinalden kaydırılarak çizilmesiyle gölge oluşturulur. Mobil tasarımda gölgeler üç işlevi yerine getirir: hiyerarşiyi gösterir (yüksek öğe = uzun gölge), etkileşimi bildirir (gölgeli düğmeler basılabilir görünür), içeriği arka plandan ayırır (gölgeli kartlar ayrı bloklar olarak okunur).

Google'ın Material Design'ında gölgeler, elevation kavramıyla ayrılmaz bir şekilde bağlantılıdır. Her öğe z koordinatında belirli bir yükseklik kaplar ve gölge, üstten aydınlatmanın bir izdüşümüdür. Apple'ın Human Interface Guidelines'ı katı bir yükseklik sistemi belirtmez, ancak arayüzlerde görsel hiyerarşi ve derinlik oluşturmak için gölgelerin kullanılmasını önerir.

Nielsen Norman Group araştırmasına (2024) göre, doğru yerleştirilmiş gölgeler etkileşimli bir öğeyi bulma süresini %24 azaltır. Gölgeler ayrıca görme engelli kullanıcıların öğe sınırlarını ayırt etmesine yardımcı olur. Ancak, aşırı gölge kullanımı (ekranda 3+ seviye) bilişsel yükü artırır ve algıyı bozar.

iOS'ta Gölgeler: CALayer ve SwiftUI

iOS'ta, gölgeler CALayer özellikleri aracılığıyla uygulanır: shadowColor gölge rengini ayarlar, shadowOffset — CGSize cinsinden kaydırma (x, y), shadowRadius — bulanıklık yarıçapı, shadowOpacity — 0 ile 1 arasında opaklık. Performans için, Core Animation'ın otomatik olarak hesaplamaması için shadowPath (gölge şeklini tanımlayan bir UIBezierPath) ayarlanması da önerilir.

// UIKit: CALayer ile gölge yapılandırması
import UIKit

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

// Gölge yapılandırması
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> Optimizasyon: açık shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

SwiftUI'da gölgeler, .shadow() değiştiricisi ile color, radius, x, y parametreleriyle ayarlanır. SwiftUI otomatik olarak shadowPath uygular ve oluşturma performansını yönetir. Gelişmiş gölgeler (iç gölgeler, birden çok gölge) için LinearGradient ile overlay() kullanın.

// SwiftUI: shadow değiştiricisi ile gölge
import SwiftUI

VStack {
    Text("Gölgeli kart")
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(
            color: .black.opacity(0.15),
            radius: 10,
            x: 0,
            y: 4
        )
}

iOS'ta gölge performansı: shadowPath ayarlanmazsa, Core Animation her karede katmanın şekline göre gölgeyi hesaplar ve bu da animasyon sırasında gecikmelere neden olabilir. Statik öğeler için her zaman shadowPath ayarlayın. Animasyonlu öğeler için, gölgeyi ayrı bir katmanda önbelleğe almak üzere CALayer'da shouldRasterize = true kullanın. SwiftUI'da rasterleştirme .drawingGroup() aracılığıyla yönetilir.

Android'de Gölgeler: elevation ve özel gölgeler

Android'de, Material Design'daki gölgeler elevation (öğenin z koordinatındaki yüksekliğini ayarlayan bir View özelliği) aracılığıyla uygulanır. Sistem, elevation ve outlineProvider (öğe anahattı) temelinde otomatik olarak bir gölge oluşturur. Elevation ne kadar yüksekse, gölge o kadar büyük ve bulanık olur. Material Design'dan miras almayan View'ler (örneğin AppCompat) için gölgeler yalnızca donanım hızlandırması etkinleştirildiğinde çalışır.

<!-- XML: özniteliklerle elevation -->
<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">
    <!-- Kart içeriği -->
</androidx.cardview.widget.CardView>

Android View Sisteminde özel gölgeler için OutlineProvider kullanın. ViewOutlineProvider, outline.setRoundRect() veya outline.setPath() aracılığıyla isteğe bağlı bir şekil ayarlamanıza olanak tanır. OutlineProvider olmadan gölge, View'in dikdörtgen şekline göre oluşturulur ve köşe yuvarlaması dikkate alınmaz.

// Kotlin: gölge için özel OutlineProvider
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  // köşe yarıçapı
        )
    }
}
myView.elevation = 8f  // px cinsinden gölge yüksekliği
myView.translationZ = 4f  // basıldığında ek yükseklik

Jetpack Compose'ta gölgeler, Modifier.shadow() ve Card ile Surface bileşenlerindeki elevation aracılığıyla yönetilir. Modifier.shadow() elevation ve shape kabul eder. View Sisteminin aksine, Compose gölgeleri kendi oluşturma hattında oluşturur ve bu da tüm Android sürümlerinde daha öngörülebilir bir davranış sağlar.

// Jetpack Compose: Modifier.shadow ile gölge
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("Özel gölgeli Card")
}

Gölge Kullanımı İçin Öneriler

Gölgelerin doğru kullanımı arayüz algısını iyileştirirken, yanlış kullanım görsel gürültü oluşturur ve performansı düşürür. Material Design beş elevation seviyesi tanımlar: 0 dp (gölge yok), 1–4 dp (düğmeler, çipler), 6–12 dp (kartlar, menüler), 16–24 dp (diyaloglar, alt sayfalar), 24+ dp (modal pencereler, FAB).

En iyi uygulamalar: (1) dikkat çekmemesi gereken öğeler (arka planlar, ayırıcılar) için gölge kullanmayın, (2) gölge yüksekliği öğe önemiyle eşleşmelidir — ne kadar önemliyse o kadar yüksek, (3) bir düğmeye basıldığında, dokunsal geri bildirim için animasyonla elevation azaltın, (4) koyu arka planlarda gölgelerden kaçının — gölge yerine overlay (aydınlatma/karartma) kullanın. Material You'da (Android 12+), gölgeler temaya uyum sağlar: koyu arka planda elevation, bir renk katmanı (surface tint) ile değiştirilir.

Flutter'da Gölgeler: BoxShadow ve PhysicalModel

Flutter'da, gölgeler BoxDecoration içindeki BoxShadow aracılığıyla uygulanır. BoxShadow, color, offset, blurRadius ve spreadRadius kabul eder. Flutter birden çok gölgeyi destekler: BoxShadow listesi iletilmesi, karmaşık efektler (örneğin, dış gölge + iç vurgu) oluşturulmasına olanak tanır. PhysicalModel, şekle (BeveledRectangleBorder, CircleBorder) dayalı fiziksel bir gölge simüle eden bir alternatiftir.

// Flutter: BoxDecoration + BoxShadow ile gölge
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('Gölgeli kap'),
)

// Fiziksel gölge için PhysicalModel
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Gölgeli fiziksel model'),
)

Performans: Birden çok gölgeye sahip BoxShadow, her değişiklikte yeniden boyamaya neden olabilir. Statik öğeler için PhysicalModel kullanın — gölgeyi ayrı bir katmanda (RepaintBoundary) önbelleğe alır. Flutter 3.16+'da, temaya (açık/koyu) bağlı olarak renk ve bulanıklığı değiştiren uyarlanabilir gölgelere sahip Material 3 elevation desteklenir.