تم تاریک

راهنمای رنگ‌ها Color Guideline ​

راهنمای کامل استفاده از رنگ‌ها در دیزاین سیستم سرخآب ​

رنگ‌ها در دیزاین سیستم سرخآب به‌عنوان یکی از مؤلفه‌های کلیدی، نقش مهمی در ایجاد هویت بصری، دسترسی‌پذیری و هماهنگی بین طراحی‌ها ایفا می‌کنند. ساختار سه‌سطحی رنگ‌ها در این سیستم به گونه‌ای طراحی شده که هر سطح اهداف و کاربردهای مشخصی را دنبال کند. رنگ‌ها در سرخآب به سه سطح کلی تقسیم شده‌اند:

  • Base-variant
  • Theme
  • Color

Base-Variant ​

در این لایه، رنگ‌های خام و شیدهای مختلف رنگ‌ها وجود دارند. این رنگ‌ها در سطح خود فایل دیزاین سیستم قابل دسترسی بوده و برای استفاده عمومی منتشر نشده‌اند. به این رنگ‌ها در این مرحله فقط در درون دیزاین سیستم دسترسی وجود دارد و از آن‌ها برای ساخت رنگ‌های معنایی استفاده می‌شود.

Theme ​

در این بخش، رنگ‌های معنایی قرار دارند که به سه دسته تقسیم می‌شوند:

  • Background (bg): رنگ‌های پس‌زمینه.
  • Foreground (fg): رنگ‌های متن و دیگر المان‌های قابل مشاهده.
  • Stroke (st): رنگ‌های حاشیه‌ها و خطوط.

این رنگ‌ها برای استفاده در هر پروژه به‌طور عمومی در دسترس نیستند و تنها در سطح فایل دیزاین سیستم در دسترس هستند. همچنین، در این بخش، تم دارک مود (Dark Mode) مدیریت می‌شود.

Color ​

این لایه برای دسترسی عمومی منتشر شده و رنگ‌ها به گونه‌ای دسته‌بندی شده‌اند که امکان حفظ دسترسی‌پذیری به‌طور بهینه فراهم شود. در این بخش، رنگ‌ها در سه دسته background، foreground و stroke طبقه‌بندی شده‌اند و همچنین نوعی سیستم شفافیت و دسترسی با استفاده از t1، t2، t3 و t4 در هر دسته قرار داده شده است.

ساختار تایپ‌ها ​

برای حفظ کنتراست مناسب، هر رنگ دارای سه تایپ اصلی است: T1، T2، T3 که این دسته‌بندی‌ها نشان‌دهنده سطوح روشنایی مختلف رنگ‌ها هستند.

این ساختار به دیزاینرها کمک می‌کند تا در انتخاب رنگ‌ها، کنتراست و دسترسی‌پذیری را در نظر بگیرند.

Theme Directory ​

این سطح، رنگ‌های Base-Variant را به توکن‌هایی با معنا تبدیل می‌کند.

ویژگی‌ها و دسته‌بندی‌ها:

  • Background (BG): برای پس‌زمینه‌ها.
  • Foreground (FG): برای متون و المان‌های اصلی.
  • Stroke (ST): برای خطوط و حاشیه‌ها.

ساختار نام‌گذاری:

  • neutral/bg1
  • error/fg1
  • status/fresh-green/fg2

رنگ‌های بدون معنا Status ​

رنگ‌هایی که برای نمایش بخش‌بندی‌ها مثل گراف‌ها و نمودارها استفاده می‌شوند. این رنگ‌ها به همراه صفت توصیفی مانند fresh-green دسته‌بندی می‌شوند.

مدیریت تم‌ها Dark Mode ​

رنگ‌های Theme برای طراحی تم‌های مختلف مانند دارک مود نیز استفاده می‌شوند.

Color ​

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

ویژگی‌های اصلی ​

ساختار ماتریسی برای دسترسی‌پذیری:

  • رنگ‌ها به دسته‌های Background، Foreground و Stroke تقسیم شده‌اند.
  • هر رنگ بر اساس کنتراست و کاربردش به چهار تایپ (T1، T2، T3، T4) تقسیم می‌شود.

ساختار تایپ‌ها:

  • T1: برای کنتراست بالا و المان‌های اصلی.
  • T2: برای کنتراست متوسط و المان‌های ثانویه.
  • T3: برای جزئیات و المان‌های کم‌اهمیت.

چیدمان استیت‌ها States ​

برای افزایش کارایی و دسترسی‌پذیری، دیزاین سیستم سرخآب از استیت‌های مختلف برای رنگ‌ها در کالکشن‌های Theme و Color استفاده می‌کند. این استیت‌ها به دیزاینرها کمک می‌کنند تا به‌راحتی رفتار رنگ‌ها در وضعیت‌های تعاملی یا غیرفعال را مدیریت کنند.

استیت‌های تعریف‌شده در Theme و Color ​

هر رنگ می‌تواند شامل حالت‌های زیر باشد:

  • Default: رنگ اصلی بدون هیچ وضعیت تعاملی.
  • Hover: برای زمانی که کاربر نشانگر یا انگشت خود را روی یک المان قرار می‌دهد.
  • Press: زمانی که کاربر روی یک المان کلیک کرده یا لمس می‌کند.
  • Focus: زمانی که المان مورد نظر در حالت فوکوس قرار دارد (مانند استفاده با کیبورد).
  • Select: زمانی که المان در حالت انتخاب‌شده است.
  • Disable: زمانی که المان غیرفعال است و نمی‌توان روی آن عمل کرد.

نکات مهم:

  • اگر رنگی استیت خاصی ندارد، آن رنگ نباید در آن استیت استفاده شود.
  • در برخی رنگ‌ها، استیت Disable وجود ندارد؛ به این معنا که:
    1. در این حالت، خود رنگ به وضعیت Default برمی‌گردد.
    2. متن یا المان داخلی رنگ به وضعیت Disable تغییر می‌کند.
    3. مثال: neutral/t1/bg1 (رنگ سفید خالص) در وضعیت Disable بدون تغییر باقی می‌ماند، اما متن روی آن به رنگ استیت Disable می‌رود.

رنگ‌های ثابت در دارک مود BG0 و FG0 ​

  • رنگ‌های BG0 و FG0 نشان‌دهنده رنگ‌هایی هستند که در هر دو مود (لایت و دارک) ثابت هستند و تغییر نمی‌کنند.
  • عدد «۰» در این دسته‌بندی به معنای عدم وابستگی به تم است و این رنگ‌ها در تمامی حالات یکسان باقی می‌مانند.
  • مثال: neutral/bg0 و neutral/fg0

راهنمای استفاده از استیت‌ها ​

در Theme و Color:

رنگ‌های استیت‌ها به‌طور پیش‌فرض در سطح Theme و Color مشخص شده‌اند. (مثال)

  • neutral/t1/bg1/default
  • neutral/t1/bg1/hover
  • neutral/t1/bg1/press

برای رنگ‌های بدون استیت خاص:

  • از وضعیت Default رنگ استفاده کنید.
  • مطمئن شوید که کنتراست متن یا خطوط با استانداردهای دسترسی مطابقت دارد.

برای رنگ‌های بدون استیت Disable:

  • رنگ زمینه به حالت Default برمی‌گردد.
  • متن روی آن به رنگ Disable تغییر می‌کند.

مثال:

  • زمینه: neutral/t1/bg1/default
  • متن: neutral/t1/fg2/disable

چرا این ساختار اهمیت دارد؟ ​

دسترسی‌پذیری: ساختار ماتریسی تضمین می‌کند که تمامی کاربران، حتی افراد با مشکلات بینایی، بتوانند محتوای طراحی را به‌درستی مشاهده کنند.

انعطاف‌پذیری: افزودن رنگ‌های جدید به تایپ T4 به تیم طراحی امکان می‌دهد در آینده نیازهای خاص را به‌سادگی مدیریت کند.

هماهنگی در طراحی: رعایت ساختار تایپ‌ها و ترکیب صحیح آن‌ها به یکپارچگی و انسجام طراحی کمک می‌کند.