عرض تطبيق Android بتقنية ثلاثية الأبعاد باستخدام الواقع المعزّز

أجهزة XR المشمولة

تساعدك هذه الإرشادات في إنشاء تجارب لهذه الأنواع من أجهزة XR.

مزيد من المعلومات حول أنواع أجهزة XR →

مزيد من المعلومات حول أنواع أجهزة XR →

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

يُرجى مراعاة هذه المبادئ المهمة عند نقل تطبيق Android إلى الواقع الممتد.

• الإمكانات المكانية: يوفّر Android XR مجموعة متنوعة من الميزات المكانية المتاحة لتطبيقك، ولكن ليس عليك تنفيذ كل إمكانية. يمكنك تنفيذها بشكل استراتيجي لتكمّل التسلسل الهرمي المرئي والتنسيقات وتجارب المستخدمين في تطبيقك. ننصحك بدمج بيئات مخصّصة ولوحات متعددة لإنشاء تجربة غامرة حقًا. يُرجى الرجوع إلى إرشادات تصميم واجهة المستخدم المكانية لتحديد أفضل طريقة لدمج العناصر المكانية.
• واجهة مستخدم تكيُّفية: يمنحك الواقع الممتد المرونة لتصميم واجهة مستخدم واسعة تتكيّف بسلاسة مع لوحة رسم غير محدودة ونوافذ يمكن تغيير حجمها بحرية. من أهم الاعتبارات التي يجب مراعاتها هو استخدام إرشادات تصميم الشاشات الكبيرة لتحسين تنسيق تطبيقك ليتناسب مع هذه البيئة الواسعة. حتى إذا كان تطبيقك مخصّصًا للأجهزة الجوّالة فقط في الوقت الحالي، لا يزال بإمكانك الاستفادة من البيئات الجذابة لتحسين تجربة المستخدم، ولكن واجهة المستخدم المحسّنة للشاشات الكبيرة هي إحدى أفضل الطرق لتحسين تطبيقك ليتوافق مع Android XR.
• إطار عمل واجهة المستخدم: ننصحك بإنشاء واجهة المستخدم باستخدام Jetpack Compose للواقع الممتد. إذا كان تطبيقك يعتمد على "طرق العرض"، يمكنك مراجعة العمل مع "طرق العرض" في الواقع الممتد لمعرفة المزيد حول الاستفادة من إمكانية التشغيل التفاعلي في Compose عند العمل مع "طرق العرض"، أو تقييم العمل مباشرةً مع مكتبة Jetpack SceneCore.
• النشر على "متجر Google Play": للتأكّد من أنّ تطبيقك المحسَّن بتقنية الواقع الممتد قابل للاكتشاف على "متجر Google Play"، اتّبِع الخطوات التالية:
  • ننصحك بتبسيط تطبيقك من خلال إزالة أي متطلبات ميزات غير ضرورية.
  • تأكَّد من أنّ تطبيقك لم يتم إيقاف نشر XR له من خلال Google Play Console لمنع استبعاد تطبيقك من نتائج البحث في "متجر Google Play".

تحويل مكوّنات واجهة المستخدم الثنائية الأبعاد إلى ثلاثية الأبعاد

يمكن أن يؤدي اتّباع هذه النصائح إلى إحداث فرق كبير في جعل تطبيقك يبدو وكأنّه تم تحسينه ليتوافق مع الواقع الممتد.

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

يقدّم Jetpack Compose for XR مكوّنات جديدة تدير تحسينات الواقع الممتد، ما يغنيك عن القيام بذلك بنفسك. على سبيل المثال، يمكنك استخدام SpatialPopup وSpatialDialog لاستبدال نظيرَيهما الثنائيَي الأبعاد. تظهر هذه المكوّنات كواجهة مستخدم ثنائية الأبعاد عادية عندما لا تكون واجهة المستخدم المكانية متاحة، وتعرض واجهة المستخدم المكانية لتطبيقك عندما يكون ذلك ممكنًا. واستخدامها بسيط مثل إجراء تغيير من سطر واحد لاستبدال عنصر في واجهة المستخدم ثنائي الأبعاد المقابل.

تحويل مربّع حوار إلى SpatialDialog

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}
SpatialDialog.kt

تحويل نافذة منبثقة إلى SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}
SpatialPopup.kt

تحسين عناصر واجهة المستخدم الثنائية الأبعاد

عندما تريد تحسين واجهة المستخدم من خلال التحكّم الدقيق، نقدّم لك SpatialElevation للسماح لك بتحسين أي دالة مركّبة في تطبيقك إلى مستوى أعلى من اللوحة المكانية على المحور Z الذي تحدّده باستخدام SpatialElevationLevel. يساعد ذلك في جذب انتباه المستخدم، وإنشاء تسلسل هرمي أفضل، وتحسين سهولة القراءة، كما هو موضح في المثال التالي.

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(elevation = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

نقاط رئيسية حول الرمز

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

نقل المكوّنات الثنائية الأبعاد إلى المدارات

"العناصر العائمة" (Orbiters) هي عناصر عائمة تحتوي عادةً على عناصر تحكّم يمكن للمستخدم التفاعل معها. يمكن تثبيت Orbiters على لوحات مكانية أو كيانات أخرى مثل التنسيقات المكانية. وهي تتيح للمحتوى الحصول على مساحة أكبر وتمنح المستخدمين وصولاً سريعًا إلى الميزات بدون حجب المحتوى الرئيسي.

يوضّح المثال التالي كيفية نقل مكوّن واجهة مستخدم ثنائي الأبعاد إلى Orbiter.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}
Orbiter.kt

النقاط الرئيسية حول المركبات المدارية

• "المكوّنات المدارية" (Orbiters) هي مكوّنات مصمَّمة لإرفاق عناصر في واجهة المستخدم الحالية بلوحة مكانية
• يمكنك الاطّلاع على إرشادات تصميم تطبيقات Android XR للتحقّق من العناصر التي يجب نقلها إلى الأشرطة العائمة، والأنماط التي يجب تجنُّبها.
• ننصحك بتكييف بعض مكوّنات التنقّل فقط، مثل شريط التنقّل أو شريط التطبيقات العلوي أو شريط التطبيقات السفلي.
• لا تظهر عناصر Orbiters عندما لا تكون واجهة المستخدم المكانية مفعَّلة. على سبيل المثال، لن تظهر في "مساحة المنزل" أو على أجهزة مثل الهواتف والأجهزة اللوحية والأجهزة القابلة للطي.

نقل المكوّنات الثنائية الأبعاد إلى لوحات مكانية

اللوحات المكانية هي الوحدات الأساسية لواجهة مستخدم تطبيقات Android XR.

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

نقاط رئيسية حول الرمز

• يمكنك الاطّلاع على إرشادات تصميم تطبيقات Android XR للتحقّق من العناصر التي يجب نقلها إلى اللوحات، والأنماط التي يجب تجنّبها.
• اتّبِع أفضل الممارسات المتعلقة بوضع اللوحات المكانية:
  • يجب أن تظهر اللوحات في المنتصف على بُعد 1.5 متر من عيني المستخدم.
  • يجب أن يظهر المحتوى في منتصف مجال رؤية المستخدم بزاوية 41 درجة.
• تبقى اللوحات في مكانها أثناء تحرّك المستخدم. لا يتوفّر التثبيت إلا في وضع الرؤية المحيطية.
• التزم بالزوايا المستديرة التي يوصي بها النظام بمقدار 32 بكسل مستقل الكثافة للوحات.
• يجب أن تكون مساحات اللمس 56 بكسل مستقل الكثافة وألا تقل عن 48 بكسل مستقل الكثافة.
• حافظ على نسب التباين لسهولة القراءة، خاصة إذا كنت تستخدم أي خلفيات شفافة.
• اتّبِع مبادئ الألوان في تصميم Android واستخدِم نظام الألوان في التصميم المتعدد الأبعاد لتطبيق المظهرَين الداكن والفاتح في تطبيقك.
• استخدِم واجهة برمجة التطبيقات Spatial Panels مع عناصر واجهة المستخدم الحالية.

نقل واجهة المستخدم الثنائية الأبعاد إلى لوحة مكانية واحدة

يظهر تطبيقك تلقائيًا بلوحة واحدة في Home Space. كيفية التبديل بين "مساحة الشاشة الرئيسية" و"مساحة الشاشة الكاملة" لنقل هذا المحتوى إلى "المساحة الكاملة"، يمكنك استخدام SpatialPanel.

إليك مثال على كيفية إجراء ذلك.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

نقل واجهة المستخدم الثنائية الأبعاد إلى لوحات مكانية متعددة

يمكنك استخدام لوحة مكانية واحدة لواجهة مستخدم تطبيقك، أو يمكنك نقل واجهة المستخدم الثنائية الأبعاد إلى لوحات مكانية متعدّدة. إذا اخترت استخدام لوحات متعددة لواجهة مستخدم تطبيقك، يمكنك تحديد موضع اللوحات وتدويرها (على غرار تخطيط واجهة المستخدم في الوضع الثنائي الأبعاد). ستبدأ برؤية تصميم واضحة لما تريد تحقيقه، ثم يمكنك استخدام واجهات برمجة التطبيقات الخاصة بتصميم واجهة المستخدم المكانية (SpatialBox وSpatialRow وSpatialColumn وSpatialSpacer وSpatialAlignment) ومعدِّلات المساحة الفرعية لتحديد موضع اللوحات وتدويرها. هناك بعض الأنماط الرئيسية التي يجب تجنّبها عند تنفيذ لوحات متعددة.

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

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}
SpatialRow.kt

إضافة إمكانات مكانية

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

التحقّق من إمكانات الصوت المكاني

عند تحديد ما إذا كنت تريد عرض عنصر معيّن في واجهة المستخدم، تجنَّب التحقّق من أجهزة أو أوضاع XR معيّنة. قد يؤدي التحقّق من الأجهزة أو الأوضاع بدلاً من الإمكانات إلى حدوث مشاكل عندما تتغيّر الإمكانات على جهاز معيّن بمرور الوقت. بدلاً من ذلك، استخدِم LocalSpatialCapabilities.current.isSpatialUiEnabled للتحقّق مباشرةً من إمكانات الصوت المكاني اللازمة كما هو موضّح في المثال التالي. يضمن هذا النهج تكيُّف تطبيقك بشكل صحيح مع مجموعة واسعة من تجارب الواقع الممتد بدون الحاجة إلى تحديثات في كل مرة تظهر فيها أجهزة جديدة أو تتغيّر الإمكانات.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
SpatialCapabilities.kt

استخدام البيئات لتغيير محيط المستخدم

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

إضافة محتوى ثلاثي الأبعاد

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

يمكنك الرجوع إلى الدليل المناسب لإضافة تصاميم ثلاثية الأبعاد أو فيديو مكاني أو صوت مكاني.