۱. مقدمه
آخرین بهروزرسانی: ۲۱/۰۹/۲۱
برنامهها میتوانند مجموعهای از رنگها را از طرحهای پایه، رنگهای پویای ایجاد شده توسط کاربر یا رنگهای برند دریافت کنند.
آماده شوید تا به بررسی ویژگیهای جدید رنگ پویا که با Material You معرفی شدهاند، بپردازید. در این آزمایشگاه، پالتهای رنگ پویا ایجاد خواهید کرد تا نحوه کار سیستم رنگ، مفاهیم محرک ایجاد پالتهای رنگ قابل دسترس و روشهایی برای کمک به تجسم برنامه خود با رنگ پویا با استفاده از جدیدترین ابزارهای طراحی را بیاموزید.
آنچه یاد خواهید گرفت
- چه چیزهایی در رنگبندی متریال دیزاین جدید است؟
- نحوه اعمال رنگهای تولید شده توسط کاربر به برنامه شما
- ابزارهایی برای کمک
پیشنیازها
برای این آزمایش، ما بر روی برخی مفاهیم طراحی بنیادی کار خواهیم کرد.
- آشنایی با مفاهیم پایه طراحی: پالتهای رنگی
- آشنایی با طرحها و نقشهای رنگی فعلی اندروید
- آشنایی با فیگما
آنچه نیاز دارید
- حساب فیگما
- فایل طراحی رنگ پویای فیگما
- افزونه فیگما، سازنده قالب متریال
۲. شروع کنید
راهاندازی
برای شروع، باید به فایل Designlab Figma دسترسی داشته باشید. هر چیزی که برای آزمایشگاه نیاز دارید، در فایل Figma قرار دارد. میتوانید فایل را دانلود و وارد کنید یا آن را از انجمن Figma کپی کنید.
ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن فیگما
به فایل Visualizing dynamic color in your app with Material Design بروید یا عبارت Visualizing dynamic color in your app with Material Design را در انجمن فیگما جستجو کنید. برای کپی کردن فایل در فایلهای خود، روی گزینه Duplicate در گوشه بالا سمت راست کلیک کنید.
طرحبندی فایل
به فایل نگاه کنید. متوجه خواهید شد که فایل مستقل است و با یک مقدمه شروع میشود. هر بخش به ردیفی از آرتبوردها تقسیم شده است که به هم مرتبط هستند و برخی مفاهیم اصلی برای آن بخش و به دنبال آن تمرینها آمده است. بخشها و تمرینها بر اساس یکدیگر ساخته میشوند، بنابراین باید به ترتیب تکمیل شوند.
این آزمایشگاه کد شما را با جزئیات بیشتری در مورد این مفاهیم و تمرینها راهنمایی میکند. پیشنهاد میکنم برای کسب اطلاعات بیشتر در مورد ویژگیهای جدید Material You، همراه با آزمایشگاه کد مطالعه کنید.
با شروع از صفحه هنری مقدمه ، دکمههایی وجود دارند که صفحههای هنری را به ترتیب به هم پیوند میدهند، با کلیک بر روی دکمه به پیوند دسترسی پیدا کنید.
افزونه فیگما را نصب کنید
این آزمایشگاه کدنویسی برای تولید طرحهای رنگی و توکنهای پویا به شدت به افزونه جدید فیگما متکی است. افزونه فیگما را مستقیماً از صفحه انجمن فیگما نصب کنید یا عبارت "سازنده تم متریال" را در انجمن فیگما جستجو کنید.
۳. مفاهیم رنگ
رنگ داینامیک چیست؟
متریال یو، رنگ را به عنوان یک تجربه شخصیتر، از نو تصور میکند. از طریق استخراج پویای رنگ، طیف تجربیات رنگی ممکن به طور قابل توجهی گستردهتر میشود.
رنگ پویا بخش کلیدی Material You است که در آن یک الگوریتم، رنگهای سفارشی را از تصویر زمینه کاربر استخراج میکند تا در برنامهها و رابط کاربری سیستم او اعمال شود.
درخشندگی
رنگ پویا برای کار در زمینههای غیرقابل پیشبینی ساخته شده است. برای مدیریت نسبتهای کنتراست در زمینههای مختلف مشاهده، سطوح روشنایی ویژگی کلیدی هستند که به رنگها اجازه میدهند حتی بدون اینکه تیم محصول هر ترکیب رنگ خاص را آزمایش کند، با موفقیت ترکیب شوند.
عناصری با درخشندگی مشابه، کنتراست مناسبی برای خوانایی نخواهند داشت، در حالی که عناصری با مقادیر درخشندگی متفاوت، قابل تشخیصتر خواهند بود.
پالتهای تُنال
یک پالت تُن، تبدیل یک رنگ (یک رنگ استخراجشده پویا) به طیفی از تُنهای مرتبط است. تبدیل یک رنگ به سیزده تُن، گروهی از طیفهای تُن، به نام پالت تُن، را قادر میسازد تا در زمینههای مختلف، از عناصر منفرد درون یک کامپوننت گرفته تا کل تمهای برنامه، اعمال شوند.
رنگ به یک طیف تُن تبدیل شده است.
۴. استخراج رنگها
طرح اولیه
بیایید ببینیم رنگهای پویا چگونه با Material Theme Builder کار میکنند.
- سازنده تم متریال را باز کنید. با انتخاب پویا ، یک تصویر را وارد کنید یا از مرورگر فایل انتخاب کنید. توجه داشته باشید که رنگ دانه بر اساس تصویر بهروزرسانی میشود.
- مقادیر رنگ از یک تصویر زمینه استخراج شده و یک "نوع" به آن اختصاص داده میشود که نحوه ارتباط رنگ با سایر رنگها در یک طرح را تعیین میکند. این "رنگهای کلیدی" (در سمت راست) برای انعکاس این مقادیر بهروزرسانی شدهاند.
- سپس آنها به پالتهای تُن مبتنی بر درخشندگی تبدیل میشوند و پنج طیف رنگی با تُنهایی از روشن تا تیره ایجاد میکنند. پالتهای تُن در خروجی رنگ به همین صورت برچسبگذاری میشوند.
- از پنج محدوده تُن، تُنهای خاص (بر اساس درخشندگی) در نقشهای از پیش تعریفشدهای قرار میگیرند که یک طرح را تشکیل میدهند. رنگها از طریق نشانههای طراحی به یک طرح نگاشت میشوند.
نقشهای رنگی درجه سوم که از یک طیف تُنی درجه سوم ایجاد شده و به اجزا نگاشت شدهاند.
۵. تمها و توکنها
توکنهای طراحی با اجازه دادن به طراحان برای مثال، به جای یک مقدار تعیینشده، برای یک عنصر در رابط کاربری، انعطافپذیری و ثبات را در سراسر محصول فراهم میکنند. توکنها به عنوان پلی بین نقش تعیینشده برای یک عنصر و مقدار رنگ انتخابشده برای یک نقش عمل میکنند. طراحی برای نقش یک رنگ به جای رنگ خاص، با معرفی رنگ پویا، اساسیتر شده است.
تمها شامل توکنهای طراحی متریال برای رنگ و نوع هستند و تضمین میکنند که طرحها و کدها یک منبع واحد برای نمایش خط پایه، همراه با پالتهای تولید شده توسط کاربر و مقادیر سفارشی، داشته باشند.
در فیگما، افزونه این توکنها را به عنوان استایل تولید میکند، به این معنی که اگر از استایلهای تولید شده استفاده کنید، از توکنهای MD استفاده خواهید کرد.
رنگهای موجود در یک پالت رنگی از طریق نشانههای طراحی به یک طرح روشن یا تیره نگاشت میشوند.
سیستم نگاشت، به هر عنصر در یک کامپوننت، یک تُن (tone) اختصاص میدهد.
توکنهای راهاندازی
برای اعمال رنگ پویا به طرحهایتان، باید ماکت را روی توکنهای موجود در قالب متریال موجود تنظیم کنیم.
- بیایید با انتخاب قاب طرح و کلیک روی swap ، تمام توکنها (استایلهای فیگما) را در طرحبندی در سمت راست قرار دهیم تا از این تم استفاده کنند. خواهید دید که پیشوند استایل در رنگهای انتخابشده بهروزرسانی میشود.
کلیک روی swap برای بهروزرسانی تم متصل مورد استفاده در طرح انتخابشده.
- حالا یک تصویر را وارد کنید یا از مرورگر فایل انتخاب کنید. مقادیر ماکت، رنگ پویای استخراج شده از تصویر را به خود میگیرند.
- روی دکمهی shuffle کلیک کنید، این کار رنگ دانه را به جای استخراج از تصویر، به صورت تصادفی انتخاب میکند تا از آن استخراج شود. این روش دیگری برای مشاهدهی سریع چگونگی تأثیر رنگ پویا بر ماکتهای طراحی شماست.
برای تصادفی کردن رنگ دانهها، روی دکمهی shuffle کلیک کنید.
باز کردن افزونه بدون قالب، صفحه تنظیمات را برای شروع کار نشان میدهد. 'شروع'، قالب پایه پیشفرض 'material-theme' را به عنوان یک گروه به سبک فیگما ایجاد میکند تا به مدلهای شما متصل شود یا با کیت طراحی متریال استفاده شود.
۶. اعمال به رابط کاربری
طرحبندیهای ارائه شده با کیت طراحی متریال ایجاد شدهاند که از توکنهای طراحی متریال استفاده میکند، اما چند عنصر سفارشی وجود دارد که نگاشت نشدهاند.
- کارتهای مقاله را انتخاب کنید. در قسمت پر کردن، سبک (آیکون چهار نقطه) را روی material-theme/surface تنظیم کنید. (همچنین میتوانید surface را جستجو کنید).
- در یک فرآیند مشابه، نوع را در کارتها انتخاب کنید و روی سطح تنظیم کنید و کادرها را روی اصلی قرار دهید.
سبکهای فیگما مورد استفاده در کارتهای این طرح.
در مرحله بعد، ما نمونههای آزمایشی (mock) بیشتری ایجاد خواهیم کرد تا در بقیه طرحها تکرار شوند.
ایجاد تمها و تکرار آنها
اکنون ما یک ماکت را به طور کامل به هم متصل کردهایم تا رنگ پویا را به تصویر بکشیم، اما میتوانیم چندین تم ایجاد کنیم و آنها را در ماکتهای جداگانه جابجا کنیم تا طیف وسیعی از رنگهای پویا را به طور همزمان به تصویر بکشیم.
- در پنجره افزونه، روی منوی کشویی کلیک کنید و گزینه «افزودن قالب جدید » را انتخاب کنید.
- یک نام منحصر به فرد برای تم ایجاد کنید و روی «ایجاد تم » کلیک کنید. این کار همچنین نمودارهای رنگی جدیدی را برای هر تم ایجاد شده ایجاد میکند.
افزودن یک تم جدید از طریق منوی کشویی
- یک تصویر اضافه کنید یا رنگ دانهها را تغییر دهید.
- در پنجره افزونه، یک مدل (مؤلفه رابط کاربری برنامه) را انتخاب کنید و روی swap کلیک کنید. این کار مقادیر استایل را به قالب فعلی نشان داده شده در منوی کشویی بهروزرسانی میکند.
- از ماکت یک کپی (CMD + D) بگیرید.
کلیک روی swap برای بهروزرسانی تم متصل مورد استفاده در طرح انتخابشده.
- مراحل ۱ تا ۵ را تکرار کنید.
حالا شما چندین طرح با تکرارهای رنگی پویای مختلف دارید!
۷. تبریک
کار فوقالعادهای در یادگیری و بهکارگیری رنگهای پویا انجام دادی! ابزار Material Theme Builder اینجاست تا با نمایش رنگهای پویا، ایجاد تمهای سفارشی و خروجی گرفتن به کد، به تو کمک کند تا رنگآمیزی در طراحی متریال را برایت آسانتر کنی.
اگر سوالی دارید، میتوانید هر زمان که خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
برای مطالب و آموزشهای بیشتر در زمینه طراحی، در youtube.com/MaterialDesign با ما همراه باشید.