12 KiB
12 KiB
مشخصات درس‌نامه: کامپوننت‌ها، وضعیت‌ها و انیمیشن (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):
- آناتومی یک کامپوننت تعاملی زنده:
- کامپوننتی که در برابر لمس یا اشاره موس کاربر واکنشی نشان ندهد، حس یک صفحه پرینت‌شده کاغذی و بی‌کیفیت را القا می‌کند.
- پنج وضعیت حیاتی رابط کاربری (The 5 Essential States):
- ۱. پیش‌فرض (Idle / Default): ظاهر نرمال و باوقار کامپوننت در حالت استراحت.
- ۲. اشاره‌گر موس (Hover): تغییر ملایم روشنایی، هاله نورانی دور کارت یا بالا آمدن نامحسوس (
translate-y-[-2px]). - ۳. فشرده‌شدن (Active / Pressed): کوچک شدن جزئی مقیاس (
scale-[0.98]) که حس فیزیکی کلیک شدن کلید را تداعی می‌کند. - ۴. فوکوس دسترسی‌پذیری (Focus / Focus-Visible): حلقه درخشان دور اینپوت یا دکمه هنگام جابجایی با کلید Tab برای کاربران کیبورد.
- ۵. در حال بارگذاری و قفل (Loading & Disabled): چرخش اسپینر انیمیشنی، کم‌رنگ شدن دکمه (
opacity-50) و غیرفعال شدن کلیک مجدد جهت پیشگیری از ارسال تکراری فرم‌ها.
- فلسفه انیمیشن‌های میکرو (Micro-Animations):
- راز محصولات میلیاردی اپل و استارتاپ‌های پیشتاز: استفاده از کلاس طلایی
transition-all duration-200 ease-in-out. - تفاوت انیمیشن‌های چابک و سریع (زیر ۲۵۰ میلی‌ثانیه) با انیمیشن‌های نمایشی سنگین که وقت کاربر را تلف می‌کنند.
- راز محصولات میلیاردی اپل و استارتاپ‌های پیشتاز: استفاده از کلاس طلایی
- جعبه‌ابزار آیکون‌های مدرن: پیشتازی Lucide Icons:
- معرفی Lucide Icons (lucide.dev) به عنوان زبان رسمی آیکون در پروژه‌های Next.js و کامپوننت‌های shadcn/ui (آیکون‌های تمیز، هماهنگ، خطی و بسیار سبک).
- معرفی Tabler Icons به عنوان گزینه آلترناتیو قدرتمند.
- انتخاب آیکون‌های پروژه پورتفولیو:
ExternalLink(لینک دموی زنده)،Github(کدها)،Edit(ویرایش پروژه)،Trash2(حذف)، وSettings(پنل سئو).
- پیاده‌سازی تعاملات در پروژه پورتفولیوی پویا:
- کارت‌های پروژه‌ها: تغییر رنگ بوردر به سفید ملایم هنگام هاور همراه با انیمیشن نرم.
- دکمه ذخیره در پنل ادمین: تبدیل به حالت اسپینر لودینگ هنگام ثبت در دیتابیس.
- مودال جزئیات: باز شدن با محو شدن پس‌زمینه شیشه‌ای (
backdrop-blur-md).
- کال‌اوت‌های 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/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور مدرن با تم تیره که دکمه‌های شیشه‌ای شناور را با تغییر وضعیت نوری و ذرات حرکتی میکرو به صورت زنده نشان می‌دهد.
- نوار پنج وضعیت استاندارد یک دکمه:
images/five-ui-states-strip.png- موضوع: اسکرین‌شات مقایسه‌ای ۵ حالت متوالی: ۱. پیش‌فرض
\rightarrow۲. شناور (Hover)\rightarrow۳. فشرده (Active)\rightarrow۴. فوکوس\rightarrow۵. لودینگ با اسپینر.
- موضوع: اسکرین‌شات مقایسه‌ای ۵ حالت متوالی: ۱. پیش‌فرض
- نمودار سرعت و منحنی انیمیشن‌های بهینه:
images/animation-timing-curves.png- موضوع: اینفوگرافیک مقایسه‌ای: منحنی گذار چابک ۲۰۰ میلی‌ثانیه‌ای (Snappy) در برابر انیمیشن کش‌دار و کند ۱ ثانیه‌ای.
- ویترین آیکون‌های منتخب Lucide:
images/lucide-icons-showcase.png- موضوع: کادر منظم آیکون‌های پرکاربرد پورتفولیو (Github, ExternalLink, Sparkles, Folder, Settings, Lock) با کدهای استاندارد.
- کارت پروژه تعاملی در عمل:
images/interactive-card-hover-demo.png- موضوع: نمایش تصویری کارت پورتفولیو پیش از اشاره موس و پس از هاور (با افکت نور ملایم، بالا آمدن ۲ پیکسلی و آیکون لینک).
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# کامپوننت‌ها، وضعیت‌ها و انیمیشن: دمیدن جان و زندگی به اجزای صفحه - مقدمه: چرا تفاوت یک وب‌سایت مرده با یک محصول فوق‌العاده زنده، در ریزه‌کاری‌های تعاملی پنهان است؟
- جدول کاور درس
- ماشین وضعیت: پنج حالت حیاتی هر کامپوننت:
- حالت Idle، Hover، Active، Focus و Loading.
- باکس نکته Quera (
<details class="violet">): نقش حیاتی حالت Focus در دسترسی‌پذیری کار با کیبورد. - میکروانیمیشن‌ها: فرمول طلایی حرکت نرم (۲۰۰ میلی‌ثانیه):
- چرا انیمیشن‌های طولانی دشمن تجربه کاربری هستند؟
- قدرت کلاس‌های
transition-all duration-200.
- آیکون‌های ترند و مدرن وب: چرا همه از Lucide Icons استفاده می‌کنند؟:
- بررسی مزایای Lucide و Tabler در برابر فونت‌آیکون‌های قدیمی.
- جدول آیکون‌های کاربردی پروژه پورتفولیو.
- تعاملات زنده در پروژه پورتفولیوی پویا:
- رفتار کارت‌ها، فرم‌های ادمین و مودال با افکت Backdrop Blur.
- باکس هشدار Quera (
<details class="red">): انیمیشن در خدمت بازخورد است، نه نمایش سیرک! - جمع‌بندی درس‌نامه: مجهز شدن اجزای بصری و ورود به ایستگاه حیاتی یکپارچه‌سازی در سیستم طراحی (Design System).
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- پنج وضعیت استاندارد کامپوننت‌ها به روشنی و با مصادیق ملموس تفکیک شده باشند.
- استانداردهای زمانی میکروانیمیشن‌ها (زیر ۳۰۰ میلی‌ثانیه) همراه با نقد انیمیشن‌های سنگین ذکر شوند.
- مجموعه آیکون‌های Lucide Icons و نحوه استفاده از آن‌ها در پروژه معرفی گردد.
- تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند.