Responsive Design — مبانی، تطبیق رابط‌ها با صفحه‌نمایش

Responsive Design چیست؟

Responsive Design — روش ساخت رابط‌هایی که در آن چیدمان به اندازه صفحه، جهت و فضای موجود واکنش نشان می‌دهد و مکان عناصر را بدون از دست دادن عملکرد بازچینی می‌کند. این اصطلاح توسط Ethan Marcotte در سال ۲۰۱۰ برای طراحی وب ارائه شد، اما اصول کاملاً برای برنامه‌های بومی موبایل قابل استفاده است.

در توسعه موبایل، responsive design به این معناست که یک برنامه واحد روی همه دستگاه‌ها به درستی نمایش داده می‌شود: از iPhone SE (375 pt) تا iPad Pro (1024 pt در حالت عمودی) و از گوشی Android (360 dp) تا تبلت (800 dp). عناصر کلیدی عبارتند از شبکه انعطاف‌پذیر (flexible grid)، تصاویر تطبیقی و پرسش‌های رسانه‌ای در سطح فریمورک (size classes، qualifiers).

طبق Apple Developer Documentation، برنامه باید universal باشد — روی همه دستگاه‌ها بدون ساخت جداگانه برای iPad کار کند. Google Play استفاده از adaptive layouts از طریق Jetpack WindowManager و canonical layouts را توصیه می‌کند. عدم تطبیق با تبلت‌ها یکی از دلایل رایج نظرات منفی است.

Responsive در مقابل Adaptive Design

اصطلاحات responsive و adaptive اغلب اشتباه گرفته می‌شوند، اگرچه رویکردهای متفاوتی را توصیف می‌کنند. Responsive design از شبکه انعطاف‌پذیری استفاده می‌کند که به طور پیوسته با عرض صفحه سازگار می‌شود. Adaptive design از چیدمان‌های ثابت برای breakpoints از پیش تعیین‌شده استفاده می‌کند — برنامه به طور ناگهانی بین آنها جابه‌جا می‌شود.

در عمل برنامه‌های موبایل از ترکیب هر دو رویکرد استفاده می‌کنند. شبکه پایه به صورت responsive ساخته می‌شود (Auto Layout با وابستگی‌های constraint)، و پس از رسیدن به breakpoint (مثلاً عرض > 600 pt) چیدمان به نسخه تطبیقی با ترکیب متفاوت عناصر تغییر می‌کند. iOS Auto Layout (responsive) را با Size Classes (adaptive) ترکیب می‌کند. Android ConstraintLayout (responsive) را با منابع qualifier (adaptive) ترکیب می‌کند.

iOS Size Classes: 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 به طور خودکار view را دوباره ترسیم می‌کند.

// 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()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — مکانیزم Android برای بارگذاری منابع مختلف (layout، values، drawables) بسته به ویژگی‌های دستگاه. این qualifierها شامل اندازه صفحه (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 (تبلت ۷ اینچ)، res/layout-sw720dp/activity_main.xml (تبلت ۱۰ اینچ). Android به طور خودکار layout مناسب را بر اساس smallestWidth انتخاب می‌کند — حداقل عرض صفحه بر حسب dp بدون توجه به جهت. qualifier 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

شبکه تطبیقی پایه responsive design است. به جای اندازه‌های ثابت، عناصر از نسبت‌های درصدی، محدودیت‌های انعطاف‌پذیر و intrinsic content size استفاده می‌کنند. Breakpoints — نقاط عرض صفحه که با رسیدن به آنها، چیدمان بین حالت‌ها جابه‌جا می‌شود.

breakpoints توصیه‌شده توسط Google Material Design و Apple HIG: 0–599 dp (گوشی، یک ستون)، 600–839 dp (تبلت، دو ستون، navigation rail)، 840+ dp (تبلت، سه ستون، navigation drawer). تعداد breakpoints نباید از ۴ تجاوز کند — نقاط انتقال زیاد نگهداری و آزمایش را پیچیده می‌کند.

بهترین روش‌های طراحی تطبیقی

responsive design موفق مستلزم رعایت مجموعه‌ای از قوانین است که توسط جامعه توسعه‌دهندگان iOS و Android در دهه گذشته تدوین شده است. در زیر توصیه‌های کلیدی بر اساس Apple HIG، Google Material Design و تجربه پروژه‌های تولیدی آورده شده است.

• از کوچکترین صفحه شروع کنید — چیدمان را برای iPhone SE (375 pt) یا Android compact (360 dp) طراحی کنید، سپس برای صفحات بزرگتر توسعه دهید. این تضمین می‌کند که محتوای حیاتی در همه جا جا می‌شود
• از intrinsic content size استفاده کنید — UILabel، UIButton، ImageView اندازه طبیعی دارند. Auto Layout و ConstraintLayout از آن برای موقعیت‌یابی خودکار بدون محدودیت‌های اضافی استفاده می‌کنند
• محتوای صفحات کوچک را پنهان نکنید — به جای پنهان کردن، بازچینی کنید (reflow). کاربر باید به همان قابلیت‌ها، فقط در ترتیبی متفاوت دسترسی داشته باشد
• در همه size classes آزمایش کنید — شبیه‌ساز iOS امکان تغییر Size Classes بدون راه‌اندازی مجدد را فراهم می‌کند. شبیه‌ساز Android پروفایل‌های دستگاه مختلفی ارائه می‌دهد. حتماً روی تبلت‌ها و دستگاه‌های تاشو آزمایش کنید
• Material 3 Adaptive Layout — Google canonical layouts آماده برای فهرست/جزئیات، پنل‌های ابزار و ناوبری ارائه می‌دهد. به جای ابداع الگوهای خود از آنها استفاده کنید

اصل اصلی طراحی تطبیقی: محتوا چیدمان را تعیین می‌کند، نه برعکس. اگر در iPad همان پشته کارت‌های iPhone، فقط کشیده‌شده در عرض نمایش داده شود — این responsive design نیست. Responsive design ترکیب را بازاندیشی می‌کند: در iPhone — اسکرول عمودی، در iPad — master-detail با پنل کناری.