رنگ ها ابزاری برای جلب توجه در طراحی

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

استفاده از تصاویر برای جلب توجه

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


استورگ( Storq) یک فروشگاه لباس ویژه ی زنان باردار است. درکل در طراحی این وبسایت از رنگ های زیادی استفاده نشده است. اما در صفحه ی محصولات آن عکس ها تمام توجه بازدید کنندگان را جلب میکنند. قسمتی از این جلب توجه به بزرگی عکس ها برمیگردد و بخش دیگر آن به این دلیل است که عکس ها تنها المان رنگی در این صفحه هستند.
از مشخصه های این عکس ها می توان به سایه های تیره تر و سایه های مشابه اشاره کرد. درواقع این وبسایت از تصاویری استفاده کرده است که با طراحی کلی سایت تناسب دارند. بعبارت دیگر برای جلب توجه بازدید کنندگان از رنگ های مهیج و تند استفاده نشده است.
بنابراین رنگ های متضاد(contrasting) یا نئون تنها رنگ هایی نیستند که توجه بینندگان را جلب میکنند.

جلب توجه از طریق متون رنگی

در این قسمت به تغییر رنگ تکست هایی همچون هدینگ ها یا متن های بزرگ می پردازیم. به دو نمونه بینظیر از متن های رنگی که توجه بازدید کنندگان را جلب میکنند توجه کنید:


در تصویر اول سایت محافظت از منابع طبیعی در کالیفرنیا را مشاهده می کنید. این وب سایت به دو دلیل بهترین است. نخست، در طراحی آن علاوه بر رعایت hierarchy (سلسله مراتب) رنگ ها نیز قدرتمند هستند. Hierarchy یک ابزار بینظیر طراحی است که با دقت ترتیب اهمیت و اولویت را مشخص میکند. با یک نگاه به تصویر بالا متوجه میشود که "Our approach" تیره ترین قسمت تکست و مهم ترین قسمت آن می باشد.
مابقی تکست همگی به یک رنگ می باشد اما آنچه اهمیت دارد توسط سایز و اندازه تکست برجسته شده است. در این  مثال رنگ فاکتوری وحدت بخش است البته بجز هدینگ. علاوه براین از رنگ بعنوان اهرمی استفاده شده است تا توجه بازدیدکنندگان را از المان های کم اهمیت همچون اعداد موجود در سمت چپ هدینگ ها دور کند.
دانستن ترتیب بخش ها بد نیست اما اعداد کما بیش با تجربه بی ارتباط هستند. بنابراین اعداد با رنگ های روشن تر نشان داده شده اند.


مثال دوم Founders می باشد. اگربه صفحه ی هوم پیج این سایت سر بزنید خواهید دید که تا نیمه های این صفحه حداقل از سه رنگ مختلف برای فونت استفاده شده است.
با اولین نگاه به متن green hero ، مقدمه و مرکز آن توجه تان را جلب میکند. اما در نگاه دوم متوجه میشود که تنها رنگ سبز تیره ی آن است که برای مدتی توجه شما را بخود جلب کرده است. غیر منتظره بودن رنگ سبز برای مدتی کنجکاوی بازدید کنندگان را برمی انگیزد.
درصورتیکه رنگ سبز هدلاین نادیده گرفته شود مطمئنا نادیده گرفتن تغییر رنگ در قسمت میانی تکست به سختی امکان پذیذ خواهد بود.
در این مثال هدلاین ها به رنگ آبی تیره می باشند درحالیکه محتوای پشتیبان به رنگ خاکستری است. کنتراست میان خاکستری روشن و آبی تیره ی هدینگ برجستگی بیشتری به هدلاین ها میدهد. رنگ خاکستری موجب میشود تا هدلاین ها بیشتر دیده شوند. در این مثال به زیبایی و تنها با استفاده رنگ این برجستگی ایجاد شده است.

خلق نقطه کانونی با استفاده از دکوراسیون های رنگی

در این بخش و بخش بعدی به قدرت و نفوذ شکلها/شیپ ها، الگوها و رنگ ها می پردازیم. در این قسمت به جنبه ی تزیینی شیپ((shape اشاره می کنیم. متاسفانه دکوراسیون در طراحی بد نام شده است. شما می توانید بدون افزودن jargon ویژوال به طراحی، برای خلق نقطه کانونی در طراحی یا یک بخش خاص براحتی از دکوراسیون ها استفاده کنید.


سایت Perspective دقیقا همین کار را کرده است. آنها یک آژانس خلاق با وب سایتی ساده و شگفت انگیز هستند. اگر به انتهای هوم پیج آنها نگاه کنید بخشی را می بینید که نمونه ای بینظیر از موردنامبرده می باشد. در تصویر بالا همین بخش را مشاهده می کنید.
همانگونه که می بینید این بخش از دو المان مختلف تشکیل شده است. نخست دو دوست که دو گوشی هوشمند را نگاه داشته اند. و دیگری دکوراسیونی دایره شکل است که در پس این تصویر مشاهده می کنید.


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

ایجاد زبان ویژوال با استفاده از شکل ها/شیپ، رنگ و تکرار

زبان ویژوال یا تصویری، سیستمی ارتباطی است که از المان هایی مانند رنگ ها، شیپ ها، هدینگ ها و غیره استفاده می کند. گاهی اوقات طراحان بجای زبان ویژوال یک راهنمای سبک(style guide) را توسعه میدهند اما زبان ویژوال فراتر از یک راهنمای سبک است.
زبان ویژوال بین هر المان روابطی جزیی دارد. و آنچه می توانید و نمی توانید انجام دهید را مشخص میکند. این زبان توضیح میدهد برای ارائه ی بهترین سبک/استایل تصویری المان ها چطور با یکدیگر استفاده شوند. زبان ویژوال یک library کامل از کامپوننت های ویژوال ساخته و نحوه استفاده از آنها به تفصیل شرح میدهد.
رنگ ها بطور طبیعی بخش بزرگی از زبان های ویژوال هستند درست همانطور که بخش بزرگی از راهنمای سبک می باشند. در تصویر زیر یک نمونه بی نظیر از زبان ویژوال را می بینید:


در این تصویر زبان ویژوال Wyre را مشاهده می کنید که یک بانک آنلاین می باشد. برندینگ این کمپانی بشدت به شیپ های برگی شکلی تکیه دارد که لوگوی این کمپانی را تشکیل میدهد. شما می توانید این شیپ های برگ شکل را در تک تک صفحات این وب سایت مشاهده کنید. مورد دیگری که در این وب سایت تکرار شده استفاده از انواع رنگ های آبی است.
اغلب یک شکل/شیپ خاص با رنگ ترکیب میشود مانند باتن های CTA در هوم پیج. در صفحه ی هوم پیج این سایت شیپ آبی رنگ چندین بار بعنوان باتن CTA استفاده شده است، درواقع بعنوان signup CTA استفاده شده است. این کار شیوه ای عالی برای توسعه ی یک زبان ویژوال بینظیر می باشد. هر بار که کاربری این شیپ برگ شکل با متنی بالای آن را می بیند حتی بدون خواندن متن می تواند براحتی حدس بزند کدام باتن، CTA اصلی می باشد.
ایجاد این همبستگی و ارتباط بدون هیچگونه حشو در شیپ و رنگ امکان پذیر است.

نبود تنوع رنگ

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


در تصویر بالا صفحه ی فرود سایت Dona را مشاهده می کنید هرچند طراحی این صفحه کاملا از رنگ تهی نیست.
همانطور که در تصویر می بینید در بعضی از قسمت های این صفحه رنگ آبی بکاررفته است. نظریه ای که در اینجا مطرح است حذف کامل رنگ ها نیست بلکه هدف این است که از غیبت رنگ ها بمنظور جلب توجه بازدید کنندگان بهره ببرید.
مثال دوم the Logo Shop می باشد. پس زمینه ی این سایت به رنگ صورتی و سایر موارد به رنگ خاکستری تیره می باشند. در طراحی هردوی این مثال ها از رنگ ها به شیوه ی سنتی استفاده نشده است درعین اینکه هیچکدام کاملا سیاه و سفید نیز نیستند.


از آنجاییکه یک رنگ بیش از اندازه برجسته نشده است، تاکید ویژوال بر مقدار رنگ استفاده شده یا سایز المان ها قرار دارد. درمورد این سایت هدر بزرگترین المان above the fold است. در تصویر بالا مهم ترین المان کاملا مشخص است. اگر برای ایجاد سلسله مراتب بصری برای تکست ها از رنگ های مختلف استفاده میشد تشخیص آن آسان نبود.
بنابراین همانگونه که مشاهده می کنید نبود تنوع رنگ به هیچ وجه بد نیست. در صفحه ی فرود سایت Dona تاکید بر اسکرین شات animate شده در آیفون است. درصورتیکه اگر هدینگ یا کپچر ایمیل به رنگ روشن می بود دیگر تاکید یا توجه از اسکرین شات آیفون منحرف میشد.

هایلات کردن بعضی از قسمت ها

گاهی اوقات جلب توجه با استفاده از رنگ ها به آسانی و با هایلات کردن ممکن میشود. هایلایت کردن از ایده ی کلی رنگ های آکسان(رنگ های تند و درخشان) سرچشمه گرفته است. رنگ های آکسان استفاده میشوند تا در مقایسه با آنچه که با رنگ های اصلی نمایش داده میشود توجه به سمت بخشی از اطلاعات جلب شود. اما چطور می توان از رنگ برای هایلایت استفاده کرد؟


در Highlight's website رنگ زرد به دو شیوه بعنوان آکسان استفاده شده است. نخست، برای هایلایت اطلاعات در هر قسمت و دوم برای هایلایت کردن مهم ترین قسمت. این شیوه روشی هوشمندانه در استفاده از رنگ می باشد.
درواقع در صفحه ی فرود Hilight از رنگ زرد درکنار رنگ های سیاه، سفید و مقداری خاکستری استفاده شده است. بعبارت دیگر رنگ زرد برای برجسته کردن اطلاعت مهم بطور رندوم و در قسمت های استراتژیک استفاده شده است. به این ترتیب بازدید کنندگان بطور ناخود آگاه از قسمت های مهمی که ابتدا باید ببینند مطلع می شوند.
هایلایت زرد در همه قسمت ها بجز یک قسمت بطور محدود استفاده شده است. رنگ آخرین قسمت صفحه فرود درست برعکس بوده و با پس زمینه ی زرد نشانگر مهم ترین قسمت است. این تنها قسمتی است که کاربران با تهیه ی یک ایمیل آدرس کاری انجام میدهند.


هوم پیج آژانس دیجیتال Yummygum نیز اینگونه بوده و از رنگ آبی برای هایلایت کردن استفاده کرده است. در قسمت فوقانی هوم پیج این سایت از رنگ آبی برای هایلایت و تاکید کردن بر یک لینک استفاده شده است. در این قسمت خاص لینک مورد نظر مهم ترین لینک می باشد. با اسکرول هوم پیج به سمت پایین در قسمت های مختلف رنگ آبی بطور متفاوتی استفاده شده است. اما همچنان از آبی برای هایلایت مهم ترین المان ها همچون هدینگ یا باتن تماس استفاده شده است.
هوم پیج Yummygum مملو است از هایلایت های کوچک. همه ی اینها به لطف استفاده درست از رنگ ها ممکن شده است.

نتیجه گیری

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



رنگ ها ابزاری برای جلب توجه در طراحی
جمعه 22 اردیبهشت 1396 - 22:58:33 4368 آخرین بازدید : جمعه 10 فروردین 1403 - 07:58:23 0
*
*