# مشخصات درس‌نامه: وایرفریم و سلسله‌مراتب بصری (Wireframing & Visual Hierarchy)
- **شناسه در سیلابس:** `L5.3`
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۲ دقیقه
- **پیش‌نیازهای مستقیم:** `L5.2` (مبانی تجربه کاربری و جریان کاربر)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** وایرفریم (Wireframe) چیست و چرا ترسیم اسکلت اولیه چیدمان پیش از درگیر شدن با رنگ‌ها و استایل‌های نهایی، جلوی اتلاف ده‌ها ساعت زمان را می‌گیرد.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** اصول سلسله‌مراتب بصری (Visual Hierarchy: مقیاس اندازه، وزن فونت، تضاد رنگ و الگوهای خوانش چشم نظیر الگوی Z و F) را در طراحی صفحات به کار گیرد.
- [ ] **به‌کار ببندد (Apply):** وایرفریم بخش‌های اصلی پروژه محوری (صفحه اصلی پورتفولیو، مودال جزئیات، و داشبورد پنل ادمین و سئو) را با بلوک‌های چیدمانی شفاف طراحی کند.
- [ ] **به‌کار ببندد (Apply):** تکنیک سریع «وایرفریم متنی / اسکی (ASCII Wireframe)» را برای انتقال دقیق ساختار چیدمان به ایجنت‌های هوش مصنوعی در پرامپت‌ها اجرا کند.

---

## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)

### آنچه باید پوشش داده شود (In-Scope):
1. **وایرفریم چیست؟ اسکلت ساختمان قبل از نقاشی دیوارها:**
   * وایرفریم طرحی سیاه‌وسفید و ساده از موقعیت المان‌ها، کادرها و دکمه‌ها بدون توجه به رنگ، عکس یا فونت است.
   * چرا دادن وایرفریم به هوش مصنوعی مانع از به هم ریختگی چیدمان (Layout) می‌شود.
2. **اصول حاکم بر سلسله‌مراتب بصری (Visual Hierarchy):**
   * **اندازه و مقیاس (Size & Scale):** چشمان کاربر ابتدا بزرگ‌ترین عنصر (تیتر `<h1>`) را می‌بیند.
   * **وزن و ضخامت (Weight):** کلمات بولد توجه بیشتری نسبت به کلمات معمولی جلب می‌کنند.
   * **الگوهای خوانش چشم (F-Pattern و Z-Pattern):** چشم در صفحات پرمحتوا به شکل حرف F و در لندینگ‌پیج‌های خلوت به شکل حرف Z حرکت می‌کند.
   * **لنگرگاه بصری (Visual Anchor):** عنصری شاخص (مانند تصویر چهره یا یک دکمه CTA درخشان) که نگاه را به خود قفل می‌کند.
3. **طراحی اسکلت وایرفریم پروژه محوری (پورتفولیوی پویا):**
   * **وایرفریم صفحه اصلی ویترین:**
     * نوار ناوبری بالا (لوگو/نام در چپ یا راست، لینک‌ها، دکمه ارتباط).
     * بخش هدر قهرمان (Hero Section): جایگاه آواتار/عکس، تیتر جذاب موقعیت شغلی، بیوگرافی کوتاه، دو دکمه عمل «مشاهده کارهای من» و «ارتباط».
     * ردیف نمایش تگ‌های مهارت‌ها (Skills Bar).
     * گرید کارت‌های پروژه‌ها (گرید ۳ ستونه در دسکتاپ و ۱ ستونه در موبایل).
     * فوتر ساده همراه با لینک‌های شبکه‌های اجتماعی.
   * **وایرفریم مودال جزئیات پروژه:**
     * کادر نمایش تصویر اصلی با ابعاد ۱۶:۹، تایتل، برچسب تکنولوژی‌ها، دو پاراگراف شرح چالش و راه‌حل، و دکمه‌های «مشاهده دموی زنده» و «کدهای گیت‌هاب».
   * **وایرفریم پنل مدیریت و تنظیمات سئو:**
     * سایدبار یا تب‌های بالای صفحه (پروژه‌ها | سئو | خروج).
     * تب پروژه‌ها: جدول/کارت‌های فعلی با دکمه ویرایش و حذف + دکمه شناور «افزودن پروژه جدید».
     * تب تنظیمات سئو: فرم ورودی با فیلدهای عنوان متا، توضیحات، آدرس تصویر و کارت پیش‌نمایش در گوگل.
4. **تکنیک جادویی وایرفریم متنی (ASCII/Text Wireframing) در پرامپت‌ها:**
   * آموزش ترسیم چیدمان با کاراکترهای ساده در پرامپت:
     ```text
     +--------------------------------------------------+
     | [Logo]                           [About] [Contact] |
     +--------------------------------------------------+
     |                    [Avatar]                      |
     |              I build AI products                 |
     |                 [View Work CTA]                  |
     +--------------------------------------------------+
     |  [Card 1]          [Card 2]          [Card 3]   |
     +--------------------------------------------------+
     ```
   * چرا مدل‌های زبانی این ساختار متنی را با درک ۱۰۰٪ به کدهای Flexbox و Grid ترجمه می‌کنند.
5. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: قدرت وایرفریم متنی در چت با ادیتور؛ سریع‌ترین متد هدایت چیدمان بدون نیاز به خروج از ویرایشگر کد.
   * `<details class="red">`: تله «همه عناصر جیغ می‌زنند!»؛ وقتی رنگ و اندازه همه دکمه‌ها یکسان باشد، کاربر گیج می‌شود و هیچ‌کدام را کلیک نمی‌کند.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- انتخاب کدهای رنگی هگز، گرادیان‌ها یا فونت‌ها (درس بعدی ۵.۴).
- تعیین گرید پیکسلی دقیق و فاصله‌گذاری‌های مارجین و پدینگ (درس ۵.۵).

---

## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| Wireframe | وایرفریم / اسکلت بصری | نقشه اولیه چیدمان عناصر صفحه بدون جزئیات رنگی و گرافیکی |
| Visual Hierarchy | سلسله‌مراتب بصری | ترتیب چیدمان عناصر برای هدایت چشم کاربر از مهم‌ترین به کم‌اهمیت‌ترین بخش |
| Z-Pattern / F-Pattern | الگوی حرکت Z و F | مسیر طبیعی حرکت مردمک چشم انسان هنگام مرور صفحات وب |
| Low-Fidelity (Low-Fi) | با جزئیات کم / اولیه | طرح‌های شماتیک و ساده‌ای که فقط ساختار کلی را منتقل می‌کنند |
| ASCII Wireframe | وایرفریم متنی | ترسیم جعبه‌ها و ساختار صفحه با استفاده از نمادها و حروف کیبورد در پرامپت |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور مدرن با تم تیره که اسکلت جعبه‌ای خاکستری یک وایرفریم را نشان می‌دهد که با نور نئونی به یک رابط کاربری کامل تبدیل می‌شود.
2. **سیر تکامل سه‌مرحله‌ای از وایرفریم تا خروجی نهایی:** `images/wireframe-to-ui-evolution.png`
   * **موضوع:** تصویر مقایسه‌ای سه گام: ۱. اسکلت وایرفریم اولیه (Boxes) $\rightarrow$ ۲. چیدمان ساختاریافته $\rightarrow$ ۳. رابط کاربری کامل با رنگ و تصویر.
3. **نقشه الگوهای خوانش چشم (Z-Pattern و F-Pattern):** `images/eye-reading-patterns.png`
   * **موضوع:** نمایش تصویری خط سیر نگاه کاربر روی یک صفحه لندینگ پورتفولیو با نقاط داغ (Heatmap) قرمز و زرد.
4. **وایرفریم صفحه اصلی پورتفولیوی پویا:** `images/portfolio-homepage-wireframe.png`
   * **موضوع:** اسکلت شماتیک و برچسب‌گذاری‌شده از بخش‌های ناوبری، هدر، گرید پروژه‌ها و فوتر.
5. **وایرفریم پنل مدیریت و تنظیمات سئو:** `images/admin-panel-wireframe.png`
   * **موضوع:** اسکلت داشبورد ادمین با سایدبار، کارت‌های پروژه‌ها و فرم تنظیمات سئو به همراه کارت پیش‌نمایش گوگل.

---

## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)

1. **تیتر اصلی:** `# وایرفریم و سلسله‌مراتب بصری: پی‌ریزی اسکلت قبل از نقاشی ساختمان`
2. **مقدمه:** چرا ورود مستقیم به رنگ و عکس در هوش مصنوعی، کدهایی شلخته و چیدمانی آشفته به بار می‌آورد؟
3. **جدول کاور درس**
4. **وایرفریم (Wireframe) چیست و چه فایده‌ای دارد؟:** ارزش چیدمان ساختاری پیش از جزئیات.
5. **سلسله‌مراتب بصری: چشم کاربر چگونه صفحه را می‌خواند؟:**
   * مقیاس، وزن و کنتراست.
   * الگوهای حرکتی Z و F در وب‌سایت‌ها.
6. **کالبدشکافی وایرفریم پروژه پورتفولیوی پویا:**
   * اسکلت صفحه اصلی ویترین.
   * اسکلت پنجره مودال جزئیات کارها.
   * اسکلت پیشخوان ادمین و فرم اختصاصی سئو.
7. **باکس نکته پیشرفته Quera (`<details class="violet">`):** استفاده از وایرفریم‌های متنی (ASCII) در پرامپت‌ها.
8. **اشتباهات مرگبار در سلسله‌مراتب بصری:**
   * مسابقه جیغ زدن دکمه‌ها و سردرگمی نگاه کاربر.
9. **باکس هشدار Quera (`<details class="red">`):** ایجاد یک نقطه فوکوس واحد در هر بخش از صفحه.
10. **جمع‌بندی درس‌نامه:** تکمیل معماری چیدمان و آماده شدن برای انتخاب رنگ‌ها و تایپوگرافی دوزبانه.

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] مفهوم وایرفریم و مزیت آن در پیشگیری از بازنویسی کدهای CSS تبیین شده باشد.
- [ ] اصول سلسله‌مراتب بصری و الگوهای F و Z به درستی آموزش داده شوند.
- [ ] وایرفریم‌های صفحه اصلی، مودال جزئیات، و پنل مدیریت و سئو برای پروژه محوری مستند گردند.
- [ ] شیوه پرامپت‌نویسی با وایرفریم متنی (ASCII) در متن گنجانده شود.