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

​​

يعمل تطبيق Android ثنائي الأبعاد المتوافق مع الأجهزة الجوّالة أو الشاشات الكبيرة تلقائيًا في Android 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()
}

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

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

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

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

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

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

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

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

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

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

شريط التنقّل غير المرتبط بمكان معيّن
شريط التنقّل المُعدّ للواقع المعزّز (XR)

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

// Previous approach
NavigationRail()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • تجنَّب تداخل اللوحات التي قد تمنع المستخدم من الاطّلاع على معلومات مهمة.
  • تجنَّب إرباك المستخدم باللوحات.
  • تجنَّب وضع اللوحات في مواضع غير مريحة أو غير ملحوظة. مثال: يصعب ملاحظة اللوحات التي يتم وضعها خلف المستخدم.
  • لمزيد من المعلومات حول تطوير واجهة المستخدم المكانية، يمكنك الاطّلاع على الإرشادات الكاملة.
المحتوى غير المرتبط بمكان معيّن
عناصر تحكّم في الوسائط مُعدّة للواقع المكاني (مُعدّة للواقع المعزّز) ضمن مركبة مدارية ومحتوى مُقسَّم إلى عدة لوحات مكانية
SpatialRow(curveRadius = 825.dp) {
    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()
    }
}

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

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

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

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

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

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

إضافة تصاميم ثلاثية الأبعاد

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

إضافة نماذج ثلاثية الأبعاد باستخدام SceneViewer

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

إضافة نماذج ثلاثية الأبعاد مباشرةً باستخدام "مجموعة العناصر"

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