Shadow: mahiyyəti, mobil tətbiqlərdə kölgələrin yaradılması

UI-da kölgə nədir?

Kölgə (shadow) istifadəçi interfeyslərində — işıqlandırma və dərinliyi təqlid edən vizual effektdir. Kölgə elementin orijinala nisbətən yerdəyişmiş tünd bulanıq surətinin çəkilməsi ilə yaradılır. Mobil dizaynda kölgələr üç funksiya yerinə yetirir: iyerarxiyanı göstərir (yüksək element — daha uzun kölgə), interaktivliyi bildirir (kölgəli düymələr basıla bilən görünür), məzmunu fondan ayırır (kölgəli kartlar ayrı bloklar kimi qəbul olunur).

Google-un Material Design-da kölgələr elevation (hündürlük) konsepti ilə ayrılmaz şəkildə bağlıdır. Hər bir element Z koordinatında müəyyən bir hündürlük tutur və kölgə yuxarıdan işıqlandırmanın proyeksiyasıdır. Apple-ın Human Interface Guidelines-ı ciddi hündürlük sistemi tələb etmir, lakin interfeyslərdə vizual iyerarxiya və dərinlik yaratmaq üçün kölgələrdən istifadə etməyi tövsiyə edir.

Nielsen Norman Group (2024) araşdırmasına görə, düzgün yerləşdirilmiş kölgələr interaktiv elementin axtarış müddətini 24% azaldır. Kölgələr həmçinin görmə qüsuru olan istifadəçilərə elementlərin sərhədlərini ayırd etməyə kömək edir. Lakin həddindən artıq kölgə istifadəsi (ekranda 3+ səviyyə) idrak yükünü artırır və qavrayışı pisləşdirir.

iOS-da kölgələr: CALayer və SwiftUI

iOS-da kölgələr CALayer xüsusiyyətləri vasitəsilə həyata keçirilir: shadowColor kölgənin rəngini, shadowOffset — CGSize-də yerdəyişməni (x, y), shadowRadius — bulanıqlıq radiusunu, shadowOpacity — 0-dan 1-ə qədər qeyri-şəffaflığı təyin edir. Məhsuldarlıq üçün həmçinin shadowPath — kölgənin formasını təsvir edən UIBezierPath təyin etmək tövsiyə olunur ki, Core Animation onu avtomatik hesablamasın.

// UIKit: CALayer vasitəsilə kölgə konfiqurasiyası
import UIKit

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

// Kölgə konfiqurasiyası
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> Optimallaşdırma: aşkar shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

SwiftUI-da kölgələr .shadow() modifikatoru ilə color, radius, x, y parametrləri ilə təyin edilir. SwiftUI avtomatik olaraq shadowPath tətbiq edir və render məhsuldarlığını idarə edir. Qabaqcıl kölgələr üçün (daxili kölgələr, çoxsaylı kölgələr) overlay() ilə LinearGradient istifadə edin.

// SwiftUI: shadow modifikatoru ilə kölgə
import SwiftUI

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

iOS-da kölgələrin məhsuldarlığı: shadowPath təyin edilməyibsə, Core Animation hər kadrda təbəqənin formasına əsasən kölgə hesablayır ki, bu da animasiya zamanı ləngimələrə səbəb ola bilər. Statik elementlər üçün həmişə shadowPath təyin edin. Animasiya edilən elementlər üçün CALayer-də shouldRasterize = true istifadə edin ki, kölgə ayrıca təbəqədə keşlənsin. SwiftUI-də rasterizasiya .drawingGroup() vasitəsilə idarə olunur.

Android-də kölgələr: elevation və fərdi kölgələr

Android-də Material Design-da kölgələr elevation — elementin Z koordinatında hündürlüyünü təyin edən View xüsusiyyəti vasitəsilə həyata keçirilir. Sistem avtomatik olaraq elevation və outlineProvider (elementin konturu) əsasında kölgə çəkir. Elevation nə qədər yüksəkdirsə, kölgə bir o qədər böyük və bulanıq olur. Material Design-dan miras almayan View-lər üçün (məsələn, AppCompat) kölgələr yalnız aparat sürətləndirilməsi aktiv olduqda işləyir.

<!-- XML: atributlar vasitəsilə 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ın məzmunu -->
</androidx.cardview.widget.CardView>

Fərdi kölgələr üçün Android View Sistemində OutlineProvider istifadə olunur. ViewOutlineProvider outline.setRoundRect() və ya outline.setPath() vasitəsilə ixtiyari forma təyin etməyə imkan verir. OutlineProvider olmadan kölgə View-in düzbucaqlı formasına görə çəkilir ki, bu da künclərin yuvarlaqlaşdırılmasını nəzərə almır.

// Kotlin: kölgə üçün fərdi 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ünc radiusu
        )
    }
}
myView.elevation = 8f  // kölgə hündürlüyü px ilə
myView.translationZ = 4f  // basarkən əlavə hündürlük

Jetpack Compose-da kölgələr Modifier.shadow() və Card və Surface komponentlərində elevation vasitəsilə idarə olunur. Modifier.shadow() elevation və shape qəbul edir. View System-dən fərqli olaraq, Compose kölgələri öz render boru kəmərində çəkir ki, bu da Android-in bütün versiyalarında daha proqnozlaşdırıla bilən davranış təmin edir.

// Jetpack Compose: Modifier.shadow ilə kölgə
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("Fərdi kölgəli Card")
}

Kölgələrdən istifadə üzrə tövsiyələr

Kölgələrin düzgün istifadəsi interfeysin qavranılmasını yaxşılaşdırır, düzgün olmayan istifadə isə vizual səs-küy yaradır və məhsuldarlığı pisləşdirir. Material Design beş elevation səviyyəsi müəyyən edir: 0 dp (kölgəsiz), 1–4 dp (düymələr, çiplər), 6–12 dp (kartlar, menyular), 16–24 dp (dialoqlar, alt panellər), 24+ dp (modal pəncərələr, FAB).

Yaxşı tərz qaydaları: (1) diqqət çəkməməli olan elementlər üçün (fonlar, ayırıcılar) kölgə istifadə etməyin, (2) kölgənin hündürlüyü elementin vacibliyinə uyğun olmalıdır — nə qədər vacibdirsə, bir o qədər yüksək, (3) düyməyə basarkən toxunma əks-əlaqəsi üçün elevation-ı animasiya ilə azaldın, (4) tünd fonlarda kölgələrdən qaçın — kölgə əvəzinə overlay (işıqlandırma/qaralma) istifadə edin. Material You-da (Android 12+) kölgələr mövzuya uyğunlaşır: tünd fonda elevation rəng qatı (surface tint) ilə əvəz olunur.

Flutter-da kölgələr: BoxShadow və PhysicalModel

Flutter-da kölgələr BoxDecoration daxilində BoxShadow vasitəsilə həyata keçirilir. BoxShadow color, offset, blurRadius və spreadRadius qəbul edir. Flutter çoxsaylı kölgələri dəstəkləyir: BoxShadow siyahısının ötürülməsi mürəkkəb effektlər yaratmağa imkan verir — məsələn, xarici kölgə + daxili işıqlandırma. PhysicalModel — formaya əsasən fiziki kölgə simulyasiya edən alternativ (BeveledRectangleBorder, CircleBorder).

// Flutter: BoxDecoration + BoxShadow ilə kölgə
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('Kölgəli konteyner'),
)

// Fiziki kölgə üçün PhysicalModel
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Kölgəli fiziki model'),
)

Məhsuldarlıq: Çoxsaylı kölgələrə malik BoxShadow hər dəyişiklikdə yenidən çəkməyə (repaint) səbəb ola bilər. Statik elementlər üçün PhysicalModel istifadə edin — o, kölgəni ayrıca təbəqədə keşləyir (RepaintBoundary). Flutter 3.16+-da mövzudan (light/dark) asılı olaraq rəng və bulanıqlığı dəyişən adaptiv kölgələrlə Material 3 elevation dəstəyi əlavə edilmişdir.