• AI चश्मों के लिए पारदर्शी डिस्प्ले हेतु नया डिज़ाइन सिस्टम Jetpack Compose Glimmer ऐसे इंटरफेस को संभव बनाता है जो वास्तविक दुनिया के ऊपर स्वाभाविक रूप से ओवरले हो जाते हैं
  • मौजूदा Material Design की अपारदर्शी सतहें और शैडो पारदर्शी डिस्प्ले पर प्रकाश फैलाव (halation) और पठनीयता में कमी पैदा करते हैं, इसलिए डार्क सतहों और ब्राइट कंटेंट पर केंद्रित नए दृष्टिकोण की ज़रूरत है
  • टेक्स्ट को दृश्य कोण (visual angle) के आधार पर डिज़ाइन किया गया है, ताकि लगभग 0.6 डिग्री या उससे अधिक आकार और Google Sans Flex की optical size tuning के साथ पढ़ने में आसान रूप बना रहे
  • रंगों को additive contrast ratio के आधार पर समायोजित किया जाता है, जिससे वास्तविक पृष्ठभूमि की चमक बदलने पर भी स्थिर neutral palette और उच्च contrast बना रहता है
  • मूवमेंट को उपयोगकर्ता की परिधीय दृष्टि का सम्मान करने वाले स्मूद ट्रांज़िशन के रूप में डिज़ाइन किया गया है, ताकि तकनीक ध्यान मांगने के बजाय वास्तविकता के साथ सामंजस्य में घुल-मिल जाए

Jetpack Compose Glimmer और पारदर्शी डिस्प्ले डिज़ाइन की पृष्ठभूमि

  • Jetpack Compose Glimmer Android XR (extended reality) वातावरण के लिए एक नया डिज़ाइन सिस्टम है, जिसका उपयोग AI चश्मों के लिए इंटरफेस विकसित करने में किया जाता है
    • पारंपरिक स्क्रीन-आधारित डिज़ाइन से अलग, इसमें वास्तविक दुनिया ही कैनवस बन जाती है
    • इंटरफेस केवल ज़रूरत पड़ने पर दिखाई देता है और ज़रूरत न होने पर गायब हो जाता है, यानी यह ambient डिस्प्ले की अवधारणा की ओर बढ़ता है
  • पारदर्शी डिस्प्ले में रंग, typography, shadow जैसी बुनियादी चीज़ें पारंपरिक तरीके से काम नहीं करतीं
    • उदाहरण के लिए, काला रंग पारदर्शी महसूस होता है, और हल्के रंग आसमानी पृष्ठभूमि में गायब हो जाते हैं
    • इन विशेषताओं के कारण मौजूदा डिज़ाइन सिद्धांतों को मूल रूप से फिर से परिभाषित करना पड़ा

हाथ की दूरी पर इंटरफेस

  • डिस्प्ले लेंस की सतह पर नहीं बल्कि लगभग 1 मीटर की दूरी (हाथ की लंबाई) पर प्रोजेक्ट होकर दिखाई देता है
    • उपयोगकर्ता को वास्तविक दुनिया से इस focal plane पर नज़र शिफ्ट करनी पड़ती है, और यह सचेत तथा सक्रिय attention shift की क्रिया है
  • यही फोकस-शिफ्ट डिज़ाइन की मुख्य चुनौती है, और इससे ऐसा इंटरफेस बनाने की दिशा मिलती है जो कुछ पलों के लिए भी ध्यान देने लायक हो

प्रकाश को संभालने का तरीका

  • पारदर्शी डिस्प्ले में सिर्फ प्रकाश जोड़ा जा सकता है, अंधेरा नहीं किया जा सकता
    • इसलिए काला रंग एक रंग नहीं बल्कि प्रकाश-रहित स्थान (पारदर्शी क्षेत्र) की तरह काम करता है
  • मौजूदा Material Design की चमकदार सतहें और शैडो पारदर्शी स्क्रीन पर चमक और बैटरी खपत बढ़ाते हैं
    • ब्राइट हिस्से फैल जाते हैं, जिससे टेक्स्ट धुंधला होने वाला halation प्रभाव पैदा होता है
  • समाधान के रूप में काले को ‘container’ के रूप में फिर से परिभाषित किया गया और डार्क सतहों पर ब्राइट कंटेंट रखा गया
    • गहराई वाले डार्क शैडो का उपयोग करके hierarchy और spatial depth व्यक्त की गई
    • बटन, कार्ड, सिस्टम slider आदि को hierarchical depth levels से अलग किया गया

टेक्स्ट पठनीयता और दृश्य कोण

  • टेक्स्ट को pixel units के बजाय दृश्य कोण (visual angle) के आधार पर डिज़ाइन किया गया
    • 0.6 डिग्री या उससे अधिक आकार को न्यूनतम पठनीयता मानक माना गया
  • Google Sans Flex फ़ॉन्ट के Optical Size axis का उपयोग करके अक्षरों के भीतर की जगह और spacing को समायोजित किया गया
    • ‘a’, ‘e’ जैसे अक्षरों की अंदरूनी जगह बढ़ाई गई, और ‘i’, ‘j’ के dot spacing को बढ़ाकर तेज़ नज़र पहचान को समर्थन दिया गया
    • कोड में अलग से letter spacing सेट किए बिना भी स्वचालित दृश्य अनुकूलन किया जाता है
  • सिफारिश: मोटे और अधिक spacing वाले फ़ॉन्ट का उपयोग करें, पतले और छोटे टेक्स्ट से बचें

रंग और contrast

  • क्योंकि वास्तविक दुनिया ही पृष्ठभूमि बनती है, brightness और रंग लगातार बदलते रहते हैं
    • टीम ने कंटेंट की visibility सुनिश्चित करने के लिए additive contrast ratio को मापा
  • उच्च saturation वाले रंग वास्तविक पृष्ठभूमि में गायब हो सकते हैं या फीके दिख सकते हैं
    • इसलिए Glimmer ने neutral और डार्क सतह + ब्राइट कंटेंट को मूल संरचना के रूप में अपनाया
  • desaturated palette से वातावरण बदलने पर भी स्थिर contrast बनाए रखा गया
    • रंगों का उपयोग मुख्यतः बटन जैसे attention elements को उभारने के लिए सीमित रूप से किया गया

मूवमेंट और attention का संतुलन

  • head-up display में मूवमेंट बाधा नहीं बनना चाहिए
    • क्योंकि कंटेंट कभी भी दृश्य क्षेत्र में आ सकता है, इसलिए स्मूद और सम्मानजनक ट्रांज़िशन ज़रूरी हैं
  • शुरुआती 500ms ट्रांज़िशन बहुत छोटा था और लोगों को महसूस नहीं हुआ, इसलिए इसे लगभग 2 सेकंड के धीमे ट्रांज़िशन में बदला गया
    • इससे उपयोगकर्ता की परिधीय दृष्टि (periphery) से केंद्र की ओर नज़र स्वाभाविक रूप से आती है
  • उपयोगकर्ता इनपुट (voice, gesture) के लिए तुरंत feedback आवश्यक है
    • इसके लिए focus ring और highlight का उपयोग करके low-latency responsiveness सुनिश्चित की गई

वास्तविकता और तकनीक का सामंजस्य

  • पारदर्शी डिस्प्ले डिज़ाइन का मूल ध्यान और एकाग्रता जैसे मानवीय कारक हैं
    • Jetpack Compose Glimmer का लक्ष्य ऐसा अनुभव देना है जिसमें तकनीक ध्यान न मांगे, बल्कि वास्तविकता को बेहतर बनाए
  • यह दृष्टिकोण AI चश्मों को सिर्फ जानकारी दिखाने वाले टूल से आगे ले जाकर, वास्तविकता की समझ को बेहतर बनाने वाली दिशा में विकसित करता है
  • Google डेवलपर्स के लिए AI चश्मा डिज़ाइन गाइडलाइन और Figma Design Kit प्रदान करता है

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.