धार गियर

इंटरफ़ेस और UX को मोबाइल उपकरणों पर कैसे लागू किया जाता है

1) सिद्धांत: मोबाइल यूएक्स डेस्कटॉप से कैसे भिन्न होता है

एक हाथ का नियंत्रण। मुख्य सीटीए (शर्त, दोहराएं, स्पष्ट) "अंगूठे क्षेत्र" (स्क्रीन का निचला तीसरा) में हैं।

ऊर्ध्वाधर पहले। वर्टिकल टेबल/स्ट्रीम - बेस केस; क्षैतिज को "मूवी मोड" के रूप में बनाए रखा जाता है।

कम क्लिक अधिक समझ में आता है। किसी भी शर्त को ≤2 क्रियाएं लेनी चाहिए: फील्ड/सेल द्वारा मूल्य → टैप का चयन।

गति सुंदरता से अधिक महत्वपूर्ण है। UI में 60 fps, न्यूनतम लेआउट शिफ्ट, "लाइट" एनिमेशन।

पारदर्शिता। राउंड टाइमर, कनेक्शन की स्थिति, देरी - स्पष्ट और विनम्रतापूर्वक।

2) स्क्रीन फ्रेम: कहां रखना है

ऊपरी क्षेत्र (सूचनात्मक):

तालिका नाम, सीमा, खिलाड़ी काउंटर, नेटवर्क/विलंब संकेतक, नियम/सेटिंग प्रतीक.

मध्य क्षेत्र (सामग्री):

वीडियो स्ट्रीम (WebRTC/LL-HLS) या 3 डी टेबल, एक इशारे के साथ कैमरा/कोण स्विच करना।
ओवरले: टाइमर, हाल के दौर के परिणाम, दांव की पॉप-अप पुष्टि।

निचला क्षेत्र (नियंत्रण):

सट्टेबाजी पैनल: मूल्यवर्ग, त्वरित बटन "रिपीट", "डबल", "क्लियर"।
छिपा हुआ बटुआ पर्दा (संतुलन, त्वरित जमा - कैशियर के पास जाएं)।
तालिका/खेल स्विच (क्षैतिज स्क्रॉल)।

टच जोन द्वारा मार्गदर्शन:

कम से कम 48dp (Android )/44 pt (iOS) प्रति इंटरैक्टिव, बटन के बीच इंडेंटेशन।
हम सुरक्षित क्षेत्रों (पायदान, इशारा नेविगेशन) को ध्यान में रखते हैं।

3) तेज दांव: माइक्रो-इंटरैक्शन

दो चरण: टेबल पर मैदान पर एक अंकित मूल्य चुनना → टैप। दोहराया नल - शर्त को एक ही अंकित मूल्य द्वारा बढ़ाता है।

लंबा प्रेस: संदर्भ मेनू (मिटाएँ, दोगुना, वितरित करें)।

मूल्यवर्ग पैनल पर नीचे स्वाइप करें: विस्तारित मान/सट्टेबाजी इतिहास दिखाएँ।

हैप्टिका: शर्त स्वीकार करते समय हल्का कंपन, अधिक स्पष्ट - जब मना/देर से शर्त।

स्थिति दृश्यता: "दांव स्वीकार करें "/" बंद "- रंग/आइकन + स्टॉपवॉच।

4) वीडियो और ओवरले: ताकि हस्तक्षेप न करें, लेकिन मदद करें

ऑन-डिमांड कीफ्रेम। "साबुन" से बचने के लिए गुणवत्ता तत्काल आईडीआर स्विच करते समय।

पारभासी कार्ड। टाइमर और परिणाम - 70-85% पारदर्शिता, टाइमर द्वारा ऑटो-छिपाएं।

इशारा:

वीडियो - स्विचिंग कैमरा/कोण पर डबल टैप करें।
पिंच - वीडियो स्केल (सीटीए को ओवरलैप किए बिना)।
"एज" सूचनाएँ। जीत और प्रोमो की पुश-लाइनें - शीर्ष पर, सट्टेबाजी पैनल को ओवरलैप न करें।

5) नेटवर्क की स्थिति और देरी

स्थिति की गोली: "ऑनलाइन 1। 3 सी "/" खराब नेटवर्क 4। 8 सी।" प्रतीक का रंग थ्रेसहोल्ड द्वारा बदलता है।

नरम गिरावट: पहले एफपीएस (60→48→30) को कम करें, फिर रिज़ॉल्यूशन (1080p→720p→540p), बफर को + 200-300 एमएस तक बढ़ाएं।

ऑटो-फोलबैक: अस्थिर नेटवर्क के साथ दर्शक मोड के लिए WebRTC → LL-HLS; "देर से" दांव अवरुद्ध।

ऑफ़ लाइन स्क्रीन: शर्त संदर्भ को सहेजना, एक समझने योग्य कारण ("कोई कनेक्शन नहीं") और "दोहराएं" बटन।

6) जिम्मेदार खेल और नियंत्रण

हाथ में सीमा। शेष के बगल में "सीमित" बटन: जमा/समय/हानि, सत्र टाइमर।

ठहराव-मिनट। खेल के 30-45 मिनट के बाद अनुशंसित ठहराव एक नरम बैनर है, "लाल झंडे" के बिना।

देर से बोली ब्लॉक। यदि ई 2 ई-देरी> थ्रेसहोल्ड - बोली स्वीकार नहीं की जाती है, तो यूआई कारण बताता है।

इतिहास और निर्यात। हाल के दौर/दांव फ़ीड, फ़िल्टर, त्वरित जाँच निर्यात.

7) पाठ, रंग, एनिमेशन

टाइपोग्राफी: शीर्षक 17-20pt, शरीर 14-16pt; WCAG AA + के विपरीत।

रंग योजना: "सिग्नल" रंग स्टेटस (स्वीकृत/बंद/त्रुटि) के लिए आरक्षित हैं।

एनिमेशन: माइक्रो-इंटरैक्शन के लिए 120-180 एमएस; 240-320 एमएस - पैनल/पर्दे के लिए। फ्रेम-बाय-फ्रेम - 2-3 से अधिक समानांतर प्रभाव नहीं।

स्पिनरों के बजाय कंकाल। त्वरित प्रगतिशील लोडिंग संकेत।

8) नेविगेशन और सूचना वास्तुकला

लोअर नेविगेशन (टैब बार): लॉबी, लाइव, प्रमोशन, प्रोफाइल।

इनसाइड लाइव: फ़िल्टर टेबल (भाषा, सीमा, खेल प्रकार, पसंदीदा डीलर) की सूची।

डीप लिंक: पुश/बॉट → टेबल/टूर्नामेंट के लिए सीधा प्रवेश द्वार; एनालिटिक्स के लिए यूटीएम की बचत।

बैक-स्टैक: एंड्रॉइड "बैक" इशारा और आईओएस स्वाइप - राउंड को अचानक बंद न करें, पहले - एक चेतावनी।

9) स्थानीयकरण और विशेष भाषाएँ

आरटीएल (अरबी/हिब्रू)। मिरर शर्त ग्रिड और पैनल।

संख्या प्रारूप/मुद्राएँ। हजारों विभाजक, लघु हस्ताक्षर (अंतरिक्ष की कमी के लिए 1,000 → 1k)।
भाषा तालिकाएँ। फ्लैग/भाषा, डीलर भाषा फ़िल्टर, स्थानीय इकाइयाँ (₺, R $, ₴) प्रदर्शित करें।
पंक्तियों की लंबाई। दीर्घवृत्त के साथ ऑटो-कट, ट्यूल्टिप्स - लंबे प्रेस द्वारा।

10) उपकरण प्रदर्शन और संसाधन

बैटरी: एफपीएस को सीमित करें - जब चार्ज कम हो, तो उच्च खपत के बारे में चेतावनी दें।

मेमोरी: अप्रयुक्त एबीआर प्रोफाइल अनलोड करें, 2-3 से अधिक उच्च-रिज़ॉल्यूशन बनावट न रखें।

WebView/browser: भारी छाया और CSS फ़िल्टर ब्लॉक करें; चिकनाई के लिए GPU कंपोजिटिंग का उपयोग करें।

छवि अनुकूलन: WebP/AVIF, स्प्राइट्स और आलसी-लोड।

11) भुगतान और बटुए के पैटर्न

मिनी-वॉलेट: बैलेंस और क्विक डिपॉजिट (केवल वेब पर 3DS/KYC के साथ कैशियर से लिंक)।

सुरक्षा टोकन: छोटा टीटीएल, वर्तमान शर्त खोए बिना फिर से लॉगिन।

निधि के स्रोत की दृश्यता: शर्त के समय CASH/BONUS।

12) उपलब्धता (A11y) और संगतता

वॉयसओवर/टॉकबैक: तत्वों के लिए हस्ताक्षर, टैब-ऑर्डर फोकस, स्थिति घोषणाओं के लिए वीडियो।

उच्च कंट्रास्ट/बड़ाफ़ॉन्ट: ग्रिड को तोड़े बिना लेआउट अनुकूलित करना।

इशारों - एकमात्र तरीका। हम बटन के साथ कार्यक्षमता की नकल करते हैं।

टेस्ट मैट्रिक्स: आईओएस (वर्तमान + एन -1), एंड्रॉइड (एसडीके स्तर, लोकप्रिय खाल), कमजोर उपकरण, अस्थिर नेटवर्क।

13) माइक्रो-कॉपीराइटिंग: क्या और कैसे बोलना है

स्पष्ट और छोटा। "बेट्स ने स्वीकार किया", "बेट्स बंद", "अपर्याप्त धन", "बैड नेटवर्क"।

संदर्भ। यदि बोली अवरुद्ध है, तो संकेत "प्रवाह देरी सीमा से अधिक है।"

पुष्टि। हटाएँ "क्या आप निश्चित हैं?" जहां आप "बैक/अंडरडो" के माध्यम से वापस रोल कर सकते हैं।

14) एनालिटिक्स और आरयूएम: सुधार के लिए उपाय

RUM-SDK: e2e देरी, स्टार्टअप, बफर्स, गुणवत्ता स्विच, डिकोडर त्रुटियां।

WebRTC-आँकड़े: RTT, हानि, जिटर, NACK/PLI, доля टर्न-रिले।

उत्पाद घटनाएँ: दर/डबल/स्पष्ट, छूट/लेट दर, तालिका और डीलर होल्ड।

प्रवेश फैनल: टेलीग्राम → लॉबी → टेबल → पहला शर्त → दोहराएं/डबल।

15) मोबाइल यूआई एंटी-बग्स

टिनी हिट। समाधान: 48dp/44pt न्यूनतम, अतिरिक्त इंडेंट।

गुणवत्ता बदलते समय काली स्क्रीन। समाधान: कीफ्रेम-ऑन-डिमांड और निम्नलिखित प्रोफ़ाइल प्रीलोड करें।

यादृच्छिक "बैक" स्वाइप करता है। समाधान: सामग्री के अंदर गोल + इशारों से बाहर निकलने से पहले पुष्टि सिस्टम इशारों के साथ संघर्ष नहीं करती है।

कुंजीपट चिपका रहा है। समाधान: मात्रा के लिए संख्यात्मक कीपैड, इनपुट के बाद ऑटो-छुपाएँ, स्मार्ट स्क्रॉलिंग।

16) प्रोडक्शन लॉन्च चेकलिस्ट

यूआई और प्रबंधन

अंगूठे के क्षेत्र में सीटीए; दांव लगाने के लिए 2 कदम
हैप्टिक और समझने योग्य स्टेटस (स्वीकार/बंद/त्रुटि)
कलाकृतियों के बिना खड़ा/क्षैतिज मोड

वीडियो और नेटवर्क

SVC/simulacast, LL-HLS फोलबैक के साथ WebRTC
देरी/नेटवर्क संकेतक, नरम गिरावट
स्विच करते समय कोई काली स्क्रीन नहीं

जिम्मेदार नाटक

1-2 तपा की दूरी पर सीमा/ठहराव/इतिहास
ई 2 ई सीमा से अधिक होने पर "देर से" दांव का ब्लॉक

स्थानीयकरण और A11y

आरटीएल, बड़े फोंट, कंट्रास्ट
स्क्रीन पाठकों के लिए पूर्ण ऑल्ट/लेबल

निष्पादन

60 एफपीएस यूआई, कुंजी स्क्रीन के लिए <100 एमएस टीटीआई
पावर सेविंग मोड, मेमोरी कंट्रोल

अवलोकन क्षमता

बिल्ट-इन RUM और WebRTC-आँकड़े, SLO अलर्ट
उत्पाद घटनाओं और दर फ़नल

17) नीचे की रेखा

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