Shadow: същност, създаване на сенки в мобилни приложения

Какво е сенка в UI?

Сенка (shadow) в потребителските интерфейси — визуален ефект, имитиращ осветление и дълбочина. Сенката се създава чрез рисуване на тъмно размито копие на елемента, изместено спрямо оригинала. В мобилния дизайн сенките изпълняват три функции: показват йерархия (по-висок елемент — по-дълга сенка), сигнализират за интерактивност (бутоните със сенка изглеждат кликаеми), отделят съдържанието от фона (картите със сенка се четат като отделни блокове).

В Material Design на Google сенките са неразривно свързани с концепцията за elevation (височина). Всеки елемент заема определена височина в Z-координатата, а сенката е проекция на осветление отгоре. Human Interface Guidelines на Apple не предписват строга система от височини, но препоръчват използването на сенки за създаване на визуална йерархия и дълбочина в интерфейсите.

Според изследване на Nielsen Norman Group (2024), правилно поставените сенки намаляват времето за намиране на интерактивен елемент с 24%. Сенките също помагат на потребители със зрителни увреждания да различават границите на елементите. Прекаленото използване на сенки (3+ нива на екран) обаче увеличава когнитивното натоварване и влошава възприятието.

Сенки на iOS: CALayer и SwiftUI

На iOS сенките се реализират чрез свойствата на CALayer: shadowColor задава цвета на сенката, shadowOffset — отместването в CGSize (x, y), shadowRadius — радиуса на размиване, shadowOpacity — непрозрачността от 0 до 1. За производителност се препоръчва също задаването на shadowPath — UIBezierPath, който описва формата на сенката, за да не я изчислява Core Animation автоматично.

// UIKit: настройка на сенка чрез CALayer
import UIKit

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

// Настройка на сенка
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> Optimзация: явный shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

В SwiftUI сенките се задават чрез модификатора .shadow() с параметри color, radius, x, y. SwiftUI автоматично прилага shadowPath и управлява производителността на рендериране. За напреднали сенки (вътрешни сенки, множество сенки) използвайте overlay() с LinearGradient.

// SwiftUI: сенка чрез модификатор shadow
import SwiftUI

VStack {
    Text("Карта със сенка")
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(
            color: .black.opacity(0.15),
            radius: 10,
            x: 0,
            y: 4
        )
}

Производителност на сенките на iOS: ако shadowPath не е зададен, Core Animation изчислява сенката въз основа на формата на слоя всеки кадър, което може да причини забавяне по време на анимация. За статични елементи винаги задавайте shadowPath. За анимирани елементи използвайте shouldRasterize = true на CALayer, за да кеширате сенката в отделен слой. В SwiftUI растрирането се управлява чрез .drawingGroup().

Сенки в Android: elevation и персонализирани сенки

В Android сенките в Material Design се реализират чрез elevation — свойството на View, което задава височината на елемента в Z-координатата. Системата автоматично рисува сенка въз основа на elevation и outlineProvider (контура на елемента). Колкото по-високо е elevation, толкова по-голяма и размита е сенката. За View, които не наследяват Material Design (напр. AppCompat), сенките работят само с включено хардуерно ускорение.

<!-- XML: 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">
    <!-- Съдържание на картата -->
</androidx.cardview.widget.CardView>

За персонализирани сенки в Android View System се използва OutlineProvider. ViewOutlineProvider позволява задаване на произволна форма чрез outline.setRoundRect() или outline.setPath(). Без OutlineProvider сенката се рисува по правоъгълната форма на View, което не отчита заоблянето на ъглите.

// Kotlin: персонализиран 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  // радиус на ъгъла
        )
    }
}
myView.elevation = 8f  // височина на сенката в px
myView.translationZ = 4f  // допълнителна височина при натискане

В Jetpack Compose сенките се управляват чрез Modifier.shadow() и elevation в компонентите Card и Surface. Modifier.shadow() приема elevation и shape. За разлика от View System, Compose рисува сенки в собствената си тръба за рендериране, което осигурява по-предвидимо поведение на всички версии на Android.

// Jetpack Compose: сенка чрез 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 с персонализирана сенка")
}

Препоръки за използване на сенки

Правилното използване на сенки подобрява възприятието на интерфейса, неправилното — създава визуален шум и влошава производителността. Material Design определя пет нива на elevation: 0 dp (без сенка), 1–4 dp (бутони, чипове), 6–12 dp (карти, менюта), 16–24 dp (диалози, долни панели), 24+ dp (модални прозорци, FAB).

Правила за добра практика: (1) не използвайте сенки за елементи, които не трябва да привличат внимание (фон, разделители), (2) височината на сенката трябва да съответства на важността на елемента — колкото по-важен, толкова по-високо, (3) при натискане на бутон намалявайте elevation анимирано за тактилна обратна връзка, (4) избягвайте сенки на тъмни фонове — използвайте overlay (изсветляване/потъмняване) вместо сенка. В Material You (Android 12+) сенките се адаптират към темата: на тъмен фон elevation се заменя с цветен слой (surface tint).

Сенки във Flutter: BoxShadow и PhysicalModel

Във Flutter сенките се реализират чрез BoxShadow вътре в BoxDecoration. BoxShadow приема color, offset, blurRadius и spreadRadius. Flutter поддържа множество сенки: предаването на списък от BoxShadow позволява създаването на сложни ефекти — например външна сенка + вътрешно осветление. PhysicalModel — алтернатива, която симулира физическа сенка въз основа на форма (BeveledRectangleBorder, CircleBorder).

// Flutter: сенка чрез 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('Контейнер със сенка'),
)

// PhysicalModel за физическа сенка
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Физически модел със сенка'),
)

Производителност: BoxShadow с множество сенки може да причини прерисуване (repaint) при всяка промяна. За статични елементи използвайте PhysicalModel — той кешира сенката в отделен слой (RepaintBoundary). Във Flutter 3.16+ е добавена поддръжка за Material 3 elevation с адаптивни сенки, които променят цвета и размиването в зависимост от темата (светла/тъмна).