1. معرفی
آخرین به روز رسانی: 08/04/22
با شروع اندروید 13، کاربران می‌توانند آیکون‌های راه‌انداز تطبیقی خود را قالب‌بندی کنند. با استفاده از این ویژگی، آیکون‌های برنامه در لانچرهای اندرویدی پشتیبانی‌شده برای به ارث بردن رنگ‌های کاغذدیواری انتخابی کاربر و تم‌های دیگر رنگ می‌شوند.
به راحتی تمام دارایی های سیستم مورد نیاز برای برنامه اندروید خود، از جمله نمادهای رنگی تطبیقی جدید را ایجاد کنید.
چیزی که یاد خواهید گرفت
- درک انواع مختلف نمادهای برنامه و نکاتی برای طراحی آنها.
- نحوه استفاده از قالب اندروید لانچر Figma.
- نحوه استفاده از Android Studio Asset Generator.
- چگونه با شبیه ساز اندروید استودیو آیکون لانچر خود را پیش نمایش کنیم.
پیش نیازها
- دانش اولیه Figma
- اختیاری: آثار هنری نماد برنامه (پیش زمینه، پس زمینه و تک رنگ)
آنچه شما نیاز دارید
- حساب فیگما
- یک فایل Figma designlab
- اختیاری: رایانه ای که با Android Studio نصب شده است
2. شروع کنید
برپایی
برای شروع، باید به فایل Figma نماد برنامه اندروید دسترسی داشته باشید.
ابتدا وارد Figma شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن Figma
به فایل الگوی راه‌انداز Android بروید یا در انجمن Figma، عبارت Migrating to Variable fonts را جستجو کنید. روی Get a Copy در گوشه سمت راست بالا کلیک کنید تا فایل را در فایل های خود کپی کنید.
با استفاده از قالب
قالب آیکون اندروید از دو صفحه تشکیل شده است:
- صفحه جلد به طور خلاصه مفاهیم مرتبط و نحوه استفاده از الگو را پوشش می دهد.
- صفحه الگو شامل همه چیزهایی است که برای ایجاد دارایی های مورد نیاز نیاز دارید، که به سه فریم (رنگ، شکل، فروشگاه Play) تقسیم شده است.
نکته: در پنل لایه سمت چپ، اکثر لایه ها و گروه ها قفل هستند. اینها باید قفل بمانند (شما می توانید آثار هنری را در گروه های آثار هنری قفل نشده قرار دهید.)
اما قبل از اینکه به ایجاد دارایی بپردازیم، بیایید ببینیم که چه چیزی ایجاد خواهیم کرد...
3. آیکون های سیستم اندروید
نمادهای لانچر
آیکون‌های راه‌انداز یا نمادهای برنامه به‌عنوان بخش مهمی از تجربه راه‌اندازی برنامه شما عمل می‌کنند، نمادهای راه‌انداز در صفحه اصلی به عنوان نقطه ورود به برنامه شما ظاهر می‌شوند.
شکل تطبیقی
یک نماد تطبیقی یا AdaptiveIconDrawable بسته به قابلیت‌های دستگاه و موضوع کاربر می‌تواند متفاوت نمایش داده شود. نمادهای تطبیقی عمدتاً توسط راه‌انداز در صفحه اصلی استفاده می‌شوند، اما می‌توانند در میان‌برها، برنامه تنظیمات، گفتگوهای اشتراک‌گذاری و صفحه نمای کلی نیز استفاده شوند.
یک نماد تطبیقی می تواند اشکال مختلفی را در مدل های مختلف دستگاه نمایش دهد. به عنوان مثال، می تواند یک شکل دایره ای را در یک دستگاه OEM نشان دهد و یک سنجاب را در دستگاه دیگری نمایش دهد. هر OEM دستگاه باید یک ماسک ارائه دهد که سیستم از آن برای ارائه تمام نمادهای تطبیقی با یک شکل استفاده می کند.
قابلیت انطباق با شکل همچنین به سیستم اجازه می دهد تا جلوه های مختلف انیمیشن را با تعامل کاربر اعمال کند.
رنگ تطبیقی
اکنون آیکون‌های تطبیقی می‌توانند از رنگ پویا استفاده کنند تا آیکون‌های برنامه‌های با موضوع شخصی‌سازی شده را امکان‌پذیر کنند.
اگر کاربر آیکون‌های برنامه‌های مضمون را فعال کرده باشد (به عبارت دیگر، کلید نمادهای Themed را در تنظیمات سیستم روشن کرده باشد)، و راه‌انداز از این ویژگی پشتیبانی کند، سیستم از رنگ‌آمیزی کاغذدیواری و تم انتخابی کاربر برای تعیین رنگ رنگ استفاده می‌کند.
مانند نمادهایی که با شکل تطبیق می‌دهند، نمادهای رنگی تطبیقی از یک پیش‌زمینه و پس‌زمینه تشکیل شده‌اند، فقط باید یک دارایی نماد پیش‌زمینه تک رنگ ارائه شود، سیستم از پس‌زمینه و رنگ هر دو با طرح رنگ استخراج‌شده مراقبت می‌کند.
همچنین می توانید از همان نماد تک رنگ برای نماد اعلان استفاده کنید.
میراث
نمادهای قدیمی باید برای پشتیبانی از دستگاه‌هایی که نسخه‌های قدیمی‌تر Android دارند یا از ویژگی‌های تطبیقی (قبل از ۸.۰) پشتیبانی نمی‌کنند، گنجانده شود.
آنها منابع پیش زمینه و پس زمینه نخواهند داشت و می توانند شکل آزاد داشته باشند. اگر از الگوی ارائه شده استفاده می کنید، اثر هنری شکل تطبیقی نهایی در اندازه های لازم برای نماد قدیمی شما صادر می شود.
نمادهای اعلان
اعلان پیامی است که Android در خارج از رابط کاربری برنامه شما نمایش می دهد تا یادآوری ها، ارتباط افراد دیگر یا سایر اطلاعات به موقع از برنامه شما را به کاربر ارائه دهد. این سیستم اعلان‌ها را در مکان‌ها و قالب‌های مختلف نشان می‌دهد، مانند نمادی در نوار وضعیت، ورودی با جزئیات بیشتر در کشوی اعلان، به‌عنوان نشان روی نماد برنامه، و در پوشیدنی‌های جفت شده به‌طور خودکار.
فروشگاه آثار هنری
برای برجسته کردن و تبلیغ برنامه خود در Google Play و سایر کانال‌های تبلیغاتی Google، می‌توانید از یک ویژگی گرافیکی، اسکرین‌شات، توضیحات کوتاه و ویدیوها استفاده کنید.
نماد برنامه جایگزین نماد راه‌انداز برنامه شما نمی‌شود، اما باید نسخه با کیفیت بالاتر و وضوح بالاتر باشد.
مشابه نماد راه‌انداز، آثار هنری می‌توانند کل فضای دارایی را پر کنند، یا می‌توانید عناصر اثر هنری مانند آرم‌ها را روی شبکه خطوط کلیدی طراحی و قرار دهید.
برای انتشار فهرست فروشگاه خود باید یک نماد برنامه مربعی با ابعاد 512x512 پیکسل ارائه دهید. اگر از الگوی نماد برنامه Android استفاده می‌کنید، این الگو در صادرات با استفاده از اثر هنری Adaptive Shape ارائه می‌شود.
4. بهترین شیوه ها را طراحی کنید
نمادهای راه‌انداز برنامه شما را برای کاربر راه‌اندازی می‌کنند. به عنوان ورودی به برنامه شما، آنها باید قابل تشخیص و خواندن باشند. در اینجا برخی از بهترین روش‌ها برای اطمینان از این ویژگی‌ها در نماد راه‌انداز شما آورده شده است.
آثار هنری را ساده نگه دارید. از چندین لایه، جلوه های زیاد و متن خودداری کنید. این جزئیات در اندازه های کوچک از بین می روند یا به سختی دیده می شوند. 
از اشکال پیچیده اجتناب کنید. این شامل لوگوها می شود. در صورت امکان از یک لوگوی ساده شده استفاده کنید یا نمادی را در نظر بگیرید که کاربران شما با برنامه شما ارتباط برقرار می کنند. یک شکل خوانا و متمایز به ایجاد یکپارچگی برای کاربران کمک می کند تا به راحتی برنامه شما را از زمینه های مختلف (رنگ و اعلان تطبیقی) تشخیص دهند. 
از یک شبکه استفاده کنید. از شبکه یا خطوط کلیدی استفاده کنید تا مطمئن شوید که اثر هنری پیش‌زمینه هنگام برش کار می‌کند، از جمله آثار هنری تصویرسازی کامل. 
کنتراست را در نظر بگیرید . برای شکل تطبیقی و نمادهای قدیمی، مطمئن شوید که پیش زمینه و پس‌زمینه نماد دارای کنتراست خوانا هستند. از استفاده از سایه های سنگین که ممکن است با سایه سیستم اشتباه گرفته شود خودداری کنید. 
آثار هنری را در مناطق امن نگه دارید. دارایی های پیش زمینه را در ابعاد 72x72 پیکسل نگه دارید (مگر اینکه در حال انجام خونریزی کامل باشید). پس زمینه ها را در اندازه 108x108 پیکسل نگه دارید. توجه: قاب اثر هنری الگوی نماد بزرگتر از 72x72 پیکسل است تا به شما امکان ایجاد آثار هنری آیکون را بدهد. اندازه دارایی ها مطابق با مشخصات تغییر خواهد کرد. 
فرمت برداری. سعی کنید از آثار هنری با فرمت برداری (مانند فایل‌های SVG، AI، PDF و EPS) به‌جای استفاده از فرمت‌های شطرنجی (مانند فایل‌های PNG، JPG و GIF) استفاده کنید. این تضمین می‌کند که اثر هنری شما با ویژگی‌های جدیدتر سازگار است و ویرایش آن آسان‌تر است. 
5. رنگ تطبیقی و آیکون های اطلاع رسانی
اکنون نوبت شماست که آیکون های سیستم اندروید خود را بسازید.
- فایل Figma نمادهای برنامه اندروید را پیدا کنید.
- در داخل فایل، قاب رنگ تطبیقی را پیدا کنید. به پانل لایه‌های سمت چپ نگاه کنید تا رنگ تطبیقی > اجزای سازنده > هنر > منطقه آثار هنری نمادها > نمادهای تم دار < نماد خود را اضافه کنید . اگر یک نماد تک رنگ آماده دارید، آن را در اینجا کپی کنید تا نماد نمونه bugdroid جایگزین شود و به مرحله 6 بروید.
- اگر نماد تک رنگ ندارید، با یک لوگو یا نماد مربوط به برنامه خود شروع کنید. برای به روز رسانی نماد خود، نکات طراحی را مرور کنید. ابتدا ساده سازی و اجتناب از اشکال پیچیده. به عنوان مثال، در اینجا تصاویر استفاده شده در برنامه با اشکال برگ کمتر پیچیده ساده شده است. سایه ها و جزئیات خطوط با فضای سفید شبیه سازی شده اند.
- اکنون، اندازه را با استفاده از شبکه خط کلید به‌روزرسانی کنید. در اینجا ما تغییر اندازه را روی Scale تنظیم کرده ایم و مطمئن شده ایم که اثر هنری در منطقه امن پیش زمینه قرار دارد. این الگو با آثار هنری در 4 برابر تنظیم شده است و به طور خودکار برای صادرات تغییر اندازه می دهد، بنابراین می توانید نمادهای خود را در مقیاس بزرگتر طراحی کنید.
- این فایل برای کار با Material Theme Builder تنظیم شده است تا به پیش نمایش رنگ پویا کمک کند. سبک رنگ نماد پیش‌زمینه را به روی سطح وصل کنید.
- اکنون، با باز کردن Material Theme Builder از پنل پلاگین، می‌توانید رنگ منبع را به هم بزنید یا یک تصویر برای به‌روزرسانی رنگ‌ها با استفاده از رنگ منبع استخراج شده اضافه کنید.
- در رزولوشن‌های مختلف یا در صفحه اصلی این حالت چگونه خواهد بود؟ الگو به گونه ای تنظیم شده است که آثار هنری قرار گرفته در چارچوب های اثر هنری در زمینه های مختلف پیش نمایش ظاهر شوند.
- این سیستم از نماد تک رنگ به عنوان اعلان استفاده می کند و به همین شکل در پیش نمایش ها نمایش داده می شود.
6. شکل تطبیقی و نمادهای میراث
اکنون، برای اطمینان از پشتیبانی گسترده از نماد، شکل تطبیقی و نمادهای قدیمی را ایجاد می کنیم.
- در داخل فایل، قاب Shape را پیدا کنید. به پانل لایه های سمت چپ نگاه کنید تا پس زمینه نماد را پیدا کنید < نماد خود را اضافه کنید *. اگر نمادی آماده دارید، آن را در اینجا کپی کنید تا جایگزین نماد bugdroid نمونه شود، و به مرحله 5 بروید.* اگر نماد ندارید، با یک لوگو یا نماد مربوط به برنامه خود شروع کنید یا از نماد تک رنگ دوباره استفاده کنید.
- به‌روزرسانی نماد پیش‌زمینه، با در نظر گرفتن بهترین شیوه‌های نماد. در اینجا من رنگ های اصلی تصویر را بازگردانده ام، اما جزئیات را حداقل نگه داشته ام.
- اکنون، اندازه را با استفاده از شبکه خط کلید به‌روزرسانی کنید. در اینجا ما تغییر اندازه را روی Scale قرار دادیم و مطمئن شدیم که اثر هنری در منطقه امن پیش‌زمینه قرار دارد.
- نمادهای برنامه شکل تطبیقی نیز می توانند پس زمینه مشخصی داشته باشند. این اجازه می دهد تا لایه های نماد به طور ایمن برش داده شوند و اثرات حرکتی ظریفی را در تعامل ایجاد کنند. همچنین می توانید در اندروید استودیو از یک پس زمینه تک رنگ استفاده و تعریف کنید.
- پیش‌نمایش‌ها به‌روزرسانی می‌شوند تا نشان دهند که پیش‌زمینه و پس‌زمینه با هم، در صفحه اصلی، اشکال مختلف برش‌خورده و به‌عنوان یک نماد قدیمی چگونه به نظر می‌رسند.
شکل مورد استفاده برای برش را می توان در پیش نمایش صفحه اصلی با انتخاب نمادها و تغییر گزینه شکل شکل به روز کرد. 
7. صادرات
عالی است، اکنون قالب را با نمادهای برنامه خود به روز کرده اید! برای اجرا صادرشون کنیم..
- مطمئن شوید که چیزی روی بوم انتخاب نشده است.
- به منوی Figma > File > Export ( Shift + Cmd + E ) بروید.
- در منوی صادرات، صادرات را تأیید کنید. با این کار دارایی ها از الگو دانلود می شود.
در صادرات چیست؟
دارایی های صادر شده دارای تمام فایل های لازم برای پیاده سازی نماد برنامه شما به شرح زیر است
- Figma نماد پیش زمینه تک رنگ را برای رنگ تطبیقی به عنوان یک فایل SVG، همراه با پیش زمینه و پس زمینه برای نمادهای شکل تطبیقی صادر می کند.
- Figma همچنین آیکون‌های قدیمی را در دایرکتوری‌های mipmap مختلف سازمان‌دهی شده بر اساس وضوح ارائه می‌کند.
خودشه! نماد شما آماده ارسال به برنامه توسعه است.
از طرف دیگر، اگر می‌خواهید آیکون‌های خود را در اندروید استودیو پیش‌نمایش کنید و آن SVGها را به فرمت دارایی نهایی خود تبدیل کنید، به مرحله بعدی ادامه دهید.
8. از Image Asset Studio استفاده کنید
با Android Studio شروع کنید
- اندروید استودیو را دانلود و نصب کنید ..
- اندروید استودیو را راه اندازی کنید.
Android Studio گزینه هایی را برای شروع یک پروژه جدید یا انتخاب پروژه های موجود از شما می خواهد.
- در حال حاضر یک پروژه جدید انتخاب کنید. صفحه های زیر شما را در راه اندازی پروژه جدیدتان راهنمایی می کنند.
- هر قالبی را از الگوهای شروع انتخاب کنید، زیرا ما فقط به نمادهای راه اندازی نگاه می کنیم.
- پس از آن نام پروژه جدید خود را انتخاب کنید و Finish را انتخاب کنید. پروژه جدید چند لحظه طول می کشد تا ایجاد شود.
از Image Asset Studio استفاده کنید
اکنون می توانیم آیکون های شما را با استفاده از ابزار مفید Asset Studio به پروژه اضافه کنیم.
- برای دسترسی به این ابزار، منوی File > New > Image Asset را انتخاب کنید.
- وقتی Image Asset Studio باز می شود، با انتخاب نماد پوشه در Path ، لایه پیش زمینه را اضافه کنید. فایل SVG صادر شده را به عنوان drawable-anydpi/ic_launcher.svg انتخاب کنید
- تب Background Layer را انتخاب کنید و به طور مشابه لایه پس زمینه ای را که صادر شده است انتخاب کنید. از طرف دیگر، نوع دارایی: رنگ را انتخاب کنید تا در عوض یک پس‌زمینه پرتاب‌کننده رنگ ثابت داشته باشید.
- به لایه پیش زمینه برگردید و دوباره بررسی کنید که تصویر در منطقه امن است. اندازه نماد را به آنچه از نظر بصری بهترین کار می کند تغییر دهید.
- پس از اتمام، روی Next کلیک کنید تا از شما بپرسد که آیکون ها باید در پروژه شما کجا قرار گیرند (این را به حالت پیش فرض بگذارید یا به Main تغییر دهید). سپس روی Finish کلیک کنید. می‌توانید دارایی‌های راه‌انداز خود را در زیر res > drawable پیدا کنید. با دوبار کلیک کردن، پیش نمایشی از نقشه های برداری نهایی باز می شود.
- دارایی لایه تک رنگ را به صورت دستی در res/drawable یا res/drawable-v24 کپی-پیست کنید یا با کلیک راست روی پوشه res و انتخاب New > Vector Asset، لایه تک رنگ را به صورت دستی وارد کنید.
- در res/mipmap-anydpi-v26/ic_launcher.xml و res/mipmap-anydpi-v26/ic_launcher_round.xml android:monochrome="path/to/monochrome/asset موجود را اضافه یا تغییر دهید تا به دارایی تک رنگ صحیح اشاره کنید.
9. پیش نمایش و منابع
پیش نمایش در شبیه ساز
ما این کار را انجام داده‌ایم تا آنها را به پروژه برنامه اضافه کنیم و به ما امکان پیش‌نمایش روی یک دستگاه یا شبیه‌ساز واقعی را می‌دهیم! بیایید ببینیم که نمادهای ما چگونه واقعی خواهند بود.
شما باید به طور پیش فرض یک شبیه ساز داشته باشید، اما اگر نه، یک دستگاه مجازی Android ایجاد کنید . روی دکمه پخش سبز کلیک کنید. این پروژه را ساخته و شبیه ساز را باز می کند.
دارایی های نهایی
عالی است، شما توانسته اید با استفاده از شبیه ساز بررسی کنید که نماد راه انداز خود در دستگاه چگونه به نظر می رسد و آنها را به یک پروژه برنامه اضافه کرده اید. انجام این کار آنها را به فرم تولید نهایی خود تبدیل کرده است! اما آنها کجا هستند؟
دارایی‌ها به‌عنوان منابع با یک برنامه Android زندگی می‌کنند و با باز کردن پنل منابع (معمولاً در سمت چپ) می‌توان آنها را پیدا کرد. داخل برنامه تمرین کنید، سپس پوشه Res خود را پیدا کنید. برای باز کردن یک منو کلیک راست کنید و Open in Finder (در مک) را انتخاب کنید، با این کار یک پنجره Finder باز می شود. به صورت اختیاری، می‌توانید با تبدیل و آزمایش بقیه دارایی‌های برنامه خود با استفاده از فرآیندی مشابه، مقداری در زمان توسعه و QA صرفه‌جویی کنید. اگر بقیه دارایی‌های برنامه خود را تبدیل کرده‌اید، این پوشه را می‌توان با توسعه به اشتراک گذاشت.
10. تبریک می گویم
کار بسیار خوبی است، شما در مورد نمادهای سیستم Android مورد نیاز برای ساخت یک برنامه اندروید، طراحی نمادهای خود، کاوش در منبع الگوی نمادها و احتمالاً با غواصی در Android Studio برای پیش نمایش و تبدیل دارایی ها برای تولید فراتر رفته اید!
اگر سؤالی دارید، هرزمان خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
منتظر مطالب و آموزش های طراحی بیشتر در youtube.com/MaterialDesign باشید