Shadow: सार, मोबाइल एप्लिकेशन में छायाएँ बनाना

UI में छाया क्या है?

छाया (shadow) उपयोगकर्ता इंटरफ़ेस में एक दृश्य प्रभाव है जो प्रकाश और गहराई का अनुकरण करता है। छाया किसी तत्व की एक गहरी धुंधली प्रतिलिपि बनाकर बनाई जाती है, जो मूल से विस्थापित होती है। मोबाइल डिज़ाइन में, छायाएँ तीन कार्य करती हैं: पदानुक्रम दिखाती हैं (ऊँचा तत्व = लंबी छाया), इंटरैक्टिविटी का संकेत देती हैं (छाया वाले बटन दबाने योग्य लगते हैं), सामग्री को पृष्ठभूमि से अलग करती हैं (छाया वाले कार्ड अलग-अलग ब्लॉक के रूप में पढ़े जाते हैं)।

Google के Material Design में, छायाएँ elevation की अवधारणा से अटूट रूप से जुड़ी हुई हैं। प्रत्येक तत्व z-निर्देशांक में एक निश्चित ऊँचाई घेरता है, और छाया ऊपर से प्रकाश का प्रक्षेपण है। Apple के Human Interface Guidelines एक सख्त ऊँचाई प्रणाली निर्धारित नहीं करते हैं, लेकिन इंटरफ़ेस में दृश्य पदानुक्रम और गहराई बनाने के लिए छायाओं का उपयोग करने की सलाह देते हैं।

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

"> अनुकूलन: स्पष्ट shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

SwiftUI में, छायाएँ .shadow() मॉडिफ़ायर के साथ color, radius, x, y पैरामीटर के साथ सेट की जाती हैं। SwiftUI स्वचालित रूप से shadowPath लागू करता है और रेंडरिंग प्रदर्शन का प्रबंधन करता है। उन्नत छायाओं (आंतरिक छायाएँ, एकाधिक छायाएँ) के लिए, LinearGradient के साथ overlay() का उपयोग करें।

// 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 सेट करें। एनिमेटेड तत्वों के लिए, छाया को एक अलग लेयर में कैश करने के लिए CALayer पर shouldRasterize = true का उपयोग करें। SwiftUI में, रैस्टराइज़ेशन .drawingGroup() के माध्यम से प्रबंधित किया जाता है।

Android में छायाएँ: elevation और कस्टम छायाएँ

Android में, Material Design में छायाएँ elevation के माध्यम से कार्यान्वित की जाती हैं — एक View गुण जो z-निर्देशांक में तत्व की ऊँचाई सेट करता है। सिस्टम elevation और outlineProvider (तत्व की रूपरेखा) के आधार पर स्वचालित रूप से छाया प्रस्तुत करता है। elevation जितना अधिक होगा, छाया उतनी ही बड़ी और धुंधली होगी। उन Views के लिए जो 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() और Card तथा Surface घटकों में elevation के माध्यम से प्रबंधित की जाती हैं। 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 में, छायाएँ BoxDecoration के अंदर BoxShadow के माध्यम से कार्यान्वित की जाती हैं। 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 का समर्थन किया गया है, जो थीम (हल्का/गहरा) के आधार पर रंग और धुंधलापन बदलता है।