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)، Safe Area برای در نظر گرفتن Notch و Dynamic Island، ناوبری مبتنی بر ژست و سازگاری تأکید دارد. برخلاف 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 یک جعبه ابزار مدرن از Google برای ساخت UI بومی در Kotlin است. به جای چیدمان 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 یک ویجت است — از padding تا یک صفحه کامل. ویجت‌ها به 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('Нажми меня'),
                ),
            ],
        );
    }
}

مؤلفه‌های UI بومی برای Android و iOS

علیرغم گسترش فریمورک‌های اعلامی، درک مؤلفه‌های بومی برای پشتیبانی از پروژه‌های قدیمی و سفارشی‌سازی عمیق مهم است.

ناوبری

ناوبری در 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 و غیره. فرمت‌های برداری (VectorDrawable در Android، SF Symbols در iOS) مشکل منابع شطرنجی متعدد را حل می‌کنند.

در IT Sectr، از یک عامل مقیاس برای صادرات آیکون‌ها از Figma استفاده می‌کنیم: با 1x، 2x، 3x برای iOS و mdpi، hdpi، xhdpi، xxhdpi، xxxhdpi برای Android صادر می‌کنیم. این کار نمایش واضح را در همه دستگاه‌ها از جمله تبلت‌ها و گوشی‌های تاشو تضمین می‌کند.

مفاهیم مدرن UI: حالت تاریک، Safe Area، دسترسی‌پذیری

مؤلفه‌های UI اپلیکیشن‌های موبایل مدرن باید از تعدادی استاندارد پشتیبانی کنند که بدون آنها تجربه کاربری ناقص خواهد بود.

حالت تاریک / حالت روشن

حالت تاریک یک گزینه اجباری در اپلیکیشن‌های مدرن است. Material Design 3 و iOS 13+ پشتیبانی داخلی از تم تیره را ارائه می‌دهند. مهم است که رنگ‌ها را معکوس نکنید، بلکه از پالت‌های رنگی جداگانه استفاده کنید: پس‌زمینه تیره، متن روشن، کنتراست کاهش یافته برای عناصر ثانویه. تغییر خودکار را می‌توان به تم سیستم دستگاه متصل کرد.

Safe Area و پشتیبانی از Notch / Dynamic Island

iPhoneهای مدرن دارای Notch (بریدگی برای دوربین جلو) و Dynamic Island هستند. دستگاه‌های Android نیز دارای بریدگی و گوشه‌های گرد (Corner Radius) هستند. Safe Area ناحیه‌ای از صفحه است که تضمین شده از عناصر سیستم (نوار وضعیت، نشانگر خانه)، نوار ناوبری و بریدگی‌ها خالی است. iOS به طور خودکار Safe Area Insets را اعمال می‌کند؛ Android نیاز به بررسی صریح از طریق WindowInsets یا DisplayCutout دارد.

دسترسی‌پذیری (a11y)

دسترسی‌پذیری قابلیت استفاده از اپلیکیشن را برای افراد دارای معلولیت تضمین می‌کند. الزامات کلیدی: پشتیبانی از TalkBack (Android) و VoiceOver (iOS)، contentDescription صحیح برای ImageView، کنتراست رنگ کافی (حداقل 4.5:1 برای متن)، پشتیبانی از Dynamic Type (iOS) برای مقیاس‌بندی فونت، ناوبری بدون بینایی و جایگزین‌های ژست. WCAG 2.1 استاندارد بین‌المللی دسترسی‌پذیری است.

جهانی‌سازی و بومی‌سازی (i18n / l10n)

بین‌المللی‌سازی (i18n) آماده‌سازی اپلیکیشن برای پشتیبانی از چندین زبان و فرمت‌های منطقه‌ای است. بومی‌سازی (l10n) ترجمه رشته‌ها، تاریخ‌ها، ارزها و ویژگی‌های فرهنگی است. Android از دایرکتوری‌های منبع (values-ru، values-de) استفاده می‌کند، iOS از Localizable.strings و XLIFF استفاده می‌کند. Flutter از flutter_localizations با فایل‌های ترجمه ARB پشتیبانی می‌کند.

ژست‌ها و تعامل

تعامل لمسی شامل ژست‌های زیادی است: ضربه، فشار طولانی، کشیدن، نیشگون برای بزرگنمایی، کشیدن برای به‌روزرسانی، کشیدن و رها کردن. Android از GestureDetector استفاده می‌کند، iOS از UIGestureRecognizer استفاده می‌کند. iOS همچنین از 3D Touch (Force Touch) و Haptic Touch با بازخورد لمسی از طریق Taptic Engine پشتیبانی می‌کند.