کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

درک روانشناسی رنگ در طراحی وب موثر

در اینکه روانشناسی رنگها نقش بسزایی در طراحی بازی می کند هیچ شکی نیست. از خریدهای بقالی گرفته تا رنگهای نام های تجاری و طراحی های وب سایت , رنگ یکی از مهم ترین عناصری است که می تواند پیام های مختلفی را به مخاطب ارسال کند .

طبق گفته Kissmetrics زمانی که رنگی را مشاهده می کنیم , پیغام هایی به بخشی از مغز به نام هیپوتالاموس ارسال می شوند. سپس این پیغام باعث ارسال سیگنالهایی به غده pituitary و سپس غده ی Thyroid  می شود. این سیگنال ها باعث ترشح هورمونهایی میشوند که مسئولیت تغییر حالت , احساسات و در نتیجه رفتار ما را دارند.

از اینجا به بعد علم به ما می گوید که چه رنگهایی باعث برانگیختن حس مثبت , منفی و یا ضد و نقیض می شوند. Kissmetrics معتقد است که فقط 90 ثانیه طول می کشد تا کاربر پس از مشاهده وب سایت قضاوت خود از آن را شکل دهد . و جالب این است بدانید تقریبا 60 تا 90 % این قضاوت بر اساس رنگ وب سایت به وجود می آید.

همانطور که در کتاب "طراحی وب برای چشم انسان" بیشتر توضیح داده شده , رنگ  نقشی غیر قابل انکار در شکل گیری تاثیر اولیه بازی می کند.

مفهوم رنگها

هر رنگ مفهوم خاصی برای هر فرد دارد, البته این معنی با توجه به سلیقه های شخصی و پیش زمینه فرهنگی تغییر می کند.

تاثیر روانشناسی رنگ در طراحی وب سایت علم دقیقی نیست و تحقیقات نشان داده وابسته به برداشت های شخصی افراد نیز می باشد. ملاحظات اجتماعی مثل مرد یا زن بودن نیز در شکل گیری این برداشت نقش مهمی دارد. مطالعات نشان می دهند که در بسیاری از موارد تناسب بین رنگ و برندی که سعی در نشان دادن آن را دارد از اهمیت بیشتری برخوردار است.

خوب , اگر وب سایتی طراحی می کنید که مخاطب اصلی آن خانم ها هستند , می توانید از رنگ بنفش که مورد علاقه آنهاست و از لحاظ روانی مناسب آقایان نیست استفاده کنید. در وب سایت L’Oreal Paris  می توانید کاربرد این رنگ را در جذب کاربر مشاهده کنید. بالا و پایین این وب سایت به رنگ مشکی در آمده که بیانگر کلاس و جذابیت است , و به شما این احساس را القا می کند که این وب سایت محصولی نه چندان ارزان ولی پر مصرف و محبوب را نشان می دهد.

به علاوه از رنگ سفید برای متون استفاده شده که بیانگر مدرن بودن و حس آرامش است , در حالی که رنگ بنفش حس لوکس بودن , جذابیت و زنانگی را که مناسب این وب سایت بوده نشان می دهد.

در عکسی که از مجله Women’s Health یا سلامت زنان گرفته شده , بنر بالا به رنگ صورتی آمده ,  ولی بقیه وب سایت کاملا خالی از هر رنگی است و با استفاده از عکس و نوشته های برجسته توجه مخاطب را به خود جلب می کند. این یک انتخاب جالب است ولی از طرفی امکان دارد به نفع وب سایت نباشد.

خوب از اینجا شروع می کنیم که استفاده از رنگ صورتی برای وب سایتی که هدفش زنان هستند , اقدامی کلیشه ای است و بیشتر افراد را به فکر شیرینی و شکلات می اندازد و در همین جا است که پیغام سلامتی برای زنان زیر سئوال می رود.

تعیین رنگ طرح

احتمال اینکه وب سایت شما فقط شامل یک رنگ باشد زیر صفر است (مگر اینکه قصد داشته باشید کاملا Monochromatic باشید ) در نتیجه باید طرح کلی و تک تک رنگها و هارمونی آنها با یکدیگر را کاملا در نظر داشته باشید . همچنان باید به تاثیر کاربر و نقش رنگهای ثانوی در کنار رنگهای اصلی فکر کرد.

با در نظر گرفتن این موضوع باید مراقب میکس کردن رنگها باشید و برای اینکار می توانیداز 3 متد اولیه که در پایین آمده کمک بگیرید.

1.    رنگهای سه گانه

این ابتدایی ترین و متعادل ترین متد می باشد که از رنگهای طبیعی و مکمل در آن استفاده می شود. با استفاده از چرخه 12 تایی می توانید هر یک از سه رنگی که در زاویه 120 درجه ای روی چرخه قرار دارند را برای نویگیشن , زمینه و یا محتوا انتخاب کنید.

2.    رنگهای مرکب (مکمل های جدا)

متد دومی شاید کمی مشکل باشد و برای حرفه ای شدن در آن نیاز به تجربه داشته باشید , ولی وقتی یاد بگیرید بسیار کارآمد خواهد بود. این متد از 4 رنگ که دوتای آن متضاد (نزدیک به هم ) و دورنگ آن مکمل (در سرتاسر چرخه) هستند, استفاده می کند .

 

3.    رنگهای مشابه

این روش فقط از رنگهای مکمل استفاده می کند و این شما هستید که باید مراقب پیامی باشید که به مخاطب می رسانید . از آنجایی که در این روش رنگها واضح و برجسته نشان داده می شوند تا جایی اغراق آمیز به نظر خواهند رسید.

 

زمانی که صحبت از روانشناسی رنگها می شود , مهم است که تمام رنگها را در ذهن خود داشته باشید و از انتخاب یک رنگ و تلاش برای هماهنگ کردن رنگ زمینه و محتوا اجتناب کنید .

1.     رنگ زمینه : رنگ زمینه مشکی نشانه گر کلاس , برتری , تشریفات و فضای سازمانی است. کاملا مشخص است که سازمانی که مشاوره دادن جزو خدمات آن به حساب می آید باید حس برتری را به مخاطب القا کند. تشریفات بیانگر یادگیری و فضای سازمانی بیانگر این است که تجربه یادگیری مخاطب فقط یک سرگرمی نخواهد بود بلکه تجربه ای است که از آن در حرفه خود استفاده خواهد کرد.

2.    رنگ دکمه ها : این وب سایت از دکمه های قرمز روی زمینه مشکی استفاده کرده که طبیعتا خیلی به چشم خواهند آمد و مخاطب را تشویق به ثبت نام می کنند. دکمه هایی که از اهمیت کمتری برخوردار هستند به رنگ مشکی با دور سفید نشان داده شده اند.

 

رنگ متن : رنگ سفید محتوا کنتراست را بدون مغایرت با بقیه رنگها به وجود آورده . آیکونهای سفید رنگ در سمت راست کاربر را تشویق به پایین آمدن در صفحه می کند.

به طور کلی , این وب سایت به شکل زیبایی طراحی شده , همه می دانیم که رنگهای سیاه و سفید چقدر در کنار هم زیبا بوده و دراین وب سایت حس رسمی بودن را القا می کنند. اگر از رنگ قرمز بیشتر از این استفاده می شد امکان داشت به پیام این وب سایت صدمه وارد کند و به همین دلیل آن را بسیار کم و فقط برای ثبت نام مشاهده می کنید .

رنگهایی که باید از آنها اجتناب کرد

رنگ قهوه ای بیانگر طبیعت می باشد ولی طرفدار زیادی ندارد , با این حال در برخی از متون می توان از آن استفاده کرد . این رنگ به معنی اعتماد کردن است .

 

رنگ قهوه ای به درد UPS می خورد , چرا که دوست دارد به همه بگوید می توانید روی ما حساب کنید.

جالب است بدانید که به عنوان یک کیت ورزشی , بدترین در فوتبال دانشگاه شناخته شده . رنگ قهوه ای همچنین بیانگر  استحکام است و به نظر می آید ارتباط خوبی با ورزشی به این درجه خشونت داشته باشد , ولی در حقیقت اینطور نیست, چرا که مردها  خیلی رنگ قهوه ای را دوست ندارند.

در بین خانم ها رنگ نارنجی محبوبیت زیادی ندارد , پس اگر تصمیم گرفتید وب سایتی بسازید که مخاطب آن خانم ها باشند این را در نظر داشته باشید.

البته فراموش نکنید که اینها همه تئوری هستند و مهم این است که رنگهای شما مکمل یکدیگر بوده و با هم هارمونی داشته باشند.

ابزاری که به شما در انتخاب رنگ درست کمک می کند:

شما می توانید برای طراحی UI خود از پالت های رنگ از پیش آماده شده استفاده کنید و نیازی نیست که حتما به سمت  چرخه رنگها بروید.

نرم افزار ADOBE COLOR CC : مورد اطمینان کلیه کاربران Adobe

Paletton  : وسیله انتخاب کننده رنگ که بسیار ساده بوده و به درد افراد مبتدی می خورد

Flat UI Color Picker : برای طراحی های Flat رنگا رنگ

کره رنگ Mudcube : این برنامه شامل تم های انتخابی و شماره های HEX می باشد.

رنگ من را چک کن : این برنامه رنگ پس زمینه و پیش زمینه را بررسی می کند تا با هم هارمونی داشته و مناسب افرادی باشد که از کور رنگی رنج می برند

رنگ : این برنامه به شما امکان انتخاب یک رنگ با نگه داشتن موس روی آن را می دهد و پس از انتخاب آن کد HEX آن را به شما نشان می دهد.

یادگیری با استفاده از یک مثال.

 

رنگ پس زمینه خاکستری یکنواختی است که با رنگ خاکستری دوچرخه هماهنگی کامل دارد . طراحی ساده با حروف بزرگ بسیار موثر بوده و حس دوچرخه ای را می دهد که از راندنش لذت فراوانی می برید. استفاده از رنگ خاکستری باعث جلوه بیشتر سایر رنگها می شود. این رنگ همچنان حس ثبات به همراه آرامش و خونسردی را القا می کند.

رنگهای کلمه "برو" روشن و پر جنب و جوش هستند که حس مدرن بودن و چالاکی را با خود دارند. بیشتر آن از رنگ آبی پر شده و چون رنگ آبی مورد علاقه هم زنان و هم مردان است از لحاظ جنسیتی تمایزی در این صفحه دیده نمی شود . رنگ سبز با احتیاط در آن پخش شده که حس مسئولیت در مورد طبیعت را نشان می دهد . این یک طراحی هوشمندانه است چرا که چنین دوچرخه ای به هیچ وجه باعث هدر رفتن بنزین و یا صدمه به طبیعت نمی شود. و با وجود اینکه تمام اینها چیزهایی است که از قبل می دانیم بد نیست که این پیام در ما تقویت شود.

به طور کلی , این صفحه به ما این حس را می دهد که استفاده از دوچرخه مناسبترین گزینه برای زندگی مدرن شهری است .

ملاحظات نهایی

رنگ مهمترین بخش طراحی و البته حیاتی ترین جنبه یک برند است. رنگی که در طراحی یک برند استفاده می شود باید با ویژگی های آن همخوانی داشته و مطابق داستان و معنای کلی آن باشد. اغلب, یک طراح مجبور است تا با لوگویی که از قبل طراحی شده سر و کله بزند و بر اساس آن به  انتخاب رنگ بپردازد. شاید چنین چیزی کمی محدود کننده باشد ولی پالت های رنگی که در اختیارتان است تا حدی می تواند کار را آسان سازد.