83 lines
8.1 KiB
Markdown
83 lines
8.1 KiB
Markdown
# مشخصات درس‌نامه: اهداف فصل پنجم (Chapter Goals)
|
||
- **شناسه در سیلابس:** `L5.1`
|
||
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
|
||
- **نوع محتوا:** 📘 درس‌نامه متنی
|
||
- **زمان تقریبی مطالعه:** ۵ دقیقه
|
||
- **پیش‌نیازهای مستقیم:** `L4.9` (فهرست تسک و ترتیب ساخت)
|
||
|
||
---
|
||
|
||
## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
|
||
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
|
||
- [ ] **درک کند (Understand):** چرا طراحی تجربه کاربری (UX) و هویت بصری مدرن، وجه تمایز محصولات حرفه‌ای و پرفروش از نرم‌افزارهای زشت، بی‌کیفیت و کلیشه‌ای ساخته‌شده با هوش مصنوعی (AI Slop) است.
|
||
- [ ] **درک کند (Understand):** نقشه راه ۸ درس‌نامه کاربردی این فصل (از اصول UX و جریان کاربر تا وایرفریم، تایپوگرافی دوزبانه، رنگ‌بندی، سیستم طراحی، انیمیشن‌ها و منابع الهام طراحان مدرن) چگونه چیده شده است.
|
||
- [ ] **درک کند (Understand):** پایگاه‌های دانش و مراجع ترند جهانی معرفی‌شده در این فصل (Aura Build، Design.md، 21st.dev، Mobbin و Curated.design) چگونه در قامت ابزارهای روزمره یک وایب کدر به کار گرفته می‌شوند.
|
||
- [ ] **تحلیل/ارزیابی کند (Evaluate):** چگونگی پیاده‌سازی هویت بصری شیک، مینیمال و استاندارد برای پروژه محوری دوره (پورتفولیوی شخصی پویا همراه با پنل ادمین و سئو) را بررسی و پیش‌بینی کند.
|
||
|
||
---
|
||
|
||
## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
|
||
|
||
### آنچه باید پوشش داده شود (In-Scope):
|
||
1. **ورود به دنیای طراحی مدرن محصول:**
|
||
* هوش مصنوعی بدون هدایت بصری دقیق، وب‌سایت‌هایی بی‌روح با رنگ‌های تند و نامتعادل می‌سازد؛ در این فصل هنر چیدمان و سلیقه بصری را به ایجنت تزریق می‌کنیم.
|
||
2. **مرور سرفصل‌های فصل ۵:**
|
||
* درس ۵.۲: مبانی تجربه کاربری، جریان کاربر (User Flow) و استفاده از الگوهای مرجع Mobbin.
|
||
* درس ۵.۳: وایرفریمینگ، اولویت‌بندی بصری و ساختار صفحات اصلی و پنل ادمین.
|
||
* درس ۵.۴: تایپوگرافی استاندارد دوزبانه (فونت فارسی وزیرمتن + فونت انگلیسی Inter) و پالت‌های رنگی مدرن با Aura Build.
|
||
* درس ۵.۵: هنر فاصله‌گذاری، گرید ۸ پیکسلی، فضای منفی و راهنمای ساختار چیدمان در Design.md.
|
||
* درس ۵.۶: اصول طراحی واکنش‌گرا (Responsive) و نقاط شکست موبایل و دسکتاپ.
|
||
* درس ۵.۷: کامپوننت‌های تعاملی، وضعیت‌ها (Hover, Focus, Loading) و آیکون‌های ترند Lucide و Tabler.
|
||
* درس ۵.۸: سیستم طراحی (Design System)؛ استاندارد توکن‌های shadcn/ui و قواعد سیستم‌های طراحی در Aura.
|
||
* درس ۵.۹: ایده‌پردازی با هوش مصنوعی و پرهیز قاطع از AI Slop با مراجع پیشروی 21st.dev و Curated.design.
|
||
3. **تداوم پروژه محوری (پورتفولیوی پویا):**
|
||
* خلق ظاهر بصری و هویت برند اختصاصی برای ویترین نمونه‌کارها، صفحه لاگین و داشبورد ادمین.
|
||
4. **کال‌اوت آرامش‌بخش Quera (`<details class="green">`):** نیاز به هیچ‌گونه تسلط قبلی بر نرم‌افزارهای سنگین گرافیکی نظیر Photoshop نیست؛ ما با تفکر سیستماتیک و کدهای طراحی پیش خواهیم رفت.
|
||
|
||
### آنچه نباید وارد آن شویم (Out-of-Scope):
|
||
- آموزش برنامه‌نویسی ری‌اکت و هوک‌های کدنویسی (مبحث فصل ۶).
|
||
- کدنویسی اتصالات بک‌اند و دیتابیس (فصل ۷).
|
||
|
||
---
|
||
|
||
## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
|
||
|
||
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|
||
| :--- | :--- | :--- |
|
||
| Visual Identity | هویت بصری | مجموعه هماهنگ رنگ‌ها، فونت‌ها، فاصله‌ها و سبک ظاهری که شخصیت محصول را می‌سازد |
|
||
| AI Slop | زباله / شلختگی هوش مصنوعی | طراحی‌های شلوغ، بی‌سلیقه، رنگ‌های ناهماهنگ و کلیشه‌ای تولیدشده بدون هدایت انسانی |
|
||
| User Flow | مسیر / جریان کاربر | زنجیره مراحلی که کاربر از لحظه ورود تا رسیدن به هدف نهایی در وب‌سایت طی می‌کند |
|
||
| Design Tokens | توکن‌های طراحی | متغیرهای استاندارد مرکزی برای رنگ‌ها، فاصله‌ها و شعاع گوشه‌ها در سیستم طراحی |
|
||
|
||
---
|
||
|
||
## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
|
||
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
|
||
|
||
1. **تصویر کاور درس:** `images/cover.png`
|
||
* **موضوع:** کاور با تم تیره و خطوط درخشان طراحی محصول که تبدیل یک چیدمان اولیه به یک رابط کاربری مینیمال، لوکس و مدرن را نشان می‌دهد.
|
||
2. **نقشه راه فصل ۵:** `images/chapter-5-roadmap.png`
|
||
* **موضوع:** اینفوگرافیک گام‌به‌گام از جریان کاربر $\rightarrow$ وایرفریم $\rightarrow$ تایپوگرافی و رنگ $\rightarrow$ چیدمان $\rightarrow$ واکنش‌گرایی $\rightarrow$ کامپوننت‌ها $\rightarrow$ سیستم طراحی $\rightarrow$ مبارزه با AI Slop.
|
||
3. **جعبه‌ابزار مراجع مدرن طراحی:** `images/modern-design-resources.png`
|
||
* **موضوع:** نمایش تصویری لوگوها و مراجع معرفی‌شده: 21st.dev، Mobbin، Curated.design، Aura Build و Design.md.
|
||
|
||
---
|
||
|
||
## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
|
||
|
||
1. **تیتر اصلی:** `# اهداف فصل پنجم: طراحی تجربه و هویت محصول`
|
||
2. **مقدمه کوتاه:** چرا ظاهر و حس و حال (Look & Feel) محصول، زبان ناخودآگاه اعتماد کاربر است؟
|
||
3. **جدول کاور درس**
|
||
4. **سرفصل‌های کلیدی فصل در یک نگاه:** مرور ۸ گام طراحی محصول از نقشه تا جزئیات بصری.
|
||
5. **جدول نقشه راه یادگیری فصل**
|
||
6. **معرفی مراجع ترند طراحی وب (21st.dev, Mobbin, Curated.design):** منابعی که سلیقه شما و ایجنت را متحول می‌کنند.
|
||
7. **پورتفولیوی پویا در آینه طراحی شیک:** آماده‌سازی ویترین شخصی برای ورود به مرحله ساخت.
|
||
8. **کال‌اوت اطمینان‌بخش Quera (`<details class="green">`):** ثبت دکمه «خواندم» و آغاز خلق تجربه کاربری.
|
||
|
||
---
|
||
|
||
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||
- [ ] اهداف کلان فصل و اهمیت عبور از AI Slop به صراحت بیان شده باشد.
|
||
- [ ] تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند.
|
||
- [ ] نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد.
|