نسخه ۸.۰ سیستم عامل اندروید با نام اوریو (API 26) ویژگی جدیدی به نام Adaptive Icons برای نمایش آیکون اپلیکیشن‌ها معرفی کرد. آیکون‌های تطبیق‌پذیر برای ایجاد انسجام و یک‌پارچگی بین آیکون اپلیکیشن‌های مختلف در رابط کاربری موبایل کاربر ایجاد شدند. از اونجایی که بین اپلیکیشن‌های ایرانی تعداد کمی رو دیدم که از این ویژگی استفاده کردن، تصمیم گرفتم مطلب کوتاهی در مورد روش طراحی این آیکون‌ها بنویسم تا مورد استفاده بقیه قرار بگیره.
برای اینکه درک بهتری از آیکون‌های تطبیق‌پذیر داشته باشید تصویر زیر رو نگاه کنید. ورودی که یک آیکون مربع شکل هست، با لایه‌ای از از یک شیپ که نسبت به هر لانچر و موبایلی ممکنه متفاوت باشه ( دایره، مربع تیز، مربع دورگرد و... ) ماسک می‌شه و خروجی‌ای که نمایش داده می‌شه آیکون‌هایی کاملا یک‌دست و هماهنگ با سایر آیکون‌های لانچر هست.
آیکون‌های تطبیق‌پذیر در ابعاد 108dp x 108dp باید طراحی شوند، اما هنگام ماسک شدن نهایتا 72dp از آیکون طراحی شده قابل مشاهده هست. به عبارتی مابقی فضا توسط شیپی که بالاتر اشاره شد ماسک می‌شه.
برای اینکه مطمئن باشید آیکون شما بدون هیچ ایرادی در لانچر‌های مختلف نمایش داده می‌شه، می‌تونید در یک فضای دایره‌ای به قطر 66dp در مرکز فایلتون استفاده کنید. در این حالت تضمین می‌شه که آیکون شما همه جا به درست‌ترین حالت خودش نمایش داده بشه.
آیکون‌های تطبیق‌پذیر از ۲ لایه‌ی پس‌زمینه و پیش‌زمینه با ابعاد یکسان 108dp x 108 dp تشکیل شدن. لایه‌ی پس‌زمینه که بکگراند اصلی آیکون شماست باید کاملا پر و بدون شفافیت (Transparency) باشه. لایه‌ی پیش‌زمینه یا لایه‌ی رویی که شامل محتوای اصلی (لوگو، طرح و...) آیکون شماست می‌تونه شفافیت داشته باشه. این دو لایه روی هم قرار خواهند گرفت.
استفاده از دو لایه‌ی جداگونه که ابعادی بزرگ‌تر از ابعاد نمایشی نهایی دارند این قابلیت رو فراهم می‌کند که در شرایط مختلف هنگام تعامل کاربر با آیکون، بشه از انیمیشن‌ها و افکت‌های جذاب استفاده کرد. اینکه از چه افکتی در نهایت استفاده می‌شه نسبت به دیوایس و لانچر متفاوته. برای مثال ممکنه از افکت پارالکس برای جابجایی بین صفحات و یا افکت پالس هنگام لمس طولانی استفاده شده باشه. 18dp از ابعاد کل (108dp) برای ایجاد انیمیشن توسط لانچر استفاده می‌شه. (متاسفانه به دلیل وجود مشکلات نامعلوم در ویرگول، در آپلود GIF این پست ناکام موندم)
به طور کلی طراحی این نوع آیکون پیچیدگی خاصی نداره. قواعد کلی طراحی بر مبنای متریال دیزاین هست و تنها تفاوتی که این نوع آیکون داره در نوع خروجی گرفتن و ابعادشه. برای راحتی کار یک سری تمپلیت آماده وجود داره که می‌تونید استفاده کنید.
همچنین بعد از طراحی می‌تونید از ابزار Adapticon استفاده کنید تا خروجی آیکونتون رو در ماسک‌های مختلف ببینید. فقط کافیه لایه‌ی پس‌زمینه و لایه‌ی رویی رو آپلود کنید تا خروجی رو نمایش بده. پیاده‌سازی نهایی هم بسپرید به توسعه‌دهنده عزیز ??♂️.
پ.ن: برای استفاده از این آیکون‌ها به عنوان آیکون‌های پیش‌فرض، در صورتی که لانچر موبایلتون پشتیبانی نمی‌کنه، می‌تونید از Nova Launcher استفاده کنید. این لانچر هم امکان استفاده از انیمیشن و هم استفاده از ماسک‌های مختلف رو براتون فراهم می‌کنه.
