چرا رنگهای رابط کاربری‌تان مبتدیانه به نظر می‌رسند: ۶ راه‌حل با کدهای دقیق
شش اشتباه رنگی که رابط را مبتدیانه نشان می‌دهند و راه‌حل حرفه‌ای هر کدام با کدهای دقیق: یک رنگ تأکیدی، رنگ به‌همراه آیکون و متن، سطوح تینت‌شده، متن تیرهتر برای رنگ تأکیدی، متن تیره روی زرد، و یک سایه برای هر حالت.
رنگ مبتدیانه به‌ندرت یک تضاد زننده است. شش عادت کوچک است: رنگهای تأکیدی زیاد، رنگی که تنهایی یک کار را انجام میدهد، پرکردن همه‌چیز با رنگ پرقدرت، استفاده از رنگ برند روشن برای متن، سفید روی زرد، و یک سایه برای همه حالت‌ها. رنگ حرفه‌ای آرام به نظر می‌رسد چون برای هر کدام از این‌ها یک قانون دارد. این شش مورد را با کدها ببینید.
۱. یک رنگ تأکیدی، برای اکشن
قرمز
سبز
کهربایی
بنفش
خنثی
خنثی
خنثی
رنگ تأکیدی #6440E0
وقتی هر عنصر رنگ خودش را دارد، رنگ دیگر معنایی ندارد. چشم جایی برای نشستن پیدا نمی‌کند و اکشن واقعی با تزئینات رقابت میکند.
یک رنگ تأکیدی انتخاب کنید و فقط خرجِ چیزهایی کنید که کاربر میتواند روی‌شان عمل کند: دکمه اصلی، تب انتخاب‌شده، لینک. بقیه‌چیز خنثی شود. اگر می‌توانید به یک عنصر رنگی اشاره کنید و بگویید «این که لمس‌شدنی نیست»، رنگش را بگیرید. قانون ۶۰-۳۰-۱۰ همین ایده در قالب نسبت‌هاست: رنگ تأکیدی همان ده درصد کوچک است.
۲. رنگ، آیکون و متن
ایمیل
✕ مبتدیانه: یک حاشیه قرمز و بس
ایمیل
آدرس کامل را وارد کنید، مثل sam@mail.com.
✓ حرفه‌ای: رنگ، آیکون و متن
ایمیل
✕ مبتدیانه: کدام فیلد اشتباه است؟
ایمیل
آدرس کامل را وارد کنید، مثل sam@mail.com.
✓ حرفه‌ای: هنوز کاملاً واضح
حدود ۸ درصد از مردان با تبار شمال اروپا در تشخیص قرمز از سبز مشکل دارند، همان آمار رایج «۱ از ۱۲ مرد». برای آن‌ها، و برای هر کسی که زیر نور آفتاب از گوشی استفاده میکند، حاشیه قرمز یک حاشیه خاکستری است.
پس هر حالت به سه سیگنال نیاز دارد: یک رنگ، یک آیکون در ابتدا، و متنی که بگوید چه کار باید کرد. این همان WCAG 1.4.1 یعنی استفاده از رنگ است: رنگ میتواند پیام را تقویت کند، اما هرگز نباید تنها راه رساندن آن باشد. پالت کامل خطا در مقاله ما درباره رنگ پیام خطا آمده است.
۳. سطوح بزرگ را تینت کنید
پرو شوید، فقط ۴ دلار
نقشه آفلاین، بدون تبلیغ، و اشتراک‌گذاری سفر.
ارتقا✕ مبتدیانه: کل کارت با رنگ کامل
پرو شوید، فقط ۴ دلار
نقشه آفلاین، بدون تبلیغ، و اشتراک‌گذاری سفر.
ارتقا✓ حرفه‌ای: یک تینت، و رنگ کامل روی دکمه
یک بلوک بزرگ با رنگ پرقدرت پرسروصداست و رنگ تأکیدی شما را مصرف میکند. بعد دکمه داخل آن چیزی برای متمایز شدن ندارد، چون همه‌چیز اطرافش از قبل همان رنگ است.
به‌جای آن سطح بزرگ را تینت کنید و رنگ کامل را برای بخشی که کار را انجام میدهد نگه دارید. اینجا کارت روی #E6DDFF نشسته، یک پله کم‌رنگ از همان بنفش، و دکمه #6440E0 کامل است. همین حرکت را برای بنرها، ردیف‌های انتخاب‌شده و بخش‌های هایلایت به کار ببرید. مقاله ما درباره پالت رنگ برند نشان میدهد پله‌های تینت را چطور از یک رنگمایه بسازید.
۴. متن رنگ تأکیدی را تیرهتر کنید
بنفش روشن روی سفید
بنفش تیرهتر روی سفید
رنگ برند روشن به‌عنوان پسزمینه خوب است و به‌عنوان متن ضعیف. #9A79FC روی یک دکمه دوستانه به نظر می‌رسد، اما به‌صورت لینک ۱۴ پیکسلی روی سفید از هم می‌پاشد. راه‌حل این است که رنگمایه را نگه دارید و روشنایی را پایین بیاورید: #6440E0 همان بنفش است، اما آن‌قدر عمیق که خوانده شود.
برای کسی که از این انتخاب دفاع میکند: #9A79FC روی سفید ۳٫۲۲ به ۱ است، کمتر از ۴٫۵ به ۱ که WCAG برای متن می‌خواهد، و #6440E0 برابر ۶٫۲۷ به ۱ است. مقاله ما درباره کنتراست رنگ قابل‌دسترس این اعداد و روش بررسی‌شان را توضیح میدهد.
از هر رنگ برند دو نسخه نگه دارید: نسخه روشن برای پس‌زمینه‌ها و تصویرسازی، و نسخه عمیق‌تر برای متن و آیکون‌های نازک.
۵. متن تیره روی زرد
سفید روی زرد
تیره روی زرد
زرد و رنگهای روشن ذاتاً درخشان‌اند، پس سفید روی آن‌ها تقریباً هیچ تفاوتی در روشنایی ندارد. سفید روی #FED480 برابر ۱٫۴۱ به ۱ است. یک تقریباً‌سیاه مثل #161513 روی همان زرد ۱۲٫۹۹ به ۱ است.
این قانون برای هر پسزمینه روشن صادق است: زرد کم‌رنگ، نعنایی، آبی آسمانی، هلویی. اگر پسزمینه روشن است، متن تیره است. برای طراحی که به سفید روی رنگ برند عادت دارد این برعکس به نظر می‌رسد، و یکی از سریع‌ترین راه‌ها برای حرفه‌ای‌نشان‌دادن یک دکمه است.
۶. یک سایه برای هر حالت
پیشفرض
فشردهشده
غیرفعال
دکمه‌ای که هنگام فشرده‌شدن همان‌طور به نظر می‌رسد که در حالت عادی، هیچ بازخوردی نمی‌دهد، و دکمه غیرفعالی که هم‌رنگ یک دکمه فعال است خراب به نظر می‌رسد. به هر حالت سایه خودش را از همان رنگمایه بدهید: #6440E0 به‌صورت پیشفرض، #4422B2 هنگام فشرده‌شدن، و یک تینت کم‌رنگ مثل #E6DDFF با برچسب خوانای #9A79FC هنگام غیرفعال بودن.
غیرفعال تنها حالتی است که کنتراست پایین در آن قابل قبول است و WCAG آن را معاف کرده، اما برچسب باید آن‌قدر خوانا باشد که کاربر بفهمد دکمه چه کاری می‌کرد. همین مجموعه سه‌سایه‌ای برای لینک‌ها، تب‌ها و سوییچ‌ها هم جواب میدهد.
شش راه‌حل در یک جدول
| مبتدیانه | حرفه‌ای | مقدار |
|---|---|---|
| رنگهای تأکیدی زیاد | یک رنگ تأکیدی، برای اکشن | #6440E0 روی تنها چیزی که باید لمس شود |
| فقط رنگ | رنگ، آیکون و متن | هرگز تنها سیگنال نباشد |
| سطوح با رنگ کامل | سطوح تینت‌شده | #E6DDFF در پسزمینه، #6440E0 روی دکمه |
| رنگ برند روشن به‌عنوان متن | متن تیرهتر برای رنگ تأکیدی | #6440E0، نه #9A79FC |
| سفید روی زرد | متن تیره روی زرد | #161513 روی #FED480 |
| یک سایه برای همه حالت‌ها | یک سایه برای هر حالت | #6440E0، #4422B2، #E6DDFF با برچسب #9A79FC |
سوالات متداول
چه چیزی پالت رنگ UI را آماتور نشان میدهد؟
رنگهای تأکیدی زیاد، استفاده از رنگ بهتنهایی برای رساندن معنا، پرکردن سطوح بزرگ با رنگ پرقدرت، و استفاده از رنگهای برند روشن برای متن. رفع همین چهار مورد معمولاً مهمتر از عوضکردن خود پالت است.
یک UI چند رنگ تأکیدی باید داشته باشد؟
یکی. فقط برای چیزی که کاربر میتواند لمس کند یا روی آن عمل کند استفادهاش کنید و بقیه را خنثی نگه دارید. رنگهای وضعیت مثل قرمز برای خطا جدا هستند و همیشه با آیکون و متن میآیند.
روی پسزمینه زرد چه رنگ متنی بگذاریم؟
یک رنگ تیره. #161513 روی #FED480 حدود ۱۳ به ۱ است، در حالی که سفید روی همان زرد حدود ۱٫۴ به ۱ است. همین برای هر پسزمینه روشن صدق میکند.
چطور یک رنگ برند روشن را برای متن خوانا کنم؟
رنگمایه را نگه دارید و روشنایی را کم کنید. #9A79FC روی سفید حدود ۳٫۲ به ۱ است و #6440E0، همان بنفش، حدود ۶٫۳ به ۱.
دکمه فشردهشده باید چه رنگی باشد؟
یک سایه تیرهتر از حالت پیشفرض، مثل #4422B2 در برابر #6440E0. این به کاربر بازخورد میدهد که لمس ثبت شده، بدون اینکه رنگمایه عوض شود.
آیا دکمههای غیرفعال باید الزامات کنتراست را رعایت کنند؟
WCAG کنترلهای غیرفعال را از حداقل کنتراست معاف میکند، اما برچسب را خوانا نگه دارید تا کاربر بفهمد دکمه چه کاری انجام میدهد.
منابع
- WCAG 2.2, 1.4.3 Contrast (Minimum) (۴٫۵ به ۱ برای متن، اجزای غیرفعال معاف) و 1.4.1 Use of Color.
- نسبت‌ها با فرمول روشنایی نسبی WCAG محاسبه شده‌اند:
#9A79FCروی#FFFFFF۳٫۲۲ به ۱،#6440E0روی#FFFFFF۶٫۲۷ به ۱ (هر دو با رنگمایه حدود ۲۵۴ درجه)،#FFFFFFروی#FED480۱٫۴۱ به ۱،#161513روی#FED480۱۲٫۹۹ به ۱. - نقص بینایی رنگ قرمز-سبز حدود ۸ درصد از مردان با تبار شمال اروپا را درگیر میکند، طبق National Eye Institute.
- سایه‌های حالت‌ها (
#4422B2فشردهشده،#E6DDFFبا برچسب#9A79FCغیرفعال) پالت اختصاصی خودمان هستند. رنگهای فیلتر در بخش ۱ نمونه‌ای هستند. - اولین بار به‌صورت کاروسل در UX Brainy منتشر شد.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
