1. معرفی
آخرین به روز رسانی: 21/09/21
برنامه‌ها می‌توانند مجموعه‌ای از رنگ‌ها را از طرح‌های پایه، رنگ‌های پویا تولید شده توسط کاربر یا رنگ‌های برند به خود بگیرند.
برای بررسی ویژگی‌های رنگ پویا جدید که با Material You معرفی شده‌اند، آماده شوید. در این آزمایشگاه، پالت‌های رنگی پویا را برای یادگیری نحوه عملکرد سیستم رنگ، مفاهیم محرک که پالت‌های رنگی قابل دسترس ایجاد می‌کنند و روش‌هایی برای کمک به تجسم برنامه‌تان با رنگ‌های پویا با استفاده از جدیدترین ابزارهای طراحی ایجاد می‌کنید.
چیزی که یاد خواهید گرفت
- چه چیزی در رنگ متریال دیزاین جدید است
- چگونه رنگ تولید شده توسط کاربر را در برنامه خود اعمال کنید
- ابزارهایی برای کمک کردن
پیش نیازها
برای این آزمایشگاه ما بر روی برخی از مفاهیم اساسی طراحی خواهیم بود.
- آشنایی با مفاهیم اساسی طراحی: پالت های رنگی
- آشنایی با رنگ ها و نقش های فعلی اندروید
- آشنایی با Figma
آنچه شما نیاز دارید
2. شروع کنید
برپایی
برای شروع باید به فایل Designlab Figma دسترسی داشته باشید. هر آنچه برای آزمایشگاه نیاز دارید در فایل Figma موجود است. می توانید فایل را دانلود و وارد کنید یا آن را از انجمن Figma کپی کنید.
ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن Figma
به Visualizing dynamic color در برنامه خود با فایل Material Design بروید یا Visualizing dynamic color را در برنامه خود با Material Design در انجمن Figma جستجو کنید. روی Duplicate در گوشه سمت راست بالا کلیک کنید تا فایل را در فایل های خود کپی کنید.
طرح بندی فایل
به اطراف فایل نگاه کنید. متوجه خواهید شد که فایل با یک مقدمه شروع می شود. هر بخش به ردیفی از تابلوهای هنری تقسیم می‌شود که به هم مرتبط شده‌اند، با برخی مفاهیم اصلی برای بخش و سپس تمرین‌ها. بخش ها و تمرین ها بر روی یکدیگر ساخته می شوند، بنابراین باید به ترتیب تکمیل شوند.
این نرم افزار کد شما را از طریق آن مفاهیم و تمرین ها با جزئیات بیشتر راهنمایی می کند. پیشنهاد می‌کنم برای آشنایی بیشتر با ویژگی‌های جدید Material You، همراه با Codelab مطالعه کنید.
با شروع از تابلوی مقدماتی ، دکمه‌هایی وجود دارند که تابلوهای هنری را به ترتیب به یکدیگر پیوند می‌دهند، با کلیک بر روی دکمه به لینک دسترسی پیدا کنید.
افزونه Figma را نصب کنید
این کد لبه به شدت به پلاگین Figma جدید برای تولید طرح‌های رنگی پویا و نشانه‌ها متکی است. افزونه Figma را مستقیماً از صفحه انجمن Figma نصب کنید یا "Material Theme Builder" را در انجمن Figma جستجو کنید.
3. مفاهیم رنگ
رنگ دینامیک چیست؟
مواد شما رنگ را به عنوان یک تجربه شخصی تر تصور می کنید. از طریق استخراج رنگ پویا، دامنه تجربیات رنگی ممکن به طور قابل توجهی گسترده تر می شود.
رنگ پویا بخش کلیدی Material You است که در آن یک الگوریتم رنگ‌های سفارشی را از کاغذ دیواری کاربر استخراج می‌کند تا روی برنامه‌ها و رابط کاربری سیستم اعمال شود.
درخشندگی
رنگ پویا برای کار در زمینه های غیرقابل پیش بینی ساخته شده است. برای مدیریت نسبت کنتراست در زمینه‌های مختلف مشاهده، سطوح درخشندگی ویژگی کلیدی است که به رنگ‌ها اجازه می‌دهد با موفقیت ترکیب شوند، حتی بدون اینکه تیم محصول هر ترکیب رنگی خاص را آزمایش کند.
عناصر با درخشندگی مشابه کنتراست مناسبی برای خوانایی نخواهند داشت، در حالی که عناصر با مقادیر درخشندگی متفاوت بیشتر قابل تشخیص خواهند بود.
پالت های تونال
پالت تونال ترجمه یک رنگ (رنگ استخراج شده پویا) به طیفی از تن های مرتبط است. ترجمه یک رنگ به سیزده تن، گروهی از محدوده‌های تونال را به نام پالت تونال قادر می‌سازد تا در زمینه‌های مختلف، از عناصر منفرد داخل یک جزء گرفته تا تم‌های کل برنامه، اعمال شوند.
رنگ به یک محدوده تونال ترجمه شده است.
4. استخراج رنگ
بذر به طرح
بیایید ببینیم رنگ پویا با سازنده تم مواد چگونه کار می کند.
- Material Theme Builder را باز کنید. با انتخاب پویا ، تصویری را رها کنید یا از مرورگر فایل یکی را انتخاب کنید. توجه داشته باشید که رنگ دانه بر اساس تصویر به روز می شود.
- مقادیر رنگ از یک کاغذ دیواری استخراج می‌شوند و یک "نوع" به آن اختصاص می‌یابد که تعیین می‌کند رنگ چگونه با رنگ‌های دیگر در یک طرح ارتباط دارد. این "رنگ های کلیدی" (در سمت راست) به روز شده اند تا این مقادیر را منعکس کنند.
- سپس آنها به پالت های رنگی مبتنی بر درخشندگی ترجمه می شوند و پنج طیف رنگی با رنگ های روشن تا تیره ایجاد می کنند. پالت های تونال به این صورت در خروجی رنگ مشخص می شوند.
- از پنج محدوده تون، زنگ های خاص (بر اساس درخشندگی) در نقش های از پیش تعریف شده که یک طرح را تشکیل می دهند، قرار می گیرند. رنگ ها از طریق نشانه های طراحی به یک طرح نگاشت می شوند.
نقش های رنگ سوم از یک محدوده تونال درجه سوم ایجاد شده و به اجزای آن نگاشت می شوند.
5. تم ها و نشانه ها
توکن‌های طراحی، انعطاف‌پذیری و سازگاری را در یک محصول با این امکان به طراحان امکان می‌دهند که، برای مثال، نقش رنگ یک عنصر را در رابط کاربری اختصاص دهند، نه یک مقدار مجموعه. توکن ها به عنوان پلی بین نقش تعیین شده یک عنصر و مقدار رنگ انتخاب شده برای یک نقش عمل می کنند. طراحی برای نقش یک رنگ به جای رنگ خاص با معرفی رنگ پویا اساسی تر است.
تم ها حاوی نشانه های طراحی متریال هم برای رنگ و هم برای نوع هستند، و تضمین می کنند که طرح ها و کدها دارای یک منبع حقیقت برای نشان دادن خط پایه، همراه با پالت های تولید شده توسط کاربر و مقادیر سفارشی هستند.
در Figma، پلاگین این نشانه ها را به عنوان سبک تولید می کند، به این معنی که اگر از سبک های تولید شده استفاده کنید، از توکن های MD استفاده خواهید کرد.
رنگ ها در یک پالت تونال از طریق نشانه های طراحی به یک طرح روشن یا تیره نگاشت می شوند.
سیستم نگاشت یک لحن به هر عنصر در یک جزء اختصاص می دهد.
راه اندازی نشانه ها
برای اعمال رنگ پویا به طرح‌های شما، باید مدل را روی نشانه‌های موجود در موضوع مواد موجود تنظیم کنیم.
- بیایید تمام نشانه‌ها (سبک‌های Figma) در طرح‌بندی را در سمت راست قرار دهیم تا با انتخاب کادر طرح‌بندی و کلیک کردن روی swap از این موضوع استفاده کنیم. به روز رسانی پیشوند سبک را در رنگ های انتخابی خواهید دید.
روی swap کلیک کنید تا موضوع متصل مورد استفاده در طرح انتخابی به‌روزرسانی شود.
- حالا یک تصویر را رها کنید یا یکی را از مرورگر فایل انتخاب کنید. مقادیر ماکت رنگ پویا استخراج شده از تصویر را به خود می گیرند.
- روی دکمه shuffle کلیک کنید، این رنگ دانه را به‌جای استخراج از تصویر تصادفی می‌کند. این روش دیگری برای مشاهده سریع این است که چگونه رنگ پویا می تواند بر روی طراحی شما تأثیر بگذارد.
با کلیک بر روی دکمه shuffle رنگ دانه را تصادفی کنید.
با باز کردن افزونه بدون طرح زمینه، صفحه راه اندازی برای شروع نمایش داده می شود. «شروع به کار»، «مواد-موضوع» خط پایه پیش‌فرض را به‌عنوان یک گروه سبک figma برای اتصال به مدل‌های شما یا استفاده با کیت طراحی مواد ایجاد می‌کند.
6. اعمال برای UI
طرح‌بندی‌های ارائه‌شده با کیت طراحی متریال ایجاد شده‌اند که از نشانه‌های طراحی متریال استفاده می‌کند، اما چند عنصر سفارشی وجود دارد که نقشه‌برداری نشده‌اند.
- کارت های مقاله را انتخاب کنید. در پر کردن، استایل (نماد چهار نقطه) را روی Material-theme/Surface تنظیم کنید. (می توانید سطح را نیز جستجو کنید).
- در یک فرآیند مشابه، نوع کارت ها را انتخاب کنید و روی سطح و چک باکس ها را روی اولیه تنظیم کنید.
استایل های فیگما در کارت های طراحی به کار رفته است.
در مرحله بعد، ما مدل های اضافی را برای تکرار در بقیه طرح ها ایجاد خواهیم کرد.
ایجاد تم و تکرار
ما اکنون یک ماکت را برای تجسم رنگ پویا به طور کامل متصل کرده‌ایم، اما همچنین می‌توانیم چندین تم ایجاد کنیم و آنها را روی ماکاپ‌های جداگانه تغییر دهیم تا طیفی از رنگ‌های پویا را به‌طور همزمان تجسم کنیم.
- در حالت افزونه، روی منوی کشویی کلیک کنید و «افزودن تم جدید » را انتخاب کنید.
- یک نام تم منحصر به فرد ایجاد کنید و روی "ایجاد تم " کلیک کنید. این همچنین نمودارهای رنگی جدیدی را برای هر تم ایجاد شده ایجاد می کند.
اضافه کردن یک تم جدید از طریق منوی کشویی.
- یک تصویر اضافه کنید یا رنگ دانه را مخلوط کنید.
- در حالت پلاگین، یک مدل (جزء رابط کاربری برنامه) را انتخاب کنید و روی swap کلیک کنید. با این کار مقادیر سبک به موضوع فعلی نشان داده شده در منوی کشویی به روز می شود.
- ماکت را کپی کنید (CMD + D).
روی swap کلیک کنید تا موضوع متصل مورد استفاده در طرح انتخابی به‌روزرسانی شود.
- مراحل 1-5 را تکرار کنید.
اکنون چندین طرح با تکرار رنگ های پویا متفاوت دارید!
7. تبریک می گویم
کار عالی در یادگیری و استفاده از رنگ پویا! Material Theme Builder اینجاست تا با تجسم رنگ پویا، ایجاد تم های سفارشی و صادرات به کد، رنگ را در طراحی متریال برای شما آسان تر کند.
اگر سؤالی دارید، در هر زمان با استفاده از @MaterialDesign در توییتر از ما بپرسید.
منتظر مطالب و آموزش های طراحی بیشتر در youtube.com/MaterialDesign باشید