121 lines
12 KiB
Markdown
121 lines
12 KiB
Markdown
# مشخصات درس‌نامه: وایرفریم و سلسله‌مراتب بصری (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) در متن گنجانده شود.
|