راهنمای کاربردی استفاده از رنگ در UIطراحی رابط کاربری

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

بیشتر بخوانید:

معرفی بهترین مجموعه های طرح سه بعدی برای طراحی UI

انواع رنگ در UI

رنگ‌ها را می‌توان به روش‌های مختلف  کد گذاری کرد که رایج‌ترین آن ها در دنیای UI  شامل  Pantone، CMYK، HEX و RGB می شود. در ادامه این مطلب به بررسی هر یک از این ها می پردازیم.

در این خصوص لازم است بدانید که فقط از HEX و RBG در طراحی صفحه نمایش استفاده می شود که لازم است حتما تفاوت بین آن ها را بدانید.

Pantone  برای پرینت

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

CMYK  برای پرینت

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

RGB  برای طراحی UI

RGB مخفف قرمز، سبز و آبی است. مانیتور های دیجیتال و اسکرین ها تنها این سه رنگ را نمایش می دهند که نور ( نه جوهر) تشکیل شده اند. طیف رنگی نور بزرگتر از چاپ است. با توجه به سیستم های مختلف، رنگ های چاپ و صفحه نمایش هرگز 100٪ مطابقت ندارند. تا زمانی که پالت ها در درون خود هماهنگ باشند مشکلی نیست.

هنگام دادن مقادیر RGB در طراحی UI، از 0 تا 255 به عنوان مثال متغیر است. R=255، G=255، B=255 یا RBG=255255255 سفید است در حالی که RGB= 0، 0، 0 سیاه است.

RGBA   برای طراحی UI

همان RGB است کهA  مخفف یک کانال آلفا اضافی است. آلفا شفافیت را از 0.0 (کاملا شفاف) و 1.0 (کاملاً مات) تنظیم می کند.

بنابراین برای مثال RGBA = 255، 255، 255، 0.5 سفید با شفافیت 50٪ خواهد بود.

همچنین بخوانید:

همه چیز درباره تم تاریک یا Dark mode

HEXبرای طراحی UI

HEX فقط یک شکل کوتاه از RBG است و همیشه دقیقاً همان رنگ مشابه آن را نشان می دهد. تفاوت آن با RBG در این است که به دلیل فرمت رشته ای که دارد، کنترل، کپی، چسباندن و اشتراک گذاری آن کمی ساده تر است.

Hex از 6 رقم تشکیل شده است که در جلوی آن یک هش وجود دارد. دو رقم اول برای R، دوم برای G، و سوم برای B است. به همین دلیل RGB و Hex یکسان هستند.

تبدیل رنگ بین چاپ و صفحه

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

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

بعد از ورود به صفحه پنتون، می‌توانید Hex، RGB یا CMYK را وارد کنید و یک Pantone منطبق به شما پیشنهاد می‌شود. روی آن کلیک کنید و تمام مقادیر رنگ مرتبط به شما گفته می شود. اگر می خواهید Pantone را به Hex تبدیل کنید، فقط از بخش “Pantone to Pantone” در منوی سمت چپ استفاده کنید.

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

اگرچه در طراحی UI هیچ محدودیت فنی وجود ندارد، بهتر است رنگ ها را به حداکثر دو تا سه محدود کنید.

نحوه انتخاب، ترکیب و مطابقت رنگ ها در طراحی UI

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

تک رنگی (Monochromatic)

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

متشابه (Analogous)

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

مکمل (Complementary)

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

متساوی‌الساقین (Split-Complementary)

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

جمع بندی

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