تابستون داره تموم میشه ها، فرصت‌ها محدودن کلی آفر جذاب در کمپین تابستون🔥👇
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ علی درخشان
پالت رنگی color pallete
جامعه طراحی رابط و تجربه کاربری ایجاد شده در ۲۰ دی ۱۴۰۱

سلام استاد ببینید این پالت رنگی درست یا نه

سلام وقتتون بخیر.

در مورد color pallete یک سری موارد باید در نظر گرفته بشه،

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

توصیه میشه که color pallete شامل سه رنگ باشه و درصد‌های 60-30-10 رو در طرحتون پیاده سازی کنید.

اگر محصول رو یک ست کت و شلوار در نظر بگیریم:

60 درصد برای رنگ اصلیتون - کت و شلوار

30 درصد برای رنگ ثانویه شما ( که میتونه دو رنگ باشه و هرکدوم 15 درصد ) - پیراهن

10 درصد برای رنگ تاکیدی و اکسنت - کراوات و اکسسوری

رنگ‌های ثانویه و اکسنت رو میتونین با استفاده از تئوری رنگ‌ها (چرخ رنگ) و حتی با استفاده از ابزارهای مختلف و بررسی سایت هایی مثل دریبل و بیهنس کم کم مسلط بشین.

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

رنگ‌های خنثی هم که: سفید/مشکی/خاکستری هستند. خنثی یعنی without color. که شامل بژ beige، ivory، taupe، سیاه و خاکستری و سایه‌های سفید هست.

حالا این رنگ هارو کجا استفاده کنی و چطوری؟

رنگ اصلی: در نقاط hot spot و important space - یعنی نقاطی که مهم هستند و باید به نوعی رنگ سازمانی رو هم در ذهن کاربر حک کنیم. همچنین برای دکمه‌های CTA یعنی دکمه‌های مهمی که ما حتما میخوایم کاربر روش اکشن انجام بده و به قولی چشمش بگیرتش،

برای headlines، آیکون‌های کلیدی، برای فرم‌های دانلودی مهم و...

رنگ ثانویه: برای هایلایت و برجسته کردن نقاطی که کمتر مهم اند. مثل عناوین فرعی و محتواهایی که به عنوان supporting content ازشون یاد میشه، برای دکمه هایی که اصلی نیستند و برای جاهایی مثل faq (سوالات متداول)

رنگ تاکیدی یا اکسنت یا tertiary: در طراحی از این رنگ بعنوان رنگی که بیشتر جنبه پرداختن به موضوع با دقت بالا داره استفاده میشه. یعنی چی؟ گاهی progress bar ها، اسلایدرها، لینک ها، در مواردی تاگل ها. حتی گاهی از این رنگ بعنوان رنگی برای ایجاد جنب و جوش و انرژی در رابط کاربری محصول هم یاد میشه. اما کاربر نباید زیاد دچار جنب و جوش(!) بشه پس همون 10 درصد کافیه. گاهی اکسنت رو دو رنگ در نظر میگیرند. اما باید بدونین که شما نباید از رنگ اکسنتی که واسه جنب و جوش به صورت خیلی ریز در طرحت استفاده کردی (که گفتم به نوعی زیر مجموعه رنگ ثانویه ت هست ) از همون واسه هشدارهات استفاده کنی، رنگ هشدارهات warning،خطاهات error و success‌ها باید به گونه ای باشه که کاربرت واقعا چشمش بهش عادت نکرده باشه و در طرح ندیده باشه، که اگر اینطور بشه مثلا یک خطارو به راحتی ایگنور میکنه و واسش دردسر ایجاد میشه.

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

حالا بنظر خودت در تصویری که ارسال کردی، چقدر این موارد رو رعایت کردی؟ color pallete ت رو باید بیشتر روش کار کنی.

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

من لینک زیر رو واستون قرار میدم تا ایده بگیرید.

https://m2.material.io/design/color/the-color-system.html#color-theme-creation

این لینک رو هم برای بررسی چرخ رنگی که اشاره کردم میذارم‌ تا مطالعه کنید و مسلط بشین:

https://www.picmonkey.com/blog/color-theory-choosing-the-best-colors-for-your-designs

هیبا آزاد ۲۲ دی ۱۴۰۱، ۱۳:۰۴