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

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

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

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

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

अपने ऐप्लिकेशन के विज़ुअल डिज़ाइन की जांच करना ज़रूरी है, ताकि यह पक्का किया जा सके कि उपयोगकर्ता को आसान और सुलभ अनुभव मिल रहा है. अलग-अलग 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 का इस्तेमाल करता है.

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

सुझाव

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

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

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

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

• 1024dp को 1556.24 मिलीमीटर माना जाता है
• 720dp को 1,093.66 मिलीमीटर माना जाता है
• असल दुनिया में 1 मीटर = XR में 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 स्पेस में हैरारकी बनाने के लिए, गहराई के संकेत और स्केल का इस्तेमाल करें.
• पक्का करें कि उपयोगकर्ता के बैकग्राउंड के हिसाब से टेक्स्ट साफ़ तौर पर दिख रहा हो: ज़्यादा वज़न वाले टेक्स्ट से ज़्यादा कंट्रास्ट मिलता है. आस-पास के माहौल के रंग, रोशनी, और जटिलता के हिसाब से अडजस्ट करें.
• अडैप्टिव टाइपोग्राफ़ी का इस्तेमाल करें: हो सकता है कि पैनल, उपयोगकर्ता के लिए बहुत करीब हों, बहुत दूर हों, और देखने के लिए अजीब ऐंगल पर हों.
• चलने वाले ऑब्जेक्ट से जुड़े टेक्स्ट की संख्या कम करें: इससे मोशन सिकनेस हो सकती है.

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

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