Skip to main content

مهارەتی جمالیات سیستمی طراحی (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)​

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

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

پروسيسى دیزاین سیستیم​

پله ١: تایپوگرافی​

Agent دەپرسێت لەسەر هەڵبژاردنی فۆنتەکانت:

چۆن جۆری تایپوگرافی خۆت پێداویستی دەکەیت؟
- Serif (کلاسیکی، ڕێکوپێک)
- Sans-serif (مۆدێرن، پاک)
- Monospace (تەکنیکی، بۆ کۆد)

بۆ فۆنتی سەرەکی (heading font):
- ئایا دەتەوێت فۆنتێکی تایبەت بۆ ساردی و سەردان بکەیت، یان هەمانەکەی بە دەقەکە بکاربهێنیت؟
- پێداچوونەوە: قورس، ڕێکوپێک، وشک، یان میکمەڵ؟

بۆ فۆنتی دەق (body font):
- خوێندنەوە گرنگە. ئایا زیاتر پێویستتە:
  - دەقی گەورەتر و بە شانا زیاتر
  - دەقی بچووک و کارامەتر
  - ڕێژەی ستاندارد

پاشان Agent دیاری دەکات:

  • فۆنتی سەرەکی (Heading font): فۆنت سەرەکی بۆ ساردییەکان و ناوەڕۆکەکانی سەرنجڕاکێش.
  • فۆنتی دەق (Body font): فۆنتێک بۆ پاراگرافەکان و دەقی سەرەکی.
  • فۆنتی مونۆسپیس (Monospace font): فۆنتێک بۆ کۆد و ناوەڕۆکی تەکنیکی.
  • پێکهاتەی گەورەبوونەوەی سایەکان (Size scale): قەبارە پێشنیارکراوەکان (کچ، بنەڕەت، گەورە، XL، هتد).
  • پێکهاتەی وزە (Weight scale): قورسایی فۆنتەکان (ڕگولار، ناوەند، قورس، هتد).
  • ارتفاعی خاڵان (Line height): فاصلەکردن لە نێوان ڕیزەکان بۆ ئاسانخوێندنەوە.

پله ٢: پالتۆی ڕەنگەکان​

بۆ دیاریکردنی پالتۆی ڕەنگەکانت، بیگەین.

ڕەنگی سەرەکی (ڕەنگی براندەکەت):
- ئێستا: [دیکات دەکات بە ڕەنگی هێنا]
- گۆڕان بۆ: [هەڵبژاردنی ڕەنگ یان کۆدی ہیکسی]

ڕەنگی دووەم (ڕەنگی پشتگیرکەر):
- ئێستا: [دیکات دەکات بە ڕەنگی هێنا]
- گۆڕان بۆ: [هەڵبژاردنی ڕەنگ یان کۆدی ہیکسی]

ڕەنگی سەرنج (ساردییەکان و CTA'کان):
- ئێستا: [دیکات دەکات بە ڕەنگی هێنا]
- گۆڕان بۆ: [هەڵبژاردنی ڕەنگ یان کۆدی ہیکسی]

پالتۆی تەنهای (سایەکان بۆ دەق، سنوورەکان، پاشبنەمای سەرنج):
- ڕوون: [ڕەنگ]
- ناوەند: [ڕەنگ]
- تاریک: [ڕەنگ]

Agent پالتۆی تەواو دروست دەکات کە لەخۆ دەگرێت:

  • ڕەنگی سەرەکی، دووەم و سەرنج.
  • سایەکانی تەنهای (ڕوون، ناوەند، تاریک).
  • ڕەنگەکانی مەزن (سەرکەوتن، ئاگاداری، هەڵە).
  • حالەتەکانی دەستپێکردن (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)، یا هیچ‌کدام؟
- هاور دکمه: تغییر اندازه، تغییر رنگ، یا هر دو؟
- وضعیت بارگذاری: اسپینر (spinner)، اسکلت (skeleton)، یا نوار پیشرفت (progress bar)؟

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

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

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

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

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

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

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

شما همچنین می‌توانید مستقیماً فایل 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"
        }
      ]
    }
  }
}

Naqshandina Sistemê Dizanîna We​

Porsê Agentê (Ask the Agent)​

"Têrê sistemê dizanîna min derxistin"

یان

"Çi hewletên dizanîna te an?"

Agentê dê tipografiya, rengên, distansiyên û hûrguliyên din yên we derxistin.

Li Berandina theme.json​

/wp-content/themes/[theme-name]/theme.json ji bernameyek tekstualê dibin biftur ku definjisyonên raw (raw) yên tokenan derxistin binihin.

Günberûnên Sistemê Dizanîna We​

Günberûnên Xûr​

Ji agentê xwesta gelek gelek binivîsîn:

"Rengê primar bêje dirêj"

یان

"Pêkşîna pîlên distansiyê bi 20% zêdiste"

یان

"Fonta başê ji bo serif (serif) gelek bike"

Redizanînê Pûr​

Hûrguliyên Sistemê Dizanîna xwe derxistin:

"Biar me sistemê dizanîna bi tevahî redizanîn"

Ev dê we li ser hemû porsê pêşvebûn re ji navaqên werin destpê dikate, li ser qiîmatên te yên berê.

Günberûnên Partsîyel​

Porsên taybetî guhberin:

"Têrê rengan derxistin, hemû din we bi xwe bide"

Pişterên Bestarî yên Sistemê Dizanîna​

Hêzbarî (Consistency)​

  • Ji cihê hene li hemû jay hatine ji tokenên yaweyên we bistînin.
  • Rengên an jî pîlên taybetî nê şan bikin.
  • Ji bo vekirina qiîmatên rast ne, ji bo referansa tokenan bistînin.

Navên ronahî û semantic li stranên xwe bistînin:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Pêşveberî (Scalability)​

سیستم خود را برای مقیاس‌پذیری طراحی کنید:

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

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

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

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

مینیمال مدرن​

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

گرم و دوستانه​

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

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

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

خلاق و جسورانه​

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

عیب‌یابی​

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

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

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

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

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

  • از عامل بخواهید: "تاریخچه سیستم طراحی من را نشان بده"
  • دستی فایل theme.json را به مقادیر قبلی ویرایش کنید
  • با انتخاب‌های متفاوت، مهارت را دوباره اجرا کنید

مراحل بعدی​

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

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