মোবাইল ডেভেলপমেন্টে UI/UX এবং উপাদান: এগুলো কী, প্রকার এবং কীভাবে ব্যবহার করবেন

ডিজাইন সিস্টেম: Material Design এবং Human Interface Guidelines

প্রতিটি প্ল্যাটফর্ম নিজস্ব নিয়ম এবং উপাদানের সেট সরবরাহ করে। Android-এর জন্য, এটি Material Design, যা Google 2014 সালে তৈরি করেছিল। Material Design ভৌত উপাদানের রূপক ব্যবহার করে — স্তর, ছায়া (Elevation), অ্যানিমেটেড ট্রানজিশন এবং অভিযোজিত লেআউট। মূল নীতিগুলির মধ্যে রয়েছে উচ্চতার মাধ্যমে শ্রেণিবিন্যাস, অর্থপূর্ণ গতি এবং বিভিন্ন ফর্ম ফ্যাক্টরের সাথে অভিযোজনযোগ্যতা। আমরা Material Design 3 (Material You) — গতিশীল থিম এবং ব্যক্তিগতকৃত রঙ সহ সর্বশেষ সংস্করণ — অন্বেষণ করার পরামর্শ দিই।

Apple Human Interface Guidelines (HIG) সরবরাহ করে — iOS, iPadOS, macOS, watchOS এবং tvOS-এর জন্য নিয়মের একটি সেট। HIG স্পষ্ট টাইপোগ্রাফি (San Francisco), Notch এবং Dynamic Island বিবেচনায় নেওয়ার জন্য Safe Area, অঙ্গভঙ্গি-ভিত্তিক নেভিগেশন এবং ধারাবাহিকতার উপর জোর দেয়। Material Design-এর বিপরীতে, HIG "স্তর" এবং Elevation ব্যবহার করে না — পরিবর্তে, এটি অস্পষ্টতা (vibrancy), ছায়া এবং সূক্ষ্ম বিভাজক ব্যবহার করে। সম্পূর্ণ HIG ডকুমেন্টেশন নতুন iOS রিলিজের সাথে নিয়মিত আপডেট হয়।

IT Sectr-এ, আমরা ক্লায়েন্টের প্ল্যাটফর্মের উপর নির্ভর করে উভয় ডিজাইন সিস্টেম ব্যবহার করি। ক্রস-প্ল্যাটফর্ম Flutter প্রকল্পগুলির জন্য, আমরা একটি ইউনিফাইড ডিজাইন সিস্টেম তৈরি করি যা Material Design এবং HIG-এর সেরা অনুশীলনগুলিকে একত্রিত করে। এই পদ্ধতি কোডের পুনরাবৃত্তি ছাড়াই প্রতিটি প্ল্যাটফর্মে নেটিভ UX সংরক্ষণ করে।

ঘোষণামূলক UI ফ্রেমওয়ার্ক: SwiftUI এবং Jetpack Compose

UI তৈরির ঐতিহ্যবাহী পদ্ধতি হল XML (Android) বা Interface Builder / কোড (iOS) এর মাধ্যমে বাধ্যতামূলক লেআউট। আধুনিক বিকল্প হল ঘোষণামূলক ফ্রেমওয়ার্ক, যেখানে ডেভেলপার বর্ণনা করে যে প্রতিটি অবস্থায় ইন্টারফেস কেমন দেখতে হবে, এবং ফ্রেমওয়ার্ক আপডেট পরিচালনা করে।

Jetpack Compose (Android)

Jetpack Compose Kotlin-এ নেটিভ UI তৈরির জন্য Google-এর আধুনিক টুলকিট। XML লেআউটের পরিবর্তে, Kotlin কম্পোজেবল ফাংশন (@Composable) ব্যবহার করা হয়। Compose সম্পূর্ণরূপে ঘোষণামূলক: যখন ডেটা পরিবর্তিত হয়, শুধুমাত্র স্ক্রিনের পরিবর্তিত অংশগুলি পুনরায় আঁকা হয়। টেক্সট এবং বাটন সহ একটি সাধারণ স্ক্রিনের উদাহরণ:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI হল Apple-এর ঘোষণামূলক ফ্রেমওয়ার্ক যা 2019 সালে প্রবর্তিত হয়েছিল। এটি একটি ইউনিফাইড API-র মাধ্যমে সমস্ত Apple প্ল্যাটফর্ম (iOS, iPadOS, macOS, watchOS, tvOS) জুড়ে কাজ করে। SwiftUI ডেটা পরিচালনার জন্য View স্ট্রাকচার, @State এবং @Binding প্রপার্টি এবং স্টাইলিংয়ের জন্য মডিফায়ার ব্যবহার করে। SwiftUI-তে উপরের উদাহরণের সমতুল্য:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Flutter Google-এর নিজস্ব উইজেট লাইব্রেরি ব্যবহার করে। Flutter-এ সবকিছুই একটি উইজেট — প্যাডিং থেকে পুরো স্ক্রিন পর্যন্ত। উইজেটগুলি StatelessWidget (অপরিবর্তনীয়) এবং StatefulWidget (অবস্থাসহ) এ বিভক্ত। মৌলিক কন্টেনারগুলি হল Container, Row, Column, Stack। Flutter প্ল্যাটফর্মের নেটিভ উপাদান ব্যবহার করে না — এটি Skia Engine-এর মাধ্যমে সবকিছু আঁকে, যা Android এবং iOS উভয় ক্ষেত্রেই সামঞ্জস্যপূর্ণ চেহারা নিশ্চিত করে।

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Android এবং iOS-এর জন্য নেটিভ UI উপাদান

ঘোষণামূলক ফ্রেমওয়ার্কের বিস্তার সত্ত্বেও, লিগ্যাসি প্রকল্প এবং গভীর কাস্টমাইজেশন সমর্থনের জন্য নেটিভ উপাদান বোঝা গুরুত্বপূর্ণ রয়ে গেছে।

নেভিগেশন

Android-এ নেভিগেশন Activity (স্ক্রিন কার্যকলাপ) এবং Fragment (একটি Activity-র মধ্যে খণ্ড) এর উপর ভিত্তি করে তৈরি। Jetpack Navigation Component একটি নেভিগেশন গ্রাফের মাধ্যমে স্ক্রিনের মধ্যে রূপান্তর সরল করে। iOS-এ, নেভিগেশন NavigationController-এর মাধ্যমে প্রয়োগ করা হয় — অ্যানিমেটেড ট্রানজিশন সহ কন্ট্রোলারের একটি স্ট্যাক। Tab Bar এবং Bottom Navigation অ্যাপের প্রধান বিভাগগুলির মধ্যে সুইচ করতে সক্ষম করে। Drawer (সাইড মেনু) এবং Toolbar/ActionBar অতিরিক্ত ক্রিয়াকলাপের জন্য ব্যবহৃত হয়। Android Navigation Component সমস্ত নতুন প্রকল্পের জন্য সুপারিশ করা হয়।

তালিকা

বিপুল পরিমাণ ডেটা প্রদর্শনের জন্য, Android RecyclerView ব্যবহার করে — ViewHolder পুনঃব্যবহার সহ একটি কার্যকর কন্টেনার। iOS সমতুল্য হল UITableView (উল্লম্ব তালিকা) এবং UICollectionView (গ্রিড)। Jetpack Compose LazyColumn এবং LazyVerticalGrid অফার করে, যখন SwiftUI List এবং LazyVStack/LazyHStack সরবরাহ করে। Lazy উপাদানগুলির মূল সুবিধা হল শুধুমাত্র দৃশ্যমান উপাদানগুলি রেন্ডার করা।

লেআউট এবং অবস্থান

Android View System বেশ কয়েকটি লেআউট কন্টেনার অফার করে: ConstraintLayout (নমনীয় সীমাবদ্ধতা সিস্টেম), LinearLayout (রৈখিক বিন্যাস), RelativeLayout (আপেক্ষিক অবস্থান), FrameLayout (স্তর স্ট্যাকিং)। iOS-এ, Core Auto Layout উপাদানগুলির অবস্থান বর্ণনা করতে সীমাবদ্ধতার একটি সিস্টেম (NSLayoutConstraint) ব্যবহার করে। SwiftUI এবং Flutter যথাক্রমে VStack/HStack/ZStack এবং Row/Column/Stack ব্যবহার করে।

পরিমাপের একক এবং রেস্পনসিভ লেআউট

মোবাইল ডিভাইসের UI উপাদানগুলি বিভিন্ন পিক্সেল ঘনত্ব বিবেচনা করে প্রদর্শিত হয়। ইন্টারফেসটিকে সমস্ত স্ক্রিনে একই রকম দেখাতে, ঘনত্ব-স্বাধীন একক ব্যবহার করা হয়।

স্ক্রিন ঘনত্ব শ্রেণীবদ্ধ করা হয়: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x)। ছবি প্রস্তুত করার সময়, আপনাকে সমস্ত ঘনত্বের জন্য সংস্থান তৈরি করতে হবে: icon.png, icon_hdpi.png, icon_xhdpi.png, ইত্যাদি। ভেক্টর ফর্ম্যাট (Android-এ VectorDrawable, iOS-এ SF Symbols) একাধিক রাস্টার সংস্থানের সমস্যা সমাধান করে।

IT Sectr-এ, আমরা Figma থেকে আইকন রপ্তানি করতে স্কেলিং ফ্যাক্টর ব্যবহার করি: আমরা iOS-এর জন্য 1x, 2x, 3x এবং Android-এর জন্য mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi-তে রপ্তানি করি। এটি ট্যাবলেট এবং ফোল্ডেবল স্মার্টফোন সহ সমস্ত ডিভাইসে তীক্ষ্ণ প্রদর্শন নিশ্চিত করে।

আধুনিক UI ধারণা: ডার্ক মোড, সেফ এরিয়া, অ্যাক্সেসিবিলিটি

আধুনিক মোবাইল অ্যাপ UI উপাদানগুলিকে বেশ কয়েকটি মান সমর্থন করতে হবে, যা ছাড়া ব্যবহারকারীর অভিজ্ঞতা অসম্পূর্ণ হবে।

ডার্ক মোড / লাইট মোড

ডার্ক মোড আধুনিক অ্যাপ্লিকেশনগুলিতে একটি বাধ্যতামূলক বিকল্প। Material Design 3 এবং iOS 13+ অন্তর্নির্মিত ডার্ক থিম সমর্থন প্রদান করে। রঙগুলি উল্টানো নয়, বরং পৃথক রঙের প্যালেট ব্যবহার করা গুরুত্বপূর্ণ: গাঢ় ব্যাকগ্রাউন্ড, হালকা টেক্সট, গৌণ উপাদানগুলির জন্য কম কনট্রাস্ট। স্বয়ংক্রিয় সুইচিং ডিভাইসের সিস্টেম থিমের সাথে সংযুক্ত করা যেতে পারে।

সেফ এরিয়া এবং Notch / Dynamic Island সমর্থন

আধুনিক iPhone-এ Notch (ফ্রন্ট ক্যামেরার জন্য কাটআউট) এবং Dynamic Island রয়েছে। Android ডিভাইসেও কাটআউট এবং গোলাকার কোণ (Corner Radius) থাকে। সেফ এরিয়া হল স্ক্রিনের সেই এলাকা যা সিস্টেম এলিমেন্ট (স্ট্যাটাস বার, হোম ইন্ডিকেটর), নেভিগেশন বার এবং কাটআউট থেকে মুক্ত থাকার নিশ্চয়তা। iOS স্বয়ংক্রিয়ভাবে Safe Area Insets প্রয়োগ করে; Android-এর WindowInsets বা DisplayCutout-এর মাধ্যমে স্পষ্ট পরীক্ষার প্রয়োজন হয়।

অ্যাক্সেসিবিলিটি (a11y)

অ্যাক্সেসিবিলিটি প্রতিবন্ধী ব্যক্তিদের জন্য অ্যাপের ব্যবহারযোগ্যতা নিশ্চিত করে। মূল প্রয়োজনীয়তা: TalkBack (Android) এবং VoiceOver (iOS) সমর্থন, ImageView-এর জন্য সঠিক contentDescription, পর্যাপ্ত রঙের কনট্রাস্ট (টেক্সটের জন্য ন্যূনতম 4.5:1), ফন্ট স্কেলিংয়ের জন্য Dynamic Type (iOS) সমর্থন, দৃষ্টিহীন নেভিগেশন এবং অঙ্গভঙ্গির বিকল্প। WCAG 2.1 আন্তর্জাতিক অ্যাক্সেসিবিলিটি মান।

বিশ্বায়ন এবং স্থানীয়করণ (i18n / l10n)

আন্তর্জাতিকীকরণ (i18n) একাধিক ভাষা এবং আঞ্চলিক ফর্ম্যাট সমর্থন করার জন্য অ্যাপ প্রস্তুত করা। স্থানীয়করণ (l10n) হল স্ট্রিং, তারিখ, মুদ্রা এবং সাংস্কৃতিক বৈশিষ্ট্য অনুবাদ করা। Android রিসোর্স ডিরেক্টরি (values-ru, values-de) ব্যবহার করে, iOS Localizable.strings এবং XLIFF ব্যবহার করে। Flutter ARB অনুবাদ ফাইল সহ flutter_localizations সমর্থন করে।

অঙ্গভঙ্গি এবং মিথস্ক্রিয়া

স্পর্শ মিথস্ক্রিয়ায় অনেক অঙ্গভঙ্গি অন্তর্ভুক্ত: ট্যাপ, লং প্রেস, সোয়াইপ, পিঞ্চ-টু-জুম, পুল-টু-রিফ্রেশ, ড্র্যাগ-এন্ড-ড্রপ। Android GestureDetector ব্যবহার করে, iOS UIGestureRecognizer ব্যবহার করে। iOS Taptic Engine-এর মাধ্যমে হ্যাপটিক ফিডব্যাক সহ 3D Touch (Force Touch) এবং Haptic Touch-ও সমর্থন করে।