106 lines
12 KiB
Markdown
106 lines
12 KiB
Markdown
# مشخصات درس‌نامه: کامپوننت‌ها، وضعیت‌ها و انیمیشن (Components, Interactive States & Animations)
|
||
- **شناسه در سیلابس:** `L5.7`
|
||
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
|
||
- **نوع محتوا:** 📘 درس‌نامه متنی
|
||
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
|
||
- **پیش‌نیازهای مستقیم:** `L5.6` (طراحی واکنش‌گرا)
|
||
|
||
---
|
||
|
||
## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
|
||
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
|
||
- [ ] **درک کند (Understand):** چرا یک کامپوننت وب (دکمه، کارت، اینپوت، مودال) یک شکل گرافیکی مرده نیست، بلکه یک ماشین وضعیت (State Machine) چندحالته است.
|
||
- [ ] **تحلیل/ارزیابی کند (Evaluate):** پنج وضعیت ضروری رابط کاربری شامل: **حالت پیش‌فرض (Default)، شناور (Hover)، فشرده‌شده (Active)، فوکوس کیبورد (Focus)، و حالت در حال بارگذاری/غیرفعال (Loading/Disabled)** را بررسی و مدیریت کند.
|
||
- [ ] **به‌کار ببندد (Apply):** انیمیشن‌های میکرو و گذارهای نرم و سریع (Micro-Animations: بین ۱۵۰ تا ۲۵۰ میلی‌ثانیه) را برای زنده کردن کارت‌ها و دکمه‌های پروژه محوری پیاده کند.
|
||
- [ ] **به‌کار ببندد (Apply):** آیکون‌های مدرن، سبک و هماهنگ را از مراجع ترند جهانی به ویژه **Lucide Icons (https://lucide.dev/)** و **Tabler Icons** در اجزای پورتفولیو و پنل ادمین ادغام نماید.
|
||
- [ ] **تحلیل/ارزیابی کند (Evaluate):** خطای استفاده از انیمیشن‌های نمایشی و طولانی را تشخیص داده و مرز میان انیمیشن کاربردی با اغراق‌های آزاردهنده را رعایت کند.
|
||
|
||
---
|
||
|
||
## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
|
||
|
||
### آنچه باید پوشش داده شود (In-Scope):
|
||
1. **آناتومی یک کامپوننت تعاملی زنده:**
|
||
* کامپوننتی که در برابر لمس یا اشاره موس کاربر واکنشی نشان ندهد، حس یک صفحه پرینت‌شده کاغذی و بی‌کیفیت را القا می‌کند.
|
||
2. **پنج وضعیت حیاتی رابط کاربری (The 5 Essential States):**
|
||
* **۱. پیش‌فرض (Idle / Default):** ظاهر نرمال و باوقار کامپوننت در حالت استراحت.
|
||
* **۲. اشاره‌گر موس (Hover):** تغییر ملایم روشنایی، هاله نورانی دور کارت یا بالا آمدن نامحسوس (`translate-y-[-2px]`).
|
||
* **۳. فشرده‌شدن (Active / Pressed):** کوچک شدن جزئی مقیاس (`scale-[0.98]`) که حس فیزیکی کلیک شدن کلید را تداعی می‌کند.
|
||
* **۴. فوکوس دسترسی‌پذیری (Focus / Focus-Visible):** حلقه درخشان دور اینپوت یا دکمه هنگام جابجایی با کلید Tab برای کاربران کیبورد.
|
||
* **۵. در حال بارگذاری و قفل (Loading & Disabled):** چرخش اسپینر انیمیشنی، کم‌رنگ شدن دکمه (`opacity-50`) و غیرفعال شدن کلیک مجدد جهت پیشگیری از ارسال تکراری فرم‌ها.
|
||
3. **فلسفه انیمیشن‌های میکرو (Micro-Animations):**
|
||
* راز محصولات میلیاردی اپل و استارتاپ‌های پیشتاز: استفاده از کلاس طلایی `transition-all duration-200 ease-in-out`.
|
||
* تفاوت انیمیشن‌های چابک و سریع (زیر ۲۵۰ میلی‌ثانیه) با انیمیشن‌های نمایشی سنگین که وقت کاربر را تلف می‌کنند.
|
||
4. **جعبه‌ابزار آیکون‌های مدرن: پیشتازی Lucide Icons:**
|
||
* معرفی **Lucide Icons (lucide.dev)** به عنوان زبان رسمی آیکون در پروژه‌های Next.js و کامپوننت‌های shadcn/ui (آیکون‌های تمیز، هماهنگ، خطی و بسیار سبک).
|
||
* معرفی **Tabler Icons** به عنوان گزینه آلترناتیو قدرتمند.
|
||
* انتخاب آیکون‌های پروژه پورتفولیو: `ExternalLink` (لینک دموی زنده)، `Github` (کدها)، `Edit` (ویرایش پروژه)، `Trash2` (حذف)، و `Settings` (پنل سئو).
|
||
5. **پیاده‌سازی تعاملات در پروژه پورتفولیوی پویا:**
|
||
* کارت‌های پروژه‌ها: تغییر رنگ بوردر به سفید ملایم هنگام هاور همراه با انیمیشن نرم.
|
||
* دکمه ذخیره در پنل ادمین: تبدیل به حالت اسپینر لودینگ هنگام ثبت در دیتابیس.
|
||
* مودال جزئیات: باز شدن با محو شدن پس‌زمینه شیشه‌ای (`backdrop-blur-md`).
|
||
6. **کال‌اوت‌های Quera:**
|
||
* `<details class="violet">`: چرا Lucide Icons به انتخاب شماره یک ایجنت‌های وایب کدینگ در سال‌های اخیر تبدیل شده است؟
|
||
* `<details class="red">`: تله انیمیشن‌های سیرکی؛ انیمیشن برای دادن بازخورد است نه خودنمایی! هر انیمیشنی که بیش از ۳۰۰ میلی‌ثانیه طول بکشد، کاربر را کلافه می‌کند.
|
||
|
||
### آنچه نباید وارد آن شویم (Out-of-Scope):
|
||
- کتابخانه‌های انیمیشن سنگین سه‌بعدی نظیر Three.js یا کدهای پیچیده وب‌جی‌ال (در فصول پیشرفته بررسی می‌شود).
|
||
- رندرینگ فریم‌ورک‌های انیمیشن ری‌اکتی مثل Framer Motion به صورت عمیق (در فصل ۶ به قدر کفایت لمس خواهد شد).
|
||
|
||
---
|
||
|
||
## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
|
||
|
||
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|
||
| :--- | :--- | :--- |
|
||
| Component States | وضعیت‌های کامپوننت | حالت‌های بصری گوناگون یک عنصر در پاسخ به رویدادهای کاربر (هاور، فوکوس، لودینگ) |
|
||
| Micro-Animation | انیمیشن خرد / ظریف | پویانمایی‌های بسیار سریع و زیرکانه (زیر ۳۰۰ میلی‌ثانیه) برای ایجاد حس پویایی و زنده بودن |
|
||
| Transition Duration | مدت زمان گذار | زمان سپری‌شده برای تغییر وضعیت یک استایل بصری به وضعیت دیگر (معمولاً ۱۵۰ تا ۲۰۰ میلی‌ثانیه) |
|
||
| Lucide Icons | آیکون‌های لوسید | مجموعه آیکون‌های خطی و مدرن متن‌باز استاندارد در اکوسیستم مدرن فرانت‌اند |
|
||
| Tactile Feedback | بازخورد لمسی بصری | حسی که کاربر از فشرده‌شدن و پاسخ دکمه روی صفحه دریافت می‌کند |
|
||
|
||
---
|
||
|
||
## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
|
||
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
|
||
|
||
1. **تصویر کاور درس:** `images/cover.png`
|
||
* **موضوع:** کاور مدرن با تم تیره که دکمه‌های شیشه‌ای شناور را با تغییر وضعیت نوری و ذرات حرکتی میکرو به صورت زنده نشان می‌دهد.
|
||
2. **نوار پنج وضعیت استاندارد یک دکمه:** `images/five-ui-states-strip.png`
|
||
* **موضوع:** اسکرین‌شات مقایسه‌ای ۵ حالت متوالی: ۱. پیش‌فرض $\rightarrow$ ۲. شناور (Hover) $\rightarrow$ ۳. فشرده (Active) $\rightarrow$ ۴. فوکوس $\rightarrow$ ۵. لودینگ با اسپینر.
|
||
3. **نمودار سرعت و منحنی انیمیشن‌های بهینه:** `images/animation-timing-curves.png`
|
||
* **موضوع:** اینفوگرافیک مقایسه‌ای: منحنی گذار چابک ۲۰۰ میلی‌ثانیه‌ای (Snappy) در برابر انیمیشن کش‌دار و کند ۱ ثانیه‌ای.
|
||
4. **ویترین آیکون‌های منتخب Lucide:** `images/lucide-icons-showcase.png`
|
||
* **موضوع:** کادر منظم آیکون‌های پرکاربرد پورتفولیو (Github, ExternalLink, Sparkles, Folder, Settings, Lock) با کدهای استاندارد.
|
||
5. **کارت پروژه تعاملی در عمل:** `images/interactive-card-hover-demo.png`
|
||
* **موضوع:** نمایش تصویری کارت پورتفولیو پیش از اشاره موس و پس از هاور (با افکت نور ملایم، بالا آمدن ۲ پیکسلی و آیکون لینک).
|
||
|
||
---
|
||
|
||
## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
|
||
|
||
1. **تیتر اصلی:** `# کامپوننت‌ها، وضعیت‌ها و انیمیشن: دمیدن جان و زندگی به اجزای صفحه`
|
||
2. **مقدمه:** چرا تفاوت یک وب‌سایت مرده با یک محصول فوق‌العاده زنده، در ریزه‌کاری‌های تعاملی پنهان است؟
|
||
3. **جدول کاور درس**
|
||
4. **ماشین وضعیت: پنج حالت حیاتی هر کامپوننت:**
|
||
* حالت Idle، Hover، Active، Focus و Loading.
|
||
5. **باکس نکته Quera (`<details class="violet">`):** نقش حیاتی حالت Focus در دسترسی‌پذیری کار با کیبورد.
|
||
6. **میکروانیمیشن‌ها: فرمول طلایی حرکت نرم (۲۰۰ میلی‌ثانیه):**
|
||
* چرا انیمیشن‌های طولانی دشمن تجربه کاربری هستند؟
|
||
* قدرت کلاس‌های `transition-all duration-200`.
|
||
7. **آیکون‌های ترند و مدرن وب: چرا همه از Lucide Icons استفاده می‌کنند؟:**
|
||
* بررسی مزایای Lucide و Tabler در برابر فونت‌آیکون‌های قدیمی.
|
||
* جدول آیکون‌های کاربردی پروژه پورتفولیو.
|
||
8. **تعاملات زنده در پروژه پورتفولیوی پویا:**
|
||
* رفتار کارت‌ها، فرم‌های ادمین و مودال با افکت Backdrop Blur.
|
||
9. **باکس هشدار Quera (`<details class="red">`):** انیمیشن در خدمت بازخورد است، نه نمایش سیرک!
|
||
10. **جمع‌بندی درس‌نامه:** مجهز شدن اجزای بصری و ورود به ایستگاه حیاتی یکپارچه‌سازی در سیستم طراحی (Design System).
|
||
|
||
---
|
||
|
||
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||
- [ ] پنج وضعیت استاندارد کامپوننت‌ها به روشنی و با مصادیق ملموس تفکیک شده باشند.
|
||
- [ ] استانداردهای زمانی میکروانیمیشن‌ها (زیر ۳۰۰ میلی‌ثانیه) همراه با نقد انیمیشن‌های سنگین ذکر شوند.
|
||
- [ ] مجموعه آیکون‌های Lucide Icons و نحوه استفاده از آن‌ها در پروژه معرفی گردد.
|
||
- [ ] تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند.
|