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

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

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

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

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

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

  • منح الأولوية للتوافق مع الشاشات الكبيرة: تأكَّد من أنّ واجهة مستخدِم تطبيقك تلتزم بمبادئ تصميم الشاشات الكبيرة للمساعدة في ضمان قراءة محتوى النص والمحتوى بوضوح في بيئات الواقع المعزّز (XR) الواسعة.
  • استخدام الميزات المكانية بشكل استراتيجي: حدِّد اللحظات الرئيسية في رحلة المستخدم في تطبيقك التي يمكن فيها دمج الميزات المكانية لتحسين التجربة والاستفادة من الإمكانات الفريدة للمنصة.
  • وضع اللوحات المكانية مع مراعاة راحة المستخدم: عند تصميم ملف شخصي باستخدام اللوحات المكانية، يجب وضعها على مسافة مريحة من المستخدم لتجنّب الشعور بالانزعاج أو الاقتراب الشديد.
  • استخدام واجهة مستخدِم قابلة للتكيّف مع التنسيقات المكانية: استخدِم مفاهيم واجهة المستخدِم القابلة للتكيّف، مثل panes (الألواح) وprogressive revealing (العرض التدريجي) لتقسيم التنسيق بفعالية إلى عدة ألواح مكانية، ما يؤدي إلى تحسين عرض المعلومات.
  • استخدام العناصر الدائرية للعناصر والأنماط الثابتة: احرِص على استخدام العناصر الدائرية لعناصر تجربة المستخدم الثابتة والسياقية، مثل عناصر التنقّل وعناصر التحكّم. الحدّ من استخدام العناصر الدوّارة للحفاظ على الوضوح وتجنّب الازدحام
  • استخدم الارتفاع المكاني بحكمة: طبِّق الارتفاع المكاني على المكونات المؤقتة التي تظلّ ثابتة ولا يتم التمرير معها مع المحتوى. تجنَّب تسليط الضوء على مساحات كبيرة لتجنُّب الشعور بعدم الراحة عند النظر إلى الشاشة والحفاظ على تسلسل هرميي 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

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

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

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

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

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

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

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

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

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

// 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 للتحقّق من العناصر التي يجب نقلها إلى اللوحات، والأنماط التي يجب تجنُّبها.
  • اتّبِع أفضل الممارسات المتعلّقة بموضع اللوحة المكانية:
    • يجب أن تظهر اللوحات في منتصف الشاشة على مسافة 1.5 متر من عيون المستخدم.
    • يجب أن يظهر المحتوى في منتصف مجال رؤية المستخدم بزاوية 41 درجة.
  • تبقى اللوحات في مكانها عندما ينتقل المستخدم. لا تتوفّر ميزة الربط إلا لميزة العرض المباشر.
  • يجب الالتزام بالزوايا المستديرة التي يبلغ قطرها 32 dp والتي ينصح بها النظام للوحات.
  • يجب أن تكون مساحات اللمس 56 بكسل مستقل الكثافة وألّا تقلّ عن 48 بكسل مستقل الكثافة.
  • يجب الحفاظ على نِسب التباين لتحسين مقروءية النص، خاصةً إذا كنت تستخدم أي خلفيات شفّافة.
  • اتّبِع مبادئ ألوان تصميم Android واستخدِم نظام ألوان Material Design لتنفيذ المظهرَين الداكن والفاتح لتطبيقك.
  • استخدام واجهة برمجة التطبيقات الخاصة باللوحات المكانية مع عناصر واجهة المستخدم الحالية

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

يظهر تطبيقك تلقائيًا بلوحة واحدة في "مساحة المنزل". تعرَّف على كيفية التبديل بين "المساحة الرئيسية" و"المساحة الكاملة". لعرض هذا المحتوى في "شاشة ملء الشاشة"، يمكنك استخدام 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

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

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

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

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

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