تئوری رنگها در طراحی uiux یکی از جذابترین قسمتهای یادگیری طراحی به شمار میرود. رنگها یکی از اصلیترین موضوعاتی هستند که در طراحی رابط کاربری باید به آنها توجه ویژهای داشته باشیم. شناخت طراحان از رنگها، شیوه استفاده از آنها و روانشناسی رنگها، کمک بزرگی به طراحان رابط کاربری برای خلق پروژههای جذاب و حرفهای میکند.
در این قسمت از دوره طراحی رابط کاربری رایگان از آژانس نوآوری رسام قصد داریم تئوری رنگها در طراحی uiux را مورد بررسی قرار دهیم. از شما دعوت میکنیم تا پایان مقاله ما را همراهی کنید.
روانشناسی رنگها در UI/UX
سه رنگ اصلی در طبیعت که با سایر رنگها ترکیب نشدهاند. قرمز، زرد و آبی هستند. در صورتی که 3 رنگ اصلی که قرنیه چشم انسان با ترکیب آنها، سایر رنگها را میسازند، قرمز، سبز و آبی هستند. این دو نباید اشتباه شود. باید توجه داشت که تمامی نمایشگرها مانند مانیتور، تلویزیون و گوشی، منطقی مشابه عملکرد قرنیه یا شبکیه چشم انسان دارند. ساختار رنگی دیگری تحت عنوان CMYK نیز وجود دارد که در صنعت چاپ استفاده میشوند. فیروزهای، سرخابی، زرد، مشکی. در ui کار خاصی با CMYK نداریم و این استاندارد رنگی، در طراحی چاپی استفاده میشود.
ساختار رنگی HSB
با استفاده از این ساختار و بدست آوردن طیف، اشباع و روشنایی که همان HSB میشوند، شما میتوانید پالت رنگی خود را بسازید.
- طیف رنگ یا hue: مشخص میکند از چه طیف رنگی استفاده میکنیم.
- اشباع یا saturation: اگر 0 باشد خاکستری و اگر 100 باشد طیف کامل رنگ.
- روشنایی یا brightness: اگر 0 باشد مشکی و اگر 100 باشد کاملا روشن.
ساختار رنگی HSB
ساختار رنگی HSB یکی از مرسومترین ساختارهای رنگی مورد استفاده طراحان است. در واقع طراحان برای طراحی سایت نیز از این ساختار استفاده میکنند. کلا 6 کاراکتر دارد که 2 کاراکتر اول، بیانگر رنگ قرمز، 2 کاراکتر بعدی سبز و 2 کاراکتر بعدی نیز رنگ آبی است.
- هر عدد 16 حالت مختلف (از 0 تا 15) را شامل میشود.
- ساختار دیگر 16*16 = 256 حالت مختلف دارد که بین اعداد 0 تا 255 هستند.
- به این ساختار rgb گفته میشود که در واقع در مبنای دیگری نوشته شدند.
به تصویر زیر دقت کنید. ساختار hex که 6 کاراکتر دارد و هر 2 کاراکتر بیانگر یک رنگ است، هرکدام از آن 2 رنگ، میتواند 16 حالت مختلف داشته باشد. این 16 حالت از صفر شروع میشود. چون مثلا برای هر رنگ صرفا 2 کاراکتر میتوانیم بگذاریم، بنابراین بهجای 10 مقدار A، بهجای 11 مقدار B، بهجای 12 مقدار C، بهجای 13 مقدار D، بهجای 14 مقدار E و در نهایت به جای 15 هم مقدار F را میگذارند.
حال برای هر رنگ 16 حالت مختلف درج میشود. هر رنگ 2 عدد دارد. بنابراین 16 حالت ضرب در 16 حالت خواهیم داشت که میشود 256 حالت مختلف برای هر کدام از آن 3 رنگ. این مقدار چون از صفر شروع میشود، پس قاعدتا 0 تا 255 خواهد بود. به این ساختار نیز rgb گفته میشود که مثال نوشتاری آن در تصویر زیر وجود دارد. توجه داشته باشید که آلفا یا opacity اگر باشد این مقدار rgba میشود و عددها داخل پرانتز میآیند.
یادآوری: آلفا یا opacity شفافیت است که مقداری بین 0 و 1 است. اگر صفر بشود، کاملا جسم نامرئی شده و اگر نزدیک 1 بشود، رنگ کامل است و نامرئی نیست.
چرخه رنگ یا Colorwheel
طراحان با استفاده از چرخه رنگی میتوانند رنگهای متنوعی را انتخاب کنند. ابزارهای آنلاینی برای آن نیز وجود دارد که معرفی خواهیم کرد. 3 رنگ اصلی طبیعت یعنی قرمز و آبی و زرد را خواهید دید که بین آنها رنگهای ثانویه و لایههای جزئیتر آن نیز ایجاد شده است.
- رنگهای گرم راست و رنگهای سرد سمت چپ هستند.
- رنگهای اصلی در طبیعت، که از ترکیب سایر رنگها تشکیل نشدهاند.
- رنگهای ثانویه یا secondary که از ترکیب رنگهای primary ایجاد شدهاند.
دستهبندی موضوعی رنگها در UI
باقابلیتهای نرمافزار فیگما میتوانیم پالت رنگی خود را انتخاب و به فیگما اضافه کنیم. قبل از آن، باید با این دستهبندی رنگ آشنا شویم. همچنین از افزونههای فیگما میتوانیم برای بهبود و سرعت عملکرد، استفاده کنیم. مشاهده آموزش رایگان نرم افزار فیگما در این موضوع کمک بسیاری به شما خواهد کرد.
رنگ اصلی برند – Primary
رنگ اصلی برند معمولا در لوگو و برندبوک سازمانی شرکتها به خوبی دیده میشود. مانند رنگ قرمز دیجیکالا یا رنگ زرد ایرانسل. برند شما با این رنگ در ذهن مخاطبان میماند.
رنگ ثانویه – Secondary
رنگ ثانویه، اولویت بعدی رنگ برند است. به عنوان مثال، وقتی اسم برند پپسی را میآوریم، شما رنگهای دیگری را نیز به خاطر خواهید آورد. البته قرار نیست لزوما همه این موارد در لوگو باشند. اصلا ممکن است لوگو ساده و خاکستری طراحی شود. مانند لوگو نایک. در واقع اگر برندی رنگ یا رنگهای ثانویه نیز داشته باشد، شما با بررسی مدارک و برندبوک آن مجموعه، متوجه آن رنگها نیز خواهید شد. رنگ ثانویه، کمتر از رنگ اصلی، به خاطر کاربر میماند.
رنگ اکسنت – Accent
رنگ اکسنت نیز در برندها ممکن است وجود داشته باشند. به عنوان مثال شما در دیجیکالا به جز رنگ اصلی برند که قرمز است، خصوصا در صفحات داخلی محصولات، رنگهای آبی فیروزهای و آبی تیره، نارنجی، بنفش که بیانگر دیجیپلاس هست و کلی رنگ دیگر را اگر دقت کنید خواهید دید. در واقع رنگهای اکسنت برای نشان دادن جزئیاتی که لزوما خنثی و neutral نیستند، مورد استفاده قرار میگیرند. در فروشگاهها و طراحیهای شلوغتر، اکسنتها بیشتر هم مورد استفاده قرار میگیرند.
رنگهای خنثی – Neutral
برخلاف تصور، اتفاقا از رنگهای سیاه، سفید و خاکستری، استفاده بسیاری میشود. مانند رنگ دکمههای غیرفعال، بخشی از متون و عناوین، رنگ زمینه، کپشنها، خطوط، سایهها و خیلی از موارد دیگر را ممکن است با همین طیف خاکستری و خنثی بسازیم.
رنگهای معنایی – Semantic
رنگهای دیگری نیز وجود دارند که معنی و مفهومی را منتقل میکنند. این رنگها عمدتا سبز، قرمز، نارنجی و آبی هستند. شاید بپرسید اگر یک برند مثل دیجیکالا، رنگ اصلی یا primary آن قرمز بود چه میشود؟ پاسخ این است که از آن رنگ اصلی میتواند به عنوان semantic هم استفاده کند و یا قرمز دیگری برای semantic بسازد.
- سبز – Success: بیانگر پیغام یا عمل موفقیت در محصولات است. مانند دکمه تائید، متن تائید سفارش و پرداخت.
- قرمز – Danger: بیانگر خطا و بروز مشکل در محصولات است. مانند دکمه حذف، رد شدن یک درخواست و یا مواردی مشابه.
- نارنجی – Warning: بیانگر یک هشدار به کاربر است. مثلا اینکه صرفا 2 کالا در سبد خرید مانده است.
- آبی – Info: این رنگ بیانگر اطلاعرسانی بدون هشدار است.
ابزارهای انتخاب رنگ در تئوری رنگها در طراحی uiux
ابزارهای زیاد و متنوعی برای ساخت پالت رنگی وجود دارد. برخی از مهمترین ابزارهای انتخاب پالت رنگ را در اینجا درج کردهایم. آنها را بررسی کنید و برای تمرین، چند پالت رنگی بسازید و تجربه خود را در بخش نظرات این جلسه، مطرح کنید.
https://color.adobe.com
https://coolors.co
https://colorhunt.co
https://flatuicolors.com
https://materialpalette.com
https://www.w3schools.com/colors
ساختن پالت رنگی در فیگما به کمک ابزار و افزونه
در قدم اول شما نیاز دارید که لوگو و ترکیب رنگی را از کارفرما بگیرید. برندبوک همان سند هویت بصری است که لوگو، ترکیب رنگ، بخشی از تایپوگرافی، حتی طراحی سربرگ و المانهای بصری آن سازمان، در آن وجود دارد. اگر کارفرما آن را داشت که عالی است. اگر برندبوک نبود دست کم لوگو مجموعه را دریافت و رنگ اصلی را از آن استخراج میکنیم. ما در ویدئو با استفاده از دیزاین سیستم source starter kit بخش رنگها و شیوه scale کردن آنها را توضیح دادیم. البته ما در جلسه دیزاین سیستم، مفصل درباره این قبیل فایلها در فیگما صحبت خواهیم کرد.
در فیگما با استفاده از افزونههایی مانند color scale generator میتوانید رنگ را scale کنید و مثلا به 10 قسمت از تیره به روشن آنها را بسازید. نمونهای از این scale را در تصویر وسط این صفحه از دستهبندی مختلف رنگها دیدید. این scale کردن رنگ، برای تمامی دستهها مانند رنگهای اصلی، ثانویه، اکسنت، خنثی و معنایی، اعمال میشود. پس از این کار، استایلگاید رنگهای شما آماده است و شما میتوانید آن را به استایلهای فیگما اضافه کنید. این کار نیز با استفاده از افزونه chroma color به سهولت و سرعت بالاتری انجام شد.
دانلود فایل تمرین
در این جلسه بیان شد که یک فایل با فرمت fig تحویل داده میشود. میتوانید آن را از لینک زیر دریافت کرده و سپس در صفحه اصلی فیگما، آن را import کنید. دقت کنید که این فایل را با دابل کلیک نمیتوانید استفاده کنید و برای استفاده از آن، صرفا یک بار باید آنرا import کنید. این فایل به جز بخش رنگها، موارد دیگری را نیز در خود دارد که آنها را نیز در جلسات بعدی، استفاده خواهید کرد.
دانلود فایل تمرینی فیگما (پروژه دوره قبل – آژانس خلاقیت پویا)
دانلود فایل تمرینی فیگما (پروژه دوره 1404 – فروشگاه گل و گیاه – گُلدونی)
دانلود فایل دیزاین سیستم Source starter kit 2.0
مشاهده و دریافت دیزاین سیستم Source starter kit 3.0 در کامیونیتی فیگما
انتخاب رنگ مناسب با استفاده از تئوری رنگها در طراحی uiux
در این قسمت از دوره جامع ui ux رایگان آموزش رنگها در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال میشویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاهها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
تلاش کنید یک کتاب درباره روانشناسی رنگها مطالعه کنید. جستجو کنید یک کتاب فارسی و یا انگلیسی پیدا کرده و بخوانید. اگر این کار را نکردید، دستکم مقالات زیر را مطالعه کنید. افزون بر این، تمام موضوعاتی که در ویدئوهای این جلسه بیان شده را در فیگما تمرین کنید. یعنی به تمام شیوههایی که بیان کردیم، پالت رنگی بسازید و در استایلهای فیگما Add کنید. همچنین نگاهی هم به draft پروژه که در بالا برای شما آپلود شده بیاندازید.
https://www.nngroup.com/articles/color-enhance-design
https://userpeek.com/blog/what-is-color-psychology-in-ux
https://careerfoundry.com/en/blog/ui-design/introduction-to-color-theory-and-color-palettes
دیدگاههای کاربران (272)