UI/UX والمكونات في تطوير الجوال: ما هي، أنواعها وكيفية استخدامها

أنظمة التصميم: Material Design وإرشادات واجهة الإنسان

تقدم كل منصة مجموعتها الخاصة من القواعد والمكونات. بالنسبة لنظام Android، هذا هو Material Design، الذي طورته Google في عام 2014. يستخدم Material Design استعارة المادة المادية — الطبقات والظلال (Elevation) والانتقالات المتحركة والتخطيطات التكيفية. تشمل المبادئ الرئيسية التسلسل الهرمي من خلال الارتفاع والحركة الهادفة والقدرة على التكيف مع عوامل الشكل المختلفة. نوصي باستكشاف Material Design 3 (Material You) — أحدث إصدار مع سمة ديناميكية وألوان مخصصة.

تقدم Apple إرشادات واجهة الإنسان (HIG) — مجموعة من القواعد لأنظمة iOS وiPadOS وmacOS وwatchOS وtvOS. تركز HIG على الطباعة الواضحة (San Francisco) والمنطقة الآمنة لمراعاة Notch وDynamic Island والتنقل القائم على الإيماءات والاتساق. على عكس Material Design، لا تستخدم HIG "الطبقات" وElevation — بدلاً من ذلك، تستخدم التمويه (vibrancy) والظلال والفواصل الدقيقة. وثائق HIG الكاملة يتم تحديثها بانتظام مع إصدارات iOS الجديدة.

في IT Sectr، نستخدم كلا نظامي التصميم اعتمادًا على منصة العميل. لمشاريع Flutter عبر المنصات، نطور نظام تصميم موحد يجمع بين أفضل ممارسات Material Design وHIG. يحافظ هذا النهج على تجربة مستخدم أصلية على كل منصة دون تكرار الكود.

أطر واجهة المستخدم التصريحية: SwiftUI وJetpack Compose

النهج التقليدي لبناء واجهة المستخدم هو التخطيط الأمرّي عبر XML (Android) أو Interface Builder / الكود (iOS). البديل الحديث هو أطر العمل التصريحية، حيث يصف المطور كيف يجب أن تبدو الواجهة في كل حالة، ويتولى الإطار التعامل مع التحديثات.

Jetpack Compose (Android)

Jetpack Compose هو مجموعة أدوات حديثة من Google لبناء واجهة مستخدم أصلية بلغة 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. يعمل عبر جميع منصات 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

على الرغم من انتشار أطر العمل التصريحية، يظل فهم المكونات الأصلية مهمًا لدعم المشاريع القديمة والتخصيص العميق.

التنقل

يعتمد التنقل في 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 عدة حاويات تخطيط: ConstraintLayout (نظام قيود مرن)، وLinearLayout (ترتيب خطي)، وRelativeLayout (تحديد موضع نسبي)، وFrameLayout (تراكب طبقات). في iOS، يستخدم Core Auto Layout نظام قيود (NSLayoutConstraint) لوصف موضع العناصر. تستخدم SwiftUI وFlutter VStack/HStack/ZStack وRow/Column/Stack على التوالي.

وحدات القياس والتخطيط المتجاوب

يتم عرض مكونات واجهة مستخدم أجهزة الجوال مع مراعاة كثافات البكسل المختلفة. لجعل الواجهة تبدو متشابهة على جميع الشاشات، يتم استخدام وحدات مستقلة عن الكثافة.

تصنف كثافات الشاشة إلى: 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. يضمن ذلك عرضًا حادًا على جميع الأجهزة بما في ذلك الأجهزة اللوحية والهواتف القابلة للطي.

مفاهيم واجهة المستخدم الحديثة: الوضع المظلم والمنطقة الآمنة وإمكانية الوصول

يجب أن تدعم مكونات واجهة مستخدم تطبيقات الجوال الحديثة عددًا من المعايير، والتي بدونها ستكون تجربة المستخدم غير مكتملة.

الوضع المظلم / الوضع الفاتح

الوضع المظلم هو خيار إلزامي في التطبيقات الحديثة. يوفر 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)، و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.