قدرت رنگ ها در اپلیکیشن های موبایل | در اپ ساز بخوانید!

بیراه نیست اگر بگوییم رنگ ها، بخش عظیمی از رفتار و واکنش های روانی ما انسان ها را تحت کنترل و مدیریت خود قرار می دهند!

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

بنابراین تأثیر پذیری مستقیم روان و واکنش های روانی ما از رنگ ها هم، چندان عجیب نخواهد بود!

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

رنگ ها در اپلیکیشن های موبایل

تمامی تأثیرات درمانی، تعادلی و رفتاری رنگ ها بر انسان و زندگی او، ناشی از نفوذ رنگ ها در  شعور و ادراک انسانیست که تمامی مراحل زندگی انسان را تحت تأثیر خود قرار می دهد.

بنابراین انسان در هر انتخاب و تصمیم گیری کوچک یا بزرگی، تحت تأثیر رنگ ها قرار گرفته و ناخودآگاه آن ها را در تصمیم نهایی خود دخیل می کند.

هنگامی که این موضوع به جریان خرید و فروش های مردم راه پیدا می کند، می تواند به معنای تأثیر پذیری مستقیم سیستم های بازاریابی از رنگ ها باشد!

نکته مهم این که:

“تک رنگ ها به تنهایی در واکنش های روانی انسان  تأثیرگذار نبوده و در اغلب موارد، ترکیب های رنگی و کمپوزیسیون ها هم در انتخاب مشتریان و القای حس رضایت از انتخاب یک محصول یا خدمت به آن ها تأثیر گذارند.”

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

از این رو با توجه به گستره وسیع تک رنگ ها، کمپوزیسیون ها و طرح های مختلف رنگی، لازم است تا با الگوهای رنگی مختلف، مانند رنگ های هم خانواده (متشابه)، رنگ های مکمل و تک رنگ ها آشنا شده، اصول صحیح انتخاب رنگ ها و ترکیب آن ها و همینطور تأثیر کنتراست رنگ ها در ترکیب های رنگی، به طوری که مناسب استفاده در یک اپلیکیشن موبایل باشند را به خوبی یاد بگیرید.

در نتیجه با شناخت اصول رنگ ها در اپلیکیشن های موبایل می توانید از آن ها در طراحی Ux و  Ui  به طور صحیح استفاده کنید تا یک اپلیکیشن بهینه و پر مخاطب داشته باشید!

اما اگر بعد از مطالعه این مقاله، همچنان در انتخاب رنگ ها دچار تردید و مشکل بودید، می توانید از ابزار طراحی Ui و Ux شرکت ادوبی یعنی Adobe XD استفاده کنید تا با چندبار تست رنگی در محیط ساده و راحت آن، به ترکیب های رنگی مورد نظرتان برسید!

انتخاب یک ترکیب رنگی مناسب برای اپلیکیشن موبایل

انتخاب ترکیب رنگی مناسب برای یک اپلیکیشن موبایل، تحت تأثیر عوامل متعددی قرار می گیرد، اما ابعاد مختلفی درمورد انتخاب رنگ ها در اپلیکیشن های موبایل مورد اهمیت قرار می گیرند، برای مثال تعداد رنگ ها در انتخاب یک ترکیب رنگی مناسب و مؤثر!
به طوریکه یک رنگ بندی ساده می تواند Ux اپلیکیشن شما را بهینه کرده و درک محتوای اپلیکیشنتان را ساده تر کند.

به زبان ساده، مخاطبین شما می توانند به راحتی محتوای اپلیکیشن شما را آنطور که شما انتظار دارید تحلیل و درک کنند، در مقابل، یک ترکیب رنگی پیچیده (استفاده از تعداد زیادی رنگ در قسمت های مختلف یک اپلیکیشن) می تواند مشتریان شما را سر در گم کند و طرحتان را زیر سؤال ببرد.

ابزار Adobe Color CC یکی از پرکاربردترین ابزارها برای انتخاب رنگ هاست که توسط طراحان بسیاری مورد استفاده قرار می گیرد.

تحقیقات انجام شده توسط دانشگاه تورنتو بر روی چگونگی استفاده از این ابزار نشان می دهد که اغلب طراحان، استفاده از تنها دو یا سه رنگ، برای ایجاد ترکیب های رنگی را ترجیح می دهند.

بهترین روش برای انتخاب رنگ ها

• استفاده از دایره رنگ ایتن که از جمله مهم ترین تمرینات رنگ شناسی به شمار می رود، می تواند مهم ترین ابزار در کمک به انتخاب یک ترکیب رنگی مناسب باشد! پس می توانید برای انتخاب رنگ ها و کمپوزیسیون (ترکیب بندی) آن ها از دایره رنگ ایتن کمک بگیرید.

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

از این رو، در ادامه این مقاله، متداول ترین طرح ها و ترکیب های رنگی مورد استفاده در طراحی اپلیکیشن های موبایل را معرفی خواهیم کرد:

•  تک رنگ ها:

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

• هماهنگی طرح های تک رنگ (مونو کروماتیک) به بییندگان حس آرامش و اعتماد را القا می کند.
  درک و تحلیل طرح های تک رنگ برای چشم و مغز انسان بسیار راحت است، بخصوص در تم های رنگی سبز و یا آبی.

  

  

  تصویر بالا یک اپلیکیشن تمیز و ظریف را به ما نشان می دهد، اپلیکیشنی با دو ویژگی مثبت، که آن ها را به استفاده از یک طرحِ تک رنگ مدیون است.

• رنگ های متشابه

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

  برای ایجاد طرح های رنگی متشابه معمولا از سه رنگ استفاده می شود، اما باید توجه کنید که این سه رنگ در دایره رنگ، کنار یکدیگر قرار گرفته باشند.
  شاید تا اینجای کار، با خودتان فکر کرده باشید که ایجاد ترکیب های رنگی متشابه کار بسیار ساده ایست! ، اما همین که کار را شروع کنید با یک چالش بزرگ به نام Vibrancy روبرو می شوید! درواقع تصمیم گیری برای Vibrancy یا همان “تعیین شدت رنگ ها”، فوت و فن کار شماست که نباید از آن غافل شوید!

• رنگ های مکمل

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

  برای ساخت یک تزکیب رنگی مکمل، بهترین روش این است که اول یک رنگ را به عنوان رنگ غالب انتخاب کنید و بعد، از رنگ های مکمل آن برای تشدید و یا تاکید ها (رنگ های اکسان) استفاده کنید.
  بعنوان یک مثال خیلی ساده، خودتان یک چمنزار سبز را تصور کنید که یک گل شقایق قرمز، با فاصله دوری از شما، در آن روییده است، این گل قرمز رنگ، از همان فاصله خیلی دور هم در میان این چمنزار سبز رنگ خودنمایی می کند، که دلیل آن، مکمل بودن رنگ چمنزار و گل شقایق است!

  
  یکی از بهترین روش ها برای ایجاد ترکیب رنگی مناسب UI و UX، استفاده از رنگ های مکمل است، اما هنگام استفاده از این رنگ ها باید توجه داشته باشید که تعداد رنگ، ترکیب، تکرار ها و محل استفاده از آن ها، مناسب، کافی و بجا باشند تا یک اپلیکیشن زیبا و بهینه داشته باشید!

• طرح های دلخواه و سفارشی

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

   

• یک رنگ آکسان (تشدید کننده) روشن به یک پالت شامل رنگ های خنثی اضافه کنید تا یک ترکیب رنگی ساده و در عین حال جذاب بسازید!
  مثلا اینجا یک رنگ آبی آکسان به پالت رنگی سیاه و سفید (یک پالت از خاکستری ها) اضافه شده:
  تصویر زیر طرح UI مربوط به اپلیکیشن Drop box را به شما نشان می دهد، طرحی متشکل از یک تم خاکستری خنثی به اضافه یک آبی آکسان که فضای طرح را پر کرده است!
  

• کنتراست رنگ و تأثیر آن بر طرح های رنگی

  همانطور که می دانید، در طرح های Ui، اشیاء و یا فضاهای رنگی معمولا به صورت پراکنده یا بهتر است بگوییم منزوی، قرار نمی گیرند، بلکه معمولا کنار اشیاء و یا فضاهای رنگی دیگر قرار گرفته، و یا قسمتی از آن ها را می پوشانند! و این دقیقا همان چیزی است که اثر کنتراست رنگ در طراحی را به چشم بیننده منعکس می کند!
  منظور از کنتراست، چگونگی تفکیک رنگ ها از یکدیگر است که این موضوع را از معنای کلمه “contrast” (تضاد/تباین/جدایی)، هم می توان برداشت کرد، پس بنا بر تعریف کنتراست، اثرات کنتراست در استفاده کنار هم و یا روی هم رنگ ها ایجاد می شود.
  کنتراست مناسب، فشار وارده بر چشم را کاهش داده و توجه کاربران را به تمایز واضح رنگ ها و جداسازی شفاف آن ها جلب می کند.

  بنابراین تفکیک راحت رنگ ها، بیانگر کنتراست بالا، و جدا سازی سخت آن ها، بیانگر کنتراست پایین رنگ هاست.

• کنتراست و تأثیر آن بر خوانایی متون

  

   

  
  کنتراست رنگ، به عبارتی تئوری رنگ یک ناحیه رنگیست که در طراحی، کاربرد های مهم بسیاری دارد. با اینحال، ترجیح اغلب طراحان بر این است که از کنتراست پایین برای رنگ اشیاء استفاده کنند تا اشیاء زیباتر و هماهنگ تر به نظر برسند. هرچند همیشه زیبایی به معنای خوانایی نیست!

  با این حال، استفاده از دو رنگ با کنتراست پایین، می تواند خوانایی متن را در طراحی شما تا حد زیادی کاهش دهد. مسئله قابل توجهی که اهمیت این موضوع را در طراحی uI و uX اپلیکیشن های موبایل دوچندان می کند، این است که مشکلات ناشی از کنتراست پایین، مانند عدم خوانایی متون، در نمایشگرهای گوشی های تلفن همراه بیشتر لمس می شود!

• تناسب کنتراست در اشیاء

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

  

   

  سایت W3C recommends ، در رابطه با کنتراست رنگ ها در تصاویر و متون، استاندارد هایی را ارائه کرده است که از جمله آن ها می توانیم موارد زیر را نام ببریم:

• نوشته های سایز کوچک ، در برابر پس زمینه های خود، به کنتراستی برابر با حداقل ۴.۵:۱ نیاز دارند.
• نوشته های سایز بزرگ (تقریبا برابر با ۱۴ pt bold/18 pt)، در برابر پس زمینه خود، به کنتراستی برابر با حداقل حداقل ۳: ۱  نیاز دارند.
  این استاندارد ها برای آیکن ها و عناصر مهم دیگر هم، باید رعایت شود.برای تعیین کنتراست رنگ پالت های مورد استفاده و گرفتن یک بازخورد خوب و قابل فهم از آن ها، ابزار های مختلفی وجود دارند که از جمله آن ها می توان به WebAIM’s Color Contrast Checker اشاره کرد.
  

هشدار!

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

در ادامه تصویری از مقایسه دید معمولی رنگ ها، سبزکوری deuteranopia  و سرخ‌کوری protanopia، دو نقص شایع در مشکل کور رنگی را مشاهده می کنید:

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