107 lines
10 KiB
Markdown
107 lines
10 KiB
Markdown
# مشخصات درس‌نامه: فاصله‌گذاری و چیدمان (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):
|
||
1. **جادوی فضای سفید (Whitespace): تنفس محتوا:**
|
||
* تصور اشتباه مبتدیان: «فضای خالی یعنی هدر رفتن فضای مانیتور، پس تا می‌توانیم المان‌ها را به هم بچسبانیم!»
|
||
* واقعیت طراحی پریمیوم: فضای سفید تفاوت میان یک سایت شلخته ارزان‌قیمت با یک محصول تمیز و گران‌بها است.
|
||
2. **سیستم گرید ۸ پیکسلی (The 8pt Grid Standard):**
|
||
* چرا کل ابعاد، فاصله‌ها و آیکون‌ها در وب بر مضارب عدد ۸ (و در موارد ریز ۴) تنظیم می‌شوند:
|
||
* ۴ پیکسل (فواصل فوق فشرده نظیر آیکون کنار متن)
|
||
* ۸ پیکسل (`p-2` در تیلویند)
|
||
* ۱۶ پیکسل (`p-4` - فاصله استاندارد داخل کارت‌ها)
|
||
* ۲۴ پیکسل (`p-6` - فاصله بین المان‌های داخلی)
|
||
* ۳۲ پیکسل (`gap-8` - فاصله بین کارت‌های گرید)
|
||
* ۶۴ پیکسل (`py-16` - فاصله عمودی بین سکشن‌های مختلف صفحه)
|
||
3. **موتورهای چیدمان: چه زمان Flexbox و چه زمان CSS Grid؟**
|
||
* **Flexbox (تک‌بعدی - سطر یا ستون):** عالی برای نوار ناوبری (منو سمت راست، دکمه سمت چپ)، ردیف دکمه‌ها، چیپ‌های مهارت و المان‌های هم‌ردیف.
|
||
* **CSS Grid (دوبعدی - سطرها و ستون‌های ماتریسی):** ساختار بی‌نظیر برای گرید کارت‌های پروژه‌ها (۱ ستون در موبایل $\rightarrow$ ۲ ستون در تبلت $\rightarrow$ ۳ ستون در دسکتاپ).
|
||
4. **استانداردهای چیدمان در Design.md (https://getdesign.md/design-md):**
|
||
* مهار حداکثر عرض صفحه با کانتینرهای استاندارد (`max-w-6xl` یا `max-w-7xl` همراه با `mx-auto`) تا محتوا در مانیتورهای عریض از هم نپاشد.
|
||
* قانون طلایی سلسله‌مراتب فواصل:
|
||
*فاصله بین سکشن‌ها > فاصله بین کارت‌ها > فاصله درون کارت‌ها.*
|
||
5. **چیدمان دو محیط پروژه محوری (پورتفولیو):**
|
||
* چیدمان صفحه اصلی عمومی: کانتینر وسط‌چین با حاشیه‌های تنفس‌دار در اطراف.
|
||
* چیدمان پیشخوان ادمین: ستون سایدبار ناوبری ثابت در کنار محتوای اسکرول‌شونده فرم‌ها.
|
||
6. **کال‌اوت‌های 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/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
|
||
|
||
1. **تصویر کاور درس:** `images/cover.png`
|
||
* **موضوع:** کاور مدرن با تم تیره و خط‌کش‌های شیشه‌ای دیجیتال نئونی که گرید ۸ پیکسلی و فواصل منظم المان‌ها را روی بوم وب نشان می‌دهد.
|
||
2. **مقایسه چیدمان فشرده و شلوغ با چیدمان تنفس‌دار:** `images/whitespace-comparison.png`
|
||
* **موضوع:** تصویر دونیمه‌ای: سمت چپ طراحی درهم‌رفته و ارزان در برابر سمت راست طراحی دارای فضای منفی لوکس و چشم‌نواز.
|
||
3. **خط‌کش مقیاس سیستم ۸ پیکسلی:** `images/eight-point-grid-ruler.png`
|
||
* **موضوع:** اینفوگرافیک گام‌های مقیاس: ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل همراه با معادل کلاس‌های Tailwind متناظر.
|
||
4. **فلکس‌باکس در برابر گرید در عمل:** `images/flexbox-vs-grid-usecase.png`
|
||
* **موضوع:** دیاگرام کاربردی: هدر تک‌بعدی با Flexbox در برابر گرید ۳ ستونه کارت‌های پروژه با CSS Grid.
|
||
5. **معماری کانتینر و پدینگ‌ها در Design.md:** `images/design-md-layout-anatomy.png`
|
||
* **موضوع:** اسکلت شماتیک لایه‌بندی صفحه پورتفولیو با نمایش عرض `max-w-6xl` و پدینگ‌های واکنش‌گرای حاشیه.
|
||
|
||
---
|
||
|
||
## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
|
||
|
||
1. **تیتر اصلی:** `# فاصله‌گذاری و چیدمان: معماری سکوت و فضای سفید در وب`
|
||
2. **مقدمه:** چرا فاصله میان دکمه‌ها و المان‌ها، تفاوت یک سایت حرفه‌ای با یک آشفتگی بصری است؟
|
||
3. **جدول کاور درس**
|
||
4. **جادوی فضای سفید (Negative Space):** پایان دادن به ترس از فضای خالی.
|
||
5. **سیستم گرید ۸ پیکسلی: زبان مشترک چیدمان مهندسی:**
|
||
* چرا عدد ۸؟
|
||
* مقیاس‌های کاربردی از ۴ تا ۶۴ پیکسل.
|
||
6. **باکس نکته Quera (`<details class="violet">`):** هماهنگی مادرزادی کلاس‌های فواصل در Tailwind CSS با گرید ۸ پیکسلی.
|
||
7. **کدام موتور چیدمان؟ Flexbox یا CSS Grid:**
|
||
* ناوبری و دکمه‌ها در قلمرو فلکس‌باکس.
|
||
* ماتریس کارت‌های پروژه‌ها در قلمرو گرید.
|
||
8. **اصول چیدمان کانتینرها در Design.md (getdesign.md/design-md):**
|
||
* مهار عرض با کانتینرهای استاندارد (`max-w-6xl mx-auto`).
|
||
* قانون سلسله‌مراتب فواصل در سکشن‌ها.
|
||
9. **باکس هشدار Quera (`<details class="red">`):** پرهیز از فواصل تصادفی و چسبیدن محتوا به دیواره‌های صفحه.
|
||
10. **جمع‌بندی درس‌نامه:** تثبیت چیدمان پورتفولیو و آمادگی برای تطبیق آن با ابعاد مختلف دستگاه‌ها در طراحی واکنش‌گرا.
|
||
|
||
---
|
||
|
||
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||
- [ ] ارزش فضای منفی و سفید به عنوان شاخص طراحی پریمیوم به درستی تبیین شده باشد.
|
||
- [ ] سیستم گرید ۸ پیکسلی به همراه مقادیر دقیق و معادل‌های مدرن آموزش داده شود.
|
||
- [ ] مرز تفکیک کاربرد Flexbox و CSS Grid همراه با نمودار روشن گردد.
|
||
- [ ] استانداردهای کانتینر و راهنماهای Design.md در طراحی پورتفولیو لحاظ شوند.
|