مهارەتی زیبایی سیستمی طراحی (Design System Aesthetics Skill)

مهارت زیبایی سیستم طراحی یک روش راهنمای شما برای اصلاح هویت بصری سایتتان است. این مهارت به شما کمک می‌کند در مورد تایپوگرافی، رنگ، فاصله و توکن‌های حرکت که سیستم طراحی شما را تعریف می‌کنند، تصمیمات سازگاری بگیرید.

زیبایی سیستم طراحی چیست؟

زیبایی سیستم طراحی یک مهارت ساختاریافته است که موارد زیر را پوشش می‌دهد:

• تایپوگرافی (Typography): خانواده فونت‌ها، اندازه‌ها، وزن‌ها و ارتفاع خطوط
• رنگ (Color): پالت‌های اصلی، ثانویه، تأکیدی و خنثی
• فاصله (Spacing): مقیاس‌های پدینگ (Padding)، مارجین (Margin) و شکاف (Gap)
• حاشیه (Borders): توکن‌های شعاع (Radius) و عرض
• سایه‌ها (Shadows): توکن‌های ارتفاع (Elevation) و عمق (Depth)
• حرکت (Motion): انیمیشن‌ها و انتقال‌ها (Transitions)

این تصمیمات در فایل theme.json قالب شما ثبت می‌شوند و یک سیستم بصری منسجم ایجاد می‌کنند.

چرا از زیبایی سیستم طراحی استفاده کنیم؟

سازگاری (Consistency)

یک سیستم طراحی تضمین می‌کند که:

• همه متن از همان مقیاس تایپوگرافی استفاده کنند
• رنگ‌ها در کل سایت به صورت یکپارچه به کار روند
• فاصله‌ها الگوی قابل پیش‌بینی داشته باشند
• انیمیشن‌ها حس یکپارچگی را القا کنند

کارایی (Efficiency)

به جای اینکه تصمیمات طراحی را صفحه به صفحه بگیرید، شما:

• توکن‌ها را فقط یک بار تعریف می‌کنید
• از همه جا از آن‌ها استفاده می‌کنید
• با تغییر یک مقدار، به‌صورت سراسری به‌روزرسانی می‌کنید

انعطاف‌پذیری (Flexibility)

شما می‌توانید:

• کل سیستم طراحی خود را به سرعت تنظیم کنید
• با زیبایی‌های مختلف آزمایش کنید
• در عین تکامل، سازگاری برند را حفظ کنید

فعال کردن مهارت زیبایی سیستم طراحی

فعال‌سازی دستی (Manual Activation)

می‌توانید این مهارت را در هر زمان شروع کنید:

"کمک کن تا سیستم طراحی من رو اصلاح کنم"

یا

"بیایید زیبایی سایت من رو بهبود ببخشیم"

یا

"من رو از تصمیمات سیستم طراحی راهنمایی کن"

پیشنهادات خودکار (Automatic Suggestions)

ابزارها ممکن است پیشنهاد استفاده از این مهارت را در مواقعی بدهند که شما:

• درخواست تغییراتی برای طراحی دارید
• یک بازطراحی "مدرن" یا "حرفه‌ای" می‌خواهید
• می‌خواهید سازگاری بصری خود را بهبود ببخشید
• در حال آماده شدن برای راه‌اندازی سایت هستید

پروسیسی دیزاینی سیستمی

مرحله ۱: تایپوگرافی (Typography)

آژنت در مورد انتخاب فونت‌های شما سؤال می‌پرسه:

سبک تایپوگرافی مورد علاقه شما چیست؟
- سریف (سنتی، شیک)
- سنس سریف (مدرن، تمیز)
- مونو اسپیس (فنی، متمرکز بر کد)

برای فونت عنوان خود:
- آیا می‌خواهید یک فونت عنوان متفاوت داشته باشید، یا از همان متن اصلی استفاده کنید؟
- ترجیح شما: پررنگ، شیک، بازیگوش، مینیمال؟

برای فونت متن اصلی:
- خوانایی مهم است. آیا ترجیح می‌دهید:
  - متن بزرگتر و با فضای بیشتر
  - متن فشرده و کارآمد
  - اندازه استاندارد

سپس آژنت موارد زیر را تعریف می‌کند:

• فونت عنوان (Heading font): فونت اصلی برای عناوین و سرفصل‌ها.
• فونت متن اصلی (Body font): فونتی که برای پاراگراف‌ها و متن معمولی استفاده می‌شود.
• فونت مونو اسپیس (Monospace font): فونتی که برای کدها و محتوای فنی به کار می‌رود.
• مقیاس اندازه (Size scale): اندازه‌های از پیش تعریف شده (کوچک، پایه، بزرگ، XL و غیره).
• مقیاس وزن (Weight scale): ضخامت فونت‌ها (عادی، متوسط، پررنگ و غیره).
• ارتفاع خط (Line height): فاصله بین خطوط برای خوانایی بهتر.

مرحله ۲: پالت رنگی (Color Palette)

بیایید پالت رنگی شما را تعریف کنیم.

رنگ اصلی (رنگ برند شما):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

رنگ ثانویه (رنگ پشتیبان):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

رنگ تأکیدی (برای برجسته‌سازی و دکمه‌های فراخوان عمل - CTAs):
- فعلی: [نمایش رنگ موجود]
- تغییر به: [انتخابگر رنگ یا کد هگز]

پالت خنثی (خاکستری‌ها برای متن، حاشیه و پس‌زمینه):
- روشن: [رنگ]
- متوسط: [رنگ]
- تیره: [رنگ]

آژنت یک پالت کامل شامل موارد زیر ایجاد می‌کند:

• رنگ‌های اصلی، ثانویه و تأکیدی.
• خاکستری‌های خنثی (روشن، متوسط، تیره).
• رنگ‌های معنایی (موفقیت، هشدار، خطا).
• وضعیت‌ها برای حالت هاور (Hover) و فعال (Active states).

مرحله ۳: فاصله گذاری (Spacing)

چند فضای تنفس می‌خواید؟

ترجیح مقیاس فاصله (Spacing scale preference):

• فشرده (طرح‌های متراکم و کارآمد)
• نرمال (فاصله متعادل)
• فضایی (فضای خالی زیاد)

این تنظیمات روی موارد زیر تأثیر می‌گذارد:

• پدینگ (Padding) داخل دکمه‌ها و کارت‌ها
• مارجین (Margin) بین بخش‌ها
• فاصله بین آیتم‌های گرید (Grid items)

عامل تعریف توکن‌های فاصله توسط اِژنت است:

• واحد پایه (معمولاً ۴ پیکسل یا ۸ پیکسل)
• مقیاس: xs، sm، md، lg، xl، 2xl
• مقادیر خاص برای پدینگ، مارجین و گپ (Gap)

مرحله ۴: حاشیه و سایه‌ها (Borders and Shadows)

عمق بصری و تعریف عناصر:

ترجیح شعاع گوشه (Border radius preference):
- تیز (بدون گرد کردن)
- ظریف (شعاع کوچک)
- گرد (شعاع متوسط)
- بسیار گرد (شعاع بزرگ)

عمق سایه (Shadow depth):
- صاف (بدون سایه)
- ظریف (سایه‌های کم‌رنگ)
- برجسته (سایه‌های قوی)

اِژنت موارد زیر را ایجاد می‌کند:

• توکن‌های شعاع گوشه (برای دکمه‌ها، کارت‌ها، ورودی‌ها)
• توکن‌های سایه برای سطوح ارتفاع (Elevation levels)
• توکن‌های ضخامت حاشیه (Border width tokens)

مرحله ۵: حرکت و انیمیشن (Motion and Animation)

وقتی سایت شما تعاملی باشد، چه حسی داشته باشد؟

ترجیح انیمیشن (Animation preference):
- حداقل (بدون انیمیشن)
- ظریف (انتقال‌های ملایم)
- بازیگوش (انیمیشن‌های قابل مشاهده)

انیمیشن‌های خاص:
- انتقال صفحات: محو شدن (fade)، اسلاید (slide)، یا هیچ‌کدام؟
- هاور دکمه (Button hover): تغییر اندازه، تغییر رنگ، یا هر دو؟
- وضعیت بارگذاری (Loading states): اسپینر (spinner)، اسکلت (skeleton)، یا نوار پیشرفت (progress bar)؟

اِژنت موارد زیر را تعریف می‌کند:

• مدت زمان انتقال (Transition durations) (سریع، نرمال، آهسته)
• توابع نرم‌کننده (Easing functions) (ease-in، ease-out، ease-in-out)
• فریم‌های کلید انیمیشن برای تعاملات متداول

اعمال زیبایی‌شناسی سیستم طراحی (Applying Design System Aesthetics)

اعمال خودکار (Automatic Application)

بعد از اینکه مهارت را تکمیل کردید، اِژنت موارد زیر را انجام می‌دهد:

۱. فایل theme.json قالب شما را با تمام توکن‌ها به‌روزرسانی می‌کند ۲. سیستم طراحی را روی قالب فعال شما اعمال می‌کند ۳. استایل‌های بلوک (Block styles) را برای مطابقت با سیستم جدید بازسازی می‌کند ۴. قالب به‌روز شده را فعال می‌سازد

اعمال دستی (Manual Application)

شما می‌توانید مستقیماً فایل theme.json را ویرایش کنید:

دۆزینی سیستەمی دیزاینەکەت

پرسیار بکە لە ئاژانتر (Agent)

"Show me my design system"

یان

"What are my current design tokens?"

ئەژانتر ئەو تایبەتمەندییەکانی تێیدا دەردەخات: تایبەتمەندیی تیۆپۆگرافی (typography)، ڕەنگەکان، فەراشتن (spacing) و دیکەی.

دابอ่านکردنی theme.json

لە ناو編輯گرێکی دەقدا /wp-content/themes/[theme-name]/theme.json بکەرەوە بۆ بینینی پێناسە ڕاستەقینەکانی تۆکنەکان (tokens).

نوێکردنەوەی سیستەمی دیزاینەکەت

نوێکردنەوەیەکی خێرا

بۆ گۆڕانکاریی تایبەت داوا بکە لە ئاژانتر:

"Make the primary color darker"

یان

"Increase the spacing scale by 20%"

یان

"Change the heading font to a serif"

دیزاینی نوێکردنەوەی تەواو

ئەزموونی Aesthetic سیستەمی دیزاینەکە دووبارە ئەنجام بدە:

"Let's redesign my entire design system"

ئەم کارە تۆ دەبێت ببێتەوە بۆ هەموو بڕیارییەکان، دەست پێکردن لە بەها و ڕێژەکانی ئێستات.

نوێکردنەوەی بەشەکان

بەشە دیاریکراوەکان به‌روزرسان بکە:

"Just update the color palette, keep everything else"

باشترین شێوازی کارکردن لە سیستەمی دیزایندا (Best Practices)

یەکگرتوویی (Consistency)

• هەمان تۆکنەکان لە هەموو شوێنێکدا بەکاربهێنە.
• ڕەنگان یان گۆڕانکاریی تایبەت نادیار بکە.
• لەبری ئەوەی بە شێوەیەکی ڕاستەوخۆ (hardcoding) بەهاکان بنووسیت، تێبینییەکانی تۆکنەکان بەکاربهێنە.

ناونیشاندان (Naming)

ناواکاری دیار و مانای هەبێت:

• ✓ primary, secondary, accent

• ✗ blue, color-1, main

• ✓ heading-lg, body-sm

• ✗ font-size-24, text-large

گەشەپێدانی (Scalability)

سیستمی دیزاین کردنی که برای مقیاس‌پذیری طراحی شده است:

• از واحدهای نسبی (rem, em) به جای پیکسل استفاده کنید.
• مقیاس‌ها را بسازید (xs، sm، md، lg، xl) به جای مقادیر دلخواه.
• برای افزودنی‌های آینده برنامه‌ریزی کنید.

مستندسازی

سیستم دیزاین خود را مستند کنید:

• چرا رنگ‌های خاصی را انتخاب کردید؟
• از هر توکن (token) چه زمانی استفاده کنیم؟
• استثناها و موارد حاشیه‌ای چیست؟

الگوهای رایج سیستم دیزاین

مدرن مینیمالিস্ট

• تایپوگرافی بدون سریف (Sans-serif) (Inter، Helvetica)
• پالت رنگی محدود (۲ تا ۳ رنگ)
• فضای خالی زیاد
• سایه‌های ملایم
• انیمیشن‌های روان و سریع

گرم و دوستانه

• ترکیبی از فونت‌های سریف و سنس-سریف
• پالت رنگی گرم (نارنجی‌ها، خاکستری گرم)
• گوشه‌های گرد
• سایه‌های نرم
• انیمیشن‌های بازیگوشانه

حرفه‌ای شرکتی

• سنس-سریف تمیز (Roboto، Open Sans)
• پالت خنثی با یک رنگ تاکیدی
• فضای خالی ساختاریافته
• حداقل سایه‌ها
• انتقال‌های ظریف

خلاق و جسور

• تایپوگرافی متمایز
• پالت رنگی جسورانه
• فضاهای خالی متنوع
• سایه‌های قوی
• انیمیشن‌های قابل توجه

عیب‌یابی

تغییرات سیستم دیزاین من نمایش داده نمی‌شود

• کش مرورگر را پاک کنید.
• اگر از یک Static Generator استفاده می‌کنید، سایت خود را دوباره بسازید.
• بررسی کنید که فایل theme.json فرمت JSON معتبر دارد.
• تأیید کنید که تم فعال است.

رنگ‌ها در صفحات مختلف متفاوت به نظر می‌رسند

• به دنبال CSS تداخل‌کننده در پلاگین‌ها بگردید.
• تأیید کنید که همه صفحات از یک تم استفاده می‌کنند.
• هرگونه افزونه کش را پاک کنید.

می‌خواهم به سیستم دیزاین قبلی برگردم

• از اِجنت بخواهید: "تاریخچه سیستم دیزاین من را نشان بده" (Show me my design system history).
• فایل theme.json را دستی برای مقادیر قبلی ویرایش کنید.
• با انتخاب‌های متفاوت، اسکیل (skill) را دوباره اجرا کنید.

گام‌های بعدی

پس از تعریف سیستم دیزاین خود:

١. سایته پشکنە بکە: بۆ دۆزین دیزاینی نوێ، سەردانی سایتت بکە. ٢. زیاتر پێشکەوتە: بەم تواناکە دووبارە وردکاری بکە. ٣. Template دروست بکە: بە یەکەکانی دیزاین (design tokens) خۆت، template و بلوکە تایبەت دروست بکە. ٤. دۆکومێنت بکە: سیستمی دیزاینی خۆت لەگەڵ ئەندameni تیمت بەشدار بکە.