الصور والرسومات

على الرغم من أن تطبيقك يمكن أن يحتوي على نص وألوان فقط، قد تحتاج إلى إضافة المزيد من العناصر المرئية، مثل شعار أو رسم توضيحي. يتّبع Android أفضل الممارسات الخاصة بإضافة الرسومات إلى تطبيقك إلى جانب مكتبات متنوعة لإنشاء تأثيرات رسومية أو إضافة مؤثرات حركية.

يُشار إلى مادة عرض Android على أنها قابلة للرسم، وهي نوع من الموارد التي يتم رسمها على الشاشة. وهذا يشمل، على سبيل المثال لا الحصر، الصور النقطية والأشكال والمتجهات.

عند إنشاء صور ورسومات، ضع ما يلي في الاعتبار:

• تجنَّب تضمين نص غير قابل للتغيير في مواد العرض.
• استخدم تنسيقات المتجهات أولاً كلما أمكن ذلك.
• قدِّم مواد عرض لحِزم الحلول.
• يجب توفير تمويه كافٍ بين صور الخلفية والنص.
• على الرغم من قدرة Android على إنشاء تأثيرات مختلفة للصور، مثل التدرجات والألوان والتمويه، فإنّ بعضها أكثر تكلفة من حيث الأداء.
• توفر رسومات المتجهات المتحركة تنسيقًا قابلاً للتطوير للصور المتحركة الصغيرة في واجهة المستخدم.

كيفية تصدير مواد العرض لنظام Android

• تنسيق أسماء مواد العرض بأحرف صغيرة
• يجب ضبط مواد العرض المبسّطة لتصديرها بتنسيق SVG.
• يمكنك ضبط الصور المعقدة، مثل الصور، لتصديرها بتنسيق WebP أو PNG أو JPG.
• اضبط الحجم الصحيح لدرجة الدقة كما هو موضَّح في الجدول التالي.

حجم الشاشة	المقياس
mdpi	×1
hdpi	×1.5
xhdpi	×2
xxhdpi	×3
xxxhdpi	×4

يمكنك تحويل ملفات SVG إلى رسومات موجّهة يمكن أن تكون رسمًا (VD) باستخدام "استوديو Android". نظّم الأصول في الأدلّة المقابلة لدرجة الدقة للتسليم كما هو موضّح في الصورة التالية. على سبيل المثال، يمكنك تضمين حجم الشاشة في أسماء المجلدات.

أنواع مواد العرض

يتيح Android أنواع مواد العرض التالية.

المتجه

الرسم المتجه هو تنسيق لا يؤدي إلى فقدان البيانات، مما يعني أنه لا يفقد المعلومات المرئية عند القياس. تتكون المتجهات من نقاط رياضية مملوءة لإنشاء صورة.

تنسيقات المتجهات

يتيح نظام التشغيل Android استخدام تنسيقات صور المتجهات التالية: ملفات SVG ورسومات موجّهة يمكن رسمها.

تشبه الرسومات الموجّهة التي يمكن رسمها ملفات SVG، ولكنّها مستندة إلى XML. كما أنها تدعم سمات مختلفة، مثل التدرجات. لمزيد من المعلومات عن السمات المتوافقة، يُرجى الاطّلاع على VectorDrawable. يمكنك تحويل ملفات SVG إلى رسومات بتنسيق Vector من خلال Vector Asset Studio.

حالات الاستخدام

نظرًا لحجمها الصغير، من الأفضل إنشاء أيقونات باستخدام تنسيق متجه. يمكن استخدام رسم متجه متحرك قابل للرسم لإضافة حركة إلى رمز.

• الصور التوضيحية هي رسومات تساعد في توجيه المستخدمين أو شرح المفاهيم أو التعبير عن الأفكار. تعبّر عادةً عن نمط العلامة التجارية.
• تركّز الرسوم التوضيحية الرئيسية بشكل كبير على باقي المحتوى، وتُستخدم لتحديد الشكل والأسلوب العامَين وشرح المعلومات الأساسية.
• تكون الرسوم التوضيحية الأولية أصغر حجمًا ومضمّنة عادةً وتدعم المحتوى المحيط.

صورة نقطية

يتكون الرسم الذي يفقد التفاصيل، أو الرسم الذي يفقد بعض التفاصيل عند التلاعب به من خلال الضغط أو الحجم، من وحدات بكسل لتكوين الصورة. تُستخدم الرسومات النقطية بشكل شائع مع الصور التفصيلية مثل الصور أو التدرجات المعقدة. نظرًا لأنها تفقد التفاصيل عند قياسها، يمكنك تصدير درجات دقة متعددة لهذه الصور.

تنسيقات الصور النقطية

يتيح Android استخدام تنسيقات الصور النقطية التالية: PNG وGIF وJPG وWebP.

حالات الاستخدام

تشمل حالات الاستخدام الصور التي تحتوي على مجموعة من الزخارف تؤدي إلى لوحة ألوان واسعة وتدرج، أو الصور التي قد تحتوي على مجموعة شديدة التعقيد من نقاط بيزيه. يمكن أن تشمل حالات الاستخدام أيضًا أصول صور مفصّلة للغاية مثل صور المنتج وتفاصيل الموقع والمزيد.

مقاسات الشعار

عند إنشاء مواد عرض، يجب أخذ الاعتبارات التالية في الاعتبار.

حِزم الدقة

يجب أن يوفر تطبيقك رسومات نقطية بناءً على نطاقات كثافة الشاشة أو مجموعات البيانات. يعرض نظام التشغيل تلقائيًا الرسم الصحيح للجهاز المعني باستخدام هذه المجموعات. تأكد من عرض الرسومات عالية الدقة على كل جهاز من خلال توفير أصول لكل مجموعة.

مساحة متروكة

يجب أن تتضمّن الرموز ومواد العرض الصغيرة المشابهة مساحة متروكة أساسية (مدمجة) لتوفير مساحة كافية على مادة العرض والتأكّد من اتّساق المقاسات.

أسماء الملفات

تكون مواد العرض في Android بأحرف صغيرة ولا تتضمّن لاحقة درجة الدقة.

الحفاظ على اصطلاح تسمية وهيكل متسقين للحفاظ على تنظيم ملفاتك ومشروعاتك. على سبيل المثال، يمكن أن يساعد تسمية الأيقونات بالبادئة "ic_..." في تنظيم جميع الأيقونات في مشروعك، والمساعدة في تحديد الأيقونات بسرعة أثناء التطوير.

مواد عرض التطبيقات الأخرى

رموز التطبيقات

يمكن العثور على رموز مشغّل التطبيقات على الشاشة الرئيسية. يمكنك العثور على الرموز الأحادية اللون في واجهة مستخدم النظام، بما في ذلك الإشعارات الأحادية اللون وشريط الحالة والتطبيقات المصغّرة.

يجب تنسيق رموز التطبيقات كعناصر متّجه قابل للرسم للرموز التكيُّفية وملف PNG للرموز القديمة. لمزيد من المعلومات حول إنشاء رمز التطبيق ومعاينته، اطّلع على مقالة تصميم رموز التطبيقات ومعاينتها.

شاشات البداية

بدءًا من الإصدار 12 من نظام التشغيل Android، يمكن لتطبيقك عرض شاشة بداية متحركة تبرز رمز التطبيق أثناء فتحه.

مكان الجهاز

لاحظ كيف يجب تحجيم الصور وموضعها على الشاشة. تتوفّر Fit واقتصاص وFillHeight وFillHeight وFlowBounds وInside وNone) لضبط الحجم على إحدى الصور.

يمكنك أيضًا اقتصاص الصور إلى شكل لإنشاء تأثيرات إضافية.

الاقتصاص المتجاوب

لعرض الصور بشكل متجاوب، حدِّد طريقة اقتصاص الصورة في نطاقات نقاط فاصلة مختلفة. يمكن للاقتصاص في نطاقات نقاط إيقاف مختلفة أن:

• الحفاظ على نسبة ثابتة واحدة
• عليك التكيّف مع النِسب المختلفة.
• حافظ على ارتفاعات ثابتة للصور.

الحفاظ على نسبة واحدة

يمكن أن يحتفظ حجم الصورة بنسبة ثابتة واحدة في نطاقات نقاط الإيقاف.

التكيّف مع النِسب المختلفة

يمكن أن تتغيّر نسب الصور من خلال التكيّف مع نطاقات نقاط الإيقاف المختلفة. على سبيل المثال، في الشكل 9، تتغير نسبة الصورة من 1:1 إلى 16:9 بين نقاط التوقف.

ارتفاعات ثابتة للصور

يمكن أن يحافظ حجم الصورة على ارتفاع ثابت وعرض للسائل عبر نطاقات نقاط التوقف وداخلها. تحافظ الصورة على ارتفاع ثابت بينما يكون العرض بين نقاط التوقف سائلاً.

تأثيرات

يتضمّن Android مجموعة من تأثيرات الصور المدمجة. فيما يلي بعض التأثيرات الشائعة:

التدرجات

في نافذة Compose، استخدِم فرشاة لرسم عنصر على الشاشة. يمكن استخدام الفُرش المختلفة لرسم أشكال بألوان أو تدرجات مختلفة. استخدِم فُرش التدرّج المدمجة لتنفيذ مختلف مؤثرات التدرج. تتيح لك هذه الفُرش تحديد قائمة الألوان التي تريد إنشاء تدرج منها.

الفرشاة المتدرجة قادرة على الحصول على تدرجات أكثر تقدمًا عن طريق إضافة وقفات اللون والتجانب، طالما توفر قائمة الألوان والنسب المئوية التي تحدث فيها نقطة التوقف. استخدم الحاويات أو الأشكال لاقتصاص التدرجات أو تعبئة الألوان الثابتة أو الصور.

التمويه

يمكنك تطبيق تأثيرات التمويه على الصور باستخدام طريقة Modifier.blur() وتوفير نِسب التمويه. استخدِم عناصر التمويه بحذر لأنّها قد تؤثّر في الأداء، وهي متوفّرة فقط على الأجهزة التي تعمل بالإصدار 12 من نظام التشغيل Android والإصدارات الأحدث. لمزيد من المعلومات، راجِع تمويه صورة قابلة للإنشاء.

أوضاع الدمج

Android قادر على تعديل الصور من خلال عمليات منطقية مماثلة وأوضاع المزج التي قد تجدها في برامج التصميم، مثل الاتحاد أو الضرب. لمزيد من المعلومات، راجِع BlendMode.

درجات الألوان

استخدام أوضاع المزج وعمليات التعبئة لتلوين مواد العرض يتيح لك ذلك امتلاك مادة عرض واحدة وتطبيق ألوان مختلفة عليها، ما يمكن أن يقلل من كمية الأصول المنتجة.

الحركة

يمكن تحريك الرسومات آليًا لإنشاء رسومات متحركة بدلاً من تحميل ملفات متحركة. ويمكن أن يتيح ذلك مرونة أكبر وصقل موارد الأصول.

تتيح لك رسومات المتجهات المتحركة إنشاء رسوم متحركة صغيرة لواجهة المستخدم. وإذا لم يكن كذلك، يمكنك التعرّف على المزيد من المعلومات حول الصور المتحركة باستخدام الإطارات الرئيسية في Compose. لمزيد من المعلومات حول تأثيرات الصور، يُرجى الاطّلاع على مقالة تخصيص صورة.