در مطلب قبلی انتخاب رنگ مناسب در طراحی بحثی را شروع کردم در مورد اینکه چرا برای قبل از شروع طراحی یک سایت یا اپلیکیشن باید برای انتخاب طیف رنگ پروژه زمان کافی بگذاریم. لطفا اگر اون مطلب را نخوندید قبل از خوندن ادامه این متن، قسمت اول را بخونید.
مهم‌ترین نکته رنگبندی در طرح ایجاد توازن در آن است. هر چه این ایجاد توازن بهتر انجام شود در نسخه نهایی، کاربر هم خوشحال‌تر است. این ایجاد توازن هم از آن کارهایی است که دسترسی به آن برای همه طراحان کار ساده‌ای نیست.
شاید در نگاه اول براتون عجیب باشه اما من می‌خوام طراحی داخلی، مُد و نهایتا طراحی دیجیتال را با هم ترکیب کنم تا منظورم را به شما منتقل کنم.
این قانون رنگی در «طراحی داخلی» زیاد استفاده می‌شود. اولین بار هم در همین فیلد ساخته شد. این قانون میگه در یک فضا یا اتاق میزان استفاده از رنگ‌ها به این شکل باشه:
در طراحی رنگ دوم به عنوان پشتیبان رنگ اصلی تلقی می‌شود. برای همین انتخاب درست رنگ دوم تاثیر زیادی روی کیفیت نهایی کار داره. در تصویرهای زیر شما می‌تونید استفاده درست از این قانون را در طراحی داخلی و مد ببینید:
نیازی به توضیح نیست اما طبق همان ساختاری که گفتم به ترتیب رنگ «دیوار» ، «کاناپه» و نهایتا «کوسن‌‌ها» از فرمول ۶۰ - ۳۰ - ۱۰ تبعیت می‌کند.
اما چطور از ۶۰ - ۳۰ - ۱۰ در طراحی وب سایت یا اپلیکیشن استفاده کنیم؟
اول از همه توضیح بدم که این قانون نیازی به رعایت کامل نداره. یعنی نیاز نیست که خط‌کش بردارید و مطمئن باشید که دقیقا در ۶۰٪ طرحتون از رنگ اصلی استفاده کرده. هدف این قانون ایجاد توازن درست در طرح است حالا شاید کمی هم این عددها کم یا زیاد شوند که خیلی هم خوبه.
بریم سراغ اینکه این ۳ رنگ به چه شکل استفاده می‌شوند.
این ۶۰ درصد در طراحی داخلی به عنوان رنگ اصلی شناخته می‌شد اما در طراحی UI -اغلب- اینطور نیست. فرض کنید که اگر قرار بود ۶۰٪ از ویرگول آبی رنگ باشه با چه فاجعه‌ای رو به رو می‌شدیم.
این ۶۰٪ میتونه همان فضای خالی (فضای منفی) باشه. فضای خالی برخلاف اسمی که داره خیلی روی طرح نهایی شما تاثیر داره. لطفا در همه طراحیاتون به این موضوع دقت کنید و از اون سرسری عبور نکنید. این فضای خالی بک گراندی هم که برای طرحتون انتخاب کردید را شامل میشه.
این یکی رنگ غالب شما است. بسته به موضوع و صفحه‌ای که طراحی میکنید این رنگ شاید تغییر کنه. مثلا در همین صفحه که دارید این مطلب را میخونید رنگ ۳۰٪ همان رنگ طوسی متن است.
رنگی محتوا و المانی که باید توجه کاربر را به خود جلب کند. در استفاده از این رنگ زیاده روی نکنید تا کاربر با آن اُنس نگیرد و هر بار آن را دید به صورت اتوماتیک توجهش به آن جلب شود. معمولا از این رنگ برای CTA (یا همان Call to Action) استفاده می‌کنیم.
برای افرادی که نمی‌دونن CTA چیه یه توضیح ساده میدم که وقتی از کاربر می‌خواهید کاری را انجام دهد از CTA استفاده میکنید. مثلا در هدر ویرگول زمانی که شما در سایت لاگین نباشید دکمه ورود یا ثبت نام برای ما حکم CTA را دارد. و اگر لاگین باشید دکمه نوشتن پست جایگزین آن می‌شود. در صفحات مختلف ما CTA های مختلف داریم.
در عکس زیر یک نمونه از CTA تشویق ثبت نام را که در سایدبار صفحه اصلی وجود دارد می‌بینید.
الزامی به اینکه رنگ اصلی شما بیشتر از رنگ مکمل استفاده شده باشد وجود ندارد و به نسبت هدف سایت یا اپلیکیشن این رنگ‌ها قابلیت جا به جایی دارند. به عنوان مثال رنگ اصلی ویرگول (آبی) کمتر از رنگ مکمل (طوسی) در طراحی استفاده شده.
نکته مهمی که در آخر این بحث باز هم نیاز به توضیح داره اینه که هیچ بایدی در استفاده دقیق از این قانون وجود نداره و هدف اصلی همان ایجاد توازن هست و شما می‌تونید با خلاقیت خودتون این قانون رو کنار بزارید.
این مورد و ۲ آیتم بعدی مکمل هم دیگر هستند. من ابتدا می‌خواستم هر۳ مورد رو تحت ۱ موضوع بنویسم ولی بعد تصمیم گرفتم که جدا بودن آن‌ها تاثیر بیشتری داره.
- هیچ وقت از مشکی مطلق (000000#) استفاده نکنید.
شما هم تبلیغ تلویزیون‌های LG با شعار مشکی مطلق رو دیدید؟ باید بدونید که دروغ‌ترین شعار تبلیغاتی عمرتون رو شنیدید.
در دنیای واقعی هیچ مشکی مطلقی وجود نداره و هر شی مشکی رنگی که می‌بینید (از گوشی موبایلتون گرفته، تا رنگ ماشین یا سایه های موجود در طبیعت) درصدی روشنایی در خودش داره.
- اما ارتباط این موضوع با استفاده نکردن 000000# در طراحی چیست؟
اول از همه اینکه سیاه مطلق یک رنگ غیرطبیعیه و استفاده از آن در طراحی حس غیرطبیعی بودنش را به کل طرح القا میکنه. از این مورد که بگذریم وقتی شما در طراحیتون از رنگ سیاه مطلق در کنار بقیه رنگ‌ها استفاده میکنید اون رنگ به نسبت بقیه قدرت به مراتب بیشتری دارد و روی کیفیت بقیه رنگ‌هاتون در چشم کاربر تاثیر میزاره. اصطلاحا میگیم روی بقیه رنگ‌ها هم سوار میشه.
برای همین همیشه از استفاده از رنگ 000000# اجتناب کنید. همانطور که بقیه طراح‌ها این کار را می‌کنند. به عنوان مثال اگر دقت کنید سری اپلیکیشن‌های ادوبی هم در حالت Present Mode از رنگ سیاه مطلق استفاده نمی‌کنند چون اگر طرحتون رو روی حاشیه سیاه مطلق ببینید، رنگ‌ها از چیزی که واقعا هستند دور میشن و شما نمی‌تونید تصمیم درستی در رنگ بندی بگیرید.
به عنوان نتیجه گیری شخصی من پیشنهاد می‌کنم تصاویری که در Dribbble با مشکی مطلق و مشکی واقعی گذاشته شده را مشاهده کنید و ببینید شما نسبت به کدام یک حس بهتری دارید.
این قسمت را هم در اینجا تموم می‌کنم تا در پست بعدی سایر مواردی که باقی مونده را توضیح بدم.
اگر این مطلب براتون مفید بود اون را با دوستانتون به اشتراک بگذارید.
آپدیت) قسمت سوم و آخر مقاله انتخاب رنگ برای سایت و موبایل اپلیکیشن را از اینجا بخوانید:
