स्केल, साइज़, और विज़ुअल डिज़ाइन

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

OpenXR, नेटिव Android API या WebXR का इस्तेमाल करके, Android XR ऐप्लिकेशन बनाए जा सकते हैं. इस पेज पर दिए गए विज़ुअल डिज़ाइन के सुझाव, किसी भी प्लैटफ़ॉर्म के लिए लागू होते हैं.

• Unity, OpenXR या WebXR ऐप्लिकेशन के लिए: आपके पास अपनी पसंद के मुताबिक डिज़ाइन लैंग्वेज इस्तेमाल करने का विकल्प है. Material Design लाइब्रेरी सिर्फ़ Android ऐप्लिकेशन के लिए उपलब्ध है. इसके बावजूद, डिज़ाइन के सुझावों का पालन करके, रंग, स्पेस, स्केल, बटन, और टाइपोग्राफ़ी को लागू किया जा सकता है.

• Android ऐप्लिकेशन के लिए: 2D मोबाइल या बड़ी स्क्रीन वाले Android ऐप्लिकेशन, डेवलपमेंट में ज़्यादा बदलाव किए बिना, फ़ुल स्पेस की सुविधाओं का फ़ायदा ले सकते हैं. ज़्यादा एक्सआर असर के लिए, स्पेशल यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें. ऐप्लिकेशन का बेहतर अनुभव देने के लिए, अपने ऐप्लिकेशन में 3D मॉडल और एनवायरमेंट भी जोड़े जा सकते हैं.

  Android XR में, मौजूदा Android ऐप्लिकेशन के डिज़ाइन की भाषा को बनाए रखा जा सकता है. नए ऐप्लिकेशन या फिर डिज़ाइन में बदलाव करने के लिए, यूज़र इंटरफ़ेस (यूआई) के साइज़, सुलभता, टाइपोग्राफ़ी, कलर स्कीम, और कॉम्पोनेंट के लिए, Material Design के दिशा-निर्देशों का पालन करें. इससे आपके ऐप्लिकेशन को Android के जाने-पहचाने और बेहतर डिज़ाइन के साथ-साथ, इस्तेमाल करने में आसानी के फ़ायदे मिलेंगे.

  अगर आपने Material Design 3 लाइब्रेरी का इस्तेमाल करके अपना Android ऐप्लिकेशन बनाया है, तो इसके कॉम्पोनेंट और अडैप्टिव लेआउट में, आसानी से स्पेस के हिसाब से यूज़र इंटरफ़ेस (यूआई) के व्यवहार जोड़े जा सकते हैं.

अपने ऐप्लिकेशन के विज़ुअल डिज़ाइन की जांच करने का तरीका

अपने ऐप्लिकेशन के विज़ुअल डिज़ाइन की जांच करना ज़रूरी है, ताकि यह पक्का किया जा सके कि उपयोगकर्ता को आसान और सुलभ अनुभव मिले. अलग-अलग XR प्लैटफ़ॉर्म और एनवायरमेंट में टेस्ट करने का तरीका यहां बताया गया है.

एमुलेटर, सिम्युलेटर, और असली डिवाइसों का इस्तेमाल करना

• अगर कोई Android ऐप्लिकेशन डेवलप किया जा रहा है, तो Android XR एमुलेटर पर अपने ऐप्लिकेशन की जांच करें. इससे आपको संभावित समस्याओं का पता लगाने और किसी डिवाइस के बिना, तेज़ी से बदलाव करने में मदद मिलती है.

विज़ुअल डिज़ाइन की जांच से जुड़ी चेकलिस्ट

• किसी भी तरह की गति या ऐनिमेशन की जांच करें, ताकि यह पक्का किया जा सके कि वे मोशन सिकनेस को ट्रिगर न करते हों. यह देखें कि ट्रांज़िशन आसानी से हो रहे हों, फ़्रेम रेट स्थिर हों, और गति का अनुमान लगाया जा सकता हो.
• असल दुनिया की सेटिंग में पासथ्रू की सुविधा आज़माएं, ताकि यह पक्का किया जा सके कि वर्चुअल एलिमेंट, आस-पास के माहौल के साथ अच्छी तरह से ब्लेंड हो रहे हैं.
• अपने ऐप्लिकेशन को अलग-अलग रोशनी की स्थितियों में टेस्ट करें. इनमें तेज़ और धीमी रोशनी वाले माहौल भी शामिल हैं.
• अलग-अलग दूरी और ऐंगल से टेक्स्ट को पढ़ने में आसानी है या नहीं, यह देखें.
• सुलभता और आराम के लिए कलर स्कीम का आकलन करें.

लोगों के सुझाव, शिकायत या राय पाना

सुधार के लिए, उपयोगकर्ता जांच करें. बेहतर नतीजे पाने के लिए, ऐसे उपयोगकर्ताओं को शामिल करें जिनके पास अलग-अलग लेवल के एक्सआर अनुभव और विज़ुअल क्षमताएं हों.

Android XR में टारगेट

किसी XR ऐप्लिकेशन में, टारगेट वह हिस्सा होता है जिस पर टैप किया जा सकता है या जिस पर कर्सर घुमाया जा सकता है. बड़े टारगेट से, सटीक, आसान, और बेहतर तरीके से इस्तेमाल किया जा सकता है. अपने ऐप्लिकेशन को सुलभ बनाने के लिए, Material Design के टारगेट से जुड़े दिशा-निर्देशों का पालन करें. ये Android, Unity, OpenXR, और WebXR ऐप्लिकेशन के साथ काम करेंगे. अगर आपका ऐप्लिकेशन पहले से ही Material Design के सुझावों का पालन करता है, तो आपके टारगेट साइज़, कम से कम ज़रूरी शर्तों को पूरा करते हैं. हालांकि, 56dp सबसे सही साइज़ है.

सभी इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट में इन बातों का ध्यान रखना चाहिए:

• सुझाया गया टारगेट: 56dp x 56dp या इससे बड़ा
• विज़ुअल अवर्डेंस: 48dp x 48dp या इससे बड़ा
• टारगेट और विज़ुअल अवर्डेंस के बीच का ऑफ़सेट: 4dp
• सटीक इंटरैक्शन के लिए, अलग-अलग यूज़र इंटरफ़ेस (यूआई) एलिमेंट के पॉइंटर टारगेट एक-दूसरे से ओवरलैप नहीं होने चाहिए

पक्का करें कि आपने कर्सर घुमाने पर दिखने वाली स्थितियां जोड़ी हों

इंटरैक्टिव कॉम्पोनेंट के लिए, बुनियादी इंटरैक्टिव स्थितियों के अलावा, हॉवर और फ़ोकस की स्थितियों को भी शामिल करें, ताकि इंटरनेट का इस्तेमाल करने वाले ज़्यादा से ज़्यादा लोगों के लिए कॉन्टेंट को ऐक्सेस करना आसान हो. कर्सर घुमाने पर दिखने वाले स्टेटस, सभी के लिए मददगार हो सकते हैं. ये खास तौर पर उन उपयोगकर्ताओं के लिए ज़रूरी हैं जो यूज़र इंटरफ़ेस (यूआई) एलिमेंट चुनने के लिए, पॉइंटर इनपुट पर भरोसा करते हैं.

सिस्टम में आंखों की गति को ट्रैक करने की सुविधा चालू करने में, कर्सर घुमाने की स्थितियों की अहम भूमिका होती है. हालांकि, ऐप्लिकेशन के लिए, ऐप्लिकेशन पर कर्सर घुमाने की स्थिति का ऐक्सेस नहीं होता, जब ऐप्लिकेशन पर ऐप्लिकेशन चालू होता है. ऐसा, उपयोगकर्ता की निजता को सुरक्षित रखने और डेटा शेयर होने से रोकने के लिए किया जाता है. सिस्टम, सिर्फ़ उपयोगकर्ता को दिखने वाली हाइलाइट की स्थिति दिखाएगा, ताकि यह बताया जा सके कि किन यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के साथ इंटरैक्ट किया जा सकता है.

टारगेट के बीच की दूरी

Material Design के मुताबिक, बटन के साथ-साथ टारगेट के बीच कम से कम 8dp की जगह होनी चाहिए. इस स्पेसिंग से यह पक्का होता है कि उपयोगकर्ता, इंटरैक्टिव एलिमेंट के बीच आसानी से अंतर कर सकें और अनजाने में किसी विकल्प को चुनने से बच सकें.

बटन के बीच की दूरी, उनके कॉन्टेक्स्ट और साइज़ के हिसाब से अलग-अलग हो सकती है. इन बातों का ध्यान रखें:

• बटन का साइज़: बड़े बटन के बीच ज़्यादा जगह होनी चाहिए, ताकि उन्हें साफ़ तौर पर देखा जा सके.
• बटन को ग्रुप में बांटना: एक जैसे फ़ंक्शन वाले बटन को एक साथ ग्रुप में बांटा जा सकता है. वहीं, एक जैसे फ़ंक्शन न करने वाले बटन को अलग-अलग ग्रुप में बांटना चाहिए.
• लेआउट: स्क्रीन के पूरे लेआउट से, बटन के बीच के स्पेस पर असर पड़ सकता है. उदाहरण के लिए, किसी टूलबार में बटन के बीच का अंतर, डायलॉग में बटन के बीच के अंतर से कम हो सकता है.

पैनल का साइज़ और स्केल

Android XR को इस तरह डिज़ाइन किया गया है कि आपके ऐप्लिकेशन को बड़ी आसानी से इस्तेमाल किया जा सके, उसे पढ़ा जा सके, और ज़्यादा से ज़्यादा लोग उसे ऐक्सेस कर सकें. बेहतर अनुभव के लिए, Android XR 0.868 dp-to-dmm का इस्तेमाल करता है.

पैनल का इस्तेमाल करने पर, आपका एक्सआर ऐप्लिकेशन उपयोगकर्ता से, फ़िज़िकल स्क्रीन से ज़्यादा दूर होगा. मान लें कि उपयोगकर्ता हेडसेट पहने हुए है. सबसे बेहतर अनुभव के लिए, मुख्य कॉन्टेंट को 41° फ़ील्ड ऑफ़ व्यू में रखें, ताकि उपयोगकर्ताओं को इंटरैक्ट करने के लिए अपना सिर न हिलाना पड़े.

सुझाव

• पैनल के कोने 32dp के गोल होते हैं. इस डिफ़ॉल्ट सेटिंग को बदला जा सकता है.

पैनल की डेप्थ के व्यवहार

• होम स्पेस: ऐप्लिकेशन, उपयोगकर्ता से 1.75 मीटर की दूरी पर लॉन्च होते हैं. डेवलपर इसकी सेटिंग में बदलाव नहीं कर सकते.
• पूरा स्पेस: डिफ़ॉल्ट रूप से, ऐप्लिकेशन उसी जगह पर खुलते हैं जहां वे होम स्पेस में थे. उपयोगकर्ता की जगह के आधार पर पैनल डालने के लिए, स्पेस लॉजिक का इस्तेमाल किया जा सकता है. हालांकि, हमारा सुझाव है कि पैनल को 1.75 मीटर की दूरी पर लॉन्च करें.

जब कोई ऐप्लिकेशन, उपयोगकर्ता से 1.75 मीटर की दूरी पर हो:

• 1024 डीपी को 1556.24 मिलीमीटर माना जाता है
• 720dp को 1,093.66 मिलीमीटर माना जाता है
• असल दुनिया में 1 मीटर = एक्सआर में 1 मीटर

बटन और आइकॉन

अगर आपके पास कोई मौजूदा Android ऐप्लिकेशन है, तो आपको Android XR के लिए खास कॉम्पोनेंट डिज़ाइन करने की ज़रूरत नहीं है. बटन और आइकॉन के लिए, Material Design के दिशा-निर्देशों का पालन करें. अगर आपके पास Unity, OpenXR या WebXR ऐप्लिकेशन है, तो अपने बटन और आइकॉन को पहले जैसा ही रखा जा सकता है या Material Design से प्रेरणा ली जा सकती है.

अगर आपको खुद के बटन या आइकॉन बनाने हैं, तो आसान फ़ॉर्म, साफ़ रेखाएं, बुनियादी आकार, और सीमित रंग पैलेट का विकल्प चुनें. बहुत ज़्यादा जानकारी वाले डिज़ाइन से बचें. अलग-अलग रिज़ॉल्यूशन और देखने की दूरी के हिसाब से, उन्हें स्केल किया जा सकता है और उन्हें आसानी से पढ़ा जा सकता है. सुलभता के लिए, पक्का करें कि कॉम्पोनेंट और उसके बैकग्राउंड के बीच का अंतर काफ़ी हो. साथ ही, स्क्रीन रीडर या अन्य सहायक टेक्नोलॉजी का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, टेक्स्ट के ब्यौरे या टूलटिप दें.

रंग

Android XR, Material Design के रंग सिस्टम का इस्तेमाल करता है, ताकि एक जैसा और आकर्षक इंटरफ़ेस मिल सके. XR के हिसाब से बेहतर विज़ुअल स्टाइल बनाने के लिए, ज़रूरत के मुताबिक कंट्रास्ट वाला डिज़ाइन बनाएं. साथ ही, संतुलित पैलेट चुनें और ऐसे रंगों का इस्तेमाल करें जिन्हें कलर विज़न की समस्या वाले लोग भी देख सकें. इसके अलावा, ऐसे रंगों के कॉम्बिनेशन का इस्तेमाल न करें जिनसे आंखों में दर्द या चक्कर आ सकता है.

XR में गहरे और हल्के रंग वाली थीम

गहरे और हल्के रंग वाली थीम का इस्तेमाल, Android मोबाइल ऐप्लिकेशन की तरह ही करें. उपयोगकर्ता, Android XR में गहरे और हल्के रंग वाली थीम के बीच स्विच कर सकते हैं. साथ ही, अपनी पसंद के हिसाब से विज़ुअल स्टाइल चुन सकते हैं.

Material Design की कलर स्कीम के बारे में ज़्यादा जानें.

एक्सआर टाइपोग्राफ़ी

XR में उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, फ़ॉन्ट को साफ़ तौर पर पढ़ा जा सकना ज़रूरी है. हमारा सुझाव है कि टेक्स्ट को बेहतर तरीके से पढ़ने के लिए, टाइपस्केल के विकल्पों का इस्तेमाल करें. इन विकल्पों में फ़ॉन्ट साइज़ 14dp या उससे ज़्यादा होना चाहिए. साथ ही, फ़ॉन्ट वेट सामान्य या उससे ज़्यादा होना चाहिए.

इस्तेमाल में आसान ऐप्लिकेशन बनाने के लिए, टाइपोग्राफ़ी के लिए Material Design के दिशा-निर्देशों का पालन करें.

XR में टाइपोग्राफ़ी के लिए सबसे सही तरीके

• अलग-अलग दूरियों के लिए साइज़: ध्यान रखें कि उपयोगकर्ता अलग-अलग जगहों से टेक्स्ट देखेंगे और उनका साइज़ भी अलग-अलग होगा. पक्का करें कि फ़ॉन्ट का साइज़ इतना बड़ा हो कि उसे दूर से पढ़ा जा सके.
• टेक्स्ट को उपयोगकर्ता के नज़रिए के हिसाब से रखें: इससे सिर को बहुत ज़्यादा हिलाने और गर्दन में दर्द होने से बचा जा सकता है.
• डेप्थ और स्केल का ध्यान रखें: 3D स्पेस में हैरारकी बनाने के लिए, डेप्थ के बारे में बताने वाले संकेत और स्केल का इस्तेमाल करें.
• पक्का करें कि उपयोगकर्ता के बैकग्राउंड के हिसाब से टेक्स्ट साफ़ तौर पर दिख रहा हो: ज़्यादा वज़न वाले टेक्स्ट से ज़्यादा कंट्रास्ट मिलता है. आस-पास के माहौल के रंग, रोशनी, और जटिलता के हिसाब से अडजस्ट करें.
• अडैप्टिव टाइपोग्राफ़ी का इस्तेमाल करें: ऐसा हो सकता है कि पैनल, उपयोगकर्ता के लिए बहुत करीब हों, बहुत दूर हों, और देखने के लिए अजीब ऐंगल पर हों.
• चलते-फिरते ऑब्जेक्ट पर टेक्स्ट जोड़ने की संख्या कम करें: इससे मोशन सिकनेस हो सकती है.

एक्सआर में सुलभ टाइपोग्राफ़ी

• पढ़ने में आसान फ़ॉन्ट चुनना: छोटे साइज़ और दूर से पढ़ने के लिए, ऐसे फ़ॉन्ट चुनें जिनमें अक्षर साफ़ तौर पर दिखें.
• अंग्रेज़ी के वाक्यों में, पहला वर्ण बड़ा (अपर केस में) रखें: अंग्रेज़ी के वाक्यों में, पहला वर्ण बड़ा (अपर केस में) रखें. इससे टेक्स्ट को पढ़ना आसान हो जाता है.
• लाइन की लंबाई सीमित करें: पढ़ने में आसानी हो, इसके लिए लाइन की लंबाई कम रखें.
• ऐसे रंग चुनें जो आसानी से देखे जा सकें: ऐसे रंगों के कॉम्बिनेशन का इस्तेमाल करें जो रंगों को अलग-अलग तरह से देखने वाले लोगों को आसानी से दिखें.
• ज़्यादा टेक्स्ट इस्तेमाल करने से बचें: टेक्स्ट के लिए ज़रूरत के मुताबिक जगह दें.
• टेक्स्ट स्केलिंग की अनुमति दें: उपयोगकर्ताओं को अपनी ज़रूरत के हिसाब से टेक्स्ट का साइज़ घटाने या बढ़ाने की अनुमति दें.