ساخت تم ها متنوع با سایت Material Theme Builder
سلام در این مقاله می خوام با سایت Material theme builder آشنا بشیم که ادامه،این مقاله ” طراحی تم روشن و تاریک با جت پک کامپوز ” هست ، برای شروع کار می خواهم نکته ای رو بیان کنم :
مقدمه: اهمیت طراحی تم در ابتدای پروژه
نکته ای که حتماً باید مد نظر قرار دهید این است که بهتر است در ابتدای توسعه‌ی هر پروژه، تم کلی اپلیکیشن را مشخص کنید. این کار باعث می‌شود از اتلاف وقت در مراحل بعدی جلوگیری شود و بدانید در هر بخش باید از چه رنگ‌هایی استفاده کنید چون اگر در اینده در بخشی از پروژه شما نیاز داشته باشید که یک قسمت جدید اضافه کنید new feature بدونید که این قیچر جدید در حالت ها شب و روز به چه رنگ های باید باشد .
معرفی سایت Material theme builder
برای این موضوع می خوام سایتی رو معرفی کنم که این مشکل رو تا اندازه ای 90 درصد برای ما حل میکنه ، برای ابتدای کار باید به این سایت Material theme builder بریم ، زمانی که شما وارد سایت شدید ، تصویر زیر رو می بینید ،
بررسی بخش‌های مختلف سایت Material Theme Builder
حالا قسمت های که علامت زدم رو توضیح میدم که بدونید از کجا باید شروع کنیم
راهنمای کلی استفاده از ابزار
در این جا توضیحاتی در مورد این که چطوری باید از این سایت وقالب استفاده کنیم .
در ابزار Material Theme Builder، شما میتونید از رنگ‌های داینامیک استفاده کنید. یعنی این ابزار به‌صورت خودکار میاد از یک رنگ ورودی (مثلاً رنگ اصلی برند یا تصویر پس‌زمینه‌ی کاربر) چند رنگ کلیدی استخراج میکنه و اون‌ها رو با قوانین طراحی متریال تنظیم میکنه.
به زبان ساده‌تر:
- شما میتونید یک رنگ یا حتی یک عکس پس‌زمینه وارد کنید.
- ابزار، به‌طور خودکار ۵ رنگ کلیدی برای طراحی تم از اون استخراج میکنه.
- این رنگها بعد از پردازش به شکلی در میان که با هم هماهنگ باشن (از نظر تیرگی، روشنی و شفافیت رنگ).
- این ویژگی به شما کمک میکنه تا رنگ‌های برنامه با توجه به سلیقه یا سیستم کاربر دینامیک و هماهنگ بشن.
ساخت تم بر اساس تصویر پس‌زمینه
همان طور که در بالا گفته شد شما میتوانید این تصویر را انتخاب کنید اگه دقت کنید الان در این تصویر ، عکس ای انتخاب شده است که قالب اون سبز است و اگه به کادر زرد رنگ (سمت راست صفحه ) نگاه کنید ، تم برای ما به صورت قالب سبز رنگ ساخته شده است .
🖼️ شما میتونید هر تصویری که دوست دارید انتخاب کنید و ببینید چطور تم بر اساس اون ساخته میشه و یکی از قشنگ ترین ابزار Material theme builder هست
.
مدیریت و انتخاب ۵ رنگ اصلی تم
در این جا شما میتونید 5 رنگ اصلی رو انتخاب کنید ، این رنگها در زمان انتخاب تصاویر تغییر میکردند که اگه تصویری در مرحله 2 توضیح دادم، انتخاب کرده باشی متوجه شدی ،که شما می تونی به صورت دستی این ها رو انتخاب کنی .
به صورت معمولی و استاندارد این رنگها برای این موارد استفاده میشن (روی هرکدام کلیک کنید تا جزئیات رو ببینید)
مشاهده کامل نقش رنگها رو میتونید در این جا مطالعه کنید .
اضافه کردن رنگ‌های سفارشی (Custom Colors)
در این قسمت، شما میتونید رنگ‌های سفارشی جدیدی به تم اضافه کنید. مثلاً فرض کن رنگ‌های اصلی مثل Primary و Secondary برات کافی نیستن، ولی می‌خوای برای بخش خاصی از اپلیکیشن (مثلاً رنگ یک نمودار یا کارت خاص)، یه رنگ اضافه‌تر تعریف کنی.
✅ مفید وقتی که رنگ‌های اصلی برای طراحی‌تون کافی نباشن.
پیش‌نمایش نمایش رنگها در کامپوننت‌های واقعی
همان طور که اگه تا این جای کار با این سایت کار کرده باشید ، متوجه شده اید که این قسمت با تغییر رنگها عوض میشه (عکس دوتا صفحه ای گوشی هم در این جا هست که هنگام عکس برداری از سایت نمیدونم چرا این ها رو نیاورد🙄) که نشون میده رنگ های انتخاب ما در کامپوننت های برنامه به چه صورت نمایش داده میشن
🔍 به کمک این بخش می‌فهمید رنگ انتخابی‌تون دقیقاً کجا و چطور نمایش داده میشه.
مشاهده نحوه استفاده رنگها در حالت روشن و تاریک
در این بخش میتونیم ببینیم که رنگ‌هایی مثل Primary، Secondary و… در حالت روشن (Light) و حالت تاریک (Dark) چطور نمایش داده میشن.این جدول به ما نشون میده که هر رنگ در کجاها استفاده میشه،و در جای خود در تم های مختلف چگونه نمایش داده میشه، مثلاً توی دکمه‌ها، پس‌زمینه‌ها، کارت‌ها و…
خیلی کاربردیه برای اینکه بدونیم هر رنگ در تم نهایی دقیقاً کجا استفاده میشه.این کمک میکنه که رنگها رو درست و با هدف مشخص انتخاب کنیم.
🧾 کاربرد اون برای اینکه بفهمید هر رنگ در **چه بخشی از UI استفاده میشه**؛ مثلاً پس‌زمینه، دکمه، کارت و… و این قسمت هدف اصلی ما در استفاده ازMaterial theme builder است
بررسی Tonal Palette (تنالیته رنگها)
در این قسمت تنالیته‌ی رنگها (Tonal Palette) نمایش داده میشه؛ یعنی هر رنگ (مثلاً Primary) به ۱۳ شدت مختلف از ۰ تا ۱۰۰ تقسیم میشه.
💡درجه های مختلف رنگ رو تنالیته ای رنگ میگن
📊 این شدت‌ها در بخش‌های مختلف طراحی استفاده میشن، مثل آیکون، متن، پس‌زمینه و…
📌 شما فقط رنگ پایه رو مشخص می‌کنید، بقیه رو سیستم بر اساس طراحی متریال خودش انجام میده.
انتخاب فونت برای پیش‌نمایش متن‌ها
حالا ، اگه به گوشه سمت راست پایین توجه کنی ، می بینی که نوشته انتخاب فونت ، این جا هم میتونی فونت مورد نظر رو انتخاب کنی و بعد ببینی که این طرح به چه صورت تغییر میکنه ( ولی این قابلیت بیشتر برای فونت های انگلیسی کاربرد داره).
گرفتن خروجی فایل‌های اندروید (Theme.kt و Color.kt)
و در اخر به بهترین ویژگی که این سایت داره می رسیم ، یعنی خروجی گرفتن ، که به ما فایل ها Theme.kt و Color.kt برای استفاده در کامپوز رو به ما میده که این دیگه نیاز نیست ، خودمون دستی این کد ها رو وارد کنیم و برای گرفتن این خروجی زمانی که وارد قسمت انتخاب فونت می شوید ، در سمت راست پایین گزینه Export theme نشان داده میشه که بعد از انتخاب اون یه کادر کناری باز میشه و در پایین همون کادر Export را بزنید ، چند تا انتخاب به ما میده که میتونیم بسته به نیازمون اون ها رو انتخاب کنیم .
تموم شد 😉
امیدوارم با این مطلب بتونی تم های خیلی جذاب درست کنی و از کد زدن بیشتر لذت ببری 🥰
