یک راهنمای عملی برای نمادهای برنامه Android: نمادهای تطبیقی توضیح داده شده (و نحوه ایجاد صحیح نمادهای شما)
برای اولین بار توسعه دهندگان Android این یک شگفتی رایج است: شما یک PNG مربعی را برای نماد برنامه خود صیقل می دهید، آن را با ابعاد 512x512 مرتب صادر می کنید و در ویرایشگر تصویر شما عالی به نظر می رسد. سپس یک بیلد اشکال زدایی را روی گوشی سامسونگ نصب می کنید و نماد به طور ناگهانی برش خورده و کمی خارج از مرکز به نظر می رسد، گویی بخشی از لوگو بریده شده است. هیچ مشکلی با خود فایل نیست. مشکل اینجاست که یک تصویر مربعی منفرد هرگز نمی‌توانست از تماس با دنیای واقعی لانچرهای Androidی که هرکدام آیکون‌ها را برش می‌دهند، ماسک می‌کنند و شکل‌های متفاوتی می‌دهند، زنده بماند. اگر هنوز با این مشکل مواجه نشده‌اید، فقط یک مسئله زمان است که باید انجام دهید، بنابراین بیایید آنچه را که در زیر کاپوت اتفاق میافتد و نحوه درست کردن آن در اولین بار بررسی کنیم.
چرا یک PNG مربع تک دیگر کافی نیست؟
در سال‌های اولیه Android، نمادهای برنامه دقیقاً همان چیزی بودند که به نظر می‌رسیدند: یک PNG مربعی (یا گاهی اوقات به شکل آزاد) که هر لانچر آن را همانطور که هست نشان می‌داد. این به خوبی کار می کرد تا زمانی که سازندگان شروع به تمایز بین گوشی های خود از نظر بصری کردند و یکی از آسان ترین مکان ها برای انجام این کار صفحه اصلی بود. سامسونگ مربع‌های گرد می‌خواست، برخی از پوسته‌های OEM چینی به دنبال روش‌های مختلف گوشه‌ای بودند، و Android سهام در نهایت روی دایره‌ها قرار گرفت. ناگهان، دقیقاً همان فایل آیکون به طور قابل توجهی متفاوت و گاهی بدتر به نظر می رسید، بسته به اینکه روی گوشی چه کسی قرار گرفته است.
پاسخ گوگل که با Android 8.0 اوریو معرفی شد، سیستم آیکون تطبیقی بود. به جای ارائه یک شکل ثابت، توسعه‌دهندگان آثار هنری لایه‌ای ارائه می‌کنند که خود سیستم عامل به هر شکلی که یک پرتابگر خاص ترجیح می‌دهد، ماسک میکند. هویت بصری ثابت می ماند. فقط شبح بیرونی تغییر می کند.
آیکون تطبیقی دقیقاً چیست؟
یک نماد تطبیقی از دو لایه مجزا ساخته شده است که هر کدام یک بوم 108dp در 108dp را اشغال می‌کنند: یک لایه پس‌زمینه و یک لایه پیش‌زمینه. Android این دو را با هم ترکیب میکند و سپس هر شکل ماسکی را که لانچر فعلی استفاده میکند، اعمال میکند، خواه یک دایره، یک مربع گرد، یک قطره اشک یا چیز دیگری باشد. ساختار دو لایه آن چیزی است که به Android اجازه می دهد تا جلوه های منظر ظریف و حرکتی را نیز اضافه کند، زیرا با ضربه زدن یا کشیدن یک نماد، لایه ها می توانند به طور مستقل تغییر کنند.
در منابع یک برنامه، این معمولاً از طریق یک فایل XML مانند mipmap-anydpi-v26/ic_launcher.xml تعریف می‌شود که بهجای اینکه حاوی داده‌های پیکسلی باشد، به سادگی به نقشه‌های پس‌زمینه و پیش‌زمینه اشاره میکند. یک ic_launcher.png مسطح سنتی هنوز به عنوان جایگزینی برای دستگاههای دارای Android 7.1 یا نسخههای قدیمیتر که کاملاً از سیستم آیکون تطبیقی قبل از آن استفاده می‌کنند، نگهداری می‌شود.
چرا منطقه امن مهم است
در اینجا قسمتی است که مردم را بیشتر به هیجان می آورد. حتی اگر بوم برای هر لایه 108dp در 108dp است، تنها دایره داخلی 66dp در 66dp، که در مرکز آن بوم قرار دارد، بدون توجه به اینکه کدام شکل ماسک اعمال می‌شود، تضمین می‌شود که قابل مشاهده باشد. این منطقه داخلی معمولاً منطقه امن نامیده می شود. هر چیزی خارج از آن ممکن است روی یک ماسک دایره ای نشان داده شود و سپس به طور ناگهانی روی یک ماسک سنجاب یا قطره اشک تهاجمی تر قیچی شود، یا برعکس.
این دقیقاً همان مشکلی است که وقتی یک لوگو به لبه‌های بوم کشیده می‌شود تا اندازه بصری آن به حداکثر برسد، خود را نشان می‌دهد: می‌تواند در یک ماسک دایره‌ای عالی به نظر برسد، اما روی ماسک سنجاق سامسونگ به‌طور ناموزون بریده می‌شود. این اصلاح یک طراحی مجدد نیست، فقط آثار هنری را اندکی کوچک میکند تا محتوای معنی‌دار در داخل منطقه امن باقی بماند بدون توجه به اینکه در نهایت چه شکلی اعمال می‌شود.
اشکال پرتابی که با آنها روبرو خواهید شد
| شکل | جایی که شما آن را خواهید دید |
|---|---|
| دایره | Android Stock، Pixel launcher (پیش‌فرض قدیمی) |
| سنجاب (مربع گرد) | Samsung One UI و چندین پوسته Android دیگر |
| مربع گرد (سوپرلپس) | iOS، به طور خودکار توسط سیستم بدون کنترل توسعه دهنده اعمال می شود |
| قطره اشک | به عنوان یک گزینه قابل انتخاب در برخی از نسخه های نرم افزار سامسونگ ارائه می شود |
| مربع با گوشه های نرم | پوسته های لانچر دیگر سازنده دیگر |
نکته کاربردی این است که شما نمی توانید انتخاب کنید که نماد شما در نهایت کدام یک از این اشکال را بپوشد. کاربران موجود در لانچرهای Androidی استوک اغلب حتی می توانند شکل دلخواه خود را از منوی تنظیمات انتخاب کنند. تنها اهرم واقعی شما این است که مطمئن شوید خود اثر هنری به زیبایی از همه آنها جان سالم به در می‌برد، که دقیقاً همان چیزی است که منطقه امن برای تضمین آن وجود دارد.
ساخت دارایی ها: اندازه ها و تراکم های مورد نیاز
| سطل تراکم | اندازه نماد راه‌انداز |
|---|---|
| mdpi | 48 × 48 پیکسل |
| hdpi | 72 × 72 پیکسل |
| xhdpi | 96 × 96 پیکسل |
| xxhdpi | 144 x 144 پیکسل |
| xxxhdpi | 192 x 192 پیکسل |
| نماد فهرست فروشگاه Play | 512 x 512 پیکسل |
اگر برنامه را روی iOS نیز ارسال میکنید، مجموعه دیگری را به‌طور کامل اضافه کنید، زیرا الزامات نماد فروشگاه App اپل به 1024x1024 می‌رسد و از فرمت کاملاً متفاوت و غیر لایه‌ای و بدون شفافیت استفاده میکند.
روش دستی در مقابل استفاده از یک ژنراتور
شما می‌توانید هر یک از این اندازه‌ها را کاملاً با دست در یک ویرایشگر تصویر یا از طریق استودیو دارایی تصویر داخلی Android Studio تولید کنید، که مقیاس تراکم و پیش‌نمایش‌های ماسک را به خوبی برای یک پروژه انجام می‌دهد. زمانی که این کار خسته کننده می شود زمانی است که شما در حال حفظ یک سیستم طراحی در چندین برنامه هستید، نیاز به صادرات مشابه iOS از همان اثر هنری اصلی دارید، یا به سادگی می خواهید یک راه سریع برای بررسی مجدد نحوه رفتار یک طرح در هر شکل قبل از انجام آن داشته باشید.
هر اندازه را از یک تصویر اصلی تولید کنید
مولد آیکون برنامه ما یک تصویر منبع با وضوح بالا می‌گیرد و مجموعه کامل سطل‌های چگالی Android، ساختار پیش‌زمینه/پس‌زمینه آیکون تطبیقی و اندازه فهرست فروشگاه Play را از یک آپلود تولید میکند، بنابراین نمی‌توانید ده‌ها فایل را به‌صورت دستی صادر و تغییر نام دهید.
استخراج نمادها از یک APK موجود
گاهی اوقات نیاز در جهت مخالف است. شاید شما پروژه‌ای را بدون فایل‌های طراحی اصلی آن به ارث برده‌اید، یا می‌خواهید دقیقاً ببینید که چگونه یک رقیب نماد خود را قبل از طراحی آیکون خود ساخته است، یا به سادگی نیاز دارید یک نماد را از یک APK ساخته‌شده بیرون بکشید تا از آن در یک ابزار مرتبط یا دارایی بازاریابی استفاده کنید. از آنجایی که یک APK عملاً یک بایگانی ساختاریافته حاوی تمام منابع یک برنامه است، فایل‌های نماد راه‌انداز آن به صورت فیزیکی در داخل آن وجود دارند و می‌توانند مستقیماً استخراج شوند، نه اینکه از ابتدا بازسازی شوند.
استخراج آیکون ما دقیقاً این فایل‌ها را از هر APKی که آپلود میکنید بیرون می‌آورد و دارایی‌های نماد خام را با هر وضوحی که توسعه‌دهنده اصلی ارسال کرده است، به شما می‌دهد، که اغلب سریع‌ترین راه برای بازیابی فایل منبع گمشده یا مطالعه نحوه برخورد یک برنامه دیگر با مشکل طراحی مشابه است.
اشتباهات رایج آیکون که در بررسی علامت گذاری می شوند
- پخت در بالشتک اضافی یا UI کروم. یک افکت سایه، حاشیه یا گوشه گرد که به صورت دستی در داخل تصویر اضافه می شود، با پوشش خود سیستم در تضاد است و اغلب دو برابر شده یا ناهمتراز به نظر می رسد.
- استفاده از پس زمینه سفید خالص بدون لبه مشخص. در لانچرهایی با تم سبک، نماد می تواند در پس زمینه صفحه اصلی تقریباً نامرئی شود.
- جزئیات بیش از حد ظریف متن و خطوط پیچیده که با وضوح 512 پیکسل به نظر می رسند، اغلب به یک لکه ناخوانا تبدیل می شوند که به 48 پیکسل کاهش یابد، که این همان چیزی است که اکثر کاربران آن را روزانه می بینند.
- بررسی‌کنندگان و کاربران عدم تطابق بین نماد فهرست فروشگاه Play و نمادی که نصب می‌شود. هر دو متوجه عدم تطابق این دو می‌شوند، و به‌عنوان شلخته یا بدتر از آن مشکوک به نظر می‌رسد.
- فراموش کردن نسخه قدیمی به طور کامل. اگر برنامه شما همچنان از نسخههای Android قبل از نسخه 8.0 پشتیبانی میکند، نادیده گرفتن نسخه قابل قبول PNG می‌تواند باعث شود آن کاربران با یک نماد شکسته یا ظاهری عمومی مواجه شوند.
آیکون خود را در اشکال قبل از ارسال آزمایش کنید
قبل از نهایی کردن یک نماد، ارزش آن را دارد که حداقل در زیر یک ماسک دایره‌ای و یک ماسک سنجاب در کنار هم پیش‌نمایش کنید، بهجای اینکه فرض کنید به‌طور تمیز ترجمه می‌شود. استودیوی دارایی تصویر Android استودیو دقیقاً به همین دلیل شامل یک پیش‌نمایش زنده از چندین شکل راه‌انداز است، و فقط یک دقیقه طول می‌کشد تا مشکلی که در غیر این صورت فقط پس از انتشار ظاهر می‌شود، زمانی که کاربری در شکل راه‌انداز «اشتباه» گزارش می‌دهد که چیزی به نظر می‌رسد، پیدا شود.
خوراکی های کلیدی
- آیکون‌های تطبیقی از دو لایه، پس‌زمینه و پیش‌زمینه، روی یک بوم 108dp استفاده می‌کنند که سیستم آنها را به اشکال مختلف در هر راه‌انداز پنهان میکند.
- فقط منطقه امن داخلی 66dp تضمین شده است که در هر شکل ماسک قابل مشاهده است. آثار هنری معنادار را درون آن نگه دارید.
- همچنان برای دستگاههای Android 7.1 یا نسخههای قدیمیتر به نماد مسطح قدیمی نیاز دارید.
- یک ژنراتور می‌تواند هر چگالی مورد نیاز و اندازه فهرست فروشگاه Play را از یک تصویر اصلی تولید کند و در کار صادرات دستی قابل توجهی صرفه‌جویی کند.
- هنگامی که فایل‌های منبع گم می‌شوند یا نیاز به مطالعه دارایی‌های یک برنامه دیگر دارید، می‌توان نمادها را مستقیماً از یک APK موجود استخراج کرد.
سوالات متداول (FAQ)
اندازه پیکسل واقعی مورد نیاز برای نماد فهرست فروشگاه Play چقدر است؟
512x512 پیکسل، یک PNG 32 بیتی با کانال آلفا. این جدا از اندازه نماد راه‌اندازی است که در داخل خود APK قرار داده شده است.
آیا لایه پس‌زمینه نماد تطبیقی من باید یک رنگ ثابت باشد؟
لزوماً یک رنگ مسطح نیست، اما عموماً باید مات و ساده باشد، زیرا می‌توان آن را تغییر داد، مقیاس یا ماسک کرد به روشی که شما کاملاً کنترل نمی‌کنید. پس‌زمینه‌های شلوغ یا شفاف در میان لانچرها ناسازگار به نظر می‌رسند.
آیا می توانم از طرح آیکون تطبیقی Android خود به طور مستقیم برای iOS استفاده مجدد کنم؟
نه مستقیم. iOS بهجای لایههای مجزا، از یک تصویر مربع مسطح منفرد با گرد کردن گوشههای اعمال شده توسط سیستم استفاده میکند، بنابراین شما معمولاً یک نسخه مسطح سادهشده از همان اثر هنری را برای iOS صادر میکنید.
چرا نماد من در تلفن من خوب به نظر می رسد اما در لیست فروشگاه Play تار می شود؟
این معمولاً زمانی اتفاق میافتد که نماد فهرست از یک تصویر منبع کوچک بزرگتر شود. همیشه از یک فایل اصلی با حداقل 1024x1024 پیکسل شروع کنید و هر اندازه مورد نیاز را از آن خارج کنید.
اگر از آیکون قدیمی نسخههای قدیمیتر Android صرفنظر کنم، چه اتفاقی میافتد؟
دستگاههای Android 7.1 یا نسخههای قدیمیتر که از نمادهای تطبیقی پشتیبانی نمیکنند، ممکن است به نماد سیستم عمومی برگردند یا نماد شما را به درستی نمایش دهند. فقط در صورتی که حداقل نسخه Android پشتیبانی شده برنامه شما 8.0 یا بالاتر باشد، از این کار رد شوید.
برای هیچ‌کدام از این‌ها به پیش‌زمینه‌ی تئوری طراحی نیاز ندارید، فقط باید بدانید که نماد شما در لحظه‌ای که از دستتان خارج می‌شود، به روش‌هایی تغییر شکل می‌دهد که کنترل آن را ندارید. برای منطقه امن طراحی کنید، یک نسخه قدیمی قدیمی را در اطراف خود نگه دارید، هر اندازه مورد نیاز را از یک فایل اصلی تمیز تولید کنید، و نماد شما بدون توجه به اینکه در کدام لانچر قرار می گیرد، باقی می ماند.