دليل عملي لأيقونات تطبيقات Android: شرح الأيقونات التكيفية (وكيفية إنشاء أيقوناتك بشكل صحيح)
إنها مفاجأة شائعة لمطوري Android لأول مرة: يمكنك تلميع شكل PNG مربع واحد لأيقونة التطبيق الخاص بك، وتصديره بحجم 512x512 مرتب، ويبدو مثاليًا في محرر الصور الخاص بك. بعد ذلك، تقوم بتثبيت إصدار تصحيح الأخطاء على هاتف Samsung وتبدو الأيقونة فجأة مقصوصة وبعيدة قليلاً عن المركز، كما لو تم قطع جزء من الشعار. لا يوجد شيء خاطئ في الملف نفسه. تكمن المشكلة في أن الصورة المربعة الواحدة لن تنجو أبدًا من الاتصال بالعالم الحقيقي لمشغلات Android، حيث يقوم كل منها بقص الأيقونات وأقنعتها وإعادة تشكيلها بشكل مختلف. إذا لم تكن قد واجهت هذا بعد، فهي مسألة وقت فقط قبل أن تفعل ذلك، لذلك دعونا نتعرف على ما يحدث تحت الغطاء وكيفية القيام بذلك بشكل صحيح في المرة الأولى.
لماذا مربع واحد PNG لم يعد كافيا
في السنوات الأولى لنظام التشغيل Android، كانت أيقونات التطبيقات تبدو تمامًا كما تبدو: مربع واحد (أو في بعض الأحيان على شكل حر) PNG يعرضه كل مشغل كما هو. لقد نجح ذلك بشكل جيد حتى بدأ المصنعون في تمييز هواتفهم بصريًا، وكانت الشاشة الرئيسية هي إحدى أسهل الأماكن للقيام بذلك. أرادت شركة Samsung مربعات مستديرة، وأرادت بعض واجهات OEM الصينية معالجة زوايا مختلفة، واستقر مخزون Android في النهاية على الدوائر. وفجأة، بدا ملف الرمز نفسه مختلفًا بشكل ملحوظ، وأحيانًا أسوأ بشكل واضح، اعتمادًا على الهاتف الذي تم تثبيته عليه.
كانت إجابة Google، التي تم تقديمها مع Android 8.0 Oreo، هي نظام الرموز التكيفي. بدلاً من توفير شكل ثابت واحد، يقدم المطورون عملاً فنيًا متعدد الطبقات يخفيه نظام التشغيل نفسه في أي شكل يفضله مشغل معين. تبقى الهوية البصرية متسقة؛ تتغير الصورة الظلية الخارجية فقط.
ما هي بالضبط الأيقونة التكيفية؟
يتم إنشاء الأيقونة التكيفية من طبقتين منفصلتين، تشغل كل منهما لوحة قماشية بدقة 108 بكسل × 108 بكسل: طبقة خلفية وطبقة أمامية. يقوم Android بتركيب الاثنين معًا ثم يطبق أي شكل قناع يستخدمه المشغل الحالي، سواء كان ذلك دائرة أو مربعًا مستديرًا أو دمعة أو أي شيء آخر تمامًا. إن البنية المكونة من طبقتين هي ما يسمح لنظام Android بإضافة تأثيرات المنظر والحركة الدقيقة أيضًا، نظرًا لأن الطبقات يمكن أن تتغير بشكل مستقل عند النقر على أيقونة أو سحبها.
في موارد التطبيق، يتم تحديد ذلك عادةً من خلال ملف XML مثل mipmap-anydpi-v26/ic_launcher.xml، والذي يشير ببساطة إلى الخلفية والرسومات الأمامية بدلاً من احتواء بيانات البكسل نفسها. لا يزال يتم الاحتفاظ بـ ic_launcher.png المسطح التقليدي كبديل للأجهزة التي تعمل بنظام Android 7.1 أو الإصدارات الأقدم، والتي تسبق نظام الرموز التكيفي بالكامل.
لماذا تعتبر المنطقة الآمنة مهمة؟
هذا هو الجزء الذي يزعج الناس أكثر من غيرهم. على الرغم من أن لوحة الرسم لكل طبقة هي 108dp في 108dp، إلا أن الدائرة الداخلية 66dp في 66dp فقط، المتمركزة في تلك اللوحة، هي التي تضمن أن تكون مرئية بغض النظر عن شكل القناع الذي سيتم تطبيقه. تسمى هذه المنطقة الداخلية عادةً بالمنطقة الآمنة. قد يتم عرض أي شيء خارجه على قناع دائري ثم يتم قصه فجأة على قناع دائري أو قناع دمعة أكثر عدوانية، أو العكس.
هذا هو بالضبط نوع المشكلة التي تظهر عندما يتم رسم شعار بالقرب من حواف اللوحة القماشية لتعظيم حجمه المرئي: يمكن أن يبدو مثاليًا على قناع دائري ولكن يتم قصه بشكل غير متساوٍ على قناع سامسونج الدائري. لا يتمثل الإصلاح في إعادة التصميم، بل مجرد تقليص العمل الفني قليلاً بحيث يظل المحتوى ذو المعنى داخل المنطقة الآمنة بغض النظر عن الشكل الذي سيتم تطبيقه في النهاية.
أشكال القاذفات التي ستواجهها
| الشكل | حيث ستراها |
|---|---|
| دائرة | Stock Android، Pixel Launcher (الافتراضي طويل الأمد) |
| سكويركل (مربع مستدير) | Samsung One UI والعديد من أشكال Android الأخرى |
| مربع مستدير (قطع ناقص) | iOS، يتم تطبيقه تلقائيًا بواسطة النظام دون تحكم المطور |
| دمعة | يتم تقديمه كخيار يمكن تحديده في بعض إصدارات برامج Samsung |
| مربع بزوايا ناعمة | العديد من جلود قاذفات الشركات المصنعة الأخرى |
والوجهة العملية هي أنه لا يمكنك اختيار أي من هذه الأشكال التي سيرتديها الرمز الخاص بك. يمكن للمستخدمين في مشغلات Android في كثير من الأحيان اختيار الشكل المفضل لديهم من قائمة الإعدادات. عاملك الحقيقي الوحيد هو التأكد من أن العمل الفني نفسه سينجو من كل هذه المشاكل بأمان، وهو بالضبط ما تضمنه المنطقة الآمنة.
بناء الأصول: الأحجام والكثافات التي تحتاجها
| دلو الكثافة | حجم أيقونة المشغل |
|---|---|
| mdpi | 48 × 48 بيكسل |
| hdpi | 72 × 72 بيكسل |
| xhdpi | 96 × 96 بيكسل |
| xxhdpi | 144 × 144 بيكسل |
| xxxhdpi | 192 × 192 بكسل |
| رمز قائمة متجر Play | 512 × 512 بكسل |
إذا كنت تقوم أيضًا بشحن التطبيق على نظام التشغيل iOS، فأضف مجموعة أخرى بالكامل، نظرًا لأن متطلبات أيقونة متجر تطبيقات Apple تصل إلى 1024 × 1024 وتستخدم تنسيقًا مختلفًا تمامًا وغير متعدد الطبقات بدون شفافية على الإطلاق.
الطريقة اليدوية مقابل استخدام المولد
يمكنك بالتأكيد إنتاج كل واحد من هذه الأحجام يدويًا في محرر الصور، أو من خلال Image Asset Studio المدمج في Android Studio، والذي يتعامل مع قياس الكثافة ومعاينات القناع بشكل جيد لمشروع واحد. يصبح هذا أمرًا مملاً عندما تحتفظ بنظام تصميم عبر العديد من التطبيقات، أو تحتاج إلى مطابقة صادرات iOS من نفس العمل الفني الرئيسي، أو ببساطة تريد طريقة سريعة للتحقق مرة أخرى من كيفية تصرف التصميم عبر كل شكل قبل الالتزام به.
قم بإنشاء كل حجم من صورة رئيسية واحدة
يأخذ مولد أيقونة التطبيق الخاص بنا صورة مصدر واحدة عالية الدقة وينتج مجموعة كاملة من مجموعات كثافة Android، وبنية المقدمة/الخلفية القابلة للتكيف، وحجم قائمة متجر Play، كل ذلك من تحميل واحد، لذلك لا تقوم بتصدير وإعادة تسمية عشرات الملفات يدويًا.
استخراج الرموز من ملف APK موجود
في بعض الأحيان تسير الحاجة في الاتجاه المعاكس. ربما تكون قد ورثت مشروعًا بدون ملفات التصميم الأصلية الخاصة به، أو تريد أن ترى بالضبط كيف قام أحد المنافسين ببناء الأيقونة الخاصة به قبل تصميم أيقونة خاصة بك، أو تحتاج ببساطة إلى سحب أيقونة مرة أخرى من ملف APK المدمج لإعادة استخدامها في أداة ذات صلة أو أصول تسويقية. نظرًا لأن APK عبارة عن أرشيف منظم يحتوي على جميع موارد التطبيق، فإن ملفات أيقونة المشغل الخاصة به موجودة فعليًا داخله ويمكن استخراجها مباشرة، بدلاً من إعادة بنائها من البداية.
يقوم مستخرج الأيقونات الخاص بنا بسحب هذه الملفات بالضبط من أي ملف APK تقوم بتحميله، مما يمنحك أصول الأيقونات الأولية بأي دقة قام المطور الأصلي بشحنها، والتي غالبًا ما تكون أسرع طريقة لاستعادة ملف مصدر مفقود أو دراسة كيفية تعامل تطبيق آخر مع نفس مشكلة التصميم.
أخطاء الأيقونات الشائعة التي يتم الإبلاغ عنها أثناء المراجعة
- الخبز في حشوة إضافية أو كروم واجهة المستخدم. يتعارض الظل المسقط أو الحدود أو تأثير الزاوية المستديرة الذي تتم إضافته يدويًا داخل الصورة مع إخفاء النظام الخاص وغالبًا ما يبدو مزدوجًا أو غير محاذٍ.
- استخدام خلفية بيضاء نقية بدون حافة مميزة. في القاذفات ذات السمات الخفيفة، يمكن أن يصبح الرمز غير مرئي تقريبًا على خلفية الشاشة الرئيسية.
- التفاصيل الدقيقة بشكل مفرط. غالبًا ما تتحول النصوص والخطوط المعقدة التي تبدو حادة عند 512 بكسل إلى لطخة غير قابلة للقراءة بمجرد تصغيرها إلى 48 بكسل، وهو ما يراه معظم المستخدمين يومًا بعد يوم.
- عدم تطابق بين أيقونة قائمة متجر Play والأيقونة التي يتم تثبيتها. يلاحظ كل من المراجعين والمستخدمين عدم تطابق هذين الاثنين، ويُقرأ على أنه غير متقن، أو الأسوأ من ذلك، مريب.
- نسيان الإرث الاحتياطي بالكامل. إذا كان تطبيقك لا يزال يدعم إصدارات Android قبل الإصدار 8.0، فإن تخطي خيار PNG المسطح يمكن أن يترك لهؤلاء المستخدمين أيقونة معطلة أو ذات مظهر عام.
اختبار الرمز الخاص بك عبر الأشكال قبل الشحن
قبل الانتهاء من وضع اللمسات النهائية على الأيقونة، من المفيد معاينتها على الأقل تحت قناع دائري وقناع دائري جنبًا إلى جنب، بدلاً من افتراض أنها ستتم ترجمتها بشكل واضح. يشتمل Image Asset Studio في Android Studio على معاينة مباشرة عبر العديد من أشكال المشغلات لهذا السبب بالضبط، ويستغرق الأمر دقيقة واحدة فقط لاكتشاف مشكلة قد تظهر فقط بعد النشر، عندما يقوم مستخدم على شكل المشغل "الخاطئ" بالإبلاغ عن أن شيئًا ما يبدو خاطئًا.
الوجبات السريعة الرئيسية
- تستخدم الأيقونات التكيفية طبقتين، الخلفية والمقدمة، على لوحة قماشية بدقة 108dp، والتي يقوم النظام بإخفائها في أشكال مختلفة لكل مشغل.
- يتم ضمان رؤية المنطقة الآمنة الداخلية 66dp فقط عبر كل شكل قناع؛ احتفظ بعمل فني ذي معنى بداخله.
- لا تزال بحاجة إلى رمز قديم مسطح للأجهزة التي تعمل بنظام التشغيل Android 7.1 أو الإصدارات الأقدم.
- يمكن للمولد إنتاج كل الكثافة المطلوبة وحجم قائمة متجر Play من صورة رئيسية واحدة، مما يوفر قدرًا كبيرًا من أعمال التصدير اليدوية.
- يمكن استخراج الرموز مباشرة من ملف APK موجود عند فقدان الملفات المصدر أو عند الحاجة إلى دراسة أصول تطبيق آخر.
الأسئلة الشائعة (FAQ)
ما هو حجم البكسل الفعلي المطلوب لأيقونة قائمة متجر Play؟
512 × 512 بكسل، PNG 32 بت مع قناة ألفا. وهذا منفصل عن أحجام أيقونات المشغل المجمعة داخل ملف APK نفسه.
هل يجب أن تكون طبقة خلفية الأيقونة التكيفية ذات لون خالص؟
ليس بالضرورة لونًا مسطحًا، ولكن يجب أن يكون معتمًا وبسيطًا بشكل عام، حيث يمكن تغييره أو تغيير حجمه أو إخفائه بطرق لا يمكنك التحكم فيها بشكل كامل. تميل الخلفيات المزدحمة أو الشفافة إلى الظهور بشكل غير متناسق عبر منصات الإطلاق.
هل يمكنني إعادة استخدام تصميم أيقونات Android التكيفي الخاص بي مباشرةً لنظام iOS؟
ليس مباشرة. يستخدم iOS صورة مربعة مسطحة واحدة مع تقريب الزوايا الذي يطبقه النظام بدلاً من الطبقات المنفصلة، لذا يمكنك عادةً تصدير نسخة مسطحة مبسطة من نفس العمل الفني لنظام iOS.
لماذا يبدو الرمز الخاص بي جيدًا على هاتفي ولكنه غير واضح في قائمة متجر Play؟
يحدث هذا عادةً عندما يتم تكبير رمز القائمة من صورة مصدر صغيرة. ابدأ دائمًا من ملف رئيسي لا يقل عن 1024 × 1024 بكسل وقم بتصدير كل حجم مطلوب بدءًا من ذلك.
ماذا يحدث إذا تخطيت الرمز القديم الاحتياطي لإصدارات Android الأقدم؟
الأجهزة التي تعمل بنظام التشغيل Android 7.1 أو الإصدارات الأقدم، والتي لا تدعم الرموز التكيفية، قد ترجع إلى رمز نظام عام أو تعرض الرمز الخاص بك بشكل غير صحيح. من الآمن التخطي فقط إذا كان الحد الأدنى لإصدار Android المدعوم لتطبيقك هو 8.0 أو أعلى.
لا تحتاج إلى خلفية في نظرية التصميم لأي من هذا، فقط إدراك أن الأيقونة الخاصة بك سيتم إعادة تشكيلها بطرق لا يمكنك التحكم بها في اللحظة التي تترك فيها يديك. صمم للمنطقة الآمنة، واحتفظ بنسخة احتياطية قديمة، وقم بإنشاء كل الحجم المطلوب من ملف رئيسي نظيف واحد، وسوف يظل الرمز الخاص بك صامدًا بغض النظر عن المشغل الذي سيتم تثبيته عليه.