10 KiB
10 KiB
مشخصات درس‌نامه: فاصله‌گذاری و چیدمان (Spacing, Grid & Layout Systems)
- شناسه در سیلابس:
L5.5 - فصل: فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- نوع محتوا: 📘 درس‌نامه متنی
- زمان تقریبی مطالعه: ۱۲ دقیقه
- پیش‌نیازهای مستقیم:
L5.4(تایپوگرافی و پالت رنگی)
۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- درک کند (Understand): قدرت جادویی «فضای منفی یا فضای سفید (Whitespace)» در خلق حس لوکس، خوانایی بالا و تمرکز ذهنی کاربر را درک کند.
- به‌کار ببندد (Apply): استاندارد جهانی سیستم گرید ۸ پیکسلی (8pt Grid System) را در تنظیم پدینگ‌ها، مارجین‌ها و فواصل المان‌ها پیاده‌سازی کند.
- تحلیل/ارزیابی کند (Evaluate): زمان استفاده از چیدمان تک‌بعدی فلکس‌باکس (Flexbox) در برابر چیدمان دوبعدی گرید (CSS Grid) را تفکیک و انتخاب کند.
- به‌کار ببندد (Apply): اصول استاندارد کانتینرها و فواصل سکشن‌ها را بر اساس راهنماهای Design.md (https://getdesign.md/design-md) در کالبد پروژه محوری (پورتفولیوی پویا) مستند سازد.
۲. محدوده و مرزهای محتوا (Scope & Boundaries)
آنچه باید پوشش داده شود (In-Scope):
- جادوی فضای سفید (Whitespace): تنفس محتوا:
- تصور اشتباه مبتدیان: «فضای خالی یعنی هدر رفتن فضای مانیتور، پس تا می‌توانیم المان‌ها را به هم بچسبانیم!»
- واقعیت طراحی پریمیوم: فضای سفید تفاوت میان یک سایت شلخته ارزان‌قیمت با یک محصول تمیز و گران‌بها است.
- سیستم گرید ۸ پیکسلی (The 8pt Grid Standard):
- چرا کل ابعاد، فاصله‌ها و آیکون‌ها در وب بر مضارب عدد ۸ (و در موارد ریز ۴) تنظیم می‌شوند:
- ۴ پیکسل (فواصل فوق فشرده نظیر آیکون کنار متن)
- ۸ پیکسل (
p-2در تیلویند) - ۱۶ پیکسل (
p-4- فاصله استاندارد داخل کارت‌ها) - ۲۴ پیکسل (
p-6- فاصله بین المان‌های داخلی) - ۳۲ پیکسل (
gap-8- فاصله بین کارت‌های گرید) - ۶۴ پیکسل (
py-16- فاصله عمودی بین سکشن‌های مختلف صفحه)
- چرا کل ابعاد، فاصله‌ها و آیکون‌ها در وب بر مضارب عدد ۸ (و در موارد ریز ۴) تنظیم می‌شوند:
- موتورهای چیدمان: چه زمان Flexbox و چه زمان CSS Grid؟
- Flexbox (تک‌بعدی - سطر یا ستون): عالی برای نوار ناوبری (منو سمت راست، دکمه سمت چپ)، ردیف دکمه‌ها، چیپ‌های مهارت و المان‌های هم‌ردیف.
- CSS Grid (دوبعدی - سطرها و ستون‌های ماتریسی): ساختار بی‌نظیر برای گرید کارت‌های پروژه‌ها (۱ ستون در موبایل
\rightarrow۲ ستون در تبلت\rightarrow۳ ستون در دسکتاپ).
- استانداردهای چیدمان در Design.md (https://getdesign.md/design-md):
- مهار حداکثر عرض صفحه با کانتینرهای استاندارد (
max-w-6xlیاmax-w-7xlهمراه باmx-auto) تا محتوا در مانیتورهای عریض از هم نپاشد. - قانون طلایی سلسله‌مراتب فواصل:
فاصله بین سکشن‌ها > فاصله بین کارت‌ها > فاصله درون کارت‌ها.
- مهار حداکثر عرض صفحه با کانتینرهای استاندارد (
- چیدمان دو محیط پروژه محوری (پورتفولیو):
- چیدمان صفحه اصلی عمومی: کانتینر وسط‌چین با حاشیه‌های تنفس‌دار در اطراف.
- چیدمان پیشخوان ادمین: ستون سایدبار ناوبری ثابت در کنار محتوای اسکرول‌شونده فرم‌ها.
- کال‌اوت‌های Quera:
<details class="violet">: چرا سیستم گرید ۸ پیکسلی به طور طبیعی در سیستم کلاس‌های Tailwind CSS تعبیه شده است؟<details class="red">: تله «چسبیدن به لبه‌ها»؛ هرگز اجازه ندهید محتوا بدون پدینگ به حاشیه‌های کناری صفحه‌نمایش یا دیواره کارت‌ها بچسبد.
آنچه نباید وارد آن شویم (Out-of-Scope):
- مباحث مدیاکوئری‌ها و واکنش‌گرایی اختصاصی موبایل (درس بعدی ۵.۶).
- کدهای جاوااسکریپتی دستکاری DOM (فصل‌های آینده).
۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|---|---|---|
| Whitespace / Negative Space | فضای منفی / فضای سفید | فضای خالی و بدون المان بین اجزای صفحه که باعث آرامش چشم و تمرکز می‌شود |
| 8pt Grid System | سیستم گرید ۸ پیکسلی | استاندارد صنعتی چیدمان که تمام فواصل و ابعاد را بر مضرب عدد ۸ تنظیم می‌کند |
| Flexbox | جعبه انعطاف‌پذیر فلکس | مدل چیدمان تک‌بعدی برای توزیع فضا و تراز کردن عناصر در یک سطر یا ستون |
| CSS Grid | گرید سی‌اس‌اس | مدل چیدمان دوبعدی برای ایجاد ماتریس‌های پیچیده سطری و ستونی با چیدمان ریسپانسیو |
| Container / Max-Width | کانتینر / سقف عرض | کادری محدودکننده که از کشیده شدن بی‌رویه محتوا در نمایشگرهای بسیار بزرگ جلوگیری می‌کند |
۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ
images/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور مدرن با تم تیره و خط‌کش‌های شیشه‌ای دیجیتال نئونی که گرید ۸ پیکسلی و فواصل منظم المان‌ها را روی بوم وب نشان می‌دهد.
- مقایسه چیدمان فشرده و شلوغ با چیدمان تنفس‌دار:
images/whitespace-comparison.png- موضوع: تصویر دونیمه‌ای: سمت چپ طراحی درهم‌رفته و ارزان در برابر سمت راست طراحی دارای فضای منفی لوکس و چشم‌نواز.
- خط‌کش مقیاس سیستم ۸ پیکسلی:
images/eight-point-grid-ruler.png- موضوع: اینفوگرافیک گام‌های مقیاس: ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل همراه با معادل کلاس‌های Tailwind متناظر.
- فلکس‌باکس در برابر گرید در عمل:
images/flexbox-vs-grid-usecase.png- موضوع: دیاگرام کاربردی: هدر تک‌بعدی با Flexbox در برابر گرید ۳ ستونه کارت‌های پروژه با CSS Grid.
- معماری کانتینر و پدینگ‌ها در Design.md:
images/design-md-layout-anatomy.png- موضوع: اسکلت شماتیک لایه‌بندی صفحه پورتفولیو با نمایش عرض
max-w-6xlو پدینگ‌های واکنش‌گرای حاشیه.
- موضوع: اسکلت شماتیک لایه‌بندی صفحه پورتفولیو با نمایش عرض
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# فاصله‌گذاری و چیدمان: معماری سکوت و فضای سفید در وب - مقدمه: چرا فاصله میان دکمه‌ها و المان‌ها، تفاوت یک سایت حرفه‌ای با یک آشفتگی بصری است؟
- جدول کاور درس
- جادوی فضای سفید (Negative Space): پایان دادن به ترس از فضای خالی.
- سیستم گرید ۸ پیکسلی: زبان مشترک چیدمان مهندسی:
- چرا عدد ۸؟
- مقیاس‌های کاربردی از ۴ تا ۶۴ پیکسل.
- باکس نکته Quera (
<details class="violet">): هماهنگی مادرزادی کلاس‌های فواصل در Tailwind CSS با گرید ۸ پیکسلی. - کدام موتور چیدمان؟ Flexbox یا CSS Grid:
- ناوبری و دکمه‌ها در قلمرو فلکس‌باکس.
- ماتریس کارت‌های پروژه‌ها در قلمرو گرید.
- اصول چیدمان کانتینرها در Design.md (getdesign.md/design-md):
- مهار عرض با کانتینرهای استاندارد (
max-w-6xl mx-auto). - قانون سلسله‌مراتب فواصل در سکشن‌ها.
- مهار عرض با کانتینرهای استاندارد (
- باکس هشدار Quera (
<details class="red">): پرهیز از فواصل تصادفی و چسبیدن محتوا به دیواره‌های صفحه. - جمع‌بندی درس‌نامه: تثبیت چیدمان پورتفولیو و آمادگی برای تطبیق آن با ابعاد مختلف دستگاه‌ها در طراحی واکنش‌گرا.
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- ارزش فضای منفی و سفید به عنوان شاخص طراحی پریمیوم به درستی تبیین شده باشد.
- سیستم گرید ۸ پیکسلی به همراه مقادیر دقیق و معادل‌های مدرن آموزش داده شود.
- مرز تفکیک کاربرد Flexbox و CSS Grid همراه با نمودار روشن گردد.
- استانداردهای کانتینر و راهنماهای Design.md در طراحی پورتفولیو لحاظ شوند.