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

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

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

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

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

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

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

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

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

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

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

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

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

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

Android XR में टारगेट

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

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

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

पक्का करें कि आपने होवर स्टेट जोड़ी हों

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

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

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

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

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

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

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

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

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

सुझाव

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

पैनल की डेप्थ से जुड़ी गतिविधियां

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

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

• 1024 डीपी को 1556.24 मिलीमीटर माना जाता है
• 720 डीपी को 1093.66 मिलीमीटर माना जाता है
• फ़िज़िकल रिएलिटी में 1 मीटर = एक्सआर में 1 मीटर

बटन और आइकॉन

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

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

रंग

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

डिसप्ले के हिसाब से रंग को ऑप्टिमाइज़ करना

तार वाले एक्सआर स्मार्ट ग्लास पर डिसप्ले, एक्सआर हेडसेट की स्क्रीन से अलग तरीके से काम करता है. वायर्ड एक्सआर ग्लास को एक प्रोजेक्टर के तौर पर देखें, जो आपकी स्क्रीन को बदलने के बजाय साफ़ लेंस पर रोशनी डालता है.

• हेडसेट, दुनिया को बदल देते हैं: ये हेडसेट, कैमरे का इस्तेमाल करके कमरे की इमेज कैप्चर करते हैं और उसे आपको ओपेक स्क्रीन पर दिखाते हैं. अगर ऐप्लिकेशन को काला रंग दिखाना है, तो वह पिक्सल बंद कर देता है. इससे एक गहरा काला धब्बा बन जाता है, जो उसके पीछे की दुनिया को ब्लॉक कर देता है.
• तार वाले एक्सआर स्मार्ट ग्लास से दुनिया को देखा जा सकता है: इनकी मदद से, कमरे को सीधे तौर पर देखा जा सकता है. डिसप्ले, उस व्यू के ऊपर रोशनी डालता है. पिक्सल की मदद से "अंधेरा" नहीं किया जा सकता. हालांकि, हार्डवेयर डिमिंग की सुविधा का इस्तेमाल करके, लेंस को धुंधला किया जा सकता है, ताकि बाहर की दुनिया न दिखे.

पारदर्शिता के लिए डिज़ाइन करना

तार वाले एक्सआर स्मार्ट ग्लास पर डिसप्ले ऐडिटिव होता है. इसलिए, आपके चुने गए रंगों से सीधे तौर पर यह तय होता है कि आपका इंटरफ़ेस कितना सॉलिड या पारदर्शी दिखेगा.

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

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

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

मटीरियल डिज़ाइन की कलर स्कीम के बारे में ज़्यादा जानें.

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

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

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

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

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

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

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

OpenXR™ और OpenXR का लोगो, The Khronos Group Inc. के ट्रेडमार्क हैं. इन्हें चीन, यूरोपियन यूनियन, जापान, और यूनाइटेड किंगडम में ट्रेडमार्क के तौर पर रजिस्टर किया गया है.