نمادهای برنامه ای که با پلتفرم ها سازگار می شوند.
آیکون های ماسک پذیر چیست؟
اگر یک برنامه وب پیشرفته را روی یک تلفن اندرویدی اخیر نصب کرده اید، ممکن است متوجه شوید که نماد با پس زمینه سفید ظاهر می شود. اندروید اوریو آیکون‌های تطبیقی را معرفی کرد که آیکون‌های برنامه‌ها را به اشکال مختلف در مدل‌های مختلف دستگاه نمایش می‌دهند. به نمادهایی که از این قالب جدید پیروی نمی کنند پس زمینه سفید داده می شود.
آیکون‌های ماسک‌پذیر یک قالب نماد جدید هستند که به شما کنترل بیشتری می‌دهند و به برنامه وب پیشرو شما اجازه می‌دهند از نمادهای تطبیقی استفاده کند. اگر یک نماد قابل ماسک ارائه کنید، نماد شما می‌تواند کل شکل را پر کند و در همه دستگاه‌های اندرویدی عالی به نظر برسد. فایرفاکس و کروم اخیراً از این فرمت جدید پشتیبانی کرده اند و می توانید آن را در برنامه های خود بکار ببرید.
آیا نمادهای فعلی من آماده هستند؟
از آنجایی که آیکون‌های ماسک‌پذیر باید از اشکال مختلفی پشتیبانی کنند، شما یک تصویر مات را با مقداری بالشتک ارائه می‌کنید که مرورگر می‌تواند به شکل و اندازه مورد نیاز برش دهد. بهتر است به شکل خاصی تکیه نکنید، زیرا شکل نهایی بسته به مرورگر و پلتفرم متفاوت است.
خوشبختانه، یک "حداقل منطقه امن" به خوبی تعریف شده و استاندارد شده وجود دارد که همه پلتفرم ها به آن احترام می گذارند. قسمت های مهم آیکون شما، مانند لوگو، باید در یک ناحیه دایره ای در مرکز نماد با شعاع برابر با 40٪ از عرض آیکون باشد. لبه بیرونی 10% ممکن است بریده شده باشد.
می‌توانید با Chrome DevTools بررسی کنید کدام بخش از نمادهایتان در منطقه امن قرار می‌گیرند. با باز بودن برنامه وب پیشرو، DevTools را اجرا کنید و به پنل برنامه بروید. در بخش نمادها ، می‌توانید انتخاب کنید که فقط حداقل منطقه امن برای نمادهای قابل ماسک نمایش داده شود . نمادهای شما بریده می شوند تا فقط قسمت امن قابل مشاهده باشد. اگر لوگوی شما در این منطقه امن قابل مشاهده است، خوب هستید.
برای آزمایش نماد ماسک پذیر خود با انواع اشکال اندروید، از ابزار Maskable.app Tiger که ایجاد شده است استفاده کنید. یک نماد را باز کنید، سپس Maskable.app به شما امکان می‌دهد شکل‌ها و اندازه‌های مختلف را امتحان کنید و می‌توانید پیش‌نمایش را با دیگران در تیم خود به اشتراک بگذارید.
چگونه از آیکون های قابل ماسک استفاده کنم؟
اگر می‌خواهید بر اساس نماد موجود، یک نماد ماسک‌پذیر ایجاد کنید، می‌توانید از ویرایشگر Maskable.app استفاده کنید. نماد خود را آپلود کنید، رنگ و اندازه را تنظیم کنید، سپس تصویر را صادر کنید.
هنگامی که یک نماد قابل ماسک ایجاد کردید و آن را در DevTools آزمایش کردید، باید مانیفست برنامه وب خود را به‌روزرسانی کنید تا به دارایی جدید اشاره کند. مانیفست برنامه وب اطلاعاتی را درباره برنامه وب شما در یک فایل JSON ارائه می‌کند و شامل یک آرایه icons می‌شود.
برای گنجاندن نمادهای قابل ماسک، فیلد purpose به مرورگر می گوید که چگونه باید از نماد شما استفاده شود. به‌طور پیش‌فرض، نمادها دارای هدف "any" خواهند بود. اندازه این آیکون ها در بالای پس زمینه سفید در اندروید تغییر می کند.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
نمادهای ماسک پذیر باید از مقدار متفاوتی برای purpose استفاده کنند: "maskable" . این نشان می‌دهد که قرار است یک تصویر با ماسک‌های آیکون استفاده شود و به شما کنترل بیشتری روی نتیجه بدهد. به این ترتیب آیکون های شما پس زمینه سفید نخواهند داشت. همچنین اگر می‌خواهید نماد قابل ماسک‌پذیر شما بدون ماسک در دستگاه‌های دیگر استفاده شود، می‌توانید چندین هدف از هم جدا شده با فضا (به عنوان مثال، "any maskable" ) مشخص کنید.
با این کار، می توانید جلو بروید و نمادهای ماسک پذیر خود را ایجاد کنید، و مطمئن شوید که برنامه شما لبه به لبه عالی به نظر می رسد (و برای آنچه ارزش دارد، دایره به دایره، بیضی به بیضی 😄).
سپاسگزاریها
این مقاله توسط جو مدلی بررسی شده است.