11 KiB
11 KiB
مشخصات درس‌نامه: طراحی واکنش‌گرا (Responsive Design & Mobile-First Mindset)
- شناسه در سیلابس:
L5.6 - فصل: فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- نوع محتوا: 📘 درس‌نامه متنی
- زمان تقریبی مطالعه: ۱۲ دقیقه
- پیش‌نیازهای مستقیم:
L5.5(فاصله‌گذاری و چیدمان)
۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- درک کند (Understand): چرا رویکرد «موبایل‌فرست (Mobile-First)» شرط اساسی بقای محصولات وب است و بیش از ۶۵٪ از مدیران استخدام و کارفرمایان، پورتفولیو را ابتدا روی گوشی تلفن همراه باز می‌کنند.
- درک کند (Understand): نقاط شکست استاندارد ریسپانسیو (Breakpoints) در وب مدرن و پیشوندهای کلیدی Tailwind CSS (
sm,md,lg,xl) چگونه کار می‌کنند. - به‌کار ببندد (Apply): الگوهای بازآرایی واکنش‌گرا را بر روی پروژه محوری (تبدیل گرید ۳ ستونه پروژه‌ها به ۱ ستونه در موبایل، و تبدیل سایدبار ادمین به منوی کشویی) اعمال کند.
- به‌کار ببندد (Apply): استاندارد حداقل ابعاد لمسی ۴۴×۴۴ پیکسل (Touch Target) را برای دکمه‌ها و فرم‌ها جهت جلوگیری از خطای کلیک در موبایل رعایت کند.
- به‌کار ببندد (Apply): پنل شبیه‌ساز دستگاه‌ها (Device Mode) را در ابزار DevTools مرورگر با کلید میانبر فعال کرده و ظاهر پروژه را در ابعاد مختلف آزمایش کند.
۲. محدوده و مرزهای محتوا (Scope & Boundaries)
آنچه باید پوشش داده شود (In-Scope):
- واقعیت دنیای موبایل‌فرست:
- طراحی فقط برای نمایشگر لپ‌تاپ خودتان، بزرگ‌ترین اشتباه است؛ اگر وب‌سایت در صفحه کوچک موبایل شکسته شود یا نیازمند زوم کردن باشد، کاربر در کمتر از ۳ ثانیه صفحه را ترک می‌کند.
- کالبدشکافی نقاط شکست (Responsive Breakpoints) در وب مدرن:
- پیش‌فرض (Mobile First - عرض زیر ۶۴۰ پیکسل): تمام المان‌ها تمام‌عرض (
w-full)، تک‌ستونه، متن‌ها خوانا، منو جمع‌شده. - نقطه شکست
sm: 640px(گوشی‌های بزرگ و فبلت‌ها): شروع تنظیم حاشیه‌های کناری. - نقطه شکست
md: 768px(تبلت‌ها و آی‌پد): گرید پروژه‌ها ۲ ستونه می‌شود؛ منوی ناوبری باز می‌شود. - نقطه شکست
lg: 1024px(لپ‌تاپ‌ها): گرید ۳ ستونه می‌شود؛ سایدبار پنل ادمین به صورت ستون ثابت سمت راست/چپ قرار می‌گیرد. - نقطه شکست
xl: 1280px(مانیتورهای عریض رومیزی): تثبیت کانتینر در حداکثر عرض.
- پیش‌فرض (Mobile First - عرض زیر ۶۴۰ پیکسل): تمام المان‌ها تمام‌عرض (
- انطباق بخش‌های پروژه پورتفولیوی پویا در موبایل و دسکتاپ:
- ناوبری (Navbar): دسکتاپ (لینک‌های افقی)
\rightarrowموبایل (دکمه همبرگری مدرن یا هدر چسبان فشرده). - گرید پروژه‌ها: کلاس جادویی
grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6. - پنل مدیریت ادمین: سایدبار دسکتاپ در موبایل به صورت منوی کشویی پایین صفحه (Bottom Sheet) درمی‌آید تا ادمین بتواند حتی با گوشی خود یک پروژه اضافه کند!
- ناوبری (Navbar): دسکتاپ (لینک‌های افقی)
- استاندارد اهداف لمسی (Touch Target - قانون ۴۴ پیکسل):
- انگشت شست انسان موس پیکسلی نیست؛ دکمه‌ها، آیکون‌ها و لینک‌ها باید حداقل ۴۴×۴۴ پیکسل مساحت کلیک‌پذیر با پدینگ مناسب داشته باشند.
- روش تست زنده در مرورگر (Device Mode):
- آموزش زدن کلید میانبر
Ctrl+Shift+Mدر ویندوز یاCmd+Shift+Mدر مک در مرورگر Chrome برای دیدن نمای iPhone و Galaxy.
- آموزش زدن کلید میانبر
- کال‌اوت‌های Quera:
<details class="violet">: چرا فریم‌ورک Tailwind کدهای ریسپانسیو را به صورت پیش‌فرض Mobile-First طراحی کرده است؟<details class="red">: تله انگشت بزرگ (Fat Finger Error)؛ پرهیز از چسباندن دکمه‌های کوچک در موبایل که باعث کلیک اشتباه کاربر می‌شود.
آنچه نباید وارد آن شویم (Out-of-Scope):
- توسعه اپلیکیشن‌های نیتیو موبایل با React Native یا Flutter (مبحث مربوط به فصل ۱۵).
- انیمیشن‌های سنگین باز و بسته شدن سایدبار (درس ۵.۷).
۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|---|---|---|
| Responsive Web Design | طراحی وب واکنش‌گرا | روش طراحی صفحاتی که خود را به طور خودکار با ابعاد و جهت نمایشگر تطبیق می‌دهند |
| Mobile-First Approach | رویکرد موبایل‌فرست | استراتژی طراحی رابط کاربری از کوچک‌ترین اندازه صفحه (موبایل) و گسترش تدریجی به دسکتاپ |
| Breakpoint | نقطه شکست / عطف | اندازه مشخصی از عرض صفحه (مانند ۷۶۸ پیکسل) که در آن چیدمان عناصر تغییر ساختار می‌دهد |
| Touch Target Size | مساحت هدف لمسی | حداقل اندازه فیزیکی یک عنصر تعاملی (حداقل ۴۴×۴۴ پیکسل) برای راحتی لمس با انگشت |
| Device Mode / Emulation | حالت شبیه‌ساز دستگاه | ابزار داخلی مرورگر برای شبیه‌سازی صفحه‌نمایش موبایل و تبلت با اندازه‌های استاندارد |
۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ
images/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور مدرن با تم تیره که یک اپلیکیشن واحد را همزمان روی صفحه گوشی موبایل، تبلت و لپ‌تاپ با انعطاف و هماهنگی کامل نمایش می‌دهد.
- طیف چنددستگاهی واکنش‌گرا:
images/responsive-device-spectrum.png- موضوع: نمایش تصویری پورتفولیو در ۴ فریم: موبایل (تک‌ستونه)
\rightarrowتبلت (دوستونه)\rightarrowلپ‌تاپ (سه‌ستونه)\rightarrowمانیتور عریض.
- موضوع: نمایش تصویری پورتفولیو در ۴ فریم: موبایل (تک‌ستونه)
- خط‌کش نقاط شکست در Tailwind:
images/tailwind-breakpoints-guide.png- موضوع: اینفوگرافیک محور افقی نقاط شکست: پیش‌فرض (موبایل)،
sm: 640px،md: 768px،lg: 1024px،xl: 1280px.
- موضوع: اینفوگرافیک محور افقی نقاط شکست: پیش‌فرض (موبایل)،
- مقایسه نمای موبایل و دسکتاپ پورتفولیوی پویا:
images/portfolio-mobile-vs-desktop.png- موضوع: اسکرین‌شات کنار هم: نسخه موبایل با ناوبری ساده و کارت‌های عمودی در برابر نسخه دسکتاپ با سایدبار و گرید باز.
- آموزش کار با ابزار Device Toolbar در مرورگر:
images/chrome-devtools-device-mode.png- موضوع: اسکرین‌شات آموزشی از پنل DevTools با انتخاب دستگاه iPhone و دکمه‌های چرخش صفحه و تغییر رزولوشن.
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# طراحی واکنش‌گرا: هنر انطباق بی‌نقص با موبایل، تبلت و دسکتاپ - مقدمه: چرا اگر پورتفولیوی شما در گوشی کارفرما درست نمایش داده نشود، دیگر شانسی برای دیده شدن نخواهید داشت؟
- جدول کاور درس
- فلسفه موبایل‌فرست (Mobile-First): چرا از کوچک‌ترین صفحه شروع می‌کنیم؟
- نقاط شکست (Breakpoints): زبان تغییر شکل المان‌ها در Tailwind CSS:
- تشریح پیشوندهای
sm,md,lg,xl.
- تشریح پیشوندهای
- باکس نکته Quera (
<details class="violet">): منطق Mobile-First در معماری کلاس‌های Tailwind. - پیاده‌سازی واکنش‌گرایی در پروژه پورتفولیوی پویا:
- هدر و ناوبری تطبیق‌پذیر.
- گرید هوشمند پروژه‌ها (
grid-cols-1 md:grid-cols-2 lg:grid-cols-3). - سایدبار دسکتاپ در برابر منوی کشویی ادمین در موبایل.
- استاندارد حیاتی اهداف لمسی (Touch Target ۴۴ پیکسلی): راحتی لمس بدون خطای انگشت.
- باکس هشدار Quera (
<details class="red">): تله خطای کلیک و فشرده کردن بیش از حد دکمه‌ها در موبایل. - روش تست زنده ریسپانسیو با ابزار DevTools مرورگر: شبیه‌سازی گوشی‌های آیفون و سامسونگ با یک کلیک.
- جمع‌بندی درس‌نامه: تضمین نمایش بی‌نقص پروژه در تمام نمایشگرها و ورود به دنیای کامپوننت‌های تعاملی و وضعیت‌ها.
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- ضرورت رویکرد Mobile-First با آمار و استدلال‌های محکم تبیین شده باشد.
- نقاط شکست استاندارد وب و نحوه استفاده از آن‌ها در Tailwind شرح داده شود.
- دگرگونی چیدمان پورتفولیو (گرید پروژه‌ها، هدر و پنل ادمین) در ابعاد مختلف کاملاً پوشش داده شود.
- قاعده اهداف لمسی ۴۴ پیکسلی و شیوه تست با ابزار Inspect مرورگر به صورت تصویری ارائه گردد.