این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

سفارشی کردن رنگ مواد

1. معرفی

آخرین به روز رسانی: 04/18/22

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

آزمایشگاه رنگ قبلی Material You چگونگی تجسم رنگ‌های پویا را در ماکت‌های طراحی بررسی کرد، اما می‌توانید از تم Material برای سفارشی‌سازی برنامه‌تان با رنگ‌های برندتان نیز استفاده کنید. استفاده از سیستم رنگی جدید با رنگ های برند شما، یک طرح رنگی قابل دسترس ایجاد می کند که می تواند ویژگی های پویاتری به خود بگیرد!

چیزی که یاد خواهید گرفت

نحوه ایجاد یک تم سفارشی با سازنده تم Material.
استفاده از یک تم سفارشی برای طراحی ماکت ها.
امکان ترکیب رنگ های پویا و سفارشی.

پیش نیازها

برای این آزمایشگاه ما بر روی برخی از مفاهیم اساسی طراحی خواهیم بود.

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

آنچه شما نیاز دارید

2. شروع کنید

برپایی

برای شروع باید به فایل Designlab Figma دسترسی داشته باشید. هر آنچه برای آزمایشگاه نیاز دارید در فایل Figma موجود است. می توانید فایل را دانلود و وارد کنید یا آن را از انجمن Figma کپی کنید.

ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .

کپی از انجمن Figma

به فایل Customizing Material بروید یا Visualizing dynamic color را در برنامه خود با Material Design در انجمن Figma جستجو کنید. روی Duplicate در گوشه سمت راست بالا کلیک کنید تا فایل را در فایل های خود کپی کنید.

طرح بندی فایل

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

این نرم افزار کد شما را از طریق آن مفاهیم و تمرین ها با جزئیات بیشتر راهنمایی می کند. برای کسب اطلاعات بیشتر در مورد ویژگی‌های جدید Material You، همراه با Codelab بخوانید!

با شروع از تابلوی هنری Intro ، دکمه‌هایی وجود دارند که تابلوهای هنری را به ترتیب به یکدیگر متصل می‌کنند. برای دسترسی به لینک، روی دکمه کلیک کنید.

افزونه Figma را نصب کنید

این Codelab به شدت به پلاگین Figma جدید برای تولید طرح‌های رنگی پویا و نشانه‌ها متکی است. افزونه Figma را مستقیماً از صفحه انجمن Figma نصب کنید یا "Material Theme Builder" را در انجمن Figma جستجو کنید.

3. طرح رنگ مواد

ابتدا مروری بر نحوه استفاده از رنگ در مواد و نحوه عملکرد سیستم رنگ جدید.

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

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

این تکنیک تغییر رنگ نه تنها یک طرح رنگ قابل دسترس را ارائه می دهد، بلکه روش هایی را برای ایجاد طرح های مارک دار ارائه می دهد که در دسترس و منسجم با طرح های رنگی تولید شده توسط کاربر باشد.

طرح‌های رنگی از 5 رنگ کلیدی به پالت‌های تونال برای ایجاد طرح‌های قابل دسترس تولید می‌شوند

تم مارک دار

M3 از برنامه‌های سیستماتیک پارامترهای سفارشی برای کمک به تعریف و حفظ سبک‌هایی که برند شما را ارتباط می‌دهند، پشتیبانی می‌کند.

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

طرح سفارشی شکاف بین M2 و M3 را برای مهاجرت آسان با تنظیم توکن‌های لازم (اسلات‌های رنگی) پر می‌کند و تجربه‌ای با برند بیشتر ایجاد می‌کند.

افزودن رنگ های برند به سازنده تم مواد

4. طرح رنگ: رنگ های تاکیدی

اساس یک طرح رنگی مجموعه ای از پنج رنگ کلیدی است که به صورت جداگانه به پالت های تونال جداگانه با 13 تن مربوط می شود. تن های خاصی از هر پالت تونال به نقش های رنگی در یک رابط کاربری اختصاص داده می شود. بیایید با باز کردن افزونه Material Theme Builder و تنظیم اولین رنگ تاکیدی خود شروع کنیم: Primary .

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

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

5. بقیه تم را بسازید

از Primary برای ایجاد تم استفاده می‌شود، اما ممکن است رنگ‌های برجسته برای پشتیبانی از رنگ برند اصلی داشته باشید.

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

ثانویه، ثالث و خنثی را برای سفارشی کردن کامل طرح رنگ خود ارائه دهید.

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

6. اعمال تم خود را

نقش ها و نشانه ها

هر رنگ تاکیدی ( اصلی ، ثانویه و ثالثی ) در گروهی از چهار رنگ سازگار با تن های مختلف برای جفت شدن، تعیین تاکید و بیان بصری ارائه می شود. گروه از رنگ تاکیدی، روی رنگ، ظرف و روی ظرف ساخته شده است.

نقش‌های خنثی برای سطوح و پس‌زمینه و متن و آیکون‌های با تاکید زیاد استفاده می‌شوند.

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

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

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

سلسله مراتب رنگ

هنگام استفاده از نقش های رنگی برای ماکت های خود، ترتیب اهمیت یا سلسله مراتب عناصر خود را در نظر بگیرید. این مفهوم به تخصیص رنگ های برند به نقش های مربوطه کمک می کند، اما همچنین آنها را در UI ترسیم می کند. به طور معمول، رنگ‌های اشباع‌شده یا متمرکز ابتدا توجه کاربر را به خود جلب می‌کنند، به همین دلیل است که نقش رنگ اصلی، مؤلفه‌هایی را ترسیم می‌کند که بیشتر بر فراخوانی عمل متمرکز هستند. در حالی که Material Theme Builder از سیستم رنگی M3 برای تولید رنگ‌های مناسب استفاده می‌کند، ارائه رنگ‌های ثانویه یا ثالث با اشباع بالاتر، رنگ‌هایی را ایجاد می‌کند که بیشتر از رنگ‌های اصلی خود می‌درخشند. ترتیبی را که می‌خواهید کاربرانتان در میان UI و محتوا درگیر شوند در نظر بگیرید تا به تخصیص نقش‌های رنگی کمک کند، همه اجزا نباید از Primary استفاده کنند.

رنگ اشباع جامد بیشترین توجه را به خود جلب می کند.

7. به موضوع مبادله کنید

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

اجزای متریال دارای نقش هایی هستند که از قبل نقشه برداری شده اند و به طور خودکار با Material Theme Builder کار می کنند.

از حالت Material Theme Builder به موضوع تغییر دهید.

بیایید تمام نشانه‌ها (سبک‌های Figma) در طرح‌بندی را در سمت راست قرار دهیم تا با انتخاب کادر طرح‌بندی و کلیک بر روی swap، از این موضوع استفاده کنیم. به روز رسانی پیشوند سبک را در رنگ های انتخابی خواهید دید.
همه چیز به روز نیست؟ اجزای سفارشی، مانند کارت راهنمایی مراقبت از گیاه، ابتدا باید سبک Figma را اعمال کنند. ظرف نوک مراقبت را انتخاب کنید، در حالی که ظرف انتخاب شده است، روی نماد 4 نقطه کلیک کنید تا یک سبک اختصاص دهید، ظرف سوم را انتخاب کنید. همین کار را با محتویات کارت راهنمایی مراقبت انجام دهید، به جز اختصاص دادن یک ظرف درجه سوم . برچسب‌های کوچک موجود در لیست نیز اجزای سفارشی هستند، اما بعداً به آن‌ها باز خواهیم گشت!
اجزای طراحی متریال از نگاشت‌های پیش‌فرض استفاده می‌کنند، اما شما می‌توانید با تخصیص سبک‌ها مطابقت با UI را امتحان کنید. لحظه ای را به بازی با سلسله مراتب رنگ های مختلف و بیان برند اختصاص دهید.

(فقط موضوع برای کد در فایل صادراتی گنجانده شده است. اگر با یک مهندس کار می کنید، برای برقراری ارتباط نگاشت های نشانه، ماک ها را به اشتراک بگذارید، زیرا در صادرات گنجانده نمی شود)

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

8. تمدید از طرح اصلی

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

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

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

طرح اصلی را می توان برای گنجاندن رنگ های سفارشی گسترش داد.

9. گسترش و سفارشی سازی

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

طرح سفارشی با رنگ های سفارشی اضافه شده است.

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

تنظیم رنگ دلخواه در رنگ های انتخابی

Material Theme Builder خودکار رنگ ها را به صورت سفارشی# تولید می کند. برای تغییر نام یک رنگ سفارشی اضافه شده، گروه سبک های طرح زمینه را در پانل سبک گسترش دهید (این موضوع زمانی نشان داده می شود که چیزی انتخاب نشده باشد). سپس به دنبال Custom0 در زیر گروه منبع بگردید. تغییر نام منبع در اینجا باعث تغییر نام رنگ در مودال افزونه می شود.

سبک های رنگ سفارشی را می توان در پانل سبک ها یافت.

حذف رنگ اضافه شده را می توان به روشی مشابه با کلیک راست و حذف سبک انجام داد. دفعه بعد که افزونه باز شود رنگ اضافه شده حذف خواهد شد. تغییر نام و حذف ممکن است در نمودار رنگ منعکس نشود.

10. تبریک می گویم

کار بسیار خوبی در یادگیری نحوه ساخت یک تم رنگی سفارشی با استفاده از Material Theme Builder، اعمال آن برای طراحی ماکت‌ها و افزودن به طرح رنگ است. سیستم رنگی جدید Material 3 رنگ‌های قابل دسترس، انعطاف‌پذیر و منسجم را به طرح‌ها می‌آورد و ما نمی‌توانیم منتظر باشیم تا ببینیم چگونه از آنها استفاده می‌کنید!

اگر سؤالی دارید، در هر زمان با استفاده از @MaterialDesign در توییتر از ما بپرسید.

منتظر مطالب و آموزش های طراحی بیشتر در youtube.com/MaterialDesign باشید