| کانال طراحی و رابط‌کاربری |
در طراحی UI خیلی وقت‌ها فقط با یک تغییر ساده در رنگ می‌شود رفتار و وضعیت یک کامپوننت را برای کاربر کاملاً شفاف کرد. یکی از مهم‌ترین جاها، دکمه‌ها (Buttons) و حالت‌های مختلفشان است.
🟢 ایده:
برای هر حالت (State) دکمه، یک رنگ و استایل مشخص و سازگار در کل محصول داشته باش:
• حالت عادی (Default)
• حالت Hover / Pressed
• حالت Disabled
• حالت Error / Destructive
این کار باعث می‌شود کاربر بدون فکر اضافه، فقط با دیدن رنگ و کنتراست، متوجه شود کدام اکشن فعال، غیرفعال یا خطرناک است.
✅ مثال عملی (بر اساس Material Design):
• Action اصلی: رنگ پر (Filled) با کنتراست بالا نسبت به پس‌زمینه
• Secondary: حاشیه‌دار (Outlined) با رنگ ملایم‌تر
• دکمه خطرناک (Delete): قرمز با کنتراست بالا
• Disabled: کاهش Opacity تا جایی که هنوز خوانا باشد ولی واضحاً غیرقابل‌کلیک به‌نظر برسد
نمونه توصیفی ساده برای یک Button System:
Primary: #2962FF (Default)
Primary: #0039CB (Pressed)
Primary: rgba(41,98,255,0.12) (Disabled bg)
Danger: #D32F2F (Default)
Danger: #9A0007 (Pressed)
Text on Btn: #FFFFFF
✨ چند نکته UX مهم:
• برای حالت Disabled فقط به Opacity تکیه نکن؛ کنتراست متن را هم چک کن که با WCAG حداقل > 3.0 در حالت خوانا باشد.
• رنگ‌های Action اصلی و خطرناک را خیلی به هم نزدیک انتخاب نکن تا کاربر در لحظه اشتباه کلیک نکند.
• در تمام صفحات از یک System ثابت استفاده کن؛ Primary امروز آبی و فردا بنفش نشود.
🔍 منبع پیشنهادی برای دیدن مثال‌های خوب:
راهنمای Buttons در Material Design 3
امروز اگر در Figma یک Style کوچک برای رنگ‌های State بسازی، فردا در کل Design System وقت و انرژی زیادی ذخیره می‌شود و رفتار UI برای کاربر قابل‌پیش‌بینی و قابل‌اعتماد می‌ماند.
🔖 #Design #طراحی #UI #UX #UI #UX #Color #Design_System #Buttons
👤 Developix
💎 Channel: @DevelopixDesign
7 · 1.4K ·