vibe-coding-college-specs/chapters/05-design-and-ux/02-lesson-wireframing-and-visual-hierarchy/spec.md

مشخصات درس‌نامه: وایرفریم و سلسله‌مراتب بصری (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) در پرامپت‌ها:
   • آموزش ترسیم چیدمان با کاراکترهای ساده در پرامپت:

     +--------------------------------------------------+
     | [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) در متن گنجانده شود.