۱. مقدمه
آخرین بهروزرسانی: 08/04/22
با شروع اندروید ۱۳، کاربران میتوانند آیکونهای لانچر تطبیقی خود را با تمهای مختلف شخصیسازی کنند. با این ویژگی، آیکونهای برنامهها در لانچرهای پشتیبانیشده اندروید، رنگی میشوند تا رنگ تصویر زمینه و سایر تمهای انتخابی کاربر را به ارث ببرند.
به راحتی تمام داراییهای سیستمی مورد نیاز برای برنامه اندروید خود، از جمله آیکونهای رنگی تطبیقی جدید را ایجاد کنید.
آنچه یاد خواهید گرفت
- آشنایی با انواع مختلف آیکونهای اپلیکیشن و نکات طراحی برای آنها.
- نحوه استفاده از قالب فیگما برای لانچر اندروید.
- نحوه استفاده از مولد دارایی اندروید استودیو.
- نحوه پیشنمایش آیکون لانچر با شبیهساز اندروید استودیو
پیشنیازها
- آشنایی اولیه با فیگما
- اختیاری: طرح هنری آیکون برنامه (پیشزمینه، پسزمینه و تکرنگ)
آنچه نیاز دارید
- یک حساب فیگما
- یک فایل طراحی فیگما
- اختیاری: یک کامپیوتر شخصی که اندروید استودیو روی آن نصب شده باشد
۲. شروع کنید
راهاندازی
برای شروع، باید به فایل آیکون برنامه اندروید Figma دسترسی پیدا کنید.
ابتدا وارد فیگما شوید یا یک حساب کاربری ایجاد کنید .
کپی از انجمن فیگما
به فایل قالب لانچر اندروید بروید یا در انجمن فیگما عبارت «مهاجرت به فونتهای متغیر» را جستجو کنید. برای کپی کردن فایل در فایلهای خود، روی «دریافت یک کپی» در گوشه بالا سمت راست کلیک کنید.
با استفاده از الگو
الگوی آیکون اندروید از دو صفحه تشکیل شده است:
- صفحه روی جلد به طور خلاصه مفاهیم مرتبط و نحوه استفاده از الگو را پوشش میدهد.
- صفحه قالب شامل هر چیزی است که برای ایجاد داراییهای مورد نیاز نیاز دارید، که به سه فریم (رنگ، شکل، فروشگاه بازی) تقسیم شده است.
نکته: در پنل لایههای سمت چپ، بیشتر لایهها و گروهها قفل هستند؛ این لایهها باید قفل بمانند. (شما میتوانید آثار هنری را در گروههای آثار هنری قفل نشده قرار دهید.)
اما قبل از اینکه به سراغ ایجاد داراییها برویم، بیایید نگاهی به آنچه که قرار است ایجاد کنیم بیندازیم...
۳. آیکونهای سیستم اندروید
آیکونهای لانچر
آیکونهای لانچر یا آیکونهای برنامه، به عنوان بخش اساسی از تجربه راهاندازی برنامه شما عمل میکنند، آیکونهای لانچر به عنوان نقطه ورود به برنامه شما در صفحه اصلی ظاهر میشوند.
شکل تطبیقی
یک آیکون تطبیقی یا AdaptiveIconDrawable میتواند بسته به قابلیتهای دستگاه و قالببندی کاربر، به شکلهای مختلفی نمایش داده شود. آیکونهای تطبیقی در درجه اول توسط لانچر در صفحه اصلی استفاده میشوند، اما میتوانند در میانبرها، برنامه تنظیمات، پنجرههای اشتراکگذاری و صفحه نمای کلی نیز مورد استفاده قرار گیرند.
یک آیکون تطبیقی میتواند اشکال متنوعی را در مدلهای مختلف دستگاه نمایش دهد. به عنوان مثال، میتواند در یک دستگاه OEM شکل دایرهای و در دستگاه دیگر شکل دایرهای را نمایش دهد. هر OEM دستگاه باید یک ماسک ارائه دهد که سیستم از آن برای رندر کردن تمام آیکونهای تطبیقی با شکل یکسان استفاده میکند.
قابلیت تطبیق با شکل همچنین به سیستم اجازه میدهد تا جلوههای انیمیشنی مختلفی را با تعامل کاربر اعمال کند.
رنگ تطبیقی
آیکونهای تطبیقی اکنون میتوانند از رنگهای پویا استفاده کنند تا امکان شخصیسازی آیکونهای برنامه با تمهای مختلف فراهم شود.
اگر کاربری آیکونهای برنامه با تم خاص را فعال کرده باشد (به عبارت دیگر، گزینه آیکونهای با تم خاص را در تنظیمات سیستم فعال کرده باشد) و لانچر از این ویژگی پشتیبانی کند، سیستم از رنگ تصویر زمینه و تم انتخابی کاربر برای تعیین رنگ سایه استفاده میکند.
درست مانند آیکونهایی که با شکل تطبیق پیدا میکنند، آیکونهای رنگی تطبیقپذیر از پیشزمینه و پسزمینه تشکیل شدهاند، فقط یک آیکون پیشزمینه تکرنگ باید ارائه شود، سیستم با استفاده از طرح رنگی استخراجشده، پسزمینه و رنگ را هر دو تنظیم میکند.
همچنین میتوانید از همان آیکون تکرنگ برای آیکون اعلان استفاده کنید.
میراث
آیکونهای قدیمی باید برای پشتیبانی از دستگاههایی که نسخههای قدیمیتر اندروید را اجرا میکنند یا از ویژگیهای تطبیقی (قبل از ۸.۰) پشتیبانی نمیکنند، گنجانده شوند.
آنها منابع پیشزمینه و پسزمینه نخواهند داشت و میتوانند شکلی آزاد داشته باشند. اگر از الگوی ارائه شده استفاده میکنید، اثر هنری شکل تطبیقی نهایی در اندازههای لازم برای آیکون قدیمی شما صادر میشود.
نمادهای اعلان
اعلان پیامی است که اندروید خارج از رابط کاربری برنامه شما نمایش میدهد تا یادآوریها، ارتباط با افراد دیگر یا سایر اطلاعات بهموقع از برنامه شما را در اختیار کاربر قرار دهد. سیستم، اعلانها را در مکانها و قالبهای مختلف، مانند یک نماد در نوار وضعیت، یک ورودی دقیقتر در کشوی اعلانها، به عنوان یک نشان روی نماد برنامه و به طور خودکار روی دستگاههای پوشیدنی جفت شده نشان میدهد.
فروشگاه آثار هنری
شما میتوانید از یک تصویر گرافیکی، اسکرینشات، یک توضیح کوتاه و ویدیو برای برجسته کردن و تبلیغ اپلیکیشن خود در گوگل پلی و سایر کانالهای تبلیغاتی گوگل استفاده کنید.
آیکون برنامه جایگزین آیکون لانچر برنامه شما نمیشود، اما باید نسخهای با وضوح و کیفیت بالاتر باشد.
مشابه آیکون لانچر، طرح گرافیکی میتواند کل فضای فایل را اشغال کند، یا میتوانید عناصر طرح گرافیکی مانند لوگوها را طراحی و روی شبکه خطوط کلیدی قرار دهید.
برای انتشار فهرست فروشگاه خود، باید یک آیکون برنامه مربعی شکل با ابعاد ۵۱۲x۵۱۲ پیکسل ارائه دهید. اگر از الگوی آیکون برنامه اندروید استفاده میکنید، این آیکون هنگام خروجی گرفتن با استفاده از اثر هنری Adaptive Shape ارائه میشود.
۴. بهترین شیوههای طراحی
آیکونهای لانچر، اپلیکیشن شما را برای کاربر اجرا میکنند. به عنوان ورودی اپلیکیشن شما، باید قابل تشخیص و خوانا باشند. در اینجا چند روش برتر برای اطمینان از این ویژگیها در آیکون لانچر شما آورده شده است.
اثر هنری را ساده نگه دارید. از لایههای متعدد، جلوههای زیاد و متن پرهیز کنید. این جزئیات در اندازههای کوچک از بین میروند یا دیدن آنها دشوار است. 
از اشکال پیچیده اجتناب کنید. این شامل لوگوها نیز میشود. در صورت امکان از یک لوگوی ساده استفاده کنید، یا از نمادشناسی استفاده کنید تا کاربران شما با برنامه شما ارتباط برقرار کنند. یک شکل خوانا و متمایز به ایجاد وحدت برای کاربران کمک میکند تا به راحتی برنامه شما را از زمینههای مختلف تشخیص دهند (رنگ و اعلان تطبیقی). 
از یک شبکه استفاده کنید. از یک شبکه یا خطوط کلیدی استفاده کنید تا مطمئن شوید که اثر هنری پیشزمینه هنگام برش، از جمله آثار هنری تصویرسازی با حاشیه کامل، به خوبی کار میکند. 
کنتراست را در نظر بگیرید . برای آیکونهای با شکل تطبیقی و قدیمی، مطمئن شوید که پیشزمینه و پسزمینه آیکون کنتراست خوانایی دارند. از استفاده از سایههای پررنگ که میتوانند با سایه سیستم اشتباه گرفته شوند، خودداری کنید. 
آثار هنری را در مناطق امن نگه دارید. عناصر پیشزمینه را در ابعاد ۷۲x۷۲ پیکسل نگه دارید (مگر اینکه حاشیه را کاملاً پر کنید). پسزمینهها را در ابعاد ۱۰۸x۱۰۸ پیکسل نگه دارید. توجه: قاب اثر هنری قالب آیکون بزرگتر از ۷۲x۷۲ پیکسل است تا به شما امکان دهد آثار هنری آیکون بسازید. اندازه عناصر برای مطابقت با مشخصات تغییر خواهد کرد. 
فرمت برداری. سعی کنید از آثار هنری با فرمت برداری (مانند فایلهای SVG، AI، PDF و EPS) به جای فرمتهای رستر (مانند فایلهای PNG، JPG و GIF) استفاده کنید. این کار تضمین میکند که اثر هنری شما با ویژگیهای جدیدتر سازگار است و ویرایش آن آسانتر است. 
۵. رنگ تطبیقی و آیکونهای اعلان
حالا نوبت شماست که آیکونهای سیستم اندروید خودتان را بسازید.
- فایل آیکونهای برنامههای اندروید فیگما را پیدا کنید.
- در داخل فایل، قاب رنگ تطبیقی را پیدا کنید. در پنل لایههای سمت چپ، به دنبال Adaptive color > Components > art > Icon artwork area > Themed Icon art < add your icon بگردید . اگر یک آیکون تک رنگ آماده دارید، آن را اینجا کپی کنید تا جایگزین آیکون نمونه bugdroid شود و به مرحله ۶ بروید.
- اگر آیکون تک رنگ ندارید، با یک لوگو یا آیکون مرتبط با اپلیکیشن خود شروع کنید. برای بهروزرسانی آیکون خود، نکات طراحی را مرور کنید. ابتدا سادهسازی و اجتناب از اشکال پیچیده. به عنوان مثال، در اینجا تصاویر استفاده شده در اپلیکیشن با اشکال برگ سادهتر ساده شدهاند. سایهها و جزئیات خطوط با فضای سفید شبیهسازی شدهاند.
- حالا، اندازه را با استفاده از شبکه خطوط کلیدی بهروزرسانی کنید. در اینجا ما resize را روی Scale تنظیم کردهایم و مطمئن شدهایم که اثر هنری در منطقه امن پیشزمینه قرار دارد. قالب با اثر هنری با بزرگنمایی ۴x تنظیم شده است و به طور خودکار برای خروجی تغییر اندازه میدهد، بنابراین میتوانید آیکونهای خود را در مقیاس بزرگتری طراحی کنید.
- این فایل طوری تنظیم شده است که با سازنده تم متریال (Material Theme Builder) کار کند تا به پیشنمایش رنگ پویا کمک کند. سبک رنگ آیکون پیشزمینه را به On-surface-variant متصل کنید.
- اکنون، با باز کردن سازنده تم متریال از پنل افزونهها، میتوانید رنگ منبع را تغییر دهید یا تصویری اضافه کنید تا رنگها با استفاده از رنگ منبع استخراجشده بهروزرسانی شوند.
- این تصویر در وضوحهای مختلف یا در صفحه اصلی چگونه به نظر خواهد رسید؟ این الگو به گونهای تنظیم شده است که اثر هنری قرار داده شده در قابهای اثر هنری در زمینههای پیشنمایش مختلف ظاهر شود.
- سیستم از آیکون تکرنگ به عنوان اعلان استفاده میکند و در پیشنمایشها نیز به همین شکل نمایش داده میشود.
۶. شکل تطبیقی و آیکونهای قدیمی
حالا، شکل تطبیقی و آیکونهای قدیمی را ایجاد خواهیم کرد تا پشتیبانی گسترده از آیکون تضمین شود.
- در داخل فایل، قاب شکل (Shape frame) را پیدا کنید. در پنل لایههای سمت چپ، Icon background را پیدا کنید < آیکون خود را اضافه کنید *. اگر آیکونی آماده دارید، آن را اینجا کپی کنید تا جایگزین آیکون نمونه bugdroid شود و به مرحله ۵ بروید.* اگر آیکونی ندارید، با یک لوگو یا آیکون مربوط به برنامه خود شروع کنید یا از آیکون تک رنگ دوباره استفاده کنید.
- آیکون پیشزمینه را بهروزرسانی کنید، و بهترین شیوههای طراحی آیکون را در نظر داشته باشید. در اینجا رنگهای اصلی تصویر را برگرداندهام، اما جزئیات را حداقل نگه داشتهام.
- حالا، اندازه را با استفاده از شبکه خطوط کلیدی بهروزرسانی کنید. در اینجا ما تغییر اندازه را روی مقیاس تنظیم کردهایم و مطمئن شدهایم که اثر هنری در منطقه امن پیشزمینه قرار دارد.
- آیکونهای اپلیکیشن با شکل تطبیقی میتوانند پسزمینهی متمایزی نیز داشته باشند. این امر امکان برش ایمن لایههای آیکون و ایجاد جلوههای حرکتی ظریف در تعامل را فراهم میکند. همچنین میتوانید در اندروید استودیو از یک پسزمینهی تکرنگ استفاده و آن را تعریف کنید.
- پیشنمایشها بهروزرسانی میشوند تا نشان دهند که پیشزمینه و پسزمینهها در کنار هم، در صفحه اصلی، اشکال برشخورده مختلف و به عنوان یک آیکون قدیمی چگونه به نظر میرسند.
شکلی که برای برش استفاده میشود را میتوان در پیشنمایش صفحه اصلی با انتخاب آیکونها و تغییر گزینه نوع شکل، بهروزرسانی کرد. 
۷. صادرات
عالی شد، حالا قالب را با آیکونهای برنامهتان بهروزرسانی کردهاید! بیایید آنها را برای پیادهسازی اکسپورت کنیم.
- مطمئن شوید که هیچ چیزی روی بوم انتخاب نشده باشد.
- به منوی فیگما > فایل > خروجی ( Shift + Cmd + E ) بروید.
- در منوی خروجی، خروجی را تأیید کنید. این کار فایلهای قالب را دانلود میکند.
چه چیزهایی در صادرات وجود دارد؟
فایلهای اکسپورت شده، تمام فایلهای لازم برای پیادهسازی آیکون برنامه شما را دارند، به شرح زیر:
- فیگما آیکون پیشزمینه تکرنگ را برای رنگ تطبیقی به عنوان یک فایل SVG، به همراه پیشزمینه و پسزمینه برای آیکونهای شکل تطبیقی، صادر میکند.
- فیگما همچنین آیکونهای قدیمی را در دایرکتوریهای مختلف mipmap که بر اساس وضوح سازماندهی شدهاند، ارائه میدهد.
تمام! آیکون شما آمادهی ارسال به بخش توسعه است.
از طرف دیگر، اگر میخواهید پیشنمایشی از آیکونهای خود را در اندروید استودیو مشاهده کنید و آن SVGها را به فرمت نهایی خود تبدیل کنید، به مرحله بعدی بروید.
۸. از Image Asset Studio استفاده کنید
شروع کار با اندروید استودیو
- دانلود و نصب اندروید استودیو ...
- اندروید استودیو را اجرا کنید.
اندروید استودیو گزینههایی را برای شروع یک پروژه جدید یا انتخاب پروژههای موجود به شما پیشنهاد میدهد.
- فعلاً یک پروژه جدید انتخاب کنید. صفحات زیر شما را در راهاندازی پروژه جدیدتان راهنمایی میکنند.
- از بین قالبهای اولیه، هر قالبی را انتخاب کنید، زیرا ما فقط به آیکونهای راهاندازی نگاه خواهیم کرد.
- پس از آن، برای پروژه جدید خود نامی انتخاب کرده و گزینه Finish را انتخاب کنید. ایجاد پروژه جدید چند لحظه طول خواهد کشید.
از Image Asset Studio استفاده کنید
حالا میتوانیم با استفاده از ابزار مفید Asset Studio، آیکونهای شما را به پروژه اضافه کنیم.
- برای دسترسی به این ابزار، از منوی File > New > Image Asset را انتخاب کنید.
- وقتی Image Asset Studio باز شد، با انتخاب آیکون پوشه در Path ، لایه پیشزمینه را اضافه کنید. فایل SVG خروجی را با نام drawable-anydpi/ic_launcher.svg انتخاب کنید.
- تب لایه پسزمینه (Background Layer) را انتخاب کنید و به همین ترتیب لایه پسزمینهای که خروجی گرفته شده است را انتخاب کنید. روش دیگر این است که نوع دارایی (Asset Type): رنگ (Color) را انتخاب کنید تا پسزمینه لانچر شما رنگی یکدست داشته باشد.
- به لایه پیشزمینه برگردید و دوباره بررسی کنید که تصویر در منطقه امن قرار دارد. اندازه آیکون را به شکلی که از نظر بصری بهترین نتیجه را میدهد، تغییر دهید.
- وقتی کارتان تمام شد، روی «بعدی» کلیک کنید. این از شما میپرسد که آیکونها باید در کجای پروژه شما قرار بگیرند (این را به صورت پیشفرض بگذارید یا به «اصلی» تغییر دهید). سپس روی «پایان» کلیک کنید. میتوانید فایلهای لانچر خود را در مسیر res > drawable پیدا کنید. با دوبار کلیک کردن، پیشنمایشی از فایلهای vector 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 موجود را اضافه یا تغییر دهید تا به فایل تک رنگ صحیح اشاره کند.
۹. پیشنمایش و منابع
پیشنمایش در شبیهساز
ما این کار را انجام دادهایم تا آنها را به پروژه برنامه اضافه کنیم و به ما امکان پیشنمایش روی یک دستگاه واقعی یا شبیهساز را بدهد! بیایید ببینیم آیکونهای ما در واقعیت چگونه به نظر میرسند.
شما باید به طور پیشفرض یک شبیهساز نصب کرده باشید، اما اگر اینطور نیست، یک دستگاه مجازی اندروید ایجاد کنید . روی دکمه سبز پخش کلیک کنید. با این کار پروژه ساخته شده و شبیهساز باز میشود.
داراییهای نهایی
عالی، شما توانستید با استفاده از شبیهساز، ببینید آیکون لانچر شما روی یک دستگاه چگونه به نظر میرسد و آنها را به یک پروژه برنامه اضافه کنید. انجام این کار، آنها را به شکل نهایی خود تبدیل کرده است! اما آنها کجا هستند؟
داراییها به عنوان منابع در یک برنامه اندروید وجود دارند و میتوان آنها را با باز کردن پنل منابع (معمولاً در سمت چپ) پیدا کرد. در برنامه عمیق شوید، سپس پوشه Res خود را پیدا کنید. برای باز کردن منو کلیک راست کنید و گزینه Open in Finder (در مک) را انتخاب کنید، این کار یک پنجره Finder را باز میکند. در صورت تمایل، میتوانید با تبدیل و آزمایش بقیه داراییهای برنامه خود با استفاده از یک فرآیند مشابه، در زمان توسعه و تضمین کیفیت صرفهجویی کنید. اگر بقیه داراییهای برنامه خود را تبدیل کردهاید، میتوانید این پوشه را با توسعه به اشتراک بگذارید.
۱۰. تبریک
عالی بود، شما در مورد آیکونهای سیستم اندروید مورد نیاز برای ساخت یک برنامه اندروید، طراحی آیکونهای خودتان، بررسی منبع قالب آیکون و احتمالاً فراتر رفتن از آن با استفاده از اندروید استودیو برای پیشنمایش و تبدیل داراییها برای تولید، اطلاعات کسب کردهاید!
اگر سوالی دارید، میتوانید هر زمان که خواستید با استفاده از @MaterialDesign در توییتر از ما بپرسید.
برای مطالب و آموزشهای بیشتر در زمینه طراحی، در youtube.com/MaterialDesign با ما همراه باشید.