1. مقدمة
تاريخ آخر تعديل: 08/04/22
بدءًا من Android 13، يمكن للمستخدمين تعديل مظهر الرموز التكيّفية في مشغّل التطبيقات. باستخدام هذه الميزة، يتم تلوين رموز التطبيقات في مشغّلات Android المتوافقة لتتضمّن ألوان الخلفية التي يختارها المستخدم والمظاهر الأخرى.
يمكنك إنشاء جميع مواد عرض النظام اللازمة لتطبيق Android بسهولة، بما في ذلك رموز الألوان التكيُّفية الجديدة.
أهداف الدورة التعليمية
- فهم الأنواع المختلفة من رموز التطبيقات ونصائح لتصميمها
- كيفية استخدام نموذج Figma لمشغّل تطبيقات Android
- كيفية استخدام أداة إنشاء مواد العرض في "استوديو Android"
- كيفية معاينة رمز مشغّل التطبيقات باستخدام محاكي "استوديو Android"
المتطلبات الأساسية
- معرفة أساسية ببرنامج Figma
- اختياري: تصميم رمز التطبيق (المقدمة والخلفية والأحادي اللون)
المتطلبات
- حساب Figma
- ملف Figma designlab
- اختياري: جهاز كمبيوتر مثبَّت عليه استوديو Android
2. البدء
الإعداد
للبدء، عليك الوصول إلى ملف Figma الخاص برمز تطبيق Android.
أولاً، سجِّل الدخول إلى Figma أو أنشئ حسابًا.
نسخة مكرّرة من "مجتمع Figma"
انتقِل إلى ملف نموذج مشغّل تطبيقات Android أو ابحث عن Migrating to Variable fonts ضمن Figma Community. انقر على الحصول على نسخة في أعلى يسار الصفحة لنسخ الملف إلى ملفاتك.
استخدام النموذج
يتألف نموذج رمز تطبيق Android من صفحتَين:
- تتضمّن صفحة الغلاف شرحًا موجزًا للمفاهيم ذات الصلة وطريقة استخدام النموذج.
- تتضمّن صفحة النموذج كل ما تحتاج إليه لإنشاء مواد العرض المطلوبة، وهي مقسّمة إلى ثلاثة إطارات (اللون والشكل و"متجر Play").
ملاحظة: في "لوحة الطبقات" على يمين الشاشة، تكون معظم الطبقات والمجموعات مقفلة، ويجب أن تظلّ مقفلة. (ستتمكّن من وضع العمل الفني ضمن مجموعات الأعمال الفنية غير المقفلة).
قبل أن نبدأ في إنشاء مواد العرض، لنلقِ نظرة على ما سننشئه...
3- رموز نظام التشغيل Android
رموز مشغّل التطبيقات
تعمل رموز المشغّل أو رموز التطبيقات كجزء أساسي من تجربة تشغيل تطبيقك، وتظهر رموز المشغّل على الشاشة الرئيسية كنقطة دخول إلى تطبيقك.
شكل تكيّفي
يمكن أن يظهر الرمز التكيّفي، أو AdaptiveIconDrawable، بشكل مختلف حسب إمكانات الجهاز الفردية وسمات المستخدم. يستخدم مشغّل التطبيقات الرموز التكيّفية بشكل أساسي على الشاشة الرئيسية، ولكن يمكن استخدامها أيضًا في الاختصارات وتطبيق "الإعدادات" ومربّعات حوار المشاركة وشاشة "نظرة عامة".
يمكن أن يعرض الرمز التكيُّفي مجموعة متنوعة من الأشكال على مختلف طُرز الأجهزة. على سبيل المثال، يمكن أن يعرض شكلًا دائريًا على جهاز أحد المصنّعين الأصليين للجهاز، ويعرض شكلًا شبه دائري على جهاز آخر. يجب أن يوفّر كل مصنّع معدّات أصلية للأجهزة قناعًا يستخدمه النظام لعرض جميع الرموز التكيّفية بالشكل نفسه.
تتيح إمكانية التكيّف مع الشكل أيضًا للنظام تطبيق تأثيرات صور متحركة مختلفة عند تفاعل المستخدم.
اللون التكيُّفي
يمكن الآن استخدام الألوان الديناميكية مع الرموز التكيّفية للسماح برموز تطبيقات مستوحاة من مواضيع معيّنة ومخصّصة.
إذا فعّل المستخدم رموز التطبيقات المستوحاة من موضوع معيّن (أي فعّل خيار "الرموز المستوحاة من موضوع معيّن" في إعدادات النظام)، وكان مشغّل التطبيقات يتيح هذه الميزة، سيستخدم النظام ألوان الخلفية والمظهر اللذين اختارهما المستخدم لتحديد لون التظليل.
وكما هو الحال مع الرموز التي تتكيّف مع الشكل، تتكوّن رموز الألوان التكيّفية من مقدّمة وخلفية، ولا يلزم سوى توفير رمز أحادي اللون للمقدّمة، وسيتولّى النظام ضبط الخلفية واللون باستخدام نظام الألوان المستخرَج.
يمكنك أيضًا استخدام الرمز أحادي اللون نفسه كرمز للإشعارات.
قديمة
يجب تضمين الرموز القديمة لتتوافق مع الأجهزة التي تعمل بإصدارات Android القديمة أو التي لا تتوافق مع ميزات الرموز التكيّفية (الإصدارات الأقدم من 8.0).
لن تتضمّن موارد في المقدّمة والخلفية، ويمكن أن يكون لها شكل حر. إذا كنت تستخدم النموذج المقدَّم، سيتم تصدير العمل الفني النهائي للشكل التكيّفي بالأحجام اللازمة للرمز القديم.
رموز التنبيه
الإشعار هو رسالة يعرضها نظام التشغيل Android خارج واجهة مستخدم تطبيقك لتزويد المستخدم بتذكيرات أو رسائل من أشخاص آخرين أو معلومات أخرى في الوقت المناسب من تطبيقك. يعرض النظام الإشعارات في مواقع وتنسيقات مختلفة، مثل رمز في شريط الحالة وإدخال أكثر تفصيلاً في لوحة الإشعارات وشارة على رمز التطبيق وعلى الأجهزة القابلة للارتداء المقترنة تلقائيًا.
الأعمال الفنية في المتجر
يمكنك استخدام رسم مميّز ولقطات شاشة ووصف قصير وفيديوهات لتسليط الضوء على تطبيقك والترويج له على Google Play وقنوات Google الترويجية الأخرى.
لا يحلّ رمز التطبيق محلّ رمز مشغّل التطبيقات، ولكن يجب تقديم نسخة عالية الدقة.
على غرار رمز مشغّل التطبيق، يمكن أن تملأ الرسومات الفنية مساحة مواد العرض بأكملها، أو يمكنك تصميم عناصر الرسومات الفنية، مثل الشعارات، ووضعها على شبكة الخطوط الأساسية.
يجب تقديم رمز مربّع للتطبيق بحجم 512×512 بكسل لنشر بطاقة بيانات المتجر. في حال استخدام نموذج رمز تطبيق Android، يتم توفير ذلك عند التصدير باستخدام العمل الفني "الشكل التكيّفي".
4. أفضل الممارسات المتعلقة بالتصميم
تؤدي رموز مشغّل التطبيقات إلى تشغيل تطبيقك للمستخدم. ويجب أن تكون هذه الرموز قابلة للتعرّف عليها وقراءتها. في ما يلي بعض أفضل الممارسات لضمان توفّر هذه الصفات في رمز مشغّل التطبيق.
الحفاظ على بساطة العمل الفني: تجنَّب استخدام طبقات متعددة وتأثيرات كثيرة ونصوص. وستفقد هذه التفاصيل أو يصعب رؤيتها عند الأحجام الصغيرة. 
تجنَّب الأشكال المعقّدة. ويشمل ذلك الشعارات. استخدِم شعارًا مبسطًا، إذا أمكن، أو فكِّر في استخدام رموز يربطها المستخدمون بتطبيقك. يساعد الشكل الواضح والمميّز في إنشاء وحدة ليتعرّف المستخدمون بسهولة على تطبيقك من سياقات مختلفة (اللون التكيّفي والإشعارات). 
استخدام شبكة استفِد من شبكة أو خطوط أساسية لضمان عمل العمل الفني في المقدّمة عند اقتصاصه، بما في ذلك العمل الفني التوضيحي الذي يملأ الصفحة بالكامل. 
مراعاة التباين: بالنسبة إلى الرموز التكيُّفية والرموز القديمة، تأكَّد من أنّ واجهة الرمز وخلفيته تتضمّنان تباينًا واضحًا. تجنَّب استخدام الظلال الثقيلة، لأنّها قد تُخطئ وتُعتبر من ظلال النظام. 
إبقاء العمل الفني ضمن المناطق الآمنة: يجب أن تبقى مواد العرض في المقدّمة ضمن 72x72 بكسل (ما لم تكن تستخدم تصميمًا بحواف ممتدة). يجب أن تكون الخلفيات بحجم 108x108 بكسل. ملاحظة: إطار العمل الفني لنموذج الرمز أكبر من 72 × 72 بكسل للسماح لك بإنشاء عمل فني للرمز. سيتم تغيير حجم مواد العرض لتلائم المواصفات.
تنسيق متّجه: حاوِل استخدام أعمال فنية بتنسيق متّجه (مثل ملفات SVG وAI وPDF وEPS) بدلاً من تنسيق نقطي (مثل ملفات PNG وJPG وGIF). يضمن ذلك توافق عملك الفني مع الميزات الأحدث وسهولة تعديله. 
5- رموز الإشعارات والألوان التكيّفية
حان الوقت الآن لإنشاء رموز نظام Android الخاصة بك.
- ابحث عن ملف Figma لرموز تطبيقات Android.
- في الملف، ابحث عن إطار اللون التكيّفي. ابحث في لوحة الطبقات اليمنى عن "اللون التكيّفي" > "المكوّنات" > "الرسومات" > "مساحة رسومات الرمز" > رسومات الرمز المتوافق مع المظهر < أضِف الرمز. إذا كان لديك رمز أحادي اللون جاهز، انسَخه هنا لاستبدال رمز bugdroid النموذجي، ثم انتقِل إلى الخطوة 6.
- إذا لم يكن لديك رمز أحادي اللون، ابدأ بشعار أو رمز ذي صلة بتطبيقك. راجِع نصائح التصميم لتعديل الرمز. أولاً، تبسيط الأشكال وتجنُّب الأشكال المعقّدة على سبيل المثال، تم تبسيط الرسومات التوضيحية المستخدَمة داخل التطبيق من خلال أشكال أوراق أقل تعقيدًا. يتم محاكاة الظلال وتفاصيل الخطوط باستخدام مساحة بيضاء.
- الآن، عدِّل الحجم باستخدام شبكة الخطوط الأساسية. في هذا المثال، ضبطنا خيار تغيير الحجم على تغيير المقياس وتأكّدنا من أنّ العمل الفني يقع ضمن منطقة الأمان في المقدّمة. يتم إعداد النموذج باستخدام العمل الفني بمقدار 4 أضعاف، ويتم تغيير حجمه تلقائيًا عند التصدير، ما يتيح لك تصميم الرموز بمقياس أكبر.
- تم إعداد الملف للعمل مع أداة إنشاء السمات المستندة إلى Material Design للمساعدة في معاينة الألوان الديناميكية. اربط نمط لون رمز المقدّمة بـ On-surface-variant.
- يمكنك الآن فتح أداة Material Theme Builder من لوحة الإضافات، ثم إما تبديل لون المصدر أو إضافة صورة لتعديل الألوان باستخدام لون المصدر المستخرَج.
- كيف سيبدو هذا المحتوى بدرجات دقة مختلفة أو على الشاشة الرئيسية؟ تم إعداد القالب بحيث تظهر الأعمال الفنية الموضوعة داخل إطارات الأعمال الفنية في سياقات المعاينة المختلفة.
- يستخدم النظام الرمز أحادي اللون كإشعار ويعرضه على هذا النحو في المعاينات.
6. الرموز التكيّفية والرموز القديمة
الآن، سننشئ الرمز التكيُّفي والرموز القديمة لضمان توفّر الرمز على نطاق واسع.
- في الملف، ابحث عن إطار الشكل. ابحث في لوحة الطبقات اليمنى عن خلفية الرمز < إضافة الرمز*. إذا كان لديك رمز جاهز، انسَخه هنا لاستبدال رمز bugdroid النموذجي، وانتقِل إلى الخطوة 5.* إذا لم يكن لديك رمز، ابدأ بشعار أو رمز ذي صلة بتطبيقك أو أعد استخدام الرمز الأحادي اللون.
- تعديل رمز التطبيق المعروض في المقدّمة مع مراعاة أفضل الممارسات المتعلّقة بالرموز هنا، أعدتُ ألوان الرسم التوضيحي الأصلية، لكنني أبقيتُ التفاصيل في الحد الأدنى.
- الآن، عدِّل الحجم باستخدام شبكة الخطوط الأساسية. في هذه الحالة، ضبطنا خيار تغيير الحجم على تغيير الحجم وتأكّدنا من أنّ العمل الفني يقع ضمن منطقة الأمان في المقدّمة.
- يمكن أن تتضمّن رموز التطبيقات ذات الشكل المتكيّف أيضًا خلفية مميّزة. يتيح ذلك اقتصاص طبقات الرمز بأمان وتقديم تأثيرات حركة بسيطة عند التفاعل. يمكنك أيضًا استخدام خلفية ذات لون واحد وتحديدها في "استوديو Android".
- يتم تعديل المعاينات لعرض الشكل الذي ستظهر به العناصر في المقدّمة والخلفية معًا على الشاشة الرئيسية، وأشكال مختلفة تم اقتصاصها، وكرمز قديم.
يمكن تعديل الشكل المستخدَم للاقتصاص ضمن معاينة الشاشة الرئيسية من خلال النقر على الرموز وتغيير خيار شكل الصورة. 
7. التصدير
أحسنت، لقد عدّلت الآن النموذج باستخدام رموز تطبيقك. لنصدّرها لتنفيذها.
- تأكَّد من عدم تحديد أي عنصر على لوحة العرض.
- انتقِل إلى قائمة Figma > ملف > تصدير (Shift + Cmd + E).
- في قائمة التصدير، أكِّد عملية التصدير. سيؤدي ذلك إلى تنزيل مواد العرض من النموذج.
ما الذي يتضمّنه ملف التصدير؟
تحتوي مواد العرض التي تم تصديرها على جميع الملفات اللازمة لتنفيذ رمز التطبيق، وذلك على النحو التالي
- يصدّر Figma رمز المقدمة أحادي اللون للون التكيّفي كملف SVG، بالإضافة إلى كل من المقدمة والخلفية لرموز الشكل التكيّفي.
- توفّر Figma أيضًا رموزًا قديمة في أدلة mipmap مختلفة منظَّمة حسب درجة الدقة.
هذا كل شيء! أصبح الرمز جاهزًا لإرساله إلى فريق التطوير.
بدلاً من ذلك، إذا أردت معاينة الرموز داخل استوديو Android وتحويل ملفات رسومات موجّهة يمكن تغيير حجمها (SVG) هذه إلى تنسيق الأصول النهائي، يمكنك الانتقال إلى الخطوة التالية.
8. استخدام "استوديو مواد عرض الصور"
بدء استخدام "استوديو Android"
- نزِّل "استوديو Android" وثبِّته.
- افتح "استوديو Android".
يطلب منك "استوديو Android" تحديد خيارات لبدء مشروع جديد أو اختيار مشاريع حالية.
- اختَر مشروعًا جديدًا في الوقت الحالي. ستقدّم لك الشاشات التالية إرشادات حول كيفية إعداد مشروعك الجديد.
- اختَر أي نموذج من نماذج البداية، لأنّنا سننظر فقط إلى رموز التشغيل.
- بعد ذلك، حدِّد اسمًا لمشروعك الجديد وانقر على إنهاء. سيستغرق إنشاء المشروع الجديد بضع لحظات.
استخدام "استوديو مواد عرض الصور"
يمكننا الآن إضافة الرموز إلى المشروع باستخدام أداة مفيدة، وهي "استوديو مواد العرض".
- للوصول إلى هذه الأداة، انقر على قائمة "ملف" > "جديد" > "مادة عرض صورة".
- عند فتح "استوديو مواد عرض الصور"، أضِف طبقة المقدمة من خلال النقر على رمز المجلد في المسار. اختَر ملف SVG الذي تم تصديره باسم drawable-anydpi/ic_launcher.svg
- انقر على علامة التبويب طبقة الخلفية واختَر طبقة الخلفية التي تم تصديرها بالطريقة نفسها. بدلاً من ذلك، اختَر "نوع مادة العرض: اللون" للحصول على خلفية مشغّل بلون موحّد.
- ارجع إلى طبقة المقدمة وتأكَّد من أنّ الصورة تقع ضمن المنطقة الآمنة. غيِّر حجم الرمز إلى الحجم الذي يبدو مناسبًا.
- عند الانتهاء، انقر على التالي، وسيُطلب منك تحديد مكان وضع الرموز داخل مشروعك (اترك هذا الخيار على الإعداد التلقائي أو بدِّله إلى "الرئيسي"). بعد ذلك، انقر على إنهاء. يمكنك العثور على مواد عرض مشغّل التطبيقات ضمن res > 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 أو غيِّرها لتشير إلى مادة العرض الصحيحة أحادية اللون.
9- المعاينة والمراجع
المعاينة في المحاكي
لقد فعلنا ذلك لإضافتها إلى مشروع التطبيق، ما يسمح لنا بمعاينتها على جهاز حقيقي أو محاكي. لنلقِ نظرة على الشكل النهائي للأيقونات.
من المفترض أن يكون لديك إعداد محاكي تلقائيًا، ولكن إذا لم يكن لديك، يمكنك إنشاء الجهاز الافتراضي المتوافق مع Android. انقر على زر التشغيل الأخضر. سيؤدي ذلك إلى إنشاء المشروع وفتح المحاكي.
مواد العرض النهائية
رائع، لقد تمكّنت من الاطّلاع على شكل رمز مشغّل التطبيقات على جهاز باستخدام المحاكي وأضفته إلى مشروع تطبيق. وقد أدّى ذلك إلى تحويلها إلى شكلها النهائي. ولكن أين يمكن العثور عليها؟
تتوفّر مواد العرض كموارد في تطبيق Android، ويمكن العثور عليها من خلال فتح لوحة الموارد (عادةً في الجانب الأيمن). انتقِل إلى التطبيق، ثم ابحث عن مجلد Res. انقر بزر الماوس الأيمن لفتح قائمة، ثم انقر على فتح في Finder (على جهاز Mac)، وسيؤدي ذلك إلى فتح نافذة الباحث (Finder). يمكنك توفير بعض الوقت في التطوير وضمان الجودة من خلال تحويل بقية مواد عرض تطبيقك واختبارها باستخدام عملية مشابهة. إذا كنت قد حوّلت بقية مواد عرض تطبيقك، يمكن مشاركة هذا المجلد مع فريق التطوير.
10. تهانينا
أحسنت، لقد تعرّفت على رموز نظام التشغيل Android اللازمة لإنشاء تطبيق Android، وتصميم الرموز الخاصة بك، واستكشفت مورد نموذج الرمز، وربما ذهبت إلى أبعد من ذلك من خلال الانتقال إلى "استوديو Android" لمعاينة الأصول وتحويلها إلى أصول جاهزة للإنتاج.
إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.
يمكنك متابعة المزيد من المحتوى والبرامج التعليمية حول التصميم على youtube.com/MaterialDesign