اصطلاحات رنگ در طراحی رابط کاربری به چه معناست؟
در طراحی رابط کاربری اصطلاحات مشخصی برای نقش رنگ‌ها در یک محصول استفاده می‌شود. این نام‌ها کمک می‌کنند اعضای تیم درباره رنگ‌های اصلی، سطوح، خطاها و حالت‌های مختلف یک زبان مشترک داشته باشند. بخشی از اصطلاحات این مقاله از Material Design آمده‌اند، اما مفهوم کلی آن‌ها در بسیاری از Design Systemها هم دیده می‌شود.
تعریف دقیق هر اصطلاح ممکن است بین Design Systemها کمی متفاوت باشد؛ بنابراین بهتر است این موارد را به‌عنوان یک چارچوب مفهومی در نظر بگیرید، نه یک استاندارد ثابت برای همه محصولات.
رنگ‌های اصلی در رابط کاربری
رنگ اصلی یا Primary Color
Primary Color رنگی است که هویت اصلی محصول را در بخش‌های مهم رابط کاربری نمایش می‌دهد. این رنگ می‌تواند در Actionها، عناصر کلیدی، حالت‌های انتخاب‌شده یا بخش‌های شاخص برند استفاده شود. در یک Design System مدرن بهتر است کاربرد آن بر اساس نقش معنایی تعریف شود، نه صرفا به این دلیل که «رنگ برند» است.
رنگ ثانویه یا Secondary Color
Secondary Color برای ایجاد تمایز و برجسته‌کردن بخش‌های محدود رابط استفاده می‌شود. داشتن آن الزامی نیست و معمولا باید کنترل‌شده‌تر از رنگ اصلی به کار برود.
- دکمه‌های شناور و Actionهای مهم
- Selection Controlها مثل Slider و Switch
- حالت‌های انتخاب‌شده یا Highlight
- Progress Indicatorها
- لینک‌ها یا عناصر تاکیدی خاص
Variantهای رنگ
Variantها نسخه‌های روشن‌تر، تیره‌تر یا تغییر‌یافته یک رنگ هستند. در Design Systemهای جدید معمولا به‌جای نام‌گذاری صرفا Light و Dark، رنگ‌ها در قالب Scale یا Tokenهایی با نقش مشخص تعریف می‌شوند تا استفاده آن‌ها در کل محصول قابل کنترل باشد.
Background، Surface و Error
Background Color
Background Color رنگ زمینه‌ای است که محتوای اصلی روی آن قرار می‌گیرد. در گذشته سفید انتخاب رایجی بود، اما در طراحی امروز ممکن است برای Light Mode و Dark Mode یا Themeهای مختلف چند Background Token داشته باشیم.
Surface Color
Surface Color برای سطح کامپوننت‌هایی مثل Card، Sheet، Menu، Dialog یا Container به کار می‌رود. Surface لزوما با Background یکسان نیست و می‌تواند برای ایجاد Layering و سلسله‌مراتب بصری تفاوت داشته باشد.
Error Color
Error Color وضعیت خطا را نشان می‌دهد؛ مثلا زمانی که داده یک Field نامعتبر است یا یک عملیات شکست خورده. کد رنگ ثابتی برای همه محصولات وجود ندارد؛ مهم‌تر از Hex مشخص، کنتراست مناسب، سازگاری با Accessibility و استفاده یکپارچه از Semantic Tokenهاست.
On Color چیست؟
در Material Design، پیشوند On به رنگ محتوایی اشاره می‌کند که روی یک سطح رنگی قرار می‌گیرد؛ مثلا On Primary برای متن یا آیکانی که روی Primary نمایش داده می‌شود. هدف اصلی این نام‌گذاری مشخص‌کردن رابطه رنگ Foreground و Background و حفظ خوانایی است.
On Colorها بیشتر برای متن، آیکان و گاهی Border استفاده می‌شوند. در Design Systemهای مبتنی بر Token می‌توانید همین مفهوم را با نام‌هایی مثل Content Primary، Text on Accent یا Icon on Brand هم ببینید.
Alternative Colors و Themeهای مختلف
رنگ‌های جایگزین زمانی مفیدند که محصول چند Theme، چند برند فرعی یا بخش‌هایی با هویت متفاوت دارد. نکته مهم این است که این رنگ‌ها همچنان باید از یک سیستم منسجم پیروی کنند و کنتراست، Accessibility و رفتار Semantic آن‌ها کنترل شود.
- Light Mode و Dark Mode
- Themeهای متفاوت برای بخش‌های مختلف یک محصول
- محصولات مختلف داخل یک Product Family
- White-label یا Brand Themeهای مختلف
چرا این اصطلاحات مهم‌اند؟
شناخت این اصطلاحات فقط برای انتخاب رنگ نیست. وقتی در Figma، Design System یا کد محصول با Tokenها و Stateهای مختلف کار می‌کنید، همین مفاهیم به تیم کمک می‌کنند درباره نقش رنگ‌ها دقیق و یکدست صحبت کند.
