feat: add chapter 05-design-and-ux specs
This commit is contained in:
82
chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md
Normal file
82
chapters/05-design-and-ux/00-lesson-chapter-goals/spec.md
Normal file
@@ -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 (`<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 به صراحت بیان شده باشد.
|
||||||
|
- [ ] تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند.
|
||||||
|
- [ ] نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد.
|
||||||
@@ -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:**
|
||||||
|
* `<details class="violet">`: قانون یاکوب در وایب کدینگ؛ چرا خلاقیت‌های نامتعارف و عجیب در چیدمان ناوبری کاربر را فراری می‌دهد؟
|
||||||
|
* `<details class="red">`: تله اصطکاک بیهوده (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 (`<details class="violet">`):** چرایی اهمیت قانون یاکوب در طراحی بدون اصطکاک.
|
||||||
|
7. **طراحی جریان‌های کاربر پروژه پورتفولیوی پویا:**
|
||||||
|
* مسیر روان بازدیدکننده و کارفرما.
|
||||||
|
* مسیر امن و کاربردی صاحب پورتفولیو در پنل ادمین و سئو.
|
||||||
|
8. **جعبه‌ابزار حرفه‌ای‌ها: بررسی الگوهای زنده در Mobbin (mobbin.com):**
|
||||||
|
* نحوه ایده گرفتن از جریان‌های اپ‌های مطرح جهان.
|
||||||
|
9. **باکس هشدار Quera (`<details class="red">`):** پرهیز از ایجاد اصطکاک و کلیک‌های غیرضروری در مسیر کاربر.
|
||||||
|
10. **جمع‌بندی درس‌نامه:** تثبیت جریان‌های شفاف پروژه و آماده‌سازی برای وایرفریمینگ و سلسله‌مراتب بصری.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] تمایز میان UX و UI به شکل کاربردی و قابل فهم تشریح شده باشد.
|
||||||
|
- [ ] قوانین تجربه کاربری (به ویژه یاکوب و هیک) در زمینه نرم‌افزار واقعی تحلیل گردند.
|
||||||
|
- [ ] جریان‌های کاربر برای هر دو بخش بازدیدکننده و ادمین پورتفولیو به طور کامل ترسیم شوند.
|
||||||
|
- [ ] پلتفرم معتبر Mobbin و نحوه بهره‌برداری از الگوهای آن معرفی شده باشد.
|
||||||
@@ -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):** چشمان کاربر ابتدا بزرگ‌ترین عنصر (تیتر `<h1>`) را می‌بیند.
|
||||||
|
* **وزن و ضخامت (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:**
|
||||||
|
* `<details class="violet">`: قدرت وایرفریم متنی در چت با ادیتور؛ سریع‌ترین متد هدایت چیدمان بدون نیاز به خروج از ویرایشگر کد.
|
||||||
|
* `<details class="red">`: تله «همه عناصر جیغ می‌زنند!»؛ وقتی رنگ و اندازه همه دکمه‌ها یکسان باشد، کاربر گیج می‌شود و هیچ‌کدام را کلیک نمی‌کند.
|
||||||
|
|
||||||
|
### آنچه نباید وارد آن شویم (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 (`<details class="violet">`):** استفاده از وایرفریم‌های متنی (ASCII) در پرامپت‌ها.
|
||||||
|
8. **اشتباهات مرگبار در سلسله‌مراتب بصری:**
|
||||||
|
* مسابقه جیغ زدن دکمه‌ها و سردرگمی نگاه کاربر.
|
||||||
|
9. **باکس هشدار Quera (`<details class="red">`):** ایجاد یک نقطه فوکوس واحد در هر بخش از صفحه.
|
||||||
|
10. **جمع‌بندی درس‌نامه:** تکمیل معماری چیدمان و آماده شدن برای انتخاب رنگ‌ها و تایپوگرافی دوزبانه.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] مفهوم وایرفریم و مزیت آن در پیشگیری از بازنویسی کدهای CSS تبیین شده باشد.
|
||||||
|
- [ ] اصول سلسله‌مراتب بصری و الگوهای F و Z به درستی آموزش داده شوند.
|
||||||
|
- [ ] وایرفریم‌های صفحه اصلی، مودال جزئیات، و پنل مدیریت و سئو برای پروژه محوری مستند گردند.
|
||||||
|
- [ ] شیوه پرامپت‌نویسی با وایرفریم متنی (ASCII) در متن گنجانده شود.
|
||||||
@@ -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:**
|
||||||
|
* `<details class="violet">`: چرا ترکیب Vazirmatn و Inter به استاندارد ملی استارتاپ‌های پیشروی ایرانی تبدیل شده است؟
|
||||||
|
* `<details class="red">`: تله رنگ سیاه مطلق (`#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 (`<details class="violet">`):** راز هماهنگی فونت‌های دوزبانه در محصولات ایرانی و بین‌المللی.
|
||||||
|
6. **قانون ۶۰-۳۰-۱۰: فرمول جادویی طراحان برای ترکیب رنگ‌ها:**
|
||||||
|
* ۶۰ درصد زمینه.
|
||||||
|
* ۳۰ درصد سطوح و کارت‌ها.
|
||||||
|
* ۱۰ درصد رنگ اقدام و دکمه‌ها.
|
||||||
|
7. **استفاده از مراجع ترند: پالت‌های رنگی در Aura (aura.build/design-systems):**
|
||||||
|
* توکن‌های معنایی و ایجاد تم تیره بدون رنگ سیاه خالص.
|
||||||
|
8. **استانداردهای کنتراست و خوانایی متن (WCAG AA):** آزمون دید در شبکه‌های تیره.
|
||||||
|
9. **باکس هشدار Quera (`<details class="red">`):** فرار از رنگ‌های سیاه مطلق (`#000000`) و رنگ‌های بسیار تند و خسته‌کننده چشم.
|
||||||
|
10. **جمع‌بندی درس‌نامه:** تثبیت فونت‌ها و رنگ‌های پورتفولیوی پویا و ورود به هنر فاصله‌گذاری و چیدمان.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] جفت فونت دوزبانه وزیرمتن و اینتر به عنوان استاندارد تایپوگرافی تبیین شده باشد.
|
||||||
|
- [ ] قانون ۶۰-۳۰-۱۰ برای تم تیره پروژه با مقادیر مشخص آموزش داده شود.
|
||||||
|
- [ ] مرجع Aura Design Systems و کاربرد توکن‌های معنایی در متن معرفی شده باشد.
|
||||||
|
- [ ] اصول کنتراست رنگ‌ها و خطرات متون ناخوانا همراه با تصویرسازی بررسی گردد.
|
||||||
106
chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md
Normal file
106
chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md
Normal file
@@ -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:**
|
||||||
|
* `<details class="violet">`: چرا سیستم گرید ۸ پیکسلی به طور طبیعی در سیستم کلاس‌های Tailwind CSS تعبیه شده است؟
|
||||||
|
* `<details class="red">`: تله «چسبیدن به لبه‌ها»؛ هرگز اجازه ندهید محتوا بدون پدینگ به حاشیه‌های کناری صفحه‌نمایش یا دیواره کارت‌ها بچسبد.
|
||||||
|
|
||||||
|
### آنچه نباید وارد آن شویم (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 (`<details class="violet">`):** هماهنگی مادرزادی کلاس‌های فواصل در Tailwind CSS با گرید ۸ پیکسلی.
|
||||||
|
7. **کدام موتور چیدمان؟ Flexbox یا CSS Grid:**
|
||||||
|
* ناوبری و دکمه‌ها در قلمرو فلکس‌باکس.
|
||||||
|
* ماتریس کارت‌های پروژه‌ها در قلمرو گرید.
|
||||||
|
8. **اصول چیدمان کانتینرها در Design.md (getdesign.md/design-md):**
|
||||||
|
* مهار عرض با کانتینرهای استاندارد (`max-w-6xl mx-auto`).
|
||||||
|
* قانون سلسله‌مراتب فواصل در سکشن‌ها.
|
||||||
|
9. **باکس هشدار Quera (`<details class="red">`):** پرهیز از فواصل تصادفی و چسبیدن محتوا به دیواره‌های صفحه.
|
||||||
|
10. **جمع‌بندی درس‌نامه:** تثبیت چیدمان پورتفولیو و آمادگی برای تطبیق آن با ابعاد مختلف دستگاه‌ها در طراحی واکنش‌گرا.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] ارزش فضای منفی و سفید به عنوان شاخص طراحی پریمیوم به درستی تبیین شده باشد.
|
||||||
|
- [ ] سیستم گرید ۸ پیکسلی به همراه مقادیر دقیق و معادل‌های مدرن آموزش داده شود.
|
||||||
|
- [ ] مرز تفکیک کاربرد Flexbox و CSS Grid همراه با نمودار روشن گردد.
|
||||||
|
- [ ] استانداردهای کانتینر و راهنماهای Design.md در طراحی پورتفولیو لحاظ شوند.
|
||||||
101
chapters/05-design-and-ux/05-lesson-responsive-design/spec.md
Normal file
101
chapters/05-design-and-ux/05-lesson-responsive-design/spec.md
Normal file
@@ -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:**
|
||||||
|
* `<details class="violet">`: چرا فریم‌ورک Tailwind کدهای ریسپانسیو را به صورت پیش‌فرض Mobile-First طراحی کرده است؟
|
||||||
|
* `<details class="red">`: تله انگشت بزرگ (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 (`<details class="violet">`):** منطق Mobile-First در معماری کلاس‌های Tailwind.
|
||||||
|
7. **پیاده‌سازی واکنش‌گرایی در پروژه پورتفولیوی پویا:**
|
||||||
|
* هدر و ناوبری تطبیق‌پذیر.
|
||||||
|
* گرید هوشمند پروژه‌ها (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`).
|
||||||
|
* سایدبار دسکتاپ در برابر منوی کشویی ادمین در موبایل.
|
||||||
|
8. **استاندارد حیاتی اهداف لمسی (Touch Target ۴۴ پیکسلی):** راحتی لمس بدون خطای انگشت.
|
||||||
|
9. **باکس هشدار Quera (`<details class="red">`):** تله خطای کلیک و فشرده کردن بیش از حد دکمه‌ها در موبایل.
|
||||||
|
10. **روش تست زنده ریسپانسیو با ابزار DevTools مرورگر:** شبیه‌سازی گوشی‌های آیفون و سامسونگ با یک کلیک.
|
||||||
|
11. **جمع‌بندی درس‌نامه:** تضمین نمایش بی‌نقص پروژه در تمام نمایشگرها و ورود به دنیای کامپوننت‌های تعاملی و وضعیت‌ها.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] ضرورت رویکرد Mobile-First با آمار و استدلال‌های محکم تبیین شده باشد.
|
||||||
|
- [ ] نقاط شکست استاندارد وب و نحوه استفاده از آن‌ها در Tailwind شرح داده شود.
|
||||||
|
- [ ] دگرگونی چیدمان پورتفولیو (گرید پروژه‌ها، هدر و پنل ادمین) در ابعاد مختلف کاملاً پوشش داده شود.
|
||||||
|
- [ ] قاعده اهداف لمسی ۴۴ پیکسلی و شیوه تست با ابزار Inspect مرورگر به صورت تصویری ارائه گردد.
|
||||||
@@ -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:**
|
||||||
|
* `<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 و نحوه استفاده از آن‌ها در پروژه معرفی گردد.
|
||||||
|
- [ ] تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند.
|
||||||
104
chapters/05-design-and-ux/07-lesson-design-systems/spec.md
Normal file
104
chapters/05-design-and-ux/07-lesson-design-systems/spec.md
Normal file
@@ -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:**
|
||||||
|
* `<details class="violet">`: چرا مدل shadcn/ui به پرطرفدارترین رویکرد در دنیای ایجنت‌های مدرن تبدیل شد؟
|
||||||
|
* `<details class="green">`: فایل `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 (`<details class="violet">`):** فلسفه بنیادین مالکیت کد در معماری shadcn/ui.
|
||||||
|
7. **توکن‌های طراحی در Aura (aura.build/design-systems):**
|
||||||
|
* استخراج پالت‌های متغیر معنایی و مدیریت تم تیره.
|
||||||
|
8. **سند مشخصات طراحی `design.md` (getdesign.md/design-md):**
|
||||||
|
* چگونه سلیقه هوش مصنوعی را با یک فایل مارک‌داون مهار کنیم؟
|
||||||
|
* درج قوانین تایپوگرافی، فواصل گرید و گونه‌های دکمه.
|
||||||
|
9. **سیستم طراحی اختصاصی پورتفولیوی پویا:** کالبدشکافی گونه‌های دکمه و کارت‌ها.
|
||||||
|
10. **باکس آرامش‌بخش Quera (`<details class="green">`):** بیمه‌نامه هماهنگی پروژه با دستور `@design.md`.
|
||||||
|
11. **جمع‌بندی درس‌نامه:** مجهز شدن به سیستم طراحی و ورود به درس نهایی فصل: مبارزه با زباله هوش مصنوعی (AI Slop).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] ضرورت سیستم طراحی در جلوگیری از تولید رابط‌های کاربری چندتکه تبیین شده باشد.
|
||||||
|
- [ ] مقایسه تحلیلی نسل‌های کامپوننت (Bootstrap, Material UI, shadcn/ui) ارائه گردد.
|
||||||
|
- [ ] مرجع Aura و معماری توکن‌های معنایی رنگ و فواصل در متن شرح داده شود.
|
||||||
|
- [ ] مفهوم و کاربرد فایل `design.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:**
|
||||||
|
* `<details class="violet">`: پلتفرم جادویی 21st.dev؛ سریع‌ترین روش تزریق کامپوننت‌های هنرمندانه به پروژه بدون نیاز به اختراع چرخ از صفر.
|
||||||
|
* `<details class="red">`: چک‌لیست ۵ تایی تشخیص 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 (`<details class="violet">`):** استفاده مستقیم از کامپوننت‌های 21st.dev در پرامپت‌های ادیتور Cursor.
|
||||||
|
8. **فرمول سه‌مرحله‌ای پرامپت‌نویسی ضد اسلاپ:**
|
||||||
|
* انتخاب بنچ‌مارک، تزریق تصویر و اعمال چک‌لیست سلبی.
|
||||||
|
9. **ارتقای نهایی هویت بصری پورتفولیوی پویا:** تضمین جلوه WOW Factor در صفحه اول کارفرما.
|
||||||
|
10. **باکس هشدار Quera (`<details class="red">`):** ۵ پرچم قرمز (Red Flags) که داد می‌زنند کار شما با پرامپت تنبل ساخته شده است!
|
||||||
|
11. **جمع‌بندی فصل پنجم:** دستیابی به هویت بصری و سیستم طراحی کامل، و آماده‌سازی برای ورود به فاز عملیاتی پیاده‌سازی و کدنویسی در فصل ۶.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
|
||||||
|
- [ ] مفهوم AI Slop و ریشه‌های الگوریتمی آن به روشنی تبیین شده باشد.
|
||||||
|
- [ ] مراجع معتبر تاییدشده کاربر (21st.dev, Curated.design, Mobbin, Pinterest) در متن به طور کامل پوشش داده شوند.
|
||||||
|
- [ ] تکنیک سه‌مرحله‌ای استفاده از رفرنس‌های تصویری در پرامپت آموزش داده شود.
|
||||||
|
- [ ] چک‌لیست پیشگیری از کلیشه‌ها و ارتقای پروژه پورتفولیو به سطح پریمیوم لحاظ گردد.
|
||||||
Reference in New Issue
Block a user