दृश्य पदानुक्रम और प्राथमिकता

1) दृश्य पदानुक्रम क्या है

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

लक्ष्य: "संज्ञानात्मक लागत" को कम करना और आवश्यक तत्वों द्वारा पहले सार्थक क्लिक की हिस्सेदारी बढ़ाना।

2) व्यावसायिक प्रभाव और केपीआई

• लक्ष्य CTA रूपांतरण (पंजीकरण, जमा, पसंदीदा में जोड़ें)
• मूल्य के लिए समय
• भ्रम दर
• उछाल, स्क्रॉलिंग गहराई और पकड़

• FMC (पहला सार्थक क्लिक):% उपयोगकर्ता जो लोड करने के बाद कुंजी CTA ≤ N सेकंड पर क्लिक करते हैं।
• TTV (समय से मूल्य): लॉगिन से कुंजी मूल्य तक का समय (उदा। खोजें और चलाएँ स्लॉट)।
• स्क्रीन पर कुंजी CTA का CTR: होम, कैटलॉग, गेम पेज, बॉक्स ऑफिस।
• प्राथमिक/द्वितीयक क्लिकों का अनुपात (ध्यान का अनुशासन)।
• प्रस्ताव/टूर्नामेंट के साथ ब्लॉक करने के लिए गहराई स्

3) दृश्य पदानुक्रम के सिद्धांत (कोर)

1. इसके विपरीत और पैमाने: अधिक महत्वपूर्ण - बड़ा और अधिक विपरीत।

2. स्थिति और पठन क्रम: शीर्ष/बाएं और "पहली स्क्रीन" प्राथमिकता

3. सफेद स्थान: वायु = महत्व। बहुत तंग - प्राथमिकता खो गई है।

4. रंग और संतृप्ति: रंग उच्चारण - "ध्यान मुद्रा"; उसे बचा लो।

5. फॉर्म और आइकनोग्राफी: बटन आकार, मार्कर, स्थिति आइकन विशिष्टता को बढ़ाते हैं।

6. गति और माइक्रोनिमेशन: दुर्लभ, संक्षिप्त, पूरे लहजे; "निष्पक्ष" से बचें।

7. समूहन (gestalt): निकटता, समानता, बंद होना, संरेखण, सामान्य क्षेत्र।

8. सूचना घनत्व: महत्वपूर्ण पथ पर - केवल सही एक, बाकी "कमजोर" परतों में है।

4) प्राथमिकता मैट्रिक्स (P1-P4)

P1 (क्रिटिकल-प्राइमरी): 1-2 CTA/आइटम प्रति स्क्रीन। बड़ा आकार, उज्ज्वल विपरीत, निश्चित स

P2 (महत्वपूर्ण सहायक): फ़िल्टर, त्वरित टैग, द्वितीयक CTA। मध्यम कंट्रास्ट, P1 के बगल में।

P3 (मदद/संदर्भ): संकेत, रेटिंग, मिनी-कार्ड। शांत शैली, कॉम्पैक्ट।

P4 (पृष्ठभूमि/संदर्भ): सहायता, पादरी, कानूनी लिंक। छोटे विपरीत और आकार।

नियम: एक स्क्रीन पर एक से अधिक पी 1 नहीं। यदि प्रतिस्पर्धा करते हैं, तो वे अब नहीं हैं।

5) पदानुक्रम की परतें

वैश्विक: शीर्ष-स्तरीय नेविगेशन, वैश्विक खोज, सूचनाएं।

पृष्ठ: हीरो-ब्लॉक, H1/H2, प्रमुख बैनर/ऑफर।

घटक: गेम कार्ड, बॉक्स ऑफिस फॉर्म, टूर्नामेंट टेबल।

इंट्रा-घटक: क्षेत्र क्रम, हस्ताक्षर, स्टेटस, माइक्रो-संकेत।

6) विशिष्ट परिदृश्य (आईगेमिंग-फिटिंग)

• P1: "खाता बनाएं "/" लॉग इन "(बड़ाबटन, निश्चित स्थिति)।
• P2: सामाजिक लॉगिन, "पासवर्ड दिखाएँ", पासवर्ड नीति.
• P3: लिंक "अपना पासवर्ड भूल गया? ", सुरक्षा युक्तियाँ।

• P1: टॉप अप/डिस्प्ले + चयनित विधि।
• P2: राशि, त्वरित प्रीसेट, शुल्क/सीमा पास।
• P3: विस्तृत विधि विवरण, समय को छुपाया।

• P1: खोज + कुंजी फिल्टर (प्रदाता, अस्थिरता, RTP, नया/हिट)।
• P2: सेगमेंट/टैग्स (मेगावेज़, जैकपॉट, फ़ीचर खरीदें)।
• P3: माध्यमिक छंटाई, कार्ड बैज (नया, हिट, टूर्नामेंट)।

• P1: शामिल हों/पुरस्कार विवरण।
• P2: लीडरबोर्ड (पहले 5), उलटी गिनती का टाइमर।
• P3: पूरा क्लिक/टर्न नियम।

7) टाइपोग्राफी और ग्रिड

मॉड्यूलर स्केल: 12-14 (पाठ), 16 (स्टेम), 20-24 (सबहेडिंग), 28-40 (एच 1/हीरो)।

आधार रेखा: 4/8px चरण; ऊर्ध्वाधर लय = पढ़ ने योग्यता।

लाइन की लंबाई: पाठ के लिए 45-75 वर्ण; कार्ड विवरण के लिए 20-40।

लाइन-टू-लाइन: पाठ के लिए 120-150%, शीर्षक के लिए 110-120%।

8) रंग और विपरीत

पाठ विपरीत: कुंजी रास्तों पर ग्रंथों के लिए एए स्तर स्थलों से कम नहीं।

रंग भूमिकाएँ: प्राथमिक (सीटीए), उच्चारण (ध्यान), जानकारी/सफलता/चेतावनी/खतरा (स्थिति)।

डार्क थीम: सीमाओं और ग्रंथों के विरोधाभासों को मजबूत करने के लिए, व्यापक रंग विमानों की संतृप्ति को कम करने के लिए; "नीयन दर्द" से बचें।

तत्वों की स्थिति: डिफ़ॉल्ट/होवर/फ़ोकस/सक्रिय/अक्षम - भिन्न हैं.

9) उच्चारण और बटन

प्राथमिक सीटीए: एक प्रति स्क्रीन, ध्यान देने योग्य रंग/स्केल, पर्याप्त क्षेत्र (मिनट-टैप 44 × 44px)।

द्वितीयक/तृतीयक: चिकनी स्वर, समोच्च शैली।

स्पिनर ≠ पदानुक्रम: प्रगति प्रतिक्रिया देती है, लेकिन पी 1 को बाधित नहीं करना चाहिए।

10) ध्यान यांत्रिकी और गति

F-/Z-पैटर्न: P1 को रखें जहां टकटकी के गुजरने की उम्मीद है।

हिक का नियम: कम समान तेज है - शॉर्टन फर्स्ट स्टेप ऑप्शन।

फिट्स का कानून: बड़ा और करीब क्लिक करना आसान है; हिट क्षेत्र महत्वपूर्ण बढ

धारावाहिक संकेत देता है: चरणों द्वारा सिखाएं, न कि "पाठ की दीवार" द्वारा।

11) होम स्क्रीन/लैंडिंग पेज

हीरो ब्लॉक: शॉर्ट ऑफर + सिंगल पी 1।

दृश्य "रीकी": 3-4 खंड अधिकतम पहले स्क्रॉल (श्रेणियों, नए आइटम, टूर्नामेंट) के लिए।

सामाजिक प्रमाण: प्रदाता बैज, "सप्ताह की हिट" - पी 2, पी 1 को बाधित नहीं करते हैं।

12) डैशबोर्ड और टेबल

पहली स्क्रीन: 1-2 कुंजी केपीआई बड़े, स्पार्कलाइन + ट्रेंड बैज।

तालिका: महत्व के अनुसार स्तंभों को संरेखित करें, "फ्रीज" कुंजी स्तंभ, घनत्व स्विच (कॉम्पैक्ट/मानक) का उपयोग करें।

रिक्त स्थिति: अगला चरण समझाएँ (P1 बटन + प्रांप्ट)।

13) मोबाइल बनाम डेस्कटॉप

मोबाइल: एक पी 1 स्क्रॉलिंग लाइन के ऊपर कड़ाई से है, टैब बार ≤5 पॉइंट, फ्लोटिंग सीटीए चेकआउट/प्ले के लिए स्वीकार्य है।

डेस्कटॉप: कंटेनर की चौड़ाई 1200-1440px; पंक्तियों की लंबाई को "स्ट्रेचिंग" पी 1 से सीमित करें।

14) स्थानीयकरण, संख्या, आरटीएल

लाइनों (जर्मन/तुर्की), विभिन्न मुद्राओं और ग्रेड की लंबाई को ध्यान में रखें।

आरटीएल: ग्रिड और उच्चारण क्रम को मिरर करें, लेकिन पी 1 प्रभुत्व को बनाए रखें।

15) ए/बी और पदानुक्रम मेट्रिक्स

• P1 आकार/कंट्रास्ट में 12-16% की वृद्धि - FMC और CTR में वृद्धि।
• फिल्टर (P2) को खोज के करीब ले जाना - गेम सर्च TTV को कम करना।
• नकदी रजिस्टर के पहले चरण में विकल्पों में कमी - ऊपर पूरा होना।

ट्रैक: एफएमसी (एन सेकंड), सीटीआर पी 1, स्क्रॉल डेप्थ टू टारगेट ब्लॉक, टीटीवी, कन्फ्यूजन रेट (त्रुटियां/रिटर्न), रेज क्लिक्स।

16) लेखा परीक्षा प्रक्रिया (चेकलिस्ट)

1. प्रत्येक कुंजी स्क्रीन पर नाम P1 - क्या बिल्कुल एक है?
2. P2 तत्व P1 का समर्थन करते हैं, रंग/कंट्रास्ट में इसके साथ बहस नहीं करते हैं?
3. दृष्टि का पथ: P1 पहले 3 केंद्रित हिट करता है?
4. क्या पाठ/एसीटीए विपरीत प्रकाश/अंधेरे विषयों में पर्याप्त है?
5. न्यूनतम हिट क्षेत्र मिले?
6. शोर: क्या आप रूपांतरण खोए बिना 20% तत्वों को हटा सकते हैं?
7. खाली अवस्थाओं से कार्रवाई होती है?
8. क्या राज्य (होवर/फोकस/सक्रिय) अलग और सुलभ हैं?
9. क्या मोबाइल पर स्क्रॉल किए बिना पी 1 दिखाई दे रहा है?
10. क्या मैट्रिक्स फ़नल में जुड़े और पढ़ ने योग्य हैं?

17) एंटी-पैटर्न

एक स्क्रीन पर दो या अधिक प्राथमिक।

"आकर्षक" बैनर P1 को ओवरलैप करते हैं।

ग्रे पर ग्रे (अपर्याप्त कंट्रास्ट)।

महत्वपूर्ण पथ पर पाठ के बिना प्रतीक।

ओवरलोडेड कार्ड: 6 + बैज, विवरण की 4 लाइनें।

एक लक्ष्य के बिना एनिमेशन (चमकता/अंतहीन)।

18) डिजाइन प्रणाली: प्राथमिकताओं का विनिर्देशन

टोकन: 'रंग। प्राथमिक ',' रंग। उच्चारण ',' ऊंचाई। p1 ',' त्रिज्या। lg ',' स्पेस। 8/12/16`.

आयाम भूमिकाएँ: 'btn। p1। lg ',' btn। p2। md ',' पाठ। h1/h2/बॉडी ',' बैज। स्थिति '।

लेयर्स/जेड-इंडेक्स: P1 ओवर कंटेंट मॉड्यूल, लेकिन सिस्टम मॉडल से नीचे।

राज्य: उदाहरण के साथ राज्य तालिका (स्क्रीन-गाइड)।

19) प्राथमिकता एल्गोरिथ्म (छद्म)

1. स्क्रीन के उद्देश्य को परिभाषित करें (एक वाक्य)

2. P1 (एक तत्व) आबंटित करें, सबसे अधिक ध्यान देने योग्य के रूप में डिजाइन करें।

3. P1 के बाद/के बगल में P2 (2-5 तत्व) फॉर्म।

4. P3-P4 को छुपाएँ/गिराएँ।

5. सामर्थ्य और गतिशीलता चेकलिस्ट को पूरा करें।

6. पथ और time-to-P1 (क्लिक ≤3 सेकंड) की जाँच करें।

7. A/B प्रारंभ करें, FMC/TTV/CTR का निरीक्षण करें।

20) माइक्रोकॉपी और ग्रंथ

एच 1 शीर्षक - संक्षिप्त, क्रिया/मूल्य: "10 सेकंड में खेलना शुरू करें।"

सीटीए - कार्रवाई और परिणाम: "एक मिनट में फिर से भरना", "अब खेलो।"

युक्तियाँ - मामले पर, अधिकतम एक पंक्ति, बिना शब्दजाल के।

21) पदानुक्रम कार्यों के लिए स्वीकृति मानदंड

स्क्रीन पर एक एकल पी 1 परिभाषित किया गया है; बिना स्क्रॉलिंग (मोबाइल/डेस्कटॉप) देखें।

P1 कंट्रास्ट दिशानिर्देशों से मेल खाता आयाम हिट क्षेत्र ≥44×44px।

P2 P1 (1-2 कंट्रास्ट/स्केल स्टेप्स द्वारा) की तुलना में नेत्रहीन कमजोर है

तत्वों की स्थिति अलग-अलग है; कीबोर्ड फोकस शैली हैं।

FMC/TTV/CTR/स्क्रॉल गहराई के लिए कनेक्टेड एनालिटिक्स इवेंट्स।

22) लघु सारांश (टीएल); डीआर)

पदानुक्रम ध्यान का अनुशासन है। एक स्पष्ट पी 1 प्रति स्क्रीन, पी 2 के माध्यम से समर्थन, कम शोर, पर्याप्त विपरीत और पढ़ ने योग्य टाइपोग्राफी। एक चेकलिस्ट के साथ खुद को परीक्षण करें, FMC/TTV/CTR को मापें, और A/B परीक्षणों के साथ परिकल्पना की पुष्टि करें।