# مشخصات درس‌نامه: اهداف فصل پنجم (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 (`
`):** نیاز به هیچ‌گونه تسلط قبلی بر نرم‌افزارهای سنگین گرافیکی نظیر 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 (`
`):** ثبت دکمه «خواندم» و آغاز خلق تجربه کاربری. --- ## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) - [ ] اهداف کلان فصل و اهمیت عبور از AI Slop به صراحت بیان شده باشد. - [ ] تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند. - [ ] نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد.