Material Design: মূল ধারণা, Material You এবং Material 3

Material Design কী?

Material Design (কোডনেম Project Quantum) হল Google-এর ডিজাইন সিস্টেম, প্রথম Google I/O 2014-এ ঘোষিত এবং প্রথম Android 5.0 Lollipop-এ বাস্তবায়িত। Material Design-এর লক্ষ্য হল কাগজ এবং কালির ভৌত বৈশিষ্ট্যের উপর ভিত্তি করে — “উপাদান” (material) — সমস্ত Google পণ্য এবং Android অ্যাপের জন্য একটি সমন্বিত ভিজ্যুয়াল ভাষা তৈরি করা। ফ্ল্যাট ডিজাইনের বিপরীতে, Material Design ভৌত গভীরতা, ছায়া, স্তর এবং বাস্তবসম্মত অ্যানিমেশন যোগ করে।

2014 সাল থেকে, Material Design তিনটি বড় সংস্করণের মধ্য দিয়ে গেছে: Material 1 (2014) — কার্ড এবং ফ্লোটিং অ্যাকশন বাটন সহ মূল নির্দেশিকা; Material 2 (2018) — সরলীকৃত ভিজ্যুয়াল ভাষা, বর্ধিত স্পেসিং, টাইপোগ্রাফির উপর জোর; Material 3 / Material You (2021) — ডিভাইস ওয়ালপেপার থেকে উৎপন্ন গতিশীল রঙের স্কিম, ব্যক্তিগতকরণ। Google Play Console (2024) অনুসারে, শীর্ষ 1000 Google Play অ্যাপের 78% Android-এর জন্য Material Components ব্যবহার করে।

Material Design শুধুমাত্র একটি UI-কিট নয়, বরং একটি সম্পূর্ণ ডিজাইন সিস্টেম: অ্যাক্সেসিবিলিটি (a11y), অ্যানিমেশন (Motion), অভিযোজিত লেআউট, উপাদান (TopAppBar, BottomNavigation, Navigation Drawer), টাইপোগ্রাফি (Material Type Scale) এবং আইকনোগ্রাফি (Material Symbols)-এর জন্য নির্দেশিকা। IT Sectr-এ, আমরা 2014 সাল থেকে Android প্রকল্পের জন্য Material Design কে মৌলিক ডিজাইন সিস্টেম হিসাবে ব্যবহার করছি, Material Theme Builder-এর মাধ্যমে ক্লায়েন্টের ব্র্যান্ডের জন্য এটি কাস্টমাইজ করছি।

Material Design-এর মৌলিক নীতি: বস্তুগততা, গভীরতা, গতি

বস্তুগততা (উপাদান হিসাবে রূপক) — Material Design-এর মূল নীতি, যা কাগজের ভৌত বৈশিষ্ট্য ধার করে: উপাদানের একটি পৃষ্ঠ, বেধ (1dp) আছে, ছায়া ফেলে (Elevation) এবং স্থান দখল করে (Bounds)। ইন্টারফেস উপাদান — কার্ড, বাটন, প্যানেল — ভৌত বস্তুর মতো আচরণ করে: এগুলি চাপলে উঠে আসে (রিপল প্রভাব), একে অপরকে ওভারল্যাপ করে (Z-অক্ষ), এবং আবির্ভাবে অ্যানিমেট হয় (motion)।

গভীরতা (Depth) Elevation-এর মাধ্যমে তৈরি হয় — একটি উপাদান বৈশিষ্ট্য যা Z-অক্ষে তার অবস্থান নির্ধারণ করে। Elevation (8dp, 16dp) যত বেশি হবে, উপাদান দ্বারা নিক্ষিপ্ত ছায়া তত বড় হবে। একটি কার্ডের Elevation 1–2dp, FAB-এর — 6dp, Modal BottomSheet-এর — 16dp। গভীরতা শ্রেণিবিন্যাস বোঝাতে ব্যবহৃত হয়: মোডাল উইন্ডো এবং ডায়ালগ সবসময় কন্টেন্টের উপরে থাকে, Navigation Drawer অ্যাকশন বারের উপরে থাকে। গভীরতা 3D দৃষ্টিকোণকে একটি সমতল Z-স্তর দিয়ে প্রতিস্থাপন করে, রেন্ডারিং কর্মক্ষমতা সংরক্ষণ করে।

গতি (Motion) — Material Design-এ অ্যানিমেশন আলংকারিক নয় বরং কার্যকরী। অ্যানিমেশন উচিত: 1) ব্যবহারকারীর দৃষ্টি নির্দেশ করা (বিস্তারিত সহ প্রসারিত হওয়া কার্ড), 2) স্থানিক সম্পর্ক ব্যাখ্যা করা (স্ক্রলে AppBar TopAppBar-এ রূপান্তরিত হয়), 3) মসৃণ রূপান্তর নিশ্চিত করা (স্ক্রিনের মধ্যে শেয়ার্ড এলিমেন্ট ট্রানজিশন)। Google Material Guidelines (2024) অনুসারে, অ্যানিমেশন মাইক্রো-ইন্টারঅ্যাকশনের জন্য 300ms এবং স্ক্রিন ট্রানজিশনের জন্য 500ms এর বেশি হওয়া উচিত নয় — দীর্ঘ অ্যানিমেশন বিলম্ব হিসাবে ধরা হয়।

Material You (Material Design 3): গতিশীল রঙ এবং ব্যক্তিগতকরণ

Material You (Material Design 3) হল ডিজাইন সিস্টেমের সবচেয়ে বড় আপডেট, যা 2021 সালে Android 12-এর সাথে চালু করা হয়েছে। প্রধান উদ্ভাবন — গতিশীল রঙ (Monet): সিস্টেম স্বয়ংক্রিয়ভাবে ডিভাইসের ওয়ালপেপার থেকে টি মুখ্য রঙ বের করে এবং 15 টোনের (primary, secondary, tertiary, error তাদের light/dark ভেরিয়েন্ট সহ) একটি সম্পূর্ণ রঙ প্যালেট তৈরি করে, যার WCAG AA কনট্রাস্ট অনুপাত গণনা করা হয়।

Material You-এর রঙ মডেল HCT (Hue, Chroma, Tone)-এর উপর নির্মিত — Google-এর তৈরি একটি রঙ স্থান যা মানব উপলব্ধি (Hue)কে সম্পৃক্তি (Chroma) এবং উজ্জ্বলতা (Tone)-এর সাথে একত্রিত করে। HSL/HSV-এর বিপরীতে, HCT গ্যারান্টি দেয় যে সমস্ত উৎপন্ন টোনের সাদা এবং কালো পটভূমিতে প্রয়োজনীয় কনট্রাস্ট রয়েছে। Google Material Guidelines (2024) পাঠ্যের জন্য শুধুমাত্র প্রধান প্যালেটের টোনাল ভেরিয়েন্ট, পটভূমির জন্য surface টোন এবং অ্যাকসেন্ট পৃষ্ঠের জন্য primary-container ব্যবহার করার পরামর্শ দেয়।

ব্যবহারকারী 4টি ব্যক্তিগতকরণ স্কিম থেকে বেছে নিতে পারেন: TonalSpot (ওয়ালপেপার থেকে প্রধান রঙ), Vibrant (সবচেয়ে সম্পৃক্ত রঙ), Expressive (অতিরিক্ত উজ্জ্বল রঙ), Neutral (একরঙা প্যালেট)। Material Theme Builder (material-foundation.github.io) XML, Compose Theme, CSS এবং এমনকি Figma প্লাগইনে Material 3 থিম রপ্তানির অনুমতি দেয়।

Android-এর জন্য Material Components: XML এবং Compose-এর মাধ্যমে বাস্তবায়ন

Android-এর জন্য Material Components (MDC-Android) হল Google-এর অফিসিয়াল লাইব্রেরি যা Material Design নির্দেশিকা অনুসরণ করে প্রস্তুত View উপাদান সরবরাহ করে। XML লেআউটের জন্য, লাইব্রেরিটি com.google.android.material:material নির্ভরতার মাধ্যমে উপলব্ধ, জুন 2026 পর্যন্ত বর্তমান সংস্করণ — 1.12.0।

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

উদাহরণটি MaterialToolbar (TopAppBar), কাস্টম প্যাডিং এবং স্ট্রোক সহ MaterialCardView, ড্রপডাউন তালিকা সহ TextInputLayout এবং Material3 শৈলীতে MaterialButton সহ একটি Material স্ক্রিন দেখায়। FAB টুলবারে অ্যাঙ্কর করা হয়েছে — মাস্টার-ডিটেল ইন্টারফেসের জন্য একটি মানক প্যাটার্ন।

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("শহর") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("জমা দিন")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

কোডটি Compose-এ একটি Material You থিম প্রদর্শন করে: dynamicLightColorScheme() ডিভাইসের ওয়ালপেপারের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে একটি রঙের স্কিম তৈরি করে। Scaffold TopAppBar এবং FAB সহ একটি মানক কাঠামো সরবরাহ করে। OutlinedTextField এবং Button হল Material 3 উপাদান যার রং গতিশীল colorScheme থেকে নেওয়া। ওয়ালপেপার পরিবর্তন হলে, সমস্ত অ্যাপের রং স্বয়ংক্রিয়ভাবে আপডেট হয় — কোড পরিবর্তন ছাড়াই ব্যক্তিগতকরণ।

iOS-এ Material Design: iOS-এর জন্য Material Components

iOS-এর জন্য Material Components (MDC-iOS) একটি লাইব্রেরি যা iOS-এ Material Design বাস্তবায়নকারী নেটিভ UIKit উপাদান সরবরাহ করে। যেহেতু iOS-এর নিজস্ব ডিজাইন সিস্টেম (Human Interface Guidelines) রয়েছে, iOS-এ Material উপাদান কম ঘন ঘন ব্যবহৃত হয় কিন্তু ক্রস-প্ল্যাটফর্ম অ্যাপে এগুলির চাহিদা রয়েছে যেখানে Android এবং iOS-এর মধ্যে একটি ইউনিফাইড ভিজ্যুয়াল শৈলী প্রয়োজন।

MDC-iOS-এ AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs এবং TextFields অন্তর্ভুক্ত, Material Design-এর জন্য স্টাইলাইজড। লাইব্রেরিটি CocoaPods (pod 'MaterialComponents') এবং Swift Package Manager-এর মাধ্যমে উপলব্ধ। Apple Human Interface Guidelines (2024) নেটিভ UIKit উপাদানগুলি সম্পূর্ণরূপে Material সমতুল্য দিয়ে প্রতিস্থাপনের সুপারিশ করে না, তবে নেটিভ নেভিগেশন (NavigationStack, UITabBarController) সংরক্ষণের শর্তে কাস্টম ইন্টারফেসের জন্য Material উপাদান ব্যবহারের অনুমতি দেয়।

IT Sectr-এ, আমরা iOS-এ Material Components শুধুমাত্র Android থেকে পোর্ট করা অ্যাপের (Flutter বা Kotlin Multiplatform সহ ক্রস-প্ল্যাটফর্ম প্রকল্প) জন্য ব্যবহার করি। নেটিভ iOS অ্যাপের জন্য, আমরা HIG অনুসরণ করি এবং কাস্টম ব্র্যান্ডিং সহ UIKit/SwiftUI ব্যবহার করি। Swift Community জরিপ (2024) অনুসারে, iOS-এর জন্য Material Components 8% ডেভেলপার ব্যবহার করেন, প্রধানত হাইব্রিড প্রকল্পে।

Material Design বনাম অন্যান্য ডিজাইন সিস্টেম

Material Design বাজারে একমাত্র ডিজাইন সিস্টেম নয়। প্রধান প্রতিযোগীরা: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce)। প্রতিটি সিস্টেম তার প্ল্যাটফর্মের জন্য অপ্টিমাইজড: Material Design Android-এর জন্য, HIG iOS-এর জন্য, Fluent Windows-এর জন্য। ডিজাইন সিস্টেমের পছন্দ লক্ষ্য প্ল্যাটফর্ম এবং ইকোসিস্টেম দ্বারা নির্ধারিত হয়।

Material Design-এর প্রধান সুবিধা হল এর উন্মুক্ততা এবং ক্রস-প্ল্যাটফর্ম প্রকৃতি। নির্দেশিকা, উপাদান এবং সরঞ্জাম (Material Theme Builder) বিনামূল্যে উপলব্ধ, যা সিস্টেমটিকে স্টার্টআপ এবং স্বাধীন ডেভেলপারদের মধ্যে জনপ্রিয় করে তোলে। Apple HIG Apple ইকোসিস্টেমের সাথে শক্তভাবে আবদ্ধ কিন্তু প্ল্যাটফর্মের প্রত্যাশার সাথে সর্বোত্তম সামঞ্জস্য নিশ্চিত করে। ক্রস-প্ল্যাটফর্ম প্রকল্পের জন্য, Flutter এবং Jetpack Compose Multiplatform-এর কারণে Material Design সেরা পছন্দ।