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

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

وننصحك بالتفكير في هذه المبادئ المهمة عند نقل تطبيق Android إلى الواقع المعزّز.

  • الإمكانات المكانية: يوفّر Android XR مجموعة متنوعة من ميزات الالتقاط المتعلّقة بالمكان المتاحة لتطبيقك، ولكن ليس عليك استخدام كل ميزة. وطبِّق بشكلٍ استراتيجي تلك التي تكمل التسلسل الهرمي المرئي والتنسيقات ورحلات المستخدِمين في تطبيقك. ننصحك بدمج تصاميم مخصّصة للبيئات ولوحات متعددة لإنشاء تجربة غامرة حقًا. راجِع إرشادات تصميم واجهة المستخدم المكانية لتحديد كيفية دمج العناصر المكانية على النحو الأمثل.
  • واجهة مستخدِم قابلة للتكيّف: تمنحك تقنية الواقع المعزّز المرونة في تصميم واجهة مستخدِم رحبة تتغيّر بسلاسة لتتلاءم مع مساحة عمل لا نهائية ونوافذ يمكن تغيير حجمها بحرية. من بين الاعتبارات الأكثر أهمية هو استخدام إرشادات تصميم الشاشات الكبيرة لتحسين تصميم تطبيقك في هذه البيئة الواسعة. حتى إذا كان تطبيقك متوافقًا حاليًا مع الأجهزة الجوّالة فقط، يمكنك الاستفادة من البيئات المشوّقة لتحسين تجربة المستخدم، ولكن واجهة مستخدم محسّنة للّوحات الكبيرة هي إحدى أفضل الطرق لتحسين تطبيقك ليعمل على Android XR.
  • إطار عمل واجهة المستخدم: ننصحك بإنشاء واجهة المستخدم باستخدام Jetpack Compose لتطبيقات VR. إذا كان تطبيقك يعتمد حاليًا على Views، راجِع مقالة العمل مع Views في الواقع الممتد للتعرّف على مزيد من المعلومات حول الاستفادة من إمكانية التشغيل التفاعلي لـ Compose عند العمل مع Views، أو راجِع مقالة تقييم العمل مباشرةً مع مكتبة Jetpack SceneCore.
  • النشر على "متجر Play": لضمان إمكانية عثور المستخدمين على تطبيقك المزوّد بتكنولوجيا الواقع المعزّز على "متجر Play"، يُرجى اتّباع الخطوات التالية: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

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

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

  • منح الأولوية لتوافق الشاشة الكبيرة: تأكَّد من أنّ واجهة مستخدم تطبيقك تلتزم بمبادئ تصميم الشاشة الكبيرة للمساعدة في ضمان قراءة النص والمحتوى بوضوح في بيئات الواقع المعزّز (XR) الواسعة النطاق.
  • استخدام الميزات المكانية بشكل استراتيجي: حدِّد اللحظات الرئيسية في رحلة المستخدِم داخل تطبيقك التي يمكن فيها دمج الميزات المكانية لتحسين التجربة والاستفادة من الإمكانات الفريدة للمنصة.
  • وضع اللوحات المكانية مع مراعاة راحة المستخدم: عند تصميم التنسيق باستخدام اللوحات المكانية، يجب وضعها على مسافة مريحة من المستخدم لتجنّب الشعور بالانزعاج أو الاقتراب الشديد.
  • استخدام واجهة مستخدِم قابلة للتكيّف مع التنسيقات المكانية: استخدِم مفاهيم واجهة المستخدِم القابلة للتكيّف، مثل الألواح والعرض التدريجي، لتقسيم التنسيق بفعالية إلى ألواح مكانية متعدّدة، ما يؤدي إلى تحسين عرض المعلومات.
  • استخدام العناصر الدائرية للعناصر والأنماط الثابتة: احرِص على استخدام العناصر الدائرية لعناصر تجربة المستخدم الثابتة والسياقية، مثل عناصر التنقّل وعناصر التحكّم. الحدّ من استخدام العناصر الدوّارة للحفاظ على الوضوح وتجنّب الازدحام
  • استخدم الارتفاع بحكمة: طبِّق الارتفاع المكاني على المكونات المؤقتة التي تظلّ ثابتة ولا يتم التمرير معها مع المحتوى. تجنَّب تسليط الضوء على مساحات كبيرة لتجنُّب الشعور بعدم الراحة عند النظر إلى الشاشة والحفاظ على تسلسل هرميي visually متوازن.
  • الإنشاء باستخدام لغة التصميم Material Design: إذا كنت بصدد إنشاء تطبيق باستخدام أحدث إصدار أوّلي من مكونات لغة التصميم Material Design والتنسيقات التكيُّفية، يمكنك إضافة التفاف "EnableXrComponentOverrides" للموافقة على التغييرات في الواقع الممتد في تطبيقك. يمكنك الاطّلاع على مستندات لغة التصميم Material Design للواقع الممتد لمعرفة المزيد.

يوفّر Jetpack Compose لتطبيقات الواقع الممتد مكونات جديدة تدير تحسينات الواقع الممتد بدلاً منك. على سبيل المثال، يمكنك استخدام 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(spatialElevationLevel = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

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

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

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

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

شريط التنقّل غير المرتبط بمكان معيّن

شريط التنقّل غير المرتبط بمكان معيّن

شريط التنقّل المكاني (المعدّ للواقع الممتد)

شريط التنقّل المكاني (المعدّ للواقع الممتد)

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

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Top
) {
    NavigationRail()
}
Orbiter.kt

النقاط الرئيسية حول الأقمار الصناعية المدارية

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

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

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

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

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

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

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

يظهر تطبيقك تلقائيًا بلوحة واحدة في "مساحة المنزل". تعرَّف على كيفية التبديل بين "المساحة الرئيسية" و"المساحة الكاملة". لعرض هذا المحتوى في "المساحة الكاملة"، يمكنك استخدام SpatialPanel.

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

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

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

يمكنك استخدام لوحة مكانية واحدة لواجهة مستخدم تطبيقك، أو يمكنك نقل واجهة المستخدم ثنائية الأبعاد إلى لوحات مكانية متعددة. إذا اخترت استخدام عدة لوحات لملف برمجي واجهة مستخدم تطبيقك، يمكنك تحديد موضع اللوحات وتدويرها (على غرار وضع ملف برمجي واجهة مستخدمك في تنسيق ثنائي الأبعاد). ستبدأ بتصميم واضح لما تريد إنجازه، ثم يمكنك استخدام واجهات برمجة التطبيقات لتصميم واجهة المستخدم المكانية (SpatialBox وSpatialRow SpatialColumn وSpatialLayoutSpacer و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

التحقّق من الإمكانات المكانية

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

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

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

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

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

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

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

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