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 з множинними тінями може викликати перемальовування при кожній зміні. Для статичних елементів використовуйте PhysicalModel — він кешує тінь в окремий шар (RepaintBoundary). У Flutter 3.16+ додана підтримка Material 3 elevation з адаптивними тінями, які змінюють колір та розмиття залежно від теми (світла/темна).