۱. مقدمه
آخرین بهروزرسانی: 22/04/18
برنامهها میتوانند مجموعهای از رنگها را از طرحهای پایه، رنگهای پویای ایجاد شده توسط کاربر یا رنگهای برند دریافت کنند.
آزمایشگاه رنگ Material You قبلی، نحوه تجسم رنگهای پویا را در مدلهای طراحی بررسی کرد، اما میتوانید از تمبندی Material نیز برای سفارشیسازی برنامه خود با رنگهای برند خود استفاده کنید. استفاده از سیستم رنگ جدید با رنگهای برند شما، یک طرح رنگی قابل دسترس ایجاد میکند که میتواند ویژگیهای پویاتری را به خود بگیرد!
آنچه یاد خواهید گرفت
- نحوه ایجاد یک قالب سفارشی با سازنده قالب Material.
- اعمال یک تم سفارشی برای طراحی ماکتها
- امکان ترکیب رنگهای پویا و سفارشی.
پیشنیازها
برای این آزمایش، ما بر روی برخی مفاهیم طراحی بنیادی کار خواهیم کرد.
- آشنایی با مفاهیم پایه طراحی: پالتهای رنگی
- آشنایی با طرحها و نقشهای رنگی فعلی اندروید
- آشنایی با فیگما
- اختیاری: تجسم رنگ پویا در آزمایشگاه کد برنامه شما
آنچه نیاز دارید
- حساب فیگما
- فایل فیگما دیزاین لب
- افزونه فیگما، سازنده قالب متریال
۲. شروع کنید
راهاندازی
برای شروع باید به فایل Designlab Figma دسترسی پیدا کنید. هر چیزی که برای آزمایشگاه نیاز دارید در فایل Figma قرار دارد. میتوانید فایل را دانلود و وارد کنید، یا آن را از انجمن Figma کپی کنید.
ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن فیگما
به فایل Customizing Material بروید یا عبارت Visualizing dynamic color in your app with Material Design را در Figma Community جستجو کنید. برای کپی کردن فایل در فایلهای خود، روی Duplicate در گوشه بالا سمت راست کلیک کنید.
طرحبندی فایل
همانطور که فایل را بررسی میکنید، متوجه میشوید که فایل مستقل است و با یک مقدمه شروع میشود. هر بخش به ردیفی از آرتبوردها تقسیم شده است که به هم مرتبط هستند و برخی مفاهیم اصلی برای آن بخش و سپس تمرینها آمده است. بخشها و تمرینها بر اساس یکدیگر ساخته میشوند و باید به ترتیب تکمیل شوند.
این آزمایشگاه کد شما را با جزئیات بیشتر در مورد این مفاهیم و تمرینها راهنمایی میکند. برای کسب اطلاعات بیشتر در مورد ویژگیهای جدید Material You، با آزمایشگاه کد همراه شوید!
با شروع از صفحه هنری مقدمه ، دکمههایی وجود دارند که صفحههای هنری را به ترتیب به هم پیوند میدهند. برای دسترسی به پیوند، روی دکمه کلیک کنید.
افزونه فیگما را نصب کنید
این آزمایشگاه کدنویسی برای تولید طرحهای رنگی و توکنهای پویا به شدت به افزونه جدید فیگما متکی است. افزونه فیگما را مستقیماً از صفحه انجمن فیگما نصب کنید یا عبارت «سازنده تم متریال» را در انجمن فیگما جستجو کنید.
۳. طرح رنگ متریال
ابتدا مروری بر نحوه استفاده از رنگ در Material و نحوه عملکرد سیستم رنگ جدید.
رنگ برای بیان سبک و انتقال معنا استفاده میشود، چه آن معنا برای کاربر شخصی باشد، چه برندسازی یا معنای معنایی. سیستم رنگ، تنوع طرحهای رنگی پویا را که با تغییر ورودیهای کاربر ایجاد میشوند، مدیریت میکند. منطق روابط تُنها و تغییرات در رنگ و کروما، پایه و اساسی برای کاربرد انعطافپذیر رنگ فراهم میکند.
فضای رنگ، با تولید ۵ رنگ کلیدی و سپس پالتهای تُنال، که در آنها گامهای تُنال خاصی انتخاب میشوند، راهی برای تولید طرحهای رنگی روشن و تیرهی قابل دسترس استخراجشده از یک رنگ منبع فراهم میکند.
این تکنیک تغییر رنگ نه تنها یک طرح رنگی قابل دسترس ارائه میدهد، بلکه روشهایی را برای ایجاد طرحهای برندسازی شده فراهم میکند که با طرحهای رنگی تولید شده توسط کاربر، قابل دسترس و منسجم هستند.
طرحهای رنگی از ۵ رنگ کلیدی به پالتهای رنگی تبدیل میشوند تا طرحهای قابل دسترسی ایجاد شوند.
تم برنددار
M3 از کاربردهای سیستماتیک پارامترهای سفارشی پشتیبانی میکند تا به تعریف و حفظ سبکهایی که برند شما را منتقل میکنند، کمک کند.
یک طرح رنگی سفارشی ، طرح رنگی است که از تصویر زمینه دستگاه کاربر گرفته نشده، بلکه از سازنده برنامه گرفته شده است. سیستم رنگی M3 و طرحهای سفارشی، پایه و اساس فعال کردن رنگ پویا در برنامهها هستند.
این طرح سفارشی با تنظیم توکنهای لازم (اسلاتهای رنگی) و ایجاد یک تجربه برندسازیشدهتر، شکاف بین M2 و M3 را برای مهاجرت آسان پر میکند.
افزودن رنگهای برند به سازنده تم متریال
۴. طرح رنگ: رنگهای تأکیدی
پایه و اساس یک طرح رنگی، مجموعهای از پنج رنگ کلیدی است که به صورت جداگانه با ۱۳ رنگ به پالتهای رنگی جداگانه مرتبط هستند. رنگهای خاص از هر پالت رنگی به نقشهای رنگی در رابط کاربری اختصاص داده میشوند. بیایید با باز کردن افزونه Material Theme Builder و تنظیم اولین رنگ تأکیدی خود شروع کنیم: رنگ اصلی (Primary) .
وارد کردن فقط رنگ اصلی، از آن به عنوان منبع برای تولید کل طرح رنگ استفاده میکند.
- در ماژول افزونه، روی سفارشیسازی (Custom) کلیک کنید. این کار قالب را به یک قالب سفارشی تغییر میدهد. برای این تمرین ما از قالب متریال (material-theme) که از قبل تولید شده است استفاده خواهیم کرد، اما در صورت تمایل میتوان یک قالب جدید نیز ایجاد کرد. برای کسب اطلاعات بیشتر به بخش تجسم رنگ پویا (dynamic color ) مراجعه کنید.
- در مرحله بعد، یک رنگ کلیدی اصلی تنظیم خواهیم کرد. رنگ اصلی میتواند رنگ اصلی برند شما یا رنگ اصلی و تأکیدی باشد که بیشتر مورد استفاده قرار میگیرد. بقیه رنگهای کلیدی بر اساس رنگ اصلی تنظیم میشوند. این بدان معناست که اگر به رنگهای اضافی نیاز ندارید، نیازی به اضافه کردن آنها نیست.
۵. بقیه قالب را بسازید
رنگ اصلی برای تولید تم استفاده میشود، اما ممکن است رنگهای تأکیدی برای پشتیبانی از رنگ اصلی برند داشته باشید.
- در ماژول افزونه، با کلیک روی رنگ ثانویه، یک رنگ ثانویه اضافه کنید. نقشهای ثانویه برای اجزای کماهمیتتر در رابط کاربری استفاده میشوند، در حالی که امکان نمایش رنگ را افزایش میدهند. رنگ ثانویه در طرح رنگی و رابط کاربری برنامه بهروزرسانی میشود.
- همین کار را برای رنگهای ثالثیه نیز انجام دهید. نقشهای ثالثیه برای ایجاد تضاد بین رنگها استفاده میشوند که میتوانند برای ایجاد تعادل بین رنگهای اولیه و ثانویه یا افزایش توجه به یک عنصر مورد استفاده قرار گیرند. نقش رنگ ثالثیه به سازندگان واگذار شده است تا بنا به صلاحدید خود از آن استفاده کنند و هدف آن پشتیبانی از بیان گستردهتر رنگ در محصولات است.
- اکنون از نقشهای خنثی و بیطرف برای سطوح و پسزمینهها و متنها و آیکونهای با تأکید بالا استفاده میشود.
برای سفارشیسازی کامل طرح رنگ خود، رنگهای ثانویه، ثالثیه و خنثی را ارائه دهید.
رنگهای برند شما اکنون در طرح رنگ اصلی گنجانده شدهاند و با فضای رنگی M3 مطابقت دارند، کاملاً در دسترس هستند و میتوانند به عنوان یک قالب در کد خروجی گرفته و پیادهسازی شوند.
۶. اعمال تم
نقشها و توکنها
هر رنگ تأکیدی ( اولیه ، ثانویه و ثالثیه ) در گروهی از چهار رنگ سازگار با تُنهای مختلف برای جفت شدن، تعریف تأکید و بیان بصری ارائه شده است. این گروه از رنگ تأکیدی، رنگ رویی، ظرف و ظرف رویی تشکیل شده است.
نقشهای خنثی برای سطوح و پسزمینهها و متنها و آیکونهای با تأکید بالا استفاده میشوند.
توکنهای طراحی، تصمیمات طراحی کوچک و تکراری را نشان میدهند که سبک بصری یک سیستم طراحی را تشکیل میدهند. توکنها جایگزین مقادیر استاتیک، مانند کدهای هگز برای رنگ، با نامهای واضح میشوند. توکنهای طراحی به طور معناداری انتخابهای سبک را به هم متصل میکنند که در غیر این صورت فاقد رابطه واضحی بودند.
افزونه فیگما توکنها را ایجاد میکند و رنگهای منبع خود را در قالب سبکهای فیگما وارد میکند تا با مدلهای موجود، راهنماهای سبک برند و حتی سیستمهای طراحی مرتبط شود.
توکنهای طراحی، زبان مشترکی بین نقشهای رنگی و پیادهسازی ایجاد میکنند.
سلسله مراتب رنگ
هنگام اعمال نقشهای رنگی به ماکتهای خود، ترتیب اهمیت یا سلسله مراتب عناصر خود را در نظر بگیرید. این مفهوم به اختصاص رنگهای برند به نقشهای مربوطهشان کمک میکند، اما همچنین آنها را در رابط کاربری ترسیم میکند. معمولاً رنگهای اشباعشده یا غلیظتر ابتدا توجه کاربر را جلب میکنند، به همین دلیل است که نقش رنگ اصلی، اجزایی را ترسیم میکند که بیشتر بر فراخوان عمل متمرکز هستند. در حالی که سازنده تم متریال از سیستم رنگ M3 برای تولید رنگهای مناسب استفاده میکند، ارائه رنگهای ثانویه یا ثالثیه با اشباع بالاتر، رنگهایی ایجاد میکند که از رنگ اصلی آنها پیشی میگیرند. برای کمک به تعیین نقشهای رنگی، ترتیبی را که میخواهید کاربرانتان در بین رابط کاربری و محتوا با آن تعامل داشته باشند، در نظر بگیرید، همه اجزا نباید از رنگ اصلی استفاده کنند.
رنگ اشباع شده جامد بیشترین توجه را به خود جلب می کند.
۷. تغییر به قالب
برای اعمال تم سفارشی که ایجاد کردهاید به طرحهایتان، باید ماکت را روی توکنهای موجود در تم متریال موجود تنظیم کنیم.
اجزای متریال با نقشهای از پیش تعیینشده ارائه میشوند و بهطور خودکار با سازنده تم متریال کار خواهند کرد.
از ماژول سازنده قالب متریال به قالب جدید بروید.
- بیایید با انتخاب قاب طرح و کلیک روی swap، تمام توکنها (سبکهای فیگما) را در طرحبندی در سمت راست قرار دهیم تا از این تم استفاده کنند. خواهید دید که پیشوند سبک در رنگهای انتخابشده بهروزرسانی میشود.
- همه چیز بهروزرسانی نشده است؟ اجزای سفارشی، مانند کارت نکات مراقبت از گیاه، ابتدا باید سبک فیگما را اعمال کنند. ظرف نکات مراقبتی را انتخاب کنید، در حالی که ظرف انتخاب شده است، روی نماد ۴ نقطه کلیک کنید تا یک سبک اختصاص دهید، ظرف سوم را انتخاب کنید. همین کار را با محتویات کارت نکات مراقبتی انجام دهید، به جز اختصاص یک ظرف سوم . برچسبهای کوچک موجود در لیست نیز اجزای سفارشی هستند، اما بعداً به آنها باز خواهیم گشت!
- اجزای طراحی متریال از نگاشتهای پیشفرض استفاده میکنند، اما میتوانید با تخصیص سبکها آزمایش کنید تا به بهترین شکل با رابط کاربری مطابقت داشته باشند. لحظهای را به بازی با سلسله مراتب رنگهای مختلف و بیان برند اختصاص دهید.
(فقط قالب در فایل خروجی کد گنجانده شده است. اگر با یک مهندس کار میکنید، برای ارتباط با نگاشتهای توکن، mockها را به اشتراک بگذارید، زیرا این مورد در خروجی گنجانده نخواهد شد.)
باز کردن افزونه بدون قالب، صفحه تنظیمات را برای شروع کار نشان میدهد. 'شروع'، قالب پایه پیشفرض 'material-theme' را به عنوان یک گروه به سبک فیگما ایجاد میکند تا به مدلهای شما متصل شود یا با کیت طراحی متریال استفاده شود.
۸. گسترش فراتر از طرح اصلی
اکنون یک تم رنگی برندسازی شده دارید که به اجزا و مدل طراحی نگاشت شده است، اما ممکن است رنگهای اضافی دیگری نیز وجود داشته باشد که باید گنجانده شوند. اینجاست که یک طرح توسعهیافته برای امکان افزودن رنگهای سفارشی وارد عمل میشود.
این رنگها میتوانند رنگهای معنایی، رنگهای خاص برند یا حتی رنگهای خاص محصول باشند که باید نقشهایی به آنها اختصاص داده شود و از طریق الگوریتم رنگ تغییر داده شوند یا به صورت ورودی باقی بمانند.
طرح رنگی توسعهیافته همچنین امکان ترکیب رنگهای پویا (تولید شده توسط کاربر) با رنگهای برند شما را فراهم میکند. به طرح اصلی اجازه دهید تا تأثیر شخصیسازیشدهای بر کاربر داشته باشد، در حالی که رنگهای برند در طرح توسعهیافته تنظیم میشوند. این بدان معناست که عناصر رابط کاربری میتوانند برای کاربران شما شخصیتر باشند و رنگهای برند شما میتوانند لحظات تأثیرگذار دقیقتری در برنامه داشته باشند.
طرح اصلی را میتوان گسترش داد تا شامل رنگهای سفارشی نیز بشود. 
۹. گسترش و سفارشیسازی
گسترش طرح با رنگهای سفارشی، امکان افزودن رنگهایی مانند رنگهای معنایی یا رنگهای اضافی برندسازی را فراهم میکند.
طرح سفارشی با رنگهای سفارشی اضافه شده.
- در پنجره افزونه، در زیر رنگهای کلیدی، روی افزودن رنگ کلیک کنید.
- قالب فعلی با یک ردیف Custom0 جدید بهروزرسانی خواهد شد. برای بهروزرسانی این رنگ، روی رنگ مورد نظر کلیک کنید و یک رنگ جدید انتخاب کنید.
- این رنگهای توسعهیافته را میتوان به عنوان یک سبک در سبکهای فقط خواندنی مانند Custom0 یافت. پالت و طرح رنگی آنها هر دو موجود است. بیایید با انتخاب پسزمینه برچسب و اختصاص یکی از نقشهای رنگ اضافه شده (در کانتینر custom0)، برخی از برچسبهای لیست را با رنگ جدید نگاشت کنیم.
تنظیم رنگ سفارشی در رنگهای انتخاب شده.
- سازندهی قالب متریال به طور خودکار رنگها را به صورت Custom# تولید میکند. برای تغییر نام یک رنگ سفارشی اضافه شده، گروه استایلهای قالب را در پنل استایلها گسترش دهید (این گروه زمانی که چیزی انتخاب نشده باشد نمایش داده میشود). سپس در زیرگروه منبع، Custom0 را جستجو کنید. تغییر نام منبع در اینجا، نام رنگ را در ماژول افزونه تغییر میدهد.
سبکهای رنگی سفارشی را میتوان در پنل سبکها یافت.
- حذف رنگ اضافه شده را میتوان به روشی مشابه با کلیک راست و حذف سبک انجام داد. دفعه بعد که افزونه باز شود، رنگ اضافه شده حذف خواهد شد. تغییر نام و حذف ممکن است در نمودار رنگ منعکس نشود.
۱۰. تبریک
خیلی عالی بود که یاد گرفتید چطور با استفاده از Material Theme Builder یک تم رنگی سفارشی بسازید، آن را روی ماکتهای طراحی اعمال کنید و به طرح رنگها اضافه کنید. سیستم رنگی جدید Material 3 رنگهای در دسترس، انعطافپذیر و منسجمی را به طرحها میآورد و بیصبرانه منتظریم ببینیم چطور از آنها استفاده میکنید!
اگر سوالی دارید، میتوانید هر زمان که خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
برای مطالب و آموزشهای بیشتر در زمینه طراحی، در youtube.com/MaterialDesign با ما همراه باشید.