پرش به مطلب اصلی

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

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

زیبایی‌شناسی سیستم طراحی چیست؟​

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

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

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

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

ثبات (Consistency)​

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

  • تمام متن از یک مقیاس تایپوگرافی استفاده کند.
  • رنگ‌ها در سراسر سایت شما به طور یکنواخت به کار روند.
  • فاصله (spacing) از یک الگوی قابل پیش‌بینی پیروی کند.
  • انیمیشن‌ها یکپارچه به نظر برسند.

کارایی (Efficiency)​

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

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

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

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

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

فعال‌سازی مهارت زیبایی‌شناسی سیستم طراحی​

فعال‌سازی دستی​

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

"Help me refine my design system"

یا

"Let's improve my site's aesthetics"

یا

"Guide me through design system decisions"

پیشنهادات خودکار​

عامل‌ها (Agents) ممکن است زمانی که:

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

از استفاده از این مهارت پیشنهاد دهند.

فرآیند زیبایی‌شناسی سیستم طراحی​

گام ۱: تایپوگرافی​

عامل در مورد انتخاب‌های فونت شما سؤال می‌کند:

ترجیح شما برای سبک تایپوگرافی چیست؟
- سریف (Serif) (سنتی، شیک)
- سنس-سریف (Sans-serif) (مدرن، تمیز)
- مونوسپیس (Monospace) (فنی، متمرکز بر کد)

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

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

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

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

گام ۲: پالت رنگ (Color Palette)​

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

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

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

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

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

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

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

گام ۳: فاصله (Spacing)​

چقدر فضای تنفس (Breathing room) می‌خواهید؟

ترجیح مقیاس فاصله:
- فشرده (Compact) (طرح‌بندی‌های تنگ و کارآمد)
- عادی (Normal) (فاصله متعادل)
- فراگیر (Spacious) (فضای خالی زیاد و دلپذیر)

این بر موارد زیر تأثیر می‌گذارد:
- پدینگ داخل دکمه‌ها و کارت‌ها
- مارجین بین بخش‌ها
- گپ بین آیتم‌های گرید

عامل توکن‌های فاصله را تعریف می‌کند:

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

گام ۴: حاشیه و سایه (Borders and Shadows)​

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

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

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

عامل موارد زیر را ایجاد می‌کند:

  • توکن‌های شعاع حاشیه (برای دکمه‌ها، کارت‌ها، ورودی‌ها)
  • توکن‌های سایه برای سطوح ارتفاع
  • توکن‌های عرض حاشیه

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

هنگام تعامل، سایت شما چه حسی داشته باشد؟

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

انیمیشن‌های خاص:
- ترنزیشن صفحات: محو شدن (fade)، اسلاید، یا هیچ‌کدام؟
- هاور دکمه: مقیاس، تغییر رنگ، یا هر دو؟
- حالت‌های بارگذاری: اسپینر، اسکلتون، یا نوار پیشرفت؟

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

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

اعمال زیبایی‌شناسی سیستم طراحی​

اعمال خودکار​

پس از تکمیل مهارت، عامل:

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

اعمال دستی​

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

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

مشاهده سیستم طراحی شما​

سؤال از عامل​

"Show me my design system"

یا

"What are my current design tokens?"

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

مشاهده theme.json​

برای دیدن تعاریف خام توکن، فایل /wp-content/themes/[theme-name]/theme.json را در یک ویرایشگر متن باز کنید.

به‌روزرسانی سیستم طراحی شما​

به‌روزرسانی‌های سریع​

از عامل برای تغییرات خاص سؤال کنید:

"Make the primary color darker"

یا

"Increase the spacing scale by 20%"

یا

"Change the heading font to a serif"

بازطراحی کامل​

مهارت زیبایی‌شناسی سیستم طراحی را دوباره اجرا کنید:

"Let's redesign my entire design system"

این کار شما را دوباره از تمام تصمیمات راهنمایی می‌کند و با مقادیر فعلی شما شروع می‌شود.

به‌روزرسانی‌های جزئی​

جنبه‌های خاصی را به‌روز کنید:

"Just update the color palette, keep everything else"

بهترین شیوه‌های سیستم طراحی​

ثبات (Consistency)​

  • همیشه از توکن‌های یکسان استفاده کنید.
  • رنگ‌ها یا اندازه‌های یک‌باره (one-off) ایجاد نکنید.
  • به جای کدگذاری مقادیر، از توکن‌ها ارجاع دهید.

نام‌گذاری (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) ایجاد کنید.
  • برای افزودنی‌های آینده برنامه‌ریزی کنید.

مستندسازی (Documentation)​

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

  • اینکه چرا رنگ‌های خاصی را انتخاب کرده‌اید.
  • چه زمانی باید از هر توکن استفاده شود.
  • استثناها و موارد لبه‌ای (edge cases).

الگوهای رایج سیستم طراحی​

مینیمال مدرن (Modern Minimalist)​

  • تایپوگرافی سنس-سریف (Inter, Helvetica)
  • پالت رنگ محدود (۲ تا ۳ رنگ)
  • فاصله فراگیر
  • سایه‌های ظریف
  • انیمیشن‌های نرم و سریع

گرم و دوستانه (Warm and Friendly)​

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

شرکتی حرفه‌ای (Professional Corporate)​

  • سنس-سریف تمیز (Roboto, Open Sans)
  • پالت خنثی با رنگ تأکیدی
  • فاصله ساختاریافته
  • سایه‌های مینیمال
  • ترنزیشن‌های ظریف

خلاقانه و جسور (Creative and Bold)​

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

عیب‌یابی (Troubleshooting)​

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

  • کش مرورگر خود را پاک کنید.
  • اگر از یک ژنراتور استاتیک استفاده می‌کنید، سایت را بازسازی کنید.
  • بررسی کنید که theme.json یک JSON معتبر باشد.
  • مطمئن شوید که قالب فعال است.

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

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

می‌خواهم به سیستم طراحی قبلی برگردم

  • از عامل بپرسید: "Show me my design system history"
  • theme.json را به صورت دستی به مقادیر قبلی ویرایش کنید.
  • مهارت را با انتخاب‌های متفاوت دوباره اجرا کنید.

گام‌های بعدی​

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

۱. سایت خود را مرور کنید: برای دیدن طراحی جدید، از سایت خود دیدن کنید. ۲. بهبود بیشتر: با استفاده مجدد از این مهارت، تنظیمات را انجام دهید. ۳. ایجاد قالب‌ها: با استفاده از توکن‌های طراحی خود، قالب‌های بلاک سفارشی بسازید. ۴. مستندسازی: سیستم طراحی خود را با اعضای تیم به اشتراک بگذارید.