वर्चुअल पेट स्क्रीन लेआउट कैसे चुनें: रेट्रो एलसीडी या मॉडर्न हाइब्रिड?

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

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

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

खिलाड़ी के सबसे अधिक दोहराए जाने वाले कार्य को एक छोटे क्रम के रूप में लिखें: उदाहरण के लिए, किसी ज़रूरत को देखना, संबंधित क्रिया खोलना, उसे चुनना और जो हुआ उसकी पुष्टि करना। डिस्प्ले फ्रेम के अंदर उस क्रम को स्केच करें। यदि यह क्रम बिना छोटे लेबलों, ओवरलैपिंग प्रतीकों या बार-बार मेनू बदलने के बिना दिखाई दे सकता है, तो एक रेट्रो एलसीडी संरचना पर्याप्त हो सकती है।

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

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

एक रेट्रो लेआउट तब बहुत उपयुक्त होता है जब पिक्सेल आर्ट इच्छित लुक का केंद्र हो, पेट छोटे पैमाने पर भी सुपाठ्य बना रहे, और सामान्य क्रियाएं इतनी कम हों कि उन्हें सीधे दिखाया या एक्सेस किया जा सके। इसका सीमित स्टेज पेट और उसकी स्थिति को सुसंगत महसूस करा सकता है। यह डिज़ाइन को एक स्पष्ट सीमा भी देता है: द्वितीयक प्रणालियां जानबूझकर किए गए समझौते के बिना मुख्य दृश्य में भीड़भाड़ नहीं कर सकती हैं।

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

यह शैली तब अनुपयुक्त हो जाती है जब प्रत्येक नया फ़ीचर एक और छोटा स्टेटस मार्क या संक्षिप्त नाम जोड़ता है। यदि खिलाड़ियों को होम स्क्रीन को समझने के लिए किसी लेजेंड की आवश्यकता होती है, या यदि बढ़ते डैशबोर्ड के लिए जगह बनाने के लिए पेट को छोटा कर दिया जाता है, तो हो सकता है कि कॉम्पैक्ट फ्रेम पर बहुत अधिक बोझ पड़ रहा हो।

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

पहले एक संकीर्ण-स्क्रीन (नैरो-स्क्रीन) व्यवस्था निर्धारित करें। पेट, सबसे महत्वपूर्ण स्थिति और प्राथमिक क्रिया को उपलब्ध रखें; द्वितीयक जानकारी को स्पष्ट रूप से नामित पैनल या मेनू में ले जाएं। व्यापक स्क्रीन के लिए, सहायक विवरण प्रकट करें या दृश्य के बगल में एक सूची रखें। क्रियाओं के क्रम और नामों को सुसंगत रखें ताकि लेआउट परिवर्तन से एक ही कार्य एक अलग प्रणाली जैसा न लगे।

पूरी रेट्रो संरचना को तब तक स्केल न करें जब तक कि वह एक बड़े डिस्प्ले को न भर दे। इससे अजीब खाली जगह छूट सकती है या कंट्रोल्स असहज रूप से दूर हो सकते हैं। इसके बजाय, यह तय करें कि किन हिस्सों को बड़ा होना चाहिए, किन्हें एक सीमित दृश्य बने रहना चाहिए, और कौन सी अतिरिक्त जानकारी वास्तव में मदद करती है। मटेरियल डिज़ाइन का लेआउट मार्गदर्शन इसी तरह लेआउट को इनपुट, उपकरणों और स्क्रीन तत्वों के अनुकूल होने के रूप में वर्णित करता है, जिसमें रिस्पॉन्सिव मार्जिन, कॉलम और क्षेत्र होते हैं (लेआउट को समझना)।

वर्तमान डिज़ाइन के लिए प्रत्येक कथन को "हाँ", "आंशिक रूप से", या "नहीं" के रूप में रेट करें। यह एक व्यावहारिक चेकलिस्ट है, कोई सत्यापित स्कोरिंग साधन नहीं।

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

पहले तीन बिंदुओं पर अधिकतर "हाँ" होना रेट्रो-फर्स्ट लेआउट का पक्ष लेता है। परिवर्तनीय जानकारी या पठनीय लेबल की आवश्यकता पर "हाँ" होना हाइब्रिड का पक्ष लेता है। यदि उत्तर विभाजित हैं, तो एक निश्चित पिक्सेल-आर्ट पेट विंडो और एक अलग, सरल स्थिति-और-क्रिया क्षेत्र के साथ एक हाइब्रिड का प्रोटोटाइप बनाएं। यह दृश्य को संरक्षित रखता है जबकि सहायक इंटरफ़ेस को अनुकूलित होने देता है।

समान पेट, स्थिति और कार्य का उपयोग करते हुए, प्रत्येक गंभीर विकल्प के लिए एक प्रतिनिधि स्क्रीन बनाएं। केवल सबसे साफ़ निष्क्रिय स्क्रीन ही नहीं, बल्कि सबसे अधिक जानकारी वाली सामान्य स्थिति को भी शामिल करें। स्केच से अपरिचित कुछ लोगों से पेट की वर्तमान स्थिति की पहचान करने और मुख्य कार्य को पूरा करने के लिए कहें। ध्यान दें कि वे कहाँ झिझकते हैं, किसी प्रतीक को गलत पढ़ते हैं, या किसी क्रिया को नज़रअंदाज़ करते हैं; यह मानने के बजाय कि शैली स्वयं समस्याओं को हल करती है, देखी गई समस्याओं के आधार पर लेआउट बदलें।

सबसे छोटे लक्षित आकार पर, व्यापक आकार पर, और यदि इंटरफ़ेस इसका समर्थन करता है तो बड़े टेक्स्ट के साथ परीक्षण करें। यदि अनुभव कीबोर्ड द्वारा संचालित होता है, तो कीबोर्ड फ़ोकस की जांच करें, और सुनिश्चित करें कि खिलाड़ी द्वारा कंट्रोल्स में नेविगेट करते समय यह दिखाई दे। पॉइंटर-संचालित वेब इंटरफ़ेस के लिए, WCAG 2.2 अपने AA मानदंड के लिए परिभाषित अपवादों के साथ, 24 गुणा 24 CSS पिक्सेल का न्यूनतम लक्ष्य आकार निर्धारित करता है; यह अपने AAA फ़ोकस उपस्थिति मानदंड के तहत 3:1 कंट्रास्ट अनुपात और फ़ोकस संकेतकों के लिए न्यूनतम क्षेत्र भी निर्दिष्ट करता है (W3C का WCAG 2.2 अवलोकन)। ये मानदंड उपयोगी जांच हैं, लेकिन वे यह तय नहीं करते कि खेल के लिए कौन सी विज़ुअल शैली उपयुक्त है।

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

• WCAG 2.2 में नया क्या है — W3C वेब एक्सेसिबिलिटी इनिशिएटिव
• रिस्पॉन्सिव डिज़ाइन तकनीकें — Microsoft Learn
• लेआउट को समझना — मटेरियल डिज़ाइन