نیای رنگ‌ها گرچه جذاب و سرگرم‌کننده است اما وقتی طراح UI باشید و برای هر برند جدید لازم باشد پالت رنگی جدیدی را انتخاب کنید ممکن است گیج کننده باشد. رنگ سایت و سایر محصولات گرافیکی گرچه تاثیر مستقیم و مشخصی روی کاربران نمی‌گذارد اما تاثیر ویژه‌ای بر انتخاب های کاربران دارد. ممکن است اگر سراغ کاربرانی که به محض ورود به یک سایت بدون توجه به محتوا، از آن خارج می‌شوند بروید و از آن‌ها بپرسید چرا این سایت را ترک کردی نتوانند درست پاسخ بدهند. اما دقیقا به خاطر رنگ‌هایی باشد که حس باید را در کاربر به وجود نیاورده و او را فراری داده اند. در این مطلب اصولی برای انتخاب رنگ در طراحی UI را معرفی میکنیم تا این مساله کمتر گیج کننده باشد. تا انتهای مطلب با آژانس دیجیتال مارکتینگ تاس همراه باشید و بخوانید:
- اصول انتخاب رنگ اصلی در طراحی UI
- اصول انتخاب رنگهای ثانویه در طراحی UI
Table of Contents
پیشنهاد میکنیم مطالعه کنید:
آشنایی با تئوری رنگ ها
تئوری رنگ یک دانش گسترده است که شامل قوانین و دستورالعمل هایی در مورد ترکیبات مختلف رنگ و کاربرد آن ها می باشد. مبحث تئوری رنگ ها یک علم میان رشته ای بوده و به غیر از اصطلاحات و طبقه بندی های اساسی (مانند طرح های رنگی) ، مباحث دیگری مانند ادراک انسان، انجمن های فرهنگی، روانشناسی رنگ و موارد دیگر را نیز در بر می گیرد.
یادگیری در مورد تئوری رنگ برای طراحان وب می تواند به شما در ایجاد طرح های موثر و هوشمند کمک کند. درک اصول اولیه برای هر حرفه ای در این زمینه ضروری است.
تئوری رنگ ها در طراحی سایت به این معنی می باشد که تمام رنگ ها دارای معانی خاصی هستند و بیان کننده دسته بندی رنگ ها، نحوه ارتباط رنگ ها، مد های رنگی، معانی رنگ ها و دیگر موضوعات می باشد. شما به عنوان یک برنامه نویس باید آگاهی کامل از تئوری رنگ ها در طراحی سایت داشته باشید تا بتوانید بهترین و مناسب ترین رنگ برای وب سایت مورد نظر خود را انتخاب نمایید. در ادامه به طور کامل به این موارد می پردازیم.
پالت رنگی اصلی در سیستم طراحی
زیاد تفاوتی ندارد که چه محصولی را برای چه برندی طراحی می‌کنید. در تمام موارد با یک رنگ اصلی که معمولا توسط صاحبان برند انتخاب شده است طرف هستید. بعد از آن نوبت به رنگهای ثانویه می‌رسد. که قوانین خاص خود را دارند و شما آن‌ها را انتخاب می‌کنید. در این بخش مراحل تعیین و آماده کردن رنگ اصلی و در بخش بعدی موارد مربوط به رنگهای ثانویه را بررسی میکنیم.
۱. رنگ برند را تعیین کنید
هر کسب و کار و برندی دارای یک یا چند رنگ اصلی است که بر اساس آرمان‌ها و فعالیت‌هایشان انتخاب شده‌اند. این رنگ‌ها پایه و اساس سیستم طراحی شما هستند. لازم است که در اسرع وقت کد این رنگ‌ها را از کارفرما دریافت کنید و اگر رنگی انتخاب نکرده‌اند به آن‌ها کمک کنید هرچه سریعتر این کار را انجام دهند. بدون انتخاب رنگ برند هرکاری که در ادامه انجام دهید بیهوده خواهد بود.
۲. رنگ درست را به کار بگیرید
اگر رنگی که به شما می‌دهند، مشکلاتی دارد حتما در میان بگذارید و سعی کنید تغییر ایجاد کنید. آیا آبی که برای برند انتخاب کرده‌اند زیادی سرد و کسل کننده است و پویایی برند را زیر سوال می‌برد؟ در وهله بعد حتی اگر رنگ اصلی تغییری نکرد از هم‌خانواده‌هایش کمک بگیرید. طراحی برند را با استفاده بیش از حد از رنگ اصلی مسموم نکنید. چرا که وقتی نتیجه خلاف دلخواه باشد خود مسئولان برند هم از شما شاکی می‌شوند! پس جنگ اول به از صلح آخر!
۳. طیف خنثی را به کار بگیرید
تمام طیف‌های خاکستری به علاوه سفید و برخی از درجات مات رنگهای دیگر مثل قهوه‌ای گل آلود، رنگ‌ها خنثی را تشکیل می‌دهند. استفاده از رنگهای اصلی به تنهایی ممکن نیست. در واقع چیزی نزدیک به ۶۰ درصد هر صفحه نرمال در سایت را رنگهای خنثی تشکیل می‌دهند. رنگهای خنثی از خستگی چشم جلوگیری می‌کنند به خاطر همین در بدنه اصلی محتوا یا سایر قسمت‌های طولانی از این رنگ‌ها استفاده می‌شود. تنها نکته‌ای که باید درنظر بگیرید این است که کنتراست رنگهای خنثی را هم در حد معمول نگه دارید. مثلا اگر زغال سنگی تیره را برای دس زمینه استفاده کنید به نظر می‌رسد به اصل خنثی بودن نیشخند زده‌اید!
۴. آبی دیجیتال، همیشه آبی دیجیتال است!
بعضی رنگ‌ها مثل رنگ آبی لینک‌ها از ابتدای تاریخ موتورهای جستجو همین رنگ بوده‌اند و هنوزهم همین رنگی هستند. کسی نمی‌گوید دست و پایتان را بسته اند که از آبی دیجیتال در قسمت دکمه‌های بخصوص و لینک‌ها استفاده کنید. اما توجه کنید وقتی چیزی تا این حد برای مخاطب جا افتاده است، تغییر دادنش ممکن است تبعاتی داشته باشد. یعنی اگر از آبی دیجیتال استفاده نکنید ممکن است کاربر متوجه نشود این قسمت سایت قابل کلیک است.
اگر تم وبسایت شما به رنگ آبی دیجیتال نزدیک است، مجبورید از رنگ دیگری استفاده کنید.
۵. طیف رنگ و سایه را برای هر رنگ اصلی مشخص کنید
پالت‌های رنگ و رنگهای مکمل و همخوان مدت‌ها پیش از وبسایت‌ها کار می‌کرده‌اند. چیزی نزدیک به هزاران سال! نقاشی هنری است که چشم به خوبی با آن آشناست. بنابراین نمی‌شود چشم‌ها را فریب داد. حالا که رنگهای اصلی‌تان مشخص شده‌اند بایستی طیف‌هایی از رنگ اصلی که می‌توانید در سایت استفاده کنید را با HEX کد و سایر شاخص‌ها تعیین کنید. فکر نکنید انتخاب رنگ اصلی یعنی وحی منزل و همه جا باید همان رنگ درج شود. شما با یک کد قرار نبسته اید که حتما همه جای سایت همان را استفاده کنید. طیف رنگ را برای تکمیل پالت بررسی کنید و سایه‌های عناصر را انتخاب کنید.
رنگ های ثانویه در سیستم طراحی
پس از انجام کارهایی که به رنگ اصلی سایت مربوط می‌شد باید سراغ رنگهای ثانویه بروید. به طور کلی درجه اهمیت رنگهای طراحی به شرح ۶۰٪ رنگ غالب اصلی، ۳۰٪ رنگ ثانویه و ۱۰٪ رنگ برجسته است که برای نوشته‌ها و… استفاده می‌شود. از حالا به بعد نکات مربوط به رنگهای ثانویه را بررسی خواهیم کرد:
۶. مجموعه‌ای از رنگهای معنی دار برای سنجش بازخورد آماده کنید
رنگ اصلی شما تنها رنگی نیست که در سیستم طراحی به کار می‌گیرید. پس از انتخاب رنگهای اصلی بایستی پالت رنگی ثانویه را نیز انتخاب کنید. یکی از بهترین راه‌ها برای انتخاب رنگهای ثانویه الهام از طبیعت است. طبیعت قوانین نهفته بسیاری را رعایت می‌کند. به طور مثل اگر آبی دریا رنگ اصلی شماست، رنگ نسکافه‌ای نزدیک به رنگ شن‌های ساحل می‌تواند مکمل خوبی برای آن باشد. راه دیگر استفاده از ابزارهایی مثل adobe color برای پیدا کردن رنگهای مکمل و همخوان است. از بین تمام رنگ‌هایی که ادوبی کالر به شما ارائه می‌کند، آن‌هایی که می‌توانند معنی دار باشند را انتخاب کنید. سپس آن‌ها را با معیارهای برند بسنجید و نزدیک‌ترین‌ها به هدف را انتخاب کنید.
۷. کارکرد هر رنگ در تم را شفاف کنید
کار با انتخاب رنگ تمام نمی‌شود. حالا وقت تنظیم کردن تم و هماهنگ کردن عناصر با رنگ‌هاست! در این مرحله بایستی تعیین کنید که برای عناصری مثل پس زمینه محتوا، پس‌زمینه دکمه، رنگ تب‌های فعال و غیرفعال، رنگهای حاشیه‌ها و… کدام رنگ‌ها را به کاربگیرید. گاهی اوقات این که در یک دکمه کدام یکی از رنگ‌هایی که در پالت انتخاب کرده اید را در حاشیه و کدام را در بستر دکمه به کارببرید، می‌تواند تغییرات چشمگیری ایجاد کند. پس با فکر و دقت کافی انتخاب کنید.
بیشتر بخوانید:
۸. دسترسی پذیری را بررسی کنید
دستورالعمل‌های WCAG هر قدرهم پیچیده باشند باید رعایت شوند تا طراح و توسعه دهنده را از دردسرهای بعدی و جستجو میان کدها در امان بدارد. کنتراست رنگ قابل دسترسی باید یک عمل اصلی در تنظیم هر سیستم رنگی دیجیتال از ابتدا باشد. هر طراح سیستمی که مسئول رنگ است باید با قوانین WCAG 2.0 آشنا باشد، ابزاری برای آزمایش جفت رنگ داشته باشد (مانند Tanaguru) و روش کار را در انتخاب رنگ بگنجاند.
۹. رنگهای تیره برای Light mood و رنگهای روشن برای Dark mood را ارزیابی کنید
یک طراح خوب تمام گزینه‌‌های درخواستی را پیش از ارائه بررسی می‌کند. قرار نیست که همان رنگ‌هایی که برای زمینه روشن انتخاب کرده‌اید را عینا در طراحی با زمینه تیره اجرا کنید. یا بدتر، این که آن‌ها را معکوس کنید. تقریبا تمام مراحلی که برای زمینه اصلی سایت طراحی کردید را بایستی در طراحی برای زمینه تیره طی کنید. سپس پالت نهایی را در دکمه‌ها و عناصر مختلف بررسی کنید.
نکته: در این مرحله حتی اگر نیازی به دارک مود نباشد، بایستی نوشتار روشن روی زمینه تیره و برعکس را نیز برای طرح اصلی آزمایش کنید.
۱۰. از رنگ برای ایجاد آگاهی و دسترسی به برند استفاده کنید
آگاهی از برند یکی از حیاتی‌ترین مسائل برای صاحبان کسب و کار است. و رنگ یکی از عوامل تاثیرگذار در آن است. شما بایستی بتوانید با سیستم رنگی که طراحی کرده‌اید، آگاهی از برند را به بهترین شکل ممکن ایجاد کنید. یعنی مخاطبان با دیدن رنگنبدی که شما انتخاب کرده‌اید به سادگی بتوانند برند را تشخیص بدهند. شناخت خوب شما از روانشناسی رنگ و طراحی می‌تواند خیال عده زیادی از جمله مدیران برند، تیم طراحی، توسعه دهندگان و مجریان را راحت کند.
جمع‌بندی
انتخاب رنگ در طراحی UI گرچه کاری لذتبخش و جذاب است اما قوانین و جزییاتی دارد که بسیاری از آن‌ها را در این مطلب بررسی کردیم. اگر لازم است بیشتر درباره رنگ و طراحی بخوانید می‌توانید به وبلاگ تاس مراجعه کرده و در دسته بندی طراحی UI/UX مطالب مورد نظر خود را پیدا کنید. اگر سوالی در این باره در ذهن دارید که ما به پاسخ آن نپرداخته‌ایم می‌توانید از بخش نظرات با ما به اشتراک بگذارید. فراموش نکنید که همواره می‌توانید برای کلیه خدمات طراحی سایت و طراحی UI روی تاس حساب کنید.
صادق رحمتی
پیشنهاد میکنیم مقالات زیر را از دست ندهید
بهترین بازی جهان برای گوشی برای همه سنین
آموزش استفاده از رینگ لایت و تنظیمات آن
آزمایش Free T4 و تشخیص مشکلات تیروئیدی!
