التصميم المتكيف — أساسيات، تكييف الواجهات للشاشات

ما هو التصميم المتكيف؟

التصميم المتكيف هو طريقة لبناء الواجهات حيث يستجيب التصميم لحجم الشاشة والاتجاه والمساحة المتاحة، مع إعادة ترتيب العناصر دون فقدان الوظائفية. صاغ المصطلح Ethan Marcotte عام 2010 لتصميم الويب، ولكن المبادئ قابلة للتطبيق بالكامل على التطبيقات الأصلية للجوال.

في تطوير التطبيقات الجوال، يعني التصميم المتكيف أن نفس التطبيق يظهر بشكل صحيح على جميع الأجهزة: من iPhone SE (375 pt) إلى iPad Pro (1024 pt في الوضع العمودي) ومن هواتف Android (360 dp) إلى الألواح (800 dp). العناصر الرئيسية هي شبكة مرنة، صور متكيفة، واستعلامات وسائط على مستوى الإطار (size classes، qualifiers).

وفقًا لوثائق Apple Developer، يجب أن يكون التطبيق عالميًا — يعمل على جميع الأجهزة دون بناء منفصل لـ iPad. يوصي Google Play باستخدام التصميمات المتكيفة عبر Jetpack WindowManager و canonical layouts. عدم التكيف مع الألواح هو سبب شائع للمراجعات السلبية.

Responsive vs Adaptive Design

غالبًا ما يتم الخلط بين مصطلحي responsive و adaptive، وإن كانا يصفان نهجين مختلفين. يستخدم التصميم المتكيف شبكة مرنة تتضبط بشكل مستمر مع عرض الشاشة. يستخدم التصميم المتكيف تصميمات ثابتة لنقاط breakpoints محددة مسبقًا — يتحول التطبيق بينها بشكل مفاجئ.

في الممارسة، تستخدم تطبيقات الجوال مزيجًا من كلا النهجين. تُبنى الشبكة الأساسية بشكل responsive (Auto Layout مع تبعيات constraint)، وعند الوصول إلى breakpoint (مثال: العرض > 600 pt)، يتحول التصميم إلى نسخة متكيفة بترتيب مختلف للعناصر. iOS يدمج Auto Layout (responsive) مع Size Classes (adaptive). Android يدمج ConstraintLayout (responsive) مع موارد qualifier (adaptive).

Size Classes في iOS: Compact و Regular

Size Classes هي آلية iOS تصنف المساحة المتاحة للشاشة على محورين: أفقي وعمودي. يمكن لكل محور أن يكون Compact (C) أو Regular (R). يعطي التحليل أربع خيارات للتكيف: CR (وضع عمودي نموذجي لـ iPhone)، RR (iPad عمودي/أفقي)، RC (iPhone أفقي على Plus/Pro Max)، CC (iPad Split View).

// تعريف Size Classes في Swift
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — عرض master-detail
        case (.compact, .regular):
            showStackedView() // iPhone عمودي — تصميم كومة
        case (.compact, .compact):
            showCompactView() // iPhone SE أفقي — مصغر
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // استخدام UISplitViewController أو HStack
    }

    private func showStackedView() {
        // كومة عمودية لـ iPhone
    }

    private func showCompactView() {
        // إخفاء العناصر الثانوية، عرض الرئيسية
    }
}

في Interface Builder، تتم تهيئة Size Classes من خلال لوحة “wAny hAny” — يختار المطور تركيبة محددة (wRegular hRegular، wCompact hRegular) ويضيف اختلافات constraint. يستخدم SwiftUI @Environment(\.horizontalSizeClass) و @Environment(\.verticalSizeClass) للتكيف التفاعلي — عند تغير الاتجاه أو حجم النافذة، يعيد SwiftUI رسم العرض تلقائيًا.

// Size Classes في SwiftUI
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — تصميم أفقي مع لوحة جانبية
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — كومة عمودية بملء الشاشة
            VStack {
                ContentView()
            }
        }
    }
}

Configuration Qualifiers في Android

Configuration Qualifiers هي آلية Android لتحميل موارد مختلفة (layout، values، drawables) حسب خصائص الجهاز. تشمل المؤهلات حجم الشاشة (small، normal، large، xlarge)، الاتجاه (port، land)، العرض الأدنى (swdp)، العرض المتاح (wdp) والارتفاع (hdp).

// تحديد تكوين الجهاز في Kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

هيكل الموارد للشاشات المختلفة: res/layout/activity_main.xml (هاتف)، res/layout-sw600dp/activity_main.xml (لوح 7”)، res/layout-sw720dp/activity_main.xml (لوح 10”). يختار Android تلقائيًا التصميم الصحيح بناءً على smallestWidth — أدنى عرض شاشة بالـ dp بغض النظر عن الاتجاه. المؤهل swdp هو أكثر طريقة تكيف استقرارًا.

// Jetpack Compose — WindowSizeClass للتكيف
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (مكتبة androidx.window) يوفر WindowSizeClass بثلاث فئات عرض: COMPACT (0–600 dp)، MEDIUM (600–840 dp)، EXPANDED (>840 dp). هذا بديل حديث لمجلدات qualifier القديمة. توصي Google به للتكيف مع الأجهزة القابلة للطي والألواح.

الشبكة المتكيفة و breakpoints

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

Breakpoints الموصى بها من Google Material Design و Apple HIG: 0–599 dp (هاتف، عمود واحد)، 600–839 dp (لوح، عمودان، navigation rail)، 840+ dp (لوح، ثلاثة أعمدة، navigation drawer). يجب ألا يتجاوز عدد breakpoints 4 — فائدة نقاط التحول تعقد الصيانة والاختبار.

أفضل ممارسات التصميم المتكيف

يتطلب التصميم المتكيف الناجح الاتباع مجموعة قواعد طورتها مجتمع مطوري iOS و Android على مدى العقد الأخير. أدناه التوصيات الرئيسية استنادًا إلى Apple HIG و Google Material Design وخبرة مشاريع الإنتاج.

• ابدأ بأصغر شاشة — صمّم التصميم لـ iPhone SE (375 pt) أو Android compact (360 dp)، ثم أضف امتدادات للشاشات الأكبر. يضمن ذلك أن المحتوى الحرج يلائم جميع الأجهزة
• استخدم حجم المحتوى الجوهري — UILabel، UIButton، ImageView لها أحجام طبيعية. Auto Layout و ConstraintLayout يستخدمانه للتوضع التلقائي دون قيود زائدة
• لا تخف المحتوى على الشاشات الصغيرة — بدلاً من الإخفاء، أعد ترتيب المحتوى (reflow). يجب أن يتمتع المستخدم بنفس الوظائف، ولكن بترتيب مختلف
• اختبر على جميع size classes — يسمح محاكي iOS بتبديل Size Classes دون إعادة التشغيل. Android Emulator يوفر ملفات أجهزة مختلفة. تأكد من الاختبار على الألواح والأجهزة القابلة للطي
• Material 3 Adaptive Layout — توفر Google تصاميم canonical جاهزة للقائمة/التفاصيل، لوحات الأدوات والتنقل. استخدمها بدلاً من اختراع أنماطك الخاصة

المبدأ الرئيسي في التصميم المتكيف: المحتوى يحدد التصميم، وليس العكس. إذا كان iPad يعرض نفس كومة البطاقات مثل iPhone، ولكن ممدودة بالعرض — هذا ليس responsive design. Responsive design يعيد تفكير التركيب: على iPhone — تمرير عمودي، على iPad — master-detail مع لوحة جانبية.