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

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 में टारगेट

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

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

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

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

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

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

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

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

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

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

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

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

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

सुझाव

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

पैनल की डेप्थ से जुड़े व्यवहार

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

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

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

बटन और आइकॉन

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

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

रंग

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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