mahnaz salari
mahnaz salari
خواندن ۵ دقیقه·۴ سال پیش

سیستم رنگ در متریال دیزاین



سه اصل مهم در طراحی از منظر متریال : 1-رنگ 2-چیدمان 3-تایپوگرافی است.

رنگ یکی از مهمترین عناصر هویت بخشی به نام تجاری است.

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

اولین نکته در طراحی، انتخاب تم رنگی است، تم رنگی نشان گر برند و یا سبک کار شما می باشد متریال به شما کمک میکندکه رنگ را به روشی معنی دار اعمال کنید در این سیستم یک رنگ اصلی وثانویه برای نشان دادن نام تجاری خود انتخاب می کنید در انتخاب رنگ توجه ب سه نکته مهم و حائز اهمیت هست :

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

خوانایی

متن و عناصر مهم، مانند آیکون ها، هنگام نمایش در زمینه های رنگی باید معیارهای خوانایی را رعایت کنند.

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

در طراحی متریال، رنگ اصلی رنگی است که در دیزاین شما بیشتر ظاهر می‌شود و خودنمایی می‌کند و رنگ ثانویه رنگی است که برای تأکید بخش‌های کلیدی رابط کاربری شما استفاده می شود.
⦁ بهترین موارد استفاده از رنگ ثانویه در موارد زیر است:
⦁ دکمه، دکمه شناور و متن دکمه
⦁ فیلدهای متنی، مکان‌نما و رنگ انتخاب متن
⦁ نوار پیشرفت
⦁ کنترل‌ها و پیکان‌ها (همونایی که کناره یا پایین اسلایدرها قرار میگیرند ? )، دکمه‌ها و اسلایدرها
⦁ لینک‌ها
⦁ عنوان‌ها





رنگ بندی(Color schemes)

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

تک رنگی (Monochromatic)

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

گردونه رنگ
گردونه رنگ


متشابه (Analogous)

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

مکمل (Complementary)

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

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

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

رنگ های سه گانه (Triadic)

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



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

1- Material design palette

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

2- Sketchappsources

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

۳. Material UI

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


matrialرنگطراحی رابط کاربریui uxمتریال دیزاین
شاید از این پست‌ها خوشتان بیاید