(UI NOTES / COLOR — 01)
خیلی وقت‌ها انتخاب رنگ توی (UI) تقریباً از یک مسیر آشنا شروع می‌شه:
یه (Primary) داریم.
بعد می‌ریم سراغ رنگ مکملش.
بعد (Secondary).
بعد (Accent).
و یه جایی وسط کار می‌بینیم چندتا رنگ داریم که حالا باید براشون کاربرد پیدا کنیم :))
من خودم هرچی بیشتر (UI) کار کردم، بیشتر به این رسیدم که شاید سؤال اول نباید این باشه:
«رنگ بعدی چی باشه؟»
قبلش یه سؤال مهم‌تر هست:
«اصلاً چرا به یه رنگ دیگه نیاز دارم؟»
انتخاب رنگ مکمل اشتباه نیست
این نکته برام مهمه، چون بحث اصلاً این نیست که (Complementary Color) یا بقیه‌ی (Color Scheme)ها دیگه کاربرد ندارن.
دارن.
رنگ‌های مکمل، (Analogous)، (Monochromatic) و بقیه‌ی روش‌های ساخت (Palette) هنوز ابزارهای معتبری برای انتخاب رنگ هستن. مسئله بیشتر ترتیب تصمیم‌هاست.
یعنی قبل از اینکه بگم:
«چه رنگی کنار (Primary) خوب به نظر می‌رسه؟»
برای من سؤال مهم‌تر اینه:
«این رنگ قراره دقیقاً چه کاری توی (Interface) انجام بده؟»
قراره (Attention) بگیره؟
یه (Action) مهم رو مشخص کنه؟
(State) رو منتقل کنه؟
بخشی از (Brand) باشه؟
یا فقط چون کنار (Primary) خوب به نظر می‌رسه، وارد (UI) شده؟
این دوتا ممکنه در ظاهر خیلی به هم نزدیک باشن، ولی نتیجه‌شون لزوماً یکی نیست.
وقتی همه‌چی (Attention) می‌خواد
فرض کن (Button) رنگیه.
(Badge) رنگیه.
(Active Tab) رنگیه.
(KPI) یه رنگ دیگه داره.
(Link) هم با یه (Accent) جدید مشخص شده.
هرکدوم از این تصمیم‌ها به‌تنهایی ممکنه منطقی باشن.
مشکل وقتی شروع می‌شه که همه‌شون هم‌زمان می‌خوان دیده بشن.
اون‌وقت رنگ دیگه فقط به (Hierarchy) کمک نمی‌کنه؛ ممکنه خودش تبدیل بشه به یه لایه‌ی جدید از رقابت بصری.
برای همین بعضی وقت‌ها، به‌جای اینکه چیزی که مهمه رو باز هم پررنگ‌تر کنیم، بهتره چیزهای اطرافش رو آروم‌تر کنیم.
(CTA) لزوماً به رنگ قوی‌تری احتیاج نداره.
شاید فقط لازم باشه عناصر کنارش کمتر (Attention) بگیرن.
پس (UI) خوب باید رنگ‌های کمی داشته باشه؟
نه لزوماً.
به نظرم اینجا هم راحت می‌شه از اون طرف بوم افتاد.
قرار نیست از این بحث به یه قانون مثل این برسیم که:
«(UI) خوب فقط دو تا رنگ داره.»
یه (Dashboard) پیچیده ممکنه برای (Status)، (Data Visualization)، (Alert)، (Interaction) و (Brand) واقعاً به چند خانواده‌ی رنگ نیاز داشته باشه.
یه محصول دیگه ممکنه با (Neutral)ها و یک (Brand Color) تقریباً همه‌ی نیازهاش رو پوشش بده.
پس مسئله تعداد رنگ‌ها نیست.
مسئله اینه که هر رنگ یه دلیل برای بودنش داشته باشه.
دو تست ساده برای اینکه ببینیم رنگ داره چه‌کار می‌کنه
گاهی وقتی مدت زیادی روی یه (UI) کار کردیم، دیگه سخت می‌شه بفهمیم واقعاً چه چیزی اول دیده می‌شه.
چون خودمون می‌دونیم (Heading) کجاست، (CTA) کدومه و کاربر باید از کجا شروع کنه.
برای همین دو تا تست سریع می‌تونن کمک‌کننده باشن.
۱. (Grayscale Test): اگه رنگ رو حذف کنم، ساختار هنوز کار می‌کنه؟
یه تستی که خودم خیلی دوستش دارم اینه:
(UI) رو برای چند دقیقه (Grayscale) کن.
نه برای اینکه نسخه‌ی نهایی خاکستری بمونه.
فقط برای اینکه ببینی وقتی (Hue) رو حذف می‌کنی، (Hierarchy) هنوز سر جاش هست یا نه.
مثلاً:
(Heading) هنوز اول دیده می‌شه؟
(CTA) هنوز مشخصه؟
محتوای اصلی و فرعی هنوز از هم قابل تشخیصن؟
(Grouping) هنوز قابل فهمه؟
(State)ها بدون تکیه‌ی کامل به رنگ قابل درکن؟
برای من سؤال اصلی اینه:
«رنگ داره (Hierarchy) موجود رو تقویت می‌کنه، یا به‌تنهایی تمام بار (Hierarchy) رو می‌کشه؟»
اگه با حذف رنگ همه‌چیز به‌هم می‌ریزه، شاید قبل از اضافه‌کردن رنگ بعدی بهتر باشه دوباره (Spacing)، (Typography)، (Surface)، (Border) و (Visual Weight) رو بررسی کنیم.
۲. (Blur Test): وقتی جزئیات رو نبینم، چی هنوز داد می‌زنه؟
یه تست دیگه که برای همین موضوع خیلی به‌درد می‌خوره، (Blur Test) یا همون (Squint Test)ـه.
روش خیلی ساده‌ست:
(UI) رو یه مقدار (Blur) کن، یا حتی از صفحه فاصله بگیر و چشم‌هات رو کمی تنگ کن؛ تا جایی که دیگه نتونی متن‌ها رو درست بخونی.
حالا ببین:
اول کدوم بخش به چشمت میاد؟
(CTA) هنوز یکی از نقاط مهم صفحه‌ست؟
یه (Badge) یا (Card) فرعی بی‌دلیل از (Heading) مهم‌تر دیده نمی‌شه؟
چندتا عنصر هم‌زمان دارن برای (Attention) رقابت می‌کنن؟
(Grouping) کلی صفحه هنوز قابل تشخیصه؟
این تست جزئیات و خوانایی متن رو موقتاً کم می‌کنه تا (Visual Hierarchy) واضح‌تر دیده بشه؛ یعنی بفهمی (Scale)، (Contrast)، (Color) و (Grouping) دارن نگاه رو واقعاً به کجا می‌برن.
مثلاً ممکنه توی حالت عادی یه (Badge) کاملاً منطقی به نظر برسه، ولی وقتی صفحه رو (Blur) می‌کنی ببینی همون (Badge) به‌خاطر (Saturation) یا (Contrast) بالا تبدیل شده به اولین چیزی که توی کل صفحه دیده می‌شه؛ در حالی که اصلاً قرار نبوده (Priority) اول باشه.
اونجا مشکل این نیست که رنگ (Badge) «بد» انتخاب شده.
مشکل اینه که (Visual Weight)ش با نقشی که توی صفحه داره هم‌خوان نیست.
(Blur Test) یه تست سریع برای بررسی (Visual Hierarchy)ـه؛ نه جایگزین (Usability Testing).
فرق (Grayscale Test) و (Blur Test) چیه؟
برای من این دو تا یه چیز رو تست نمی‌کنن.
(Grayscale Test) بیشتر می‌پرسه:
«اگه (Hue) رو بردارم، (UI) هنوز بدون رنگ هم ساختار داره؟»
(Blur Test) یه سؤال دیگه داره:
«وقتی (Detail) و (Text) رو از معادله کم کنم، واقعاً چی بیشتر از همه (Attention) می‌گیره؟»
ممکنه رنگی کاملاً درست و (Brand-aligned) باشه، ولی اون‌قدر (Visual Weight) داشته باشه که نقش واقعی اون (Element) رو بزرگ‌تر از چیزی که هست نشون بده.
پس یکی کمک می‌کنه وابستگی ساختار به (Hue) رو ببینیم و اون یکی کمک می‌کنه بفهمیم (Attention) واقعاً کجا جمع شده.
یه سؤال دیگه که خیلی کمک می‌کنه
موقع طراحی، برای هر رنگ می‌شه این سؤال رو پرسید:
«اگه این رنگ رو حذف کنم، چیزی از (Meaning)، (Hierarchy) یا (Interaction) کم می‌شه؟»
اگه جواب آره باشه، احتمالاً رنگ داره یه کار واقعی انجام می‌ده.
اگه جواب نه باشه، شاید ارزش داشته باشه دوباره دلیل حضورش رو بررسی کنیم.
نه به این معنی که هر چیزی باید صرفاً (Functional) و بی‌روح باشه.
بیشتر به این معنی که انتخاب رنگ هم مثل خیلی از تصمیم‌های دیگه‌ی (Product Design)، بهتره (Intentional) باشه.
چیزی که برای من عوض شد، خود رنگ نبود؛ سؤال بود
قبلاً بیشتر ذهنم درگیر این بود که:
«چه رنگ‌هایی کنار هم خوبن؟»
الان بیشتر به این فکر می‌کنم که:
«اصلاً کجا به رنگ نیاز دارم و این رنگ قراره چه نقشی داشته باشه؟»
و به نظرم همین تغییر سؤال، تصمیم‌های بعدی رو هم عوض می‌کنه.
از اینجا تازه می‌رسیم به سؤال بعدی:
یه (Palette) خوب، چه فرقی با یه (Color System) خوب داره؟
این دقیقاً چیزیه که توی قسمت دوم (UI NOTES / COLOR) می‌خوام برم سراغش.
اینکه چطور از چند رنگی که کنار هم خوب به نظر می‌رسن، برسیم به سیستمی که مشخص باشه هر رنگ کجا، چرا و با چه سطحی از (Emphasis) استفاده می‌شه.
منابع
(Kelley Gordon — Good Visual Design, Explained — Nielsen Norman Group — 2025)
(Kelley Gordon — 5 Principles of Visual Design in UX — Nielsen Norman Group — last reviewed 2026)
(Huei-Hsin Wang — Squint Test — Nielsen Norman Group — 2023)
(Mads Soegaard — UI Color Palette — Interaction Design Foundation — 2026)
(Interaction Design Foundation — Color in UX Design — updated 2026)
