Shadow: ماهیت، ایجاد سایه‌ها در اپلیکیشن‌های موبایل

سایه در UI چیست؟

سایه (shadow) در رابط‌های کاربری — یک اثر بصری است که نورپردازی و عمق را شبیه‌سازی می‌کند. سایه با کشیدن یک کپی تیره و محو از عنصر که نسبت به اصل جابه‌جا شده است ایجاد می‌شود. در طراحی موبایل، سایه‌ها سه وظیفه دارند: سلسله‌مراتب را نشان می‌دهند (عنصر بالاتر — سایه بلندتر)، تعاملی بودن را نشان می‌دهند (دکمه‌های دارای سایه قابل‌کلیک به نظر می‌رسند)، محتوا را از پس‌زمینه جدا می‌کنند (کارت‌های دارای سایه به عنوان بلوک‌های مجزا خوانده می‌شوند).

در Material Design گوگل، سایه‌ها به طور جدایی‌ناپذیری با مفهوم elevation (ارتفاع) مرتبط هستند. هر عنصر ارتفاع مشخصی در مختصات Z دارد و سایه برآمدگی نور از بالا است. Human Interface Guidelines اپل یک سیستم ارتفاع سختگیرانه را الزام نمی‌کند، اما استفاده از سایه‌ها برای ایجاد سلسله‌مراتب بصری و عمق در رابط‌ها را توصیه می‌کند.

بر اساس تحقیق Nielsen Norman Group (2024)، سایه‌های درست قرارگرفته زمان جستجوی یک عنصر تعاملی را ۲۴٪ کاهش می‌دهند. سایه‌ها همچنین به کاربران دارای اختلالات بینایی در تشخیص مرزهای عناصر کمک می‌کنند. با این حال، استفاده بیش از حد از سایه‌ها (۳+ سطح در یک صفحه) بار شناختی را افزایش داده و درک را کاهش می‌دهد.

سایه‌ها در iOS: CALayer و SwiftUI

در iOS سایه‌ها از طریق ویژگی‌های CALayer پیاده‌سازی می‌شوند: shadowColor رنگ سایه را تعیین می‌کند، shadowOffset — جابه‌جایی در CGSize (x, y)، shadowRadius — شعاع محو شدن، shadowOpacity — کدورت از ۰ تا ۱. برای کارایی توصیه می‌شود همچنین 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

"> بهینه‌سازی: 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 rasterization از طریق .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  // ارتفاع سایه بر حسب پیکسل
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 با سایه‌های تطبیقی که رنگ و محو شدگی را بسته به تم (روشن/تاریک) تغییر می‌دهند اضافه شده است.