منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

طراحی تطبیقی (Adaptive Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

وقتی صفحه‌ای می‌سازید که باید هم روی گوشی کار کند و هم روی مانیتور بزرگ، دو راه کلی دارید: یا چند چیدمان آماده بسازید و بگذارید مرورگر مناسب‌ترین را انتخاب کند، یا یک چیدمان کشسان بسازید که خودش با هر عرضی جور شود.

اولی طراحی تطبیقی است و دومی طراحی واکنش‌گرا. مسیر مقاله: تعریف و تفاوتشان، موازنهٔ واقعی میانشان، بعد اینکه چرا این دوگانه امروز آن‌قدرها هم دوگانه نیست، و در پایان اینکه در بازار ایران کدام متغیر واقعاً تعیین‌کننده است.

طراحی تطبیقی چیست؟

در طراحی تطبیقی، چند چیدمان ازپیش‌ساخته برای عرض‌های مشخص دارید. مرورگر عرض صفحه را تشخیص می‌دهد و نزدیک‌ترین چیدمان را برمی‌دارد. عرض‌های متعارفی که معمولاً هدف گرفته می‌شوند این‌هاست: ۳۲۰، ۴۸۰، ۷۶۰، ۹۶۰، ۱۲۰۰ و ۱۶۰۰ پیکسل.

در طراحی واکنش‌گرا، یک چیدمان دارید که با شبکهٔ سیال و پرس‌وجوهای رسانه‌ای، پیوسته تغییر می‌کند. مفصل‌ترش در طراحی واکنش‌گرا آمده.

تفاوت را در یک جمله می‌شود گفت: تطبیقی پلکانی است، واکنش‌گرا پیوسته. در تطبیقی، صفحه تا رسیدن به نقطهٔ شکست بعدی دقیقاً همان است و بعد ناگهان عوض می‌شود؛ در واکنش‌گرا، هر پیکسل تغییر عرض، کمی چیدمان را جابه‌جا می‌کند.

ریشهٔ فکری‌اش هم به Aaron Gustafson و کتاب Adaptive Web Design برمی‌گردد، که آن را در چارچوب «بهبود تدریجی» صورت‌بندی می‌کند: از یک تجربهٔ پایه که همه‌جا کار می‌کند شروع کن، و برای دستگاه‌های تواناتر لایه اضافه کن.

موازنهٔ واقعی

مزیت‌ها و هزینه‌های هرکدام، آینهٔ هم‌اند:

• - کنترل در برابر نگهداشت. تطبیقی به شما کنترل دقیق روی هر عرض هدف می‌دهد — می‌توانید برای گوشی چیز کاملاً متفاوتی طراحی کنید. هزینه‌اش این است که هر تغییر محتوایی باید در چند چیدمان اعمال شود.
• - عرض‌های میانی. ضعف اصلی تطبیقی همین است: دستگاهی که عرضش بین دو نقطهٔ شکست بیفتد، چیدمانی می‌گیرد که برای آن ساخته نشده. در واکنش‌گرا این حالت وجود ندارد.
• - هزینهٔ اولیه. واکنش‌گرا یک پایگاه کد دارد و ارزان‌تر شروع می‌شود؛ تطبیقی چند نسخه دارد و گران‌تر.
• - کارایی. ادعای متعارف این است که تطبیقی سریع‌تر بارگذاری می‌شود، چون فقط آنچه لازم است برای همان چیدمان فرستاده می‌شود. ارقام مشخصی هم نقل می‌شود؛ اما این ارقام به پیاده‌سازی بستگی دارند و نه به خودِ رویکرد. واکنش‌گرای خوش‌ساخت می‌تواند از تطبیقی بدساخت سبک‌تر باشد، پس این را یک احتمال بدانید نه یک ویژگی ذاتی.

و یک راهنمای انتخاب که به‌نظرم صادقانه‌تر از فهرست بالاست: اگر تجربهٔ موبایل و دسکتاپ باید واقعاً متفاوت باشند — نه فقط باریک‌تر — تطبیقی منطقی است. اگر یک تجربه‌اند که باید در عرض‌های مختلف جا شود، واکنش‌گرا. بیشتر محصولات در دستهٔ دوم‌اند و به همین دلیل واکنش‌گرا پیش‌فرض معقولی است.

نقطهٔ شکست را از کجا بیاوریم؟

این بخش افزودهٔ مترجم است و به‌نظرم عملی‌ترین بخش این مقاله. فهرست عرض‌های متعارف — ۳۲۰، ۴۸۰، ۷۶۰ و بقیه — از اندازهٔ دستگاه‌های رایج یک دورهٔ مشخص آمده، و همین آن را به یک تلهٔ آرام تبدیل می‌کند: دستگاه‌ها هر چند سال عوض می‌شوند و آن اعداد کهنه می‌شوند، بی‌آنکه کسی متوجه شود.

رویکرد پایدارتر این است که نقطهٔ شکست را از محتوای خودتان بگیرید، نه از فهرست دستگاه‌ها. روشش هم ساده است: صفحه را باز کنید و پنجره را آرام‌آرام باریک کنید. جایی که چیزی خراب می‌شود، همان‌جا نقطهٔ شکست شماست:

• - سطر متن آن‌قدر بلند می‌شود که خواندنش سخت شود، یا آن‌قدر کوتاه که هر چند کلمه بشکند.
• - جدول از عرض بیرون می‌زند یا ستون‌هایش به هم می‌چسبند.
• - ناوبری افقی دیگر جا نمی‌شود.
• - دو عنصری که باید کنار هم دیده شوند، از هم دور می‌افتند.

مزیت این روش این است که نقطه‌های شکستِ شما به محصول شما وابسته می‌شوند و نه به بازار گوشی. محصولی با جدول‌های سنگین، نقاط شکست متفاوتی از یک وبلاگ متنی لازم دارد — و هیچ فهرست استانداردی این را نمی‌داند.

و یک نکته که مخصوص فارسی است: نقطه‌های شکست را با متن فارسی واقعی پیدا کنید، نه با متن نمونهٔ لاتین. طول کلمات و رفتار شکستن سطر در فارسی متفاوت است، و نقطه‌ای که با متن انگلیسی درست به‌نظر می‌رسید می‌تواند با متن فارسی زودتر یا دیرتر بشکند. همین یک تفاوت، دلیل بخش بزرگی از چیدمان‌های ناجور در سایت‌های فارسی است که از قالب خارجی آمده‌اند.

چرا این دوگانه امروز کمرنگ شده

این بخش افزودهٔ مترجم است. بیشتر متن‌هایی که این دو را مقایسه می‌کنند، از دورانی مانده‌اند که ابزارهای چیدمان محدودتر بودند. امروز مرز میانشان در عمل مبهم شده، به چند دلیل:

• - تقریباً هر پروژهٔ واقعی، ترکیبی است. سایتی که شبکهٔ سیال دارد ولی در یک نقطهٔ شکست، ناوبری‌اش را کاملاً عوض می‌کند، هم واکنش‌گراست و هم تطبیقی. این دو برچسب، دو سر یک طیف‌اند نه دو اردوگاه.
• - ابزارهای امروزی چیدمان، خودشان تطبیق‌پذیرند. شبکه‌هایی که بدون نقطهٔ شکست، تعداد ستون‌ها را با فضای موجود تنظیم می‌کنند، کاری را انجام می‌دهند که قبلاً به چند چیدمان جدا نیاز داشت.
• - پرس‌وجوی مبتنی بر ظرف، پرسش را عوض کرده. تا دیروز همه‌چیز به عرض پنجره گره خورده بود؛ حالا یک قطعه می‌تواند به عرض ظرف خودش واکنش نشان دهد. یعنی همان کارت، در ستون باریک و در ستون پهن، دو رفتار متفاوت دارد بی‌آنکه کسی نقطهٔ شکست صفحه را دست بزند. این با منطق «چند چیدمان ثابت برای کل صفحه» اساساً فرق دارد.

نتیجهٔ عملی: وقت زیادی صرف انتخاب میان این دو برچسب نکنید. پرسش مفیدتر این است: کدام قطعه‌های رابط باید در عرض‌های مختلف رفتار متفاوتی داشته باشند، و آن تفاوت چقدر عمیق است؟ جوابِ این پرسش خودش به شما می‌گوید کجا نقطهٔ شکست لازم دارید و کجا کشسانی کافی است.

در بازار ایران، متغیر تعیین‌کننده چیز دیگری است

این بخش هم افزودهٔ مترجم است. در بحث‌های تطبیقی و واکنش‌گرا، معیار غالب چیدمان است. اما در بازاری با تنوع شبکه و دستگاهی که ما داریم، چیزی که واقعاً تجربهٔ کاربر را تعیین می‌کند حجم چیزی است که می‌فرستید، نه اینکه چطور می‌چینیدش.

یک صفحهٔ کاملاً واکنش‌گرا که سه مگابایت جاوااسکریپت لازم دارد تا یک فهرست را نشان بدهد، روی اتصال ناپایدار بی‌فایده است — هرقدر هم چیدمانش در همهٔ عرض‌ها بی‌نقص باشد. و برعکس، صفحهٔ سبکی با چیدمان ساده، همه‌جا کار می‌کند.

چند نکتهٔ عملی که در این بافت بیشتر از انتخاب رویکرد می‌ارزند:

• - اول محتوا را برسانید. اگر متن اصلی صفحه پیش از اجرای اسکریپت‌ها دیده شود، کاربر با شبکهٔ ضعیف هم چیزی دارد. این همان منطق «بهبود تدریجی» است که خودِ ادبیات تطبیقی از آن آمده.
• - تصویر را به عرض واقعی برسانید. فرستادن تصویر دو هزار پیکسلی برای نمایش در دویست پیکسل، پرتکرارترین اتلاف پهنای باند در محصولات فارسی است — و ربطی به تطبیقی یا واکنش‌گرا بودن ندارد.
• - روی دستگاه واقعی آزمایش کنید، نه فقط با تغییر اندازهٔ پنجرهٔ مرورگر. تغییر اندازهٔ پنجره فقط چیدمان را می‌آزماید؛ گوشی چندساله با اینترنت متوسط، همه‌چیز را می‌آزماید.
• - و نکتهٔ راست‌به‌چپ: اگر چند چیدمان جدا دارید، هر کدام باید جداگانه در حالت راست‌به‌چپ بررسی شود. خطای رایج این است که نسخهٔ دسکتاپ درست آینه شده و نسخهٔ موبایل — که کمتر دیده می‌شود — نه. بحث تفصیلی‌اش در سیستم شبکه‌ای آمده.

جمع‌بندی

• - طراحی تطبیقی چند چیدمان ازپیش‌ساخته برای عرض‌های مشخص دارد؛ واکنش‌گرا یک چیدمان کشسان. تطبیقی پلکانی است و واکنش‌گرا پیوسته.
• - عرض‌های متعارف هدف: ۳۲۰، ۴۸۰، ۷۶۰، ۹۶۰، ۱۲۰۰ و ۱۶۰۰ پیکسل.
• - موازنهٔ اصلی، کنترل در برابر نگهداشت است؛ و ضعف ذاتی تطبیقی، دستگاه‌هایی است که عرضشان بین دو نقطهٔ شکست می‌افتد.
• - ادعای سرعت بیشتر تطبیقی به پیاده‌سازی بستگی دارد نه به خود رویکرد؛ آن را احتمال بدانید نه ویژگی ذاتی.
• - راهنمای انتخاب: اگر تجربهٔ موبایل و دسکتاپ باید واقعاً متفاوت باشند، تطبیقی؛ اگر یک تجربه‌اند که باید جا شود، واکنش‌گرا.
• - این دوگانه امروز کمرنگ شده: پروژه‌های واقعی ترکیبی‌اند و پرس‌وجوی مبتنی بر ظرف، پرسش را از «عرض پنجره» به «عرض ظرف» منتقل کرده.
• - نقطهٔ شکست را از محتوای خودتان بگیرید نه از فهرست دستگاه‌ها — و آن را با متن فارسی واقعی پیدا کنید، نه با متن نمونهٔ لاتین.
• - در بازار ایران، حجم صفحه بیشتر از انتخاب رویکرد اهمیت دارد: اول محتوا، تصویر به عرض واقعی، و آزمون روی دستگاه واقعی نه با تغییر اندازهٔ پنجره.