8.1 KiB
8.1 KiB
مشخصات درس‌نامه: اهداف فصل پنجم (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):
- ورود به دنیای طراحی مدرن محصول:
- هوش مصنوعی بدون هدایت بصری دقیق، وب‌سایت‌هایی بی‌روح با رنگ‌های تند و نامتعادل می‌سازد؛ در این فصل هنر چیدمان و سلیقه بصری را به ایجنت تزریق می‌کنیم.
- مرور سرفصل‌های فصل ۵:
- درس ۵.۲: مبانی تجربه کاربری، جریان کاربر (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.
- تداوم پروژه محوری (پورتفولیوی پویا):
- خلق ظاهر بصری و هویت برند اختصاصی برای ویترین نمونه‌کارها، صفحه لاگین و داشبورد ادمین.
- کال‌اوت آرامش‌بخش Quera (
<details class="green">): نیاز به هیچ‌گونه تسلط قبلی بر نرم‌افزارهای سنگین گرافیکی نظیر Photoshop نیست؛ ما با تفکر سیستماتیک و کدهای طراحی پیش خواهیم رفت.
آنچه نباید وارد آن شویم (Out-of-Scope):
- آموزش برنامه‌نویسی ری‌اکت و هوک‌های کدنویسی (مبحث فصل ۶).
- کدنویسی اتصالات بک‌اند و دیتابیس (فصل ۷).
۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
|---|---|---|
| Visual Identity | هویت بصری | مجموعه هماهنگ رنگ‌ها، فونت‌ها، فاصله‌ها و سبک ظاهری که شخصیت محصول را می‌سازد |
| AI Slop | زباله / شلختگی هوش مصنوعی | طراحی‌های شلوغ، بی‌سلیقه، رنگ‌های ناهماهنگ و کلیشه‌ای تولیدشده بدون هدایت انسانی |
| User Flow | مسیر / جریان کاربر | زنجیره مراحلی که کاربر از لحظه ورود تا رسیدن به هدف نهایی در وب‌سایت طی می‌کند |
| Design Tokens | توکن‌های طراحی | متغیرهای استاندارد مرکزی برای رنگ‌ها، فاصله‌ها و شعاع گوشه‌ها در سیستم طراحی |
۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ
images/قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
- تصویر کاور درس:
images/cover.png- موضوع: کاور با تم تیره و خطوط درخشان طراحی محصول که تبدیل یک چیدمان اولیه به یک رابط کاربری مینیمال، لوکس و مدرن را نشان می‌دهد.
- نقشه راه فصل ۵:
images/chapter-5-roadmap.png- موضوع: اینفوگرافیک گام‌به‌گام از جریان کاربر
\rightarrowوایرفریم\rightarrowتایپوگرافی و رنگ\rightarrowچیدمان\rightarrowواکنش‌گرایی\rightarrowکامپوننت‌ها\rightarrowسیستم طراحی\rightarrowمبارزه با AI Slop.
- موضوع: اینفوگرافیک گام‌به‌گام از جریان کاربر
- جعبه‌ابزار مراجع مدرن طراحی:
images/modern-design-resources.png- موضوع: نمایش تصویری لوگوها و مراجع معرفی‌شده: 21st.dev، Mobbin، Curated.design، Aura Build و Design.md.
۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)
- تیتر اصلی:
# اهداف فصل پنجم: طراحی تجربه و هویت محصول - مقدمه کوتاه: چرا ظاهر و حس و حال (Look & Feel) محصول، زبان ناخودآگاه اعتماد کاربر است؟
- جدول کاور درس
- سرفصل‌های کلیدی فصل در یک نگاه: مرور ۸ گام طراحی محصول از نقشه تا جزئیات بصری.
- جدول نقشه راه یادگیری فصل
- معرفی مراجع ترند طراحی وب (21st.dev, Mobbin, Curated.design): منابعی که سلیقه شما و ایجنت را متحول می‌کنند.
- پورتفولیوی پویا در آینه طراحی شیک: آماده‌سازی ویترین شخصی برای ورود به مرحله ساخت.
- کال‌اوت اطمینان‌بخش Quera (
<details class="green">): ثبت دکمه «خواندم» و آغاز خلق تجربه کاربری.
۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- اهداف کلان فصل و اهمیت عبور از AI Slop به صراحت بیان شده باشد.
- تمامی مراجع صنعتی و ترندهای طراحی مورد تایید در ساختار فصل معرفی شوند.
- نقشه راه ۸ درس‌نامه بعدی با زبان شیوا و منطقی مستند گردد.