diff --git a/chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md b/chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md new file mode 100644 index 0000000..33d7177 --- /dev/null +++ b/chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md @@ -0,0 +1,82 @@ +# مشخصات درس‌نامه: اهداف فصل پنجم (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 به صراحت بیان شده باشد. +- [ ] تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند. +- [ ] نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد. diff --git a/chapters/05-design-and-ux/01-lesson-ux-basics-and-user-flow/spec.md b/chapters/05-design-and-ux/01-lesson-ux-basics-and-user-flow/spec.md new file mode 100644 index 0000000..2f2bc47 --- /dev/null +++ b/chapters/05-design-and-ux/01-lesson-ux-basics-and-user-flow/spec.md @@ -0,0 +1,99 @@ +# مشخصات درس‌نامه: مبانی تجربه کاربری و جریان کاربر (UX Basics & User Flows) +- **شناسه در سیلابس:** `L5.2` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۲ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.1` (اهداف فصل پنجم) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** تفاوت ماهوی تجربه کاربری (UX - حس و کارکرد منطقی) با رابط کاربری (UI - ظاهر و جلوه‌های بصری) چیست. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** قوانین طلایی تجربه کاربری (به ویژه قانون یاکوب و قانون هیک) را درک کرده و بداند چرا تبعیت از الگوهای رایج وب، اصطکاک ذهن کاربر را از بین می‌برد. +- [ ] **به‌کار ببندد (Apply):** مسیر گام‌به‌گام کاربر (User Flow) را برای دو سناریوی اصلی پروژه محوری (جریان بازدیدکننده از هدر تا ارتباط، و جریان ادمین از لاگین تا مدیریت سئو) ترسیم کند. +- [ ] **به‌کار ببندد (Apply):** از پایگاه داده و مرجع جهانی **Mobbin (https://mobbin.com/)** برای تحلیل و استخراج الگوهای واقعی طراحی جریان کاربری (داشبوردها، فرم‌های ورود و صفحات تنظیمات) استفاده کند. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **کالبدشکافی کوه یخ تجربه کاربری (The UX Iceberg):** + * رابط کاربری (UI) تنها بخش بیرونی و پیدای کوه یخ است؛ در حالی که تجربه کاربری (UX) بخش عظیم زیر آب است که تعیین می‌کند آیا محصول کارآمد، ساده و لذت‌بخش است یا خیر. +2. **قوانین بنیادین UX برای هدایت هوش مصنوعی:** + * **قانون یاکوب (Jakob's Law):** کاربران بیشتر زمان خود را در سایر وب‌سایت‌ها می‌گذرانند؛ بنابراین انتظار دارند سایت شما هم از الگوهای شناخته‌شده پیروی کند (منو بالا یا گوشه، دکمه‌های واضح، اسکرول عمودی روان). + * **قانون هیک (Hick's Law):** زمان تصمیم‌گیری کاربر با افزایش تعداد انتخاب‌ها به صورت لگاریتمی بالا می‌رود؛ هرچه گزینه‌ها متمرکزتر باشند، اقدام سریع‌تر رخ می‌دهد. + * **قانون فیتس (Fitts's Law):** دکمه‌های اصلی و اقدامات کلیدی (CTA) باید اندازه مناسب داشته و در دسترس‌ترین نقطه صفحه باشند. +3. **طراحی جریان کاربر (User Flow) در پروژه محوری (پورتفولیوی پویا):** + * **جریان ۱: سفر بازدیدکننده و کارفرما (Visitor Journey):** + * ورود به صفحه اصلی $\rightarrow$ نگاه سریع به بیو و موقعیت شغلی در هدر $\rightarrow$ فیلتر پروژه‌ها با کلیک روی تگ مهارت $\rightarrow$ باز کردن مودال جزئیات پروژه و مشاهده تصاویر $\rightarrow$ کلیک روی دکمه تماس / لینکدین. + * **جریان ۲: سفر صاحب پورتفولیو در پنل مدیریت (Admin Journey):** + * رفتن به آدرس `/admin` $\rightarrow$ صفحه ورود مینیمال با پسورد $\rightarrow$ مشاهده لیست پروژه‌ها در داشبورد $\rightarrow$ کلیک دکمه «پروژه جدید» $\rightarrow$ پر کردن فرم و ذخیره $\rightarrow$ سوییچ به تب «تنظیمات سئو» $\rightarrow$ ویرایش متاتگ‌ها و خروج ایمن. +4. **استفاده از مرجع طلایی Mobbin (https://mobbin.com/):** + * معرفی Mobbin به عنوان بزرگ‌ترین کتابخانه و اسکرین‌شات از جریان‌های کاربری واقعی موفق‌ترین نرم‌افزارهای دنیا. + * شیوه جستجوی فلوهای آماده: جستجوی دسته‌بندی‌های Dashboard، Settings، و Authentication در Mobbin برای الهام گرفتن الگوهای استاندارد و ارائه آن به ایجنت هوش مصنوعی. +5. **کال‌اوت‌های Quera:** + * `
`: قانون یاکوب در وایب کدینگ؛ چرا خلاقیت‌های نامتعارف و عجیب در چیدمان ناوبری کاربر را فراری می‌دهد؟ + * `
`: تله اصطکاک بیهوده (Friction Trap)؛ هرگز کاربر را مجبور به پیمودن بیش از ۳ مرحله برای دیدن نمونه‌کارها یا ارتباط با خود نکنید. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- طراحی وایرفریم‌های بصری پیکسلی یا چیدمان رنگی (درس ۵.۳ و ۵.۴). +- کدنویسی کامپوننت‌های روتینگ در Next.js (فصل ۶). + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| User Experience (UX) | تجربه کاربری | میزان سادگی، حس روانی و رضایت کاربر در حین تعامل با یک نرم‌افزار | +| User Flow | جریان / مسیر کاربر | نمودار متوالی مراحل و صفحاتی که کاربر برای رسیدن به یک هدف مشخص طی می‌کند | +| Jakob's Law | قانون یاکوب | اصل روان‌شناسی که می‌گوید کاربران رفتارهای نرم‌افزار شما را مشابه سایت‌های مشهور دیگر انتظار دارند | +| Hick's Law | قانون هیک | قاعده‌ای که بیان می‌کند هرچه تعداد گزینه‌های منو و تصمیم‌ها بیشتر شود، کاربر گیج‌تر و کُندتر می‌شود | +| Call to Action (CTA) | دعوت به اقدام | دکمه یا المان برجسته‌ای که کاربر را به انجام عمل اصلی مورد نظر هدایت می‌کند | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره که نقشه جریان کاربر را با فلش‌های نئونی متصل به صفحات مختلف پورتفولیو به صورت سه‌بعدی نمایش می‌دهد. +2. **کوه یخ تجربه کاربری (UX در برابر UI):** `images/ux-vs-ui-iceberg.png` + * **موضوع:** اینفوگرافیک کوه یخ: قله کوچک بیرون از آب (رنگ و دکمه‌های UI) در برابر پایه‌های عمیق زیر آب (معماری، جریان کاربر، دسترسی‌پذیری و حس راحتی). +3. **نمودار جریان کاربر بازدیدکننده پورتفولیو:** `images/visitor-user-flowchart.png` + * **موضوع:** فلوچارت گام‌به‌گام: ورود $\rightarrow$ بررسی هدر $\rightarrow$ فیلتر دسته‌بندی $\rightarrow$ مودال جزئیات $\rightarrow$ کلیک دکمه CTA تماس. +4. **نمودار جریان ادمین و تنظیمات سئو:** `images/admin-user-flowchart.png` + * **موضوع:** فلوچارت گام‌به‌گام: روت `/admin` $\rightarrow$ صفحه لاگین $\rightarrow$ پیشخوان مدیریت $\rightarrow$ تب تنظیمات سئو $\rightarrow$ تایید نهایی. +5. **مرجع Mobbin و تحلیل جریان‌های استاندارد:** `images/mobbin-pattern-reference.png` + * **موضوع:** نمایی از جستجوی جریان‌های واقعی در پلتفرم Mobbin و تطبیق آن با ساختار پورتفولیوی شخصی. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# مبانی تجربه کاربری و User Flow: طراحی مسیر بدون دست‌انداز` +2. **مقدمه:** چرا یک ظاهر زیبا بدون مسیر کاربری درست، شبیه خودرویی لوکس بدون فرمان است؟ +3. **جدول کاور درس** +4. **تفاوت بنیادین UX با UI (کالبدشکافی کوه یخ):** حس کارکرد در برابر جلوه بصری. +5. **سه قانون طلایی تجربه کاربری که ایجنت‌ها باید بدانند:** + * قانون یاکوب (استانداردهای آشنا). + * قانون هیک (کاهش گزینه‌ها). + * قانون فیتس (اندازه و دسترسی دکمه‌ها). +6. **باکس نکته Quera (`
`):** چرایی اهمیت قانون یاکوب در طراحی بدون اصطکاک. +7. **طراحی جریان‌های کاربر پروژه پورتفولیوی پویا:** + * مسیر روان بازدیدکننده و کارفرما. + * مسیر امن و کاربردی صاحب پورتفولیو در پنل ادمین و سئو. +8. **جعبه‌ابزار حرفه‌ای‌ها: بررسی الگوهای زنده در Mobbin (mobbin.com):** + * نحوه ایده گرفتن از جریان‌های اپ‌های مطرح جهان. +9. **باکس هشدار Quera (`
`):** پرهیز از ایجاد اصطکاک و کلیک‌های غیرضروری در مسیر کاربر. +10. **جمع‌بندی درس‌نامه:** تثبیت جریان‌های شفاف پروژه و آماده‌سازی برای وایرفریمینگ و سلسله‌مراتب بصری. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] تمایز میان UX و UI به شکل کاربردی و قابل فهم تشریح شده باشد. +- [ ] قوانین تجربه کاربری (به ویژه یاکوب و هیک) در زمینه نرم‌افزار واقعی تحلیل گردند. +- [ ] جریان‌های کاربر برای هر دو بخش بازدیدکننده و ادمین پورتفولیو به طور کامل ترسیم شوند. +- [ ] پلتفرم معتبر Mobbin و نحوه بهره‌برداری از الگوهای آن معرفی شده باشد. diff --git a/chapters/05-design-and-ux/02-lesson-wireframing-and-visual-hierarchy/spec.md b/chapters/05-design-and-ux/02-lesson-wireframing-and-visual-hierarchy/spec.md new file mode 100644 index 0000000..d921ae4 --- /dev/null +++ b/chapters/05-design-and-ux/02-lesson-wireframing-and-visual-hierarchy/spec.md @@ -0,0 +1,120 @@ +# مشخصات درس‌نامه: وایرفریم و سلسله‌مراتب بصری (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):** چشمان کاربر ابتدا بزرگ‌ترین عنصر (تیتر `

`) را می‌بیند. + * **وزن و ضخامت (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:** + * `
`: قدرت وایرفریم متنی در چت با ادیتور؛ سریع‌ترین متد هدایت چیدمان بدون نیاز به خروج از ویرایشگر کد. + * `
`: تله «همه عناصر جیغ می‌زنند!»؛ وقتی رنگ و اندازه همه دکمه‌ها یکسان باشد، کاربر گیج می‌شود و هیچ‌کدام را کلیک نمی‌کند. + +### آنچه نباید وارد آن شویم (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 (`
`):** استفاده از وایرفریم‌های متنی (ASCII) در پرامپت‌ها. +8. **اشتباهات مرگبار در سلسله‌مراتب بصری:** + * مسابقه جیغ زدن دکمه‌ها و سردرگمی نگاه کاربر. +9. **باکس هشدار Quera (`
`):** ایجاد یک نقطه فوکوس واحد در هر بخش از صفحه. +10. **جمع‌بندی درس‌نامه:** تکمیل معماری چیدمان و آماده شدن برای انتخاب رنگ‌ها و تایپوگرافی دوزبانه. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] مفهوم وایرفریم و مزیت آن در پیشگیری از بازنویسی کدهای CSS تبیین شده باشد. +- [ ] اصول سلسله‌مراتب بصری و الگوهای F و Z به درستی آموزش داده شوند. +- [ ] وایرفریم‌های صفحه اصلی، مودال جزئیات، و پنل مدیریت و سئو برای پروژه محوری مستند گردند. +- [ ] شیوه پرامپت‌نویسی با وایرفریم متنی (ASCII) در متن گنجانده شود. diff --git a/chapters/05-design-and-ux/03-lesson-typography-and-color-palette/spec.md b/chapters/05-design-and-ux/03-lesson-typography-and-color-palette/spec.md new file mode 100644 index 0000000..8298cbb --- /dev/null +++ b/chapters/05-design-and-ux/03-lesson-typography-and-color-palette/spec.md @@ -0,0 +1,110 @@ +# مشخصات درس‌نامه: تایپوگرافی و پالت رنگی (Typography & Color Palette) +- **شناسه در سیلابس:** `L5.4` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۵ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.3` (وایرفریم و سلسله‌مراتب بصری) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** چرا انتخاب تایپوگرافی استاندارد و پالت رنگی هماهنگ، بیش از ۸۰ درصد احساس حرفه‌ای بودن و اعتماد مخاطب به محصول را شکل می‌دهد. +- [ ] **به‌کار ببندد (Apply):** ترکیب دوزبانه استاندارد وب نوین فارسی یعنی جفت تایپ‌فیس **وزیرمتن (Vazirmatn)** برای متون فارسی و **اینتر (Inter)** برای اعداد و متون انگلیسی را در استایل‌های پروژه پیکربندی کند. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** قانون طلایی ۶۰-۳۰-۱۰ در توزیع رنگ‌ها (۶۰٪ رنگ زمینه، ۳۰٪ سطوح و کارت‌ها، ۱۰٪ رنگ شاخص اکشن) را درک و اجرا نماید. +- [ ] **به‌کار ببندد (Apply):** از سیستم‌های رنگی و توکن‌های پالت در پایگاه **Aura Design Systems (https://www.aura.build/design-systems)** برای استخراج رنگ‌های معنایی (Semantic Colors) پروژه محوری (پورتفولیوی پویا) استفاده کند. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** استانداردهای کنتراست و خوانایی متن در برابر پس‌زمینه (WCAG AA) را بررسی کرده و از خطاهای شایع کنتراست ضعیف در تم تیره اجتناب کند. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **تایپوگرافی: زبان نادیده اما قدرتمند محصول:** + * وب بیش از هر چیز از متن تشکیل شده است؛ فونت بد تمام زحمات برنامه‌نویسی را نابود می‌کند. + * چرا نباید از فونت‌های پیش‌فرض ویندوز نظیر Tahoma یا Arial در محصولات مدرن استفاده شود. +2. **فرمول طلایی تایپوگرافی دوزبانه (Bilingual Typography):** + * **فونت فارسی:** استفاده از فونت استاندارد و متن‌باز **وزیرمتن (Vazirmatn)** به عنوان زیباترین و خواناترین فونت وب فارسی. + * **فونت انگلیسی و کد:** استفاده از فونت بین‌المللی **Inter** برای تگ‌های فنی، اسامی پکیج‌ها و آدرس‌ها. + * تنظیم ارتفاع خطوط (Line-Height): چرایی نیاز خط فارسی به ارتفاع بیشتر (حداقل ۱.۷ تا ۱.۸) نسبت به متن انگلیسی برای راحتی چشم. + * مقیاس تایپوگرافی: تیتر یک (۳۶ پیکسل - بولد)، تیتر دو (۲۸ پیکسل)، متن بدنه (۱۶ پیکسل)، برچسب‌ها (۱۴ پیکسل). +3. **قانون توزیع رنگ‌ها (قانون ۶۰-۳۰-۱۰):** + * **۶۰٪ رنگ بستر و پس‌زمینه (Dominant Base):** تم تیره مدرن با خاکستری‌های عمیق (`zinc-950` یا `slate-950`) نه سیاه خالص مطلق (`#000000`). + * **۳۰٪ رنگ ساختار و کارت‌ها (Secondary Surfaces):** رنگ کارت‌ها، سایدبار، بوردرها و المان‌های کادربندی (`zinc-900` با خطوط ملایم). + * **۱۰٪ رنگ شاخص و متمایز (Accent / Action):** رنگ دکمه‌های اصلی و اقدامات مهم با رنگ‌های پرانرژی (نظیر زمردی `#10B981`، بنفش نئونی `#8B5CF6` یا آبی کبالت). +4. **استفاده از پلتفرم Aura Design Systems (https://www.aura.build/design-systems):** + * آشنایی با الگوهای رنگی و تم‌های مدرن Aura. + * تبدیل کدهای رنگی به توکن‌های معنایی: + * `--background` (پس‌زمینه) + * `--foreground` (رنگ متن اصلی) + * `--primary` (رنگ اصلی دکمه‌ها) + * `--muted` (متن‌های ثانویه و فرعی) + * `--card` (رنگ کارت‌های پروژه‌ها) +5. **خوانایی و استانداردهای دسترس‌پذیری (WCAG Contrast):** + * خطای بسیار رایج: استفاده از خاکستری خیلی تیره روی پس‌زمینه تیره که در گوشی زیر نور آفتاب اصلاً دیده نمی‌شود. + * چگونگی رعایت حداقل نسبت کنتراست ۴.۵ به ۱ برای متون بدنه. +6. **کال‌اوت‌های Quera:** + * `
`: چرا ترکیب Vazirmatn و Inter به استاندارد ملی استارتاپ‌های پیشروی ایرانی تبدیل شده است؟ + * `
`: تله رنگ سیاه مطلق (`#000000`)؛ چرا استفاده از رنگ‌های تیره با ته‌مایه سرمه‌ای یا نوک‌مدادی عمیق بسیار لوکس‌تر از سیاه خالص به چشم می‌آید. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- مباحث انیمیشن‌های ترنزیشن یا وضعیت هوور دکمه‌ها (درس ۵.۷). +- کانفیگ کامل فایل `tailwind.config.ts` (در فصل ۶ به صورت عملی اجرا می‌شود). + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| Typography Hierarchy | سلسله‌مراتب تایپوگرافی | نظام هماهنگ اندازه‌ها، ضخامت‌ها و فواصل متنی برای خوانایی و اولویت بصری | +| 60-30-10 Rule | قانون ۶۰-۳۰-۱۰ | اصل تقسیم متعادل رنگ‌ها برای جلوگیری از شلوغی و آشفتگی بصری در طراحی | +| Accent Color | رنگ شاخص / تاکید | رنگ زنده و متفاوتی که نگاه کاربر را مستقیماً به سمت دکمه‌ها و لینک‌های اصلی می‌کشاند | +| Semantic Color Tokens | توکن‌های رنگی معنایی | نام‌گذاری متغیرهای رنگ بر اساس کاربرد آن‌ها در سیستم (مانند Primary یا Danger) نه بر اساس نام رنگ | +| WCAG Contrast Ratio | نسبت کنتراست استاندارد وب | حداقل میزان تمایز روشنایی میان متن و زمینه برای تضمین خوانایی آسان برای تمام کاربران | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره که تایپوگرافی درخشان دوزبانه وزیرمتن و اینتر را در کنار پالت رنگی استخراج‌شده از Aura نشان می‌دهد. +2. **جفت طلایی تایپوگرافی دوزبانه:** `images/bilingual-font-pairing.png` + * **موضوع:** اسکرین‌شات مقایسه‌ای متون تیتر و بدنه با فونت وزیرمتن فارسی و تگ‌های تکنولوژی با فونت اینتر انگلیسی. +3. **نمودار دایره‌ای قانون ۶۰-۳۰-۱۰:** `images/sixty-thirty-ten-diagram.png` + * **موضوع:** اینفوگرافیک دایره‌ای ۳ تکه: ۶۰٪ زمینه خاکستری تیره، ۳۰٪ کارت‌های شیشه‌ای و المان‌ها، ۱۰٪ دکمه‌های زمردی شاخص. +4. **توکن‌های رنگی در Aura Design Systems:** `images/aura-color-tokens.png` + * **موضوع:** نمایی از پالت رنگی استخراج‌شده از Aura.build و نگاشت آن به توکن‌های CSS تم تیره. +5. **کنتراست صحیح در برابر غلط:** `images/contrast-good-vs-bad.png` + * **موضوع:** مقایسه دو کادر: کادر اشتباه با متن محو و ناخوانا در برابر کادر استاندارد با کنتراست تاییدشده WCAG. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# تایپوگرافی و پالت رنگی: بخشیدن شخصیت و روح به کدهای وب` +2. **مقدمه:** چرا یک تغییر کوچک در فونت و رنگ، حس یک سایت آماتور را به یک محصول چند هزار دلاری تبدیل می‌کند؟ +3. **جدول کاور درس** +4. **تایپوگرافی دوزبانه مدرن: پادشاهی وزیرمتن و اینتر:** + * چرا Vazirmatn بهترین انتخاب وب فارسی است؟ + * نقش Inter در نمایش جذاب کدهای انگلیسی و اعداد. + * تنظیم خطوط و مقیاس‌های متن. +5. **باکس نکته Quera (`
`):** راز هماهنگی فونت‌های دوزبانه در محصولات ایرانی و بین‌المللی. +6. **قانون ۶۰-۳۰-۱۰: فرمول جادویی طراحان برای ترکیب رنگ‌ها:** + * ۶۰ درصد زمینه. + * ۳۰ درصد سطوح و کارت‌ها. + * ۱۰ درصد رنگ اقدام و دکمه‌ها. +7. **استفاده از مراجع ترند: پالت‌های رنگی در Aura (aura.build/design-systems):** + * توکن‌های معنایی و ایجاد تم تیره بدون رنگ سیاه خالص. +8. **استانداردهای کنتراست و خوانایی متن (WCAG AA):** آزمون دید در شبکه‌های تیره. +9. **باکس هشدار Quera (`
`):** فرار از رنگ‌های سیاه مطلق (`#000000`) و رنگ‌های بسیار تند و خسته‌کننده چشم. +10. **جمع‌بندی درس‌نامه:** تثبیت فونت‌ها و رنگ‌های پورتفولیوی پویا و ورود به هنر فاصله‌گذاری و چیدمان. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] جفت فونت دوزبانه وزیرمتن و اینتر به عنوان استاندارد تایپوگرافی تبیین شده باشد. +- [ ] قانون ۶۰-۳۰-۱۰ برای تم تیره پروژه با مقادیر مشخص آموزش داده شود. +- [ ] مرجع Aura Design Systems و کاربرد توکن‌های معنایی در متن معرفی شده باشد. +- [ ] اصول کنتراست رنگ‌ها و خطرات متون ناخوانا همراه با تصویرسازی بررسی گردد. diff --git a/chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md b/chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md new file mode 100644 index 0000000..618f205 --- /dev/null +++ b/chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md @@ -0,0 +1,106 @@ +# مشخصات درس‌نامه: فاصله‌گذاری و چیدمان (Spacing, Grid & Layout Systems) +- **شناسه در سیلابس:** `L5.5` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۲ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.4` (تایپوگرافی و پالت رنگی) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** قدرت جادویی «فضای منفی یا فضای سفید (Whitespace)» در خلق حس لوکس، خوانایی بالا و تمرکز ذهنی کاربر را درک کند. +- [ ] **به‌کار ببندد (Apply):** استاندارد جهانی **سیستم گرید ۸ پیکسلی (8pt Grid System)** را در تنظیم پدینگ‌ها، مارجین‌ها و فواصل المان‌ها پیاده‌سازی کند. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** زمان استفاده از چیدمان تک‌بعدی فلکس‌باکس (Flexbox) در برابر چیدمان دوبعدی گرید (CSS Grid) را تفکیک و انتخاب کند. +- [ ] **به‌کار ببندد (Apply):** اصول استاندارد کانتینرها و فواصل سکشن‌ها را بر اساس راهنماهای **Design.md (https://getdesign.md/design-md)** در کالبد پروژه محوری (پورتفولیوی پویا) مستند سازد. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **جادوی فضای سفید (Whitespace): تنفس محتوا:** + * تصور اشتباه مبتدیان: «فضای خالی یعنی هدر رفتن فضای مانیتور، پس تا می‌توانیم المان‌ها را به هم بچسبانیم!» + * واقعیت طراحی پریمیوم: فضای سفید تفاوت میان یک سایت شلخته ارزان‌قیمت با یک محصول تمیز و گران‌بها است. +2. **سیستم گرید ۸ پیکسلی (The 8pt Grid Standard):** + * چرا کل ابعاد، فاصله‌ها و آیکون‌ها در وب بر مضارب عدد ۸ (و در موارد ریز ۴) تنظیم می‌شوند: + * ۴ پیکسل (فواصل فوق فشرده نظیر آیکون کنار متن) + * ۸ پیکسل (`p-2` در تیلویند) + * ۱۶ پیکسل (`p-4` - فاصله استاندارد داخل کارت‌ها) + * ۲۴ پیکسل (`p-6` - فاصله بین المان‌های داخلی) + * ۳۲ پیکسل (`gap-8` - فاصله بین کارت‌های گرید) + * ۶۴ پیکسل (`py-16` - فاصله عمودی بین سکشن‌های مختلف صفحه) +3. **موتورهای چیدمان: چه زمان Flexbox و چه زمان CSS Grid؟** + * **Flexbox (تک‌بعدی - سطر یا ستون):** عالی برای نوار ناوبری (منو سمت راست، دکمه سمت چپ)، ردیف دکمه‌ها، چیپ‌های مهارت و المان‌های هم‌ردیف. + * **CSS Grid (دوبعدی - سطرها و ستون‌های ماتریسی):** ساختار بی‌نظیر برای گرید کارت‌های پروژه‌ها (۱ ستون در موبایل $\rightarrow$ ۲ ستون در تبلت $\rightarrow$ ۳ ستون در دسکتاپ). +4. **استانداردهای چیدمان در Design.md (https://getdesign.md/design-md):** + * مهار حداکثر عرض صفحه با کانتینرهای استاندارد (`max-w-6xl` یا `max-w-7xl` همراه با `mx-auto`) تا محتوا در مانیتورهای عریض از هم نپاشد. + * قانون طلایی سلسله‌مراتب فواصل: + *فاصله بین سکشن‌ها > فاصله بین کارت‌ها > فاصله درون کارت‌ها.* +5. **چیدمان دو محیط پروژه محوری (پورتفولیو):** + * چیدمان صفحه اصلی عمومی: کانتینر وسط‌چین با حاشیه‌های تنفس‌دار در اطراف. + * چیدمان پیشخوان ادمین: ستون سایدبار ناوبری ثابت در کنار محتوای اسکرول‌شونده فرم‌ها. +6. **کال‌اوت‌های Quera:** + * `
`: چرا سیستم گرید ۸ پیکسلی به طور طبیعی در سیستم کلاس‌های Tailwind CSS تعبیه شده است؟ + * `
`: تله «چسبیدن به لبه‌ها»؛ هرگز اجازه ندهید محتوا بدون پدینگ به حاشیه‌های کناری صفحه‌نمایش یا دیواره کارت‌ها بچسبد. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- مباحث مدیاکوئری‌ها و واکنش‌گرایی اختصاصی موبایل (درس بعدی ۵.۶). +- کدهای جاوااسکریپتی دستکاری DOM (فصل‌های آینده). + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| Whitespace / Negative Space | فضای منفی / فضای سفید | فضای خالی و بدون المان بین اجزای صفحه که باعث آرامش چشم و تمرکز می‌شود | +| 8pt Grid System | سیستم گرید ۸ پیکسلی | استاندارد صنعتی چیدمان که تمام فواصل و ابعاد را بر مضرب عدد ۸ تنظیم می‌کند | +| Flexbox | جعبه انعطاف‌پذیر فلکس | مدل چیدمان تک‌بعدی برای توزیع فضا و تراز کردن عناصر در یک سطر یا ستون | +| CSS Grid | گرید سی‌اس‌اس | مدل چیدمان دوبعدی برای ایجاد ماتریس‌های پیچیده سطری و ستونی با چیدمان ریسپانسیو | +| Container / Max-Width | کانتینر / سقف عرض | کادری محدودکننده که از کشیده شدن بی‌رویه محتوا در نمایشگرهای بسیار بزرگ جلوگیری می‌کند | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره و خط‌کش‌های شیشه‌ای دیجیتال نئونی که گرید ۸ پیکسلی و فواصل منظم المان‌ها را روی بوم وب نشان می‌دهد. +2. **مقایسه چیدمان فشرده و شلوغ با چیدمان تنفس‌دار:** `images/whitespace-comparison.png` + * **موضوع:** تصویر دونیمه‌ای: سمت چپ طراحی درهم‌رفته و ارزان در برابر سمت راست طراحی دارای فضای منفی لوکس و چشم‌نواز. +3. **خط‌کش مقیاس سیستم ۸ پیکسلی:** `images/eight-point-grid-ruler.png` + * **موضوع:** اینفوگرافیک گام‌های مقیاس: ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل همراه با معادل کلاس‌های Tailwind متناظر. +4. **فلکس‌باکس در برابر گرید در عمل:** `images/flexbox-vs-grid-usecase.png` + * **موضوع:** دیاگرام کاربردی: هدر تک‌بعدی با Flexbox در برابر گرید ۳ ستونه کارت‌های پروژه با CSS Grid. +5. **معماری کانتینر و پدینگ‌ها در Design.md:** `images/design-md-layout-anatomy.png` + * **موضوع:** اسکلت شماتیک لایه‌بندی صفحه پورتفولیو با نمایش عرض `max-w-6xl` و پدینگ‌های واکنش‌گرای حاشیه. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# فاصله‌گذاری و چیدمان: معماری سکوت و فضای سفید در وب` +2. **مقدمه:** چرا فاصله میان دکمه‌ها و المان‌ها، تفاوت یک سایت حرفه‌ای با یک آشفتگی بصری است؟ +3. **جدول کاور درس** +4. **جادوی فضای سفید (Negative Space):** پایان دادن به ترس از فضای خالی. +5. **سیستم گرید ۸ پیکسلی: زبان مشترک چیدمان مهندسی:** + * چرا عدد ۸؟ + * مقیاس‌های کاربردی از ۴ تا ۶۴ پیکسل. +6. **باکس نکته Quera (`
`):** هماهنگی مادرزادی کلاس‌های فواصل در Tailwind CSS با گرید ۸ پیکسلی. +7. **کدام موتور چیدمان؟ Flexbox یا CSS Grid:** + * ناوبری و دکمه‌ها در قلمرو فلکس‌باکس. + * ماتریس کارت‌های پروژه‌ها در قلمرو گرید. +8. **اصول چیدمان کانتینرها در Design.md (getdesign.md/design-md):** + * مهار عرض با کانتینرهای استاندارد (`max-w-6xl mx-auto`). + * قانون سلسله‌مراتب فواصل در سکشن‌ها. +9. **باکس هشدار Quera (`
`):** پرهیز از فواصل تصادفی و چسبیدن محتوا به دیواره‌های صفحه. +10. **جمع‌بندی درس‌نامه:** تثبیت چیدمان پورتفولیو و آمادگی برای تطبیق آن با ابعاد مختلف دستگاه‌ها در طراحی واکنش‌گرا. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] ارزش فضای منفی و سفید به عنوان شاخص طراحی پریمیوم به درستی تبیین شده باشد. +- [ ] سیستم گرید ۸ پیکسلی به همراه مقادیر دقیق و معادل‌های مدرن آموزش داده شود. +- [ ] مرز تفکیک کاربرد Flexbox و CSS Grid همراه با نمودار روشن گردد. +- [ ] استانداردهای کانتینر و راهنماهای Design.md در طراحی پورتفولیو لحاظ شوند. diff --git a/chapters/05-design-and-ux/05-lesson-responsive-design/spec.md b/chapters/05-design-and-ux/05-lesson-responsive-design/spec.md new file mode 100644 index 0000000..d5eb6bd --- /dev/null +++ b/chapters/05-design-and-ux/05-lesson-responsive-design/spec.md @@ -0,0 +1,101 @@ +# مشخصات درس‌نامه: طراحی واکنش‌گرا (Responsive Design & Mobile-First Mindset) +- **شناسه در سیلابس:** `L5.6` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۲ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.5` (فاصله‌گذاری و چیدمان) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** چرا رویکرد «موبایل‌فرست (Mobile-First)» شرط اساسی بقای محصولات وب است و بیش از ۶۵٪ از مدیران استخدام و کارفرمایان، پورتفولیو را ابتدا روی گوشی تلفن همراه باز می‌کنند. +- [ ] **درک کند (Understand):** نقاط شکست استاندارد ریسپانسیو (Breakpoints) در وب مدرن و پیشوندهای کلیدی Tailwind CSS (`sm`, `md`, `lg`, `xl`) چگونه کار می‌کنند. +- [ ] **به‌کار ببندد (Apply):** الگوهای بازآرایی واکنش‌گرا را بر روی پروژه محوری (تبدیل گرید ۳ ستونه پروژه‌ها به ۱ ستونه در موبایل، و تبدیل سایدبار ادمین به منوی کشویی) اعمال کند. +- [ ] **به‌کار ببندد (Apply):** استاندارد حداقل ابعاد لمسی ۴۴×۴۴ پیکسل (Touch Target) را برای دکمه‌ها و فرم‌ها جهت جلوگیری از خطای کلیک در موبایل رعایت کند. +- [ ] **به‌کار ببندد (Apply):** پنل شبیه‌ساز دستگاه‌ها (Device Mode) را در ابزار DevTools مرورگر با کلید میانبر فعال کرده و ظاهر پروژه را در ابعاد مختلف آزمایش کند. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **واقعیت دنیای موبایل‌فرست:** + * طراحی فقط برای نمایشگر لپ‌تاپ خودتان، بزرگ‌ترین اشتباه است؛ اگر وب‌سایت در صفحه کوچک موبایل شکسته شود یا نیازمند زوم کردن باشد، کاربر در کمتر از ۳ ثانیه صفحه را ترک می‌کند. +2. **کالبدشکافی نقاط شکست (Responsive Breakpoints) در وب مدرن:** + * **پیش‌فرض (Mobile First - عرض زیر ۶۴۰ پیکسل):** تمام المان‌ها تمام‌عرض (`w-full`)، تک‌ستونه، متن‌ها خوانا، منو جمع‌شده. + * **نقطه شکست `sm: 640px` (گوشی‌های بزرگ و فبلت‌ها):** شروع تنظیم حاشیه‌های کناری. + * **نقطه شکست `md: 768px` (تبلت‌ها و آی‌پد):** گرید پروژه‌ها ۲ ستونه می‌شود؛ منوی ناوبری باز می‌شود. + * **نقطه شکست `lg: 1024px` (لپ‌تاپ‌ها):** گرید ۳ ستونه می‌شود؛ سایدبار پنل ادمین به صورت ستون ثابت سمت راست/چپ قرار می‌گیرد. + * **نقطه شکست `xl: 1280px` (مانیتورهای عریض رومیزی):** تثبیت کانتینر در حداکثر عرض. +3. **انطباق بخش‌های پروژه پورتفولیوی پویا در موبایل و دسکتاپ:** + * **ناوبری (Navbar):** دسکتاپ (لینک‌های افقی) $\rightarrow$ موبایل (دکمه همبرگری مدرن یا هدر چسبان فشرده). + * **گرید پروژه‌ها:** کلاس جادویی `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`. + * **پنل مدیریت ادمین:** سایدبار دسکتاپ در موبایل به صورت منوی کشویی پایین صفحه (Bottom Sheet) درمی‌آید تا ادمین بتواند حتی با گوشی خود یک پروژه اضافه کند! +4. **استاندارد اهداف لمسی (Touch Target - قانون ۴۴ پیکسل):** + * انگشت شست انسان موس پیکسلی نیست؛ دکمه‌ها، آیکون‌ها و لینک‌ها باید حداقل ۴۴×۴۴ پیکسل مساحت کلیک‌پذیر با پدینگ مناسب داشته باشند. +5. **روش تست زنده در مرورگر (Device Mode):** + * آموزش زدن کلید میانبر `Ctrl+Shift+M` در ویندوز یا `Cmd+Shift+M` در مک در مرورگر Chrome برای دیدن نمای iPhone و Galaxy. +6. **کال‌اوت‌های Quera:** + * `
`: چرا فریم‌ورک Tailwind کدهای ریسپانسیو را به صورت پیش‌فرض Mobile-First طراحی کرده است؟ + * `
`: تله انگشت بزرگ (Fat Finger Error)؛ پرهیز از چسباندن دکمه‌های کوچک در موبایل که باعث کلیک اشتباه کاربر می‌شود. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- توسعه اپلیکیشن‌های نیتیو موبایل با React Native یا Flutter (مبحث مربوط به فصل ۱۵). +- انیمیشن‌های سنگین باز و بسته شدن سایدبار (درس ۵.۷). + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| Responsive Web Design | طراحی وب واکنش‌گرا | روش طراحی صفحاتی که خود را به طور خودکار با ابعاد و جهت نمایشگر تطبیق می‌دهند | +| Mobile-First Approach | رویکرد موبایل‌فرست | استراتژی طراحی رابط کاربری از کوچک‌ترین اندازه صفحه (موبایل) و گسترش تدریجی به دسکتاپ | +| Breakpoint | نقطه شکست / عطف | اندازه مشخصی از عرض صفحه (مانند ۷۶۸ پیکسل) که در آن چیدمان عناصر تغییر ساختار می‌دهد | +| Touch Target Size | مساحت هدف لمسی | حداقل اندازه فیزیکی یک عنصر تعاملی (حداقل ۴۴×۴۴ پیکسل) برای راحتی لمس با انگشت | +| Device Mode / Emulation | حالت شبیه‌ساز دستگاه | ابزار داخلی مرورگر برای شبیه‌سازی صفحه‌نمایش موبایل و تبلت با اندازه‌های استاندارد | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره که یک اپلیکیشن واحد را همزمان روی صفحه گوشی موبایل، تبلت و لپ‌تاپ با انعطاف و هماهنگی کامل نمایش می‌دهد. +2. **طیف چنددستگاهی واکنش‌گرا:** `images/responsive-device-spectrum.png` + * **موضوع:** نمایش تصویری پورتفولیو در ۴ فریم: موبایل (تک‌ستونه) $\rightarrow$ تبلت (دوستونه) $\rightarrow$ لپ‌تاپ (سه‌ستونه) $\rightarrow$ مانیتور عریض. +3. **خط‌کش نقاط شکست در Tailwind:** `images/tailwind-breakpoints-guide.png` + * **موضوع:** اینفوگرافیک محور افقی نقاط شکست: پیش‌فرض (موبایل)، `sm: 640px`، `md: 768px`، `lg: 1024px`، `xl: 1280px`. +4. **مقایسه نمای موبایل و دسکتاپ پورتفولیوی پویا:** `images/portfolio-mobile-vs-desktop.png` + * **موضوع:** اسکرین‌شات کنار هم: نسخه موبایل با ناوبری ساده و کارت‌های عمودی در برابر نسخه دسکتاپ با سایدبار و گرید باز. +5. **آموزش کار با ابزار Device Toolbar در مرورگر:** `images/chrome-devtools-device-mode.png` + * **موضوع:** اسکرین‌شات آموزشی از پنل DevTools با انتخاب دستگاه iPhone و دکمه‌های چرخش صفحه و تغییر رزولوشن. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# طراحی واکنش‌گرا: هنر انطباق بی‌نقص با موبایل، تبلت و دسکتاپ` +2. **مقدمه:** چرا اگر پورتفولیوی شما در گوشی کارفرما درست نمایش داده نشود، دیگر شانسی برای دیده شدن نخواهید داشت؟ +3. **جدول کاور درس** +4. **فلسفه موبایل‌فرست (Mobile-First):** چرا از کوچک‌ترین صفحه شروع می‌کنیم؟ +5. **نقاط شکست (Breakpoints): زبان تغییر شکل المان‌ها در Tailwind CSS:** + * تشریح پیشوندهای `sm`, `md`, `lg`, `xl`. +6. **باکس نکته Quera (`
`):** منطق Mobile-First در معماری کلاس‌های Tailwind. +7. **پیاده‌سازی واکنش‌گرایی در پروژه پورتفولیوی پویا:** + * هدر و ناوبری تطبیق‌پذیر. + * گرید هوشمند پروژه‌ها (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`). + * سایدبار دسکتاپ در برابر منوی کشویی ادمین در موبایل. +8. **استاندارد حیاتی اهداف لمسی (Touch Target ۴۴ پیکسلی):** راحتی لمس بدون خطای انگشت. +9. **باکس هشدار Quera (`
`):** تله خطای کلیک و فشرده کردن بیش از حد دکمه‌ها در موبایل. +10. **روش تست زنده ریسپانسیو با ابزار DevTools مرورگر:** شبیه‌سازی گوشی‌های آیفون و سامسونگ با یک کلیک. +11. **جمع‌بندی درس‌نامه:** تضمین نمایش بی‌نقص پروژه در تمام نمایشگرها و ورود به دنیای کامپوننت‌های تعاملی و وضعیت‌ها. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] ضرورت رویکرد Mobile-First با آمار و استدلال‌های محکم تبیین شده باشد. +- [ ] نقاط شکست استاندارد وب و نحوه استفاده از آن‌ها در Tailwind شرح داده شود. +- [ ] دگرگونی چیدمان پورتفولیو (گرید پروژه‌ها، هدر و پنل ادمین) در ابعاد مختلف کاملاً پوشش داده شود. +- [ ] قاعده اهداف لمسی ۴۴ پیکسلی و شیوه تست با ابزار Inspect مرورگر به صورت تصویری ارائه گردد. diff --git a/chapters/05-design-and-ux/06-lesson-components-states-animations/spec.md b/chapters/05-design-and-ux/06-lesson-components-states-animations/spec.md new file mode 100644 index 0000000..1b62457 --- /dev/null +++ b/chapters/05-design-and-ux/06-lesson-components-states-animations/spec.md @@ -0,0 +1,105 @@ +# مشخصات درس‌نامه: کامپوننت‌ها، وضعیت‌ها و انیمیشن (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:** + * `
`: چرا Lucide Icons به انتخاب شماره یک ایجنت‌های وایب کدینگ در سال‌های اخیر تبدیل شده است؟ + * `
`: تله انیمیشن‌های سیرکی؛ انیمیشن برای دادن بازخورد است نه خودنمایی! هر انیمیشنی که بیش از ۳۰۰ میلی‌ثانیه طول بکشد، کاربر را کلافه می‌کند. + +### آنچه نباید وارد آن شویم (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 (`
`):** نقش حیاتی حالت Focus در دسترسی‌پذیری کار با کیبورد. +6. **میکروانیمیشن‌ها: فرمول طلایی حرکت نرم (۲۰۰ میلی‌ثانیه):** + * چرا انیمیشن‌های طولانی دشمن تجربه کاربری هستند؟ + * قدرت کلاس‌های `transition-all duration-200`. +7. **آیکون‌های ترند و مدرن وب: چرا همه از Lucide Icons استفاده می‌کنند؟:** + * بررسی مزایای Lucide و Tabler در برابر فونت‌آیکون‌های قدیمی. + * جدول آیکون‌های کاربردی پروژه پورتفولیو. +8. **تعاملات زنده در پروژه پورتفولیوی پویا:** + * رفتار کارت‌ها، فرم‌های ادمین و مودال با افکت Backdrop Blur. +9. **باکس هشدار Quera (`
`):** انیمیشن در خدمت بازخورد است، نه نمایش سیرک! +10. **جمع‌بندی درس‌نامه:** مجهز شدن اجزای بصری و ورود به ایستگاه حیاتی یکپارچه‌سازی در سیستم طراحی (Design System). + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] پنج وضعیت استاندارد کامپوننت‌ها به روشنی و با مصادیق ملموس تفکیک شده باشند. +- [ ] استانداردهای زمانی میکروانیمیشن‌ها (زیر ۳۰۰ میلی‌ثانیه) همراه با نقد انیمیشن‌های سنگین ذکر شوند. +- [ ] مجموعه آیکون‌های Lucide Icons و نحوه استفاده از آن‌ها در پروژه معرفی گردد. +- [ ] تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند. diff --git a/chapters/05-design-and-ux/07-lesson-design-systems/spec.md b/chapters/05-design-and-ux/07-lesson-design-systems/spec.md new file mode 100644 index 0000000..d3cdb3e --- /dev/null +++ b/chapters/05-design-and-ux/07-lesson-design-systems/spec.md @@ -0,0 +1,104 @@ +# مشخصات درس‌نامه: سیستم طراحی (Design Systems & Component Ecosystems) +- **شناسه در سیلابس:** `L5.8` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۵ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.7` (کامپوننت‌ها، وضعیت‌ها و انیمیشن) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** سیستم طراحی (Design System) چیست و چرا بدون آن، یک پروژه بزرگ ساخته‌شده با هوش مصنوعی تدریجاً به یک «هیولای فرانکنشتاین» با ده‌ها رنگ و دکمه ناهماهنگ تبدیل می‌شود. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** سیر تحول کتابخانه‌های رابط کاربری از نسل بوت‌استرپ (Bootstrap) و متریال یو‌آی (Material UI) تا پارادایم انقلابی **shadcn/ui و Tailwind** (مالکیت کامل کدها در پروژه) را مقایسه کند. +- [ ] **به‌کار ببندد (Apply):** معماری توکن‌های طراحی (Design Tokens) را بر اساس استانداردهای **Aura Design Systems (https://www.aura.build/design-systems)** برای استخراج متغیرهای تم تیره و روشن پیاده‌سازی کند. +- [ ] **به‌کار ببندد (Apply):** سند مشخصات طراحی مارک‌داون اختصاصی **`design.md` (بر پایه https://getdesign.md/design-md)** را در ریشه پروژه پورتفولیو قرار دهد تا هوش مصنوعی را مجبور به استفاده از توکن‌های از پیش‌تعیین‌شده نماید. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **سندرم هیولای فرانکنشتاین در وایب کدینگ:** + * وقتی با هوش مصنوعی چند صفحه مختلف می‌سازید، در صفحه اول دکمه آبی و گرد است، در صفحه دوم بنفش و تیز، و در صفحه سوم خاکستری! + * سیستم طراحی منبع واحد حقیقت بصری است که جلوی این چندپارگی را می‌گیرد. +2. **سیر تحول کتابخانه‌های کامپوننت وب:** + * **نسل اول (بوت‌استرپ - Bootstrap):** کلاس‌های سنگین یکپارچه با ظاهر یکنواخت و قدیمی سال ۲۰۱۲. + * **نسل دوم (Material UI و کتابخانه‌های پکیجی):** کامپوننت‌های آماده کامل در قالب پکیج‌های حجیم npm که تغییر ظاهر آن‌ها طاقت‌فرسا و قفل‌شده بود. + * **نسل سوم و حاکم فعلی (shadcn/ui + Tailwind CSS):** کامپوننت جعبه سیاه نیست؛ کدهای تک‌تک اجزا (Button, Card, Modal, Input) مستقیماً درون پوشه `components/ui/` پروژه شما کپی می‌شوند و شما و ایجنت هوش مصنوعی مالک ۱۰۰٪ آن‌ها هستید. +3. **معماری توکن‌های طراحی با الهام از Aura (aura.build/design-systems):** + * جریان تبدیل توکن‌ها: + * متغیرهای ریشه CSS در فایل سراسری (`--background`, `--foreground`, `--primary`, `--card`, `--radius`). + * نگاشت متغیرها به کلاس‌های کلاسیک Tailwind (`bg-background text-foreground border-border`). + * استفاده در کامپوننت‌ها به طوری که با یک سوییچ تم، تمام رنگ‌های کل سایت همزمان تغییر کنند. +4. **تدوین فایل `design.md` برای هوش مصنوعی (getdesign.md/design-md):** + * ساخت فایلی سبک در ریشه پروژه که راهنمای هوش مصنوعی باشد: + * پالت رنگی مجاز، فواصل مجاز (گرید ۸ پیکسلی)، فونت مجاز (وزیرمتن و اینتر) و سبک کامپوننت‌ها. + * ارجاع به `@design.md` در پرامپت‌های ادیتور Cursor و جلوگیری از اختراع کدهای سلیقه‌ای تصادفی نظیر `p-[17px]` یا `bg-[#2a4d69]`. +5. **سیستم کامپوننت‌های پروژه محوری (پورتفولیوی پویا):** + * گونه‌های استاندارد دکمه (Button Variants: پیش‌فرض، ثانویه، خط‌دور، شبحی). + * کارت استاندارد پروژه با کادر شیشه‌ای و شعاع گردی ۱۲ پیکسلی (`rounded-xl`). +6. **کال‌اوت‌های Quera:** + * `
`: چرا مدل shadcn/ui به پرطرفدارترین رویکرد در دنیای ایجنت‌های مدرن تبدیل شد؟ + * `
`: فایل `design.md`؛ بیمه‌نامه یکپارچگی ظاهری پروژه شما در برابر شیطنت‌های مدل‌های زبانی. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- نصب فنی دستورات CLI شادسی‌ان (در فصل ۶ به صورت عملی در کدبیس اجرا خواهد شد). +- توسعه پکیج‌های سازمانی منتشرشونده در رجیستری npm. + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| Design System | سیستم طراحی | مجموعه یکپارچه‌ای از قوانین، توکن‌ها و کامپوننت‌های قابل‌استفاده مجدد برای ساخت رابط کاربری | +| shadcn/ui | شادسی‌ان یو‌آی | مجموعه کامپوننت‌های مدرن متن‌باز که کدهای آن مستقیماً در پوشه پروژه شما کپی و سفارشی‌سازی می‌شود | +| Design Tokens | توکن‌های طراحی | متغیرهای استاندارد مرکزی برای مقادیر رنگ، فاصله، شعاع و سایه‌ها در سراسر اپلیکیشن | +| design.md | سند مشخصات طراحی | فایل مارک‌داون راهنما برای ایجنت‌های هوش مصنوعی جهت رعایت خطوط قرمز طراحی سیستم | +| Component Variants | گونه‌های کامپوننت | حالت‌ها و نسخه‌های مختلف ظاهری یک جزء (مانند دکمه اصلی، دکمه حاشیه‌دار، دکمه خطر) | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره و یک پالت سازمان‌یافته سه‌بعدی از کامپوننت‌های شیشه‌ای منظم، دکمه‌ها، چیپ‌ها و سوییچ‌های هماهنگ سیستم طراحی. +2. **سندرم هیولای فرانکنشتاین در برابر سیستم طراحی:** `images/frankenstein-vs-design-system.png` + * **موضوع:** تصویر مقایسه‌ای: سمت چپ دکمه‌ها و کادرهای نامتقارن و ناموزون در برابر سمت راست مجموعه یکدست، هارمونیک و چشم‌نواز. +3. **خط زمانی تحول کتابخانه‌های فرانت‌اند:** `images/ui-libraries-evolution.png` + * **موضوع:** اینفوگرافیک تاریخی: بوت‌استرپ ۲۰۱۲ $\rightarrow$ متریال یو‌آی ۲۰۱۸ $\rightarrow$ انقلاب شادسی‌ان و تیلویند در عصر هوش مصنوعی. +4. **پایپ‌لاین توکن‌ها در Aura Design Systems:** `images/design-tokens-pipeline.png` + * **موضوع:** فلوچارت اتصال: توکن‌های متغیر CSS در فایل سراسری $\rightarrow$ کلاس‌های تیلویند $\rightarrow$ خروجی یکپارچه کامپوننت‌ها. +5. **نمونه فایل `design.md` در ریشه پروژه:** `images/design-md-in-editor.png` + * **موضوع:** اسکرین‌شات تمیز از فایل مارک‌داون راهنمای طراحی باز شده در ادیتور در حال هدایت ایجنت هوش مصنوعی. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# سیستم طراحی: پایان دوران هیولای فرانکنشتاین در رابط کاربری` +2. **مقدمه:** چرا سایت‌های ساخته‌شده با هوش مصنوعی بعد از چند روز شبیه به چهل‌تکه می‌شوند؟ +3. **جدول کاور درس** +4. **سیستم طراحی چیست و چه مسائلی را حل می‌کند؟:** خلق زبان بصری واحد و ابدی. +5. **سیر تحول کتابخانه‌های فرانت‌اند (از Bootstrap تا shadcn/ui):** + * چرا دیگر کامپوننت‌های پکیج بسته npm محبوب نیستند؟ + * راز آزادی عمل با کپی کدهای کامپوننت در پوشه پروژه. +6. **باکس نکته Quera (`
`):** فلسفه بنیادین مالکیت کد در معماری shadcn/ui. +7. **توکن‌های طراحی در Aura (aura.build/design-systems):** + * استخراج پالت‌های متغیر معنایی و مدیریت تم تیره. +8. **سند مشخصات طراحی `design.md` (getdesign.md/design-md):** + * چگونه سلیقه هوش مصنوعی را با یک فایل مارک‌داون مهار کنیم؟ + * درج قوانین تایپوگرافی، فواصل گرید و گونه‌های دکمه. +9. **سیستم طراحی اختصاصی پورتفولیوی پویا:** کالبدشکافی گونه‌های دکمه و کارت‌ها. +10. **باکس آرامش‌بخش Quera (`
`):** بیمه‌نامه هماهنگی پروژه با دستور `@design.md`. +11. **جمع‌بندی درس‌نامه:** مجهز شدن به سیستم طراحی و ورود به درس نهایی فصل: مبارزه با زباله هوش مصنوعی (AI Slop). + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] ضرورت سیستم طراحی در جلوگیری از تولید رابط‌های کاربری چندتکه تبیین شده باشد. +- [ ] مقایسه تحلیلی نسل‌های کامپوننت (Bootstrap, Material UI, shadcn/ui) ارائه گردد. +- [ ] مرجع Aura و معماری توکن‌های معنایی رنگ و فواصل در متن شرح داده شود. +- [ ] مفهوم و کاربرد فایل `design.md` برای هدایت ایجنت‌های هوش مصنوعی مستند شود. diff --git a/chapters/05-design-and-ux/08-lesson-ai-ideation-preventing-slop/spec.md b/chapters/05-design-and-ux/08-lesson-ai-ideation-preventing-slop/spec.md new file mode 100644 index 0000000..9d56272 --- /dev/null +++ b/chapters/05-design-and-ux/08-lesson-ai-ideation-preventing-slop/spec.md @@ -0,0 +1,100 @@ +# مشخصات درس‌نامه: ایده‌پردازی با AI و جلوگیری از AI Slop (AI Ideation & Preventing AI Slop) +- **شناسه در سیلابس:** `L5.9` +- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5) +- **نوع محتوا:** 📘 درس‌نامه متنی +- **زمان تقریبی مطالعه:** ۱۵ دقیقه +- **پیش‌نیازهای مستقیم:** `L5.8` (سیستم طراحی) + +--- + +## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy) +دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند: +- [ ] **درک کند (Understand):** پدیده فراگیر «زباله هوش مصنوعی (AI Slop)» چیست و چرا مدل‌های زبانی به طور پیش‌فرض تمایل دارند خروجی‌های میانگین، کلیشه‌ای و فاقد هویت تولید کنند. +- [ ] **تحلیل/ارزیابی کند (Evaluate):** نشانه‌های بارز طراحی‌های ارزان و شتاب‌زده هوش مصنوعی (گرادیان‌های تکراری بنفش/آبی، متون شعاری رباتیک، فواصل ناهماهنگ) را به سرعت شناسایی و رفع کند. +- [ ] **به‌کار ببندد (Apply):** از برترین مراجع و ویترین‌های ترند طراحی جهان نظیر **21st.dev (https://21st.dev/)** و **Curated.design (https://curated.design/)** به همراه Mobbin و Pinterest به عنوان لنگرگاه الهام سلیقه بالا (High-Taste Benchmarks) استفاده کند. +- [ ] **به‌کار ببندد (Apply):** تکنیک سه‌مرحله‌ای هدایت بصری چندرسانه‌ای (ارسال تصویر نمونه مرجع + اعمال چک‌لیست سلبی + تنظیم رفتار تعاملی) را برای ارتقای چشم‌نواز پروژه محوری (پورتفولیوی پویا) به کار بندد. + +--- + +## ۲. محدوده و مرزهای محتوا (Scope & Boundaries) + +### آنچه باید پوشش داده شود (In-Scope): +1. **پدیده شوم AI Slop در دنیای وب:** + * در سال‌های اخیر اینترنت پر شده از هزاران وب‌سایت شبیه به هم: پس‌زمینه تیره با گرادیان کلیشه‌ای بنفش و آبی، تیترهای بادکنکی «قدرت هوش مصنوعی را آزاد کنید!»، کارت‌های تکراری و حس تصنعی شدید. + * چرا هوش مصنوعی به خودی خود اسلاپ تولید می‌کند؟ چون مدل بر اساس «میانگین» میلیون‌ها دیتای اینترنت آموزش دیده و میانگین وب، معمولی و سطحی است! +2. **پادزهر اسلاپ: سلیقه انسانی و نمونه‌های مرجع باکیفیت:** + * هوش مصنوعی در خلاء خلاق نیست؛ اگر شما به او مرجع باکیفیت ندهید، او به حالت میانگین خسته‌کننده بازمی‌گردد. +3. **گنجینه مراجع طراحی طراحان پیشتاز جهان:** + * **پلتفرم 21st.dev (https://21st.dev/):** پلتفرم مشهور به «npm مهندسان طراحی»؛ مخزنی خیره‌کننده از کامپوننت‌های مدرن متحرک، کارت‌های تعاملی، گردهای شیشه‌ای و دکمه‌های مغناطیسی ساخته‌شده با Tailwind و React که با یک کلیک می‌توان پرامپت یا کد آن‌ها را به ادیتور داد. + * **پلتفرم Curated.design (https://curated.design/):** کاتالوگی الهام‌بخش از شاهکارهای وب با جلوه شگفت‌انگیز (WOW Factor)، تایپوگرافی‌های جسورانه و چیدمان‌های بدون نقص. + * **پلتفرم Mobbin (https://mobbin.com/):** برای الگوهای جریان واقعی و پنل‌های تنظیمات استاندارد. + * **پینترست (Pinterest):** برای بافت‌ها، ترکیب رنگ‌های مینیمال و بروتالیسم مدرن. +4. **تکنیک سه‌مرحله‌ای پرامپت ضد اسلاپ (Anti-Slop Prompting):** + * **گام ۱ (انتخاب بنچ‌مارک):** یافتن یک کامپوننت چشم‌نواز در 21st.dev یا یک اسکرین‌شات از Curated.design. + * **گام ۲ (ارسال تصویر و الگوی مرجع به ایجنت):** *«این تصویر کارت نمونه را ببین؛ من می‌خواهم کارت‌های نمایش پروژه پورتفولیو دقیقاً با همین کیفیت تمیز، کادر ظریف، فونت خوانا و هاله نوری ملایم ساخته شود.»* + * **گام ۳ (اعمال چک‌لیست قرمز):** ممنوعیت گرادیان‌های بنفش کلیشه‌ای، استفاده از رنگ‌های عمیق اسلیت/زینک، فواصل استاندارد و متن‌های واقعی و انسانی. +5. **ارتقای ویترین پروژه محوری (پورتفولیوی پویا):** + * تبدیل کارت‌های پروژه و هدر معرفی به اثری متمایز، سنگین، باوقار و مدرن که در همان نگاه اول کارفرما را تحت تاثیر قرار دهد. +6. **کال‌اوت‌های Quera:** + * `
`: پلتفرم جادویی 21st.dev؛ سریع‌ترین روش تزریق کامپوننت‌های هنرمندانه به پروژه بدون نیاز به اختراع چرخ از صفر. + * `
`: چک‌لیست ۵ تایی تشخیص AI Slop؛ نشانه‌های خطرناکی که هویت کار شما را آماتور جلوه می‌دهند. + +### آنچه نباید وارد آن شویم (Out-of-Scope): +- مباحث کدنویسی رندرینگ سمت سرور یا کلاینت Next.js (فصل ۶). +- کدنویسی کامل انیمیشن‌های پیشرفته با WebGL یا شیدرها. + +--- + +## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms) + +| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده | +| :--- | :--- | :--- | +| AI Slop | زباله / خروجی شلخته هوش مصنوعی | محتوا و کدهای سطحی، بی‌کیفیت و کلیشه‌ای تولیدشده توسط مدل بدون سلیقه و نظارت انسانی | +| Taste & Curation | سلیقه و گلچین‌گری | توانایی تشخیص طرح عالی از متوسط و انتخاب بهترین نمونه‌های مرجع برای هدایت هوش مصنوعی | +| 21st.dev | پلتفرم توئنی‌فرست | بازارچه متن‌باز کامپوننت‌های تعاملی باکیفیت و انیمیشنی برای مهندسان طراحی فرانت‌اند | +| WOW Factor | عامل شگفتی‌آفرینی بصری | ویژگی‌های طراحی نوآورانه که کاربر را در ثانیه‌های نخست میخکوب و تحت تاثیر قرار می‌دهد | +| Visual Benchmark | محک / مبنای سنجش بصری | تصویر یا نمونه مرجع استاندارد که کیفیت خروجی هوش مصنوعی با آن مقایسه و سنجیده می‌شود | + +--- + +## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders) +> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند: + +1. **تصویر کاور درس:** `images/cover.png` + * **موضوع:** کاور مدرن با تم تیره که دو نیمه را نشان می‌دهد: سمت چپ یک طرح کدر و کلیشه‌ای بی‌روح هوش مصنوعی و سمت راست درخشش یک طراحی هنرمندانه و اصیل با المان‌های لوکس. +2. **مقایسه طراحی اسلاپ با طراحی اصیل و مدرن:** `images/ai-slop-vs-premium-ui.png` + * **موضوع:** اینفوگرافیک مقایسه‌ای: سایت پر از گرادیان بنفش و متون کلیشه‌ای در برابر پورتفولیوی شیک با تایپوگرافی سنجیده و فضای تنفس‌دار. +3. **گشت‌وگذار در گنجینه 21st.dev:** `images/twentyfirst-dev-library.png` + * **موضوع:** اسکرین‌شات تمیز از محیط پلتفرم 21st.dev با نمایش کامپوننت‌های خیره‌کننده، کارت‌های متحرک و دکمه کپی کد برای ایجنت. +4. **ویترین شاهکارهای وب در Curated.design:** `images/curated-design-gallery.png` + * **موضوع:** نمایی از گالری Curated.design با وب‌سایت‌های دارای عامل شگفتی (WOW Factor) و پالت‌های رنگی جذاب. +5. **چرخه سه‌مرحله‌ای پرامپت ضد اسلاپ:** `images/anti-slop-prompt-cycle.png` + * **موضوع:** دیاگرام چرخشی: ۱. انتخاب رفرنس باکیفیت $\rightarrow$ ۲. ارسال تصویر با پرامپت قیددار به ایجنت $\rightarrow$ ۳. بررسی چک‌لیست قرمز و خروجی پریمیوم. + +--- + +## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`) + +1. **تیتر اصلی:** `# ایده‌پردازی با AI و پرهیز از AI Slop: چگونه محصولی بسازیم که روح داشته باشد؟` +2. **مقدمه:** چرا ۹۰٪ سایت‌های تولیدشده با هوش مصنوعی در سال‌های اخیر شبیه به هم و غیرقابل تحمل شده‌اند؟ +3. **جدول کاور درس** +4. **کالبدشکافی زباله هوش مصنوعی (AI Slop):** چرا مدل‌ها به طور پیش‌فرض کارهای پیش‌پاافتاده می‌سازند؟ +5. **نقش سلیقه و متصدی‌گری انسانی (Curation):** بازگرداندن خلاقیت به صندلی راننده. +6. **جعبه‌ابزار الهام طراحان پیشتاز جهان:** + * پلتفرم خارق‌العاده **21st.dev**: بازار کامپوننت‌های زنده فرانت‌اند. + * گالری لوکس **Curated.design**: دیدن استانداردهای روز دیزاین وب. + * قدرت Mobbin و Pinterest در کشف ایده‌های نو. +7. **باکس نکته Quera (`
`):** استفاده مستقیم از کامپوننت‌های 21st.dev در پرامپت‌های ادیتور Cursor. +8. **فرمول سه‌مرحله‌ای پرامپت‌نویسی ضد اسلاپ:** + * انتخاب بنچ‌مارک، تزریق تصویر و اعمال چک‌لیست سلبی. +9. **ارتقای نهایی هویت بصری پورتفولیوی پویا:** تضمین جلوه WOW Factor در صفحه اول کارفرما. +10. **باکس هشدار Quera (`
`):** ۵ پرچم قرمز (Red Flags) که داد می‌زنند کار شما با پرامپت تنبل ساخته شده است! +11. **جمع‌بندی فصل پنجم:** دستیابی به هویت بصری و سیستم طراحی کامل، و آماده‌سازی برای ورود به فاز عملیاتی پیاده‌سازی و کدنویسی در فصل ۶. + +--- + +## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer) +- [ ] مفهوم AI Slop و ریشه‌های الگوریتمی آن به روشنی تبیین شده باشد. +- [ ] مراجع معتبر تاییدشده کاربر (21st.dev, Curated.design, Mobbin, Pinterest) در متن به طور کامل پوشش داده شوند. +- [ ] تکنیک سه‌مرحله‌ای استفاده از رفرنس‌های تصویری در پرامپت آموزش داده شود. +- [ ] چک‌لیست پیشگیری از کلیشه‌ها و ارتقای پروژه پورتفولیو به سطح پریمیوم لحاظ گردد.