स्क्रॉलिंग और सामग्री प्रबंधन

1) स्क्रॉलिंग के बारे में क्यों सोचें

स्क्रॉलिंग आधुनिक इंटरफेस में मुख्य नेविगेशन विधि है। अच्छी तरह से डिज़ाइन किया गया स्क्रॉ

सही सामग्री के लिए खोज को गति देता है (कम क्लिक - अधिक स्क्रॉलिंग),

नियंत्रण की भावना देता है (लंगर, "शीर्ष पर वापस", पालन फिल्टर),

संसाधनों को बचाता है (आलसी बूट, वर्चुअलाइजेशन),

रूपांतरण बढ़ाता है (पहले देखी गई सामग्री, "अंगूठे क्षेत्र" में सीटीए)।

सिद्धांत: गति> घनत्व; संदर्भ> शोर; पूर्वानुमान> "जादू"।

2) स्क्रॉलिंग मॉडल: कब चुनें

1. शास्त्रीय पृष्ठभूमि

खोज परिणाम, तालिकाओं, रिपोर्टिंग के लिए उपयुक्त पेशेवरों: नियंत्रण, स्थिर यूआरएल, आसान पृष्ठ नेविगेशन। विपक्ष: अधिक क्लिक, ध्यान "अंतराल"।

2. अनंत स्क्रॉल

त्रुटि की कम लागत वाले फ़ीड और कैटलॉग के लिए (समाचार, सामग्री कार्ड)। पेशेवरों: सगाई, कम क्लिक। विपक्ष: "खोया हुआ पैर", वापसी के लिए कठिन, मुश्किल पता।

3. हाइब्रिड: अधिक दिखाएँ/अधिक लोड करें

समझौता: विजेट प्रति बटन बैच में लोड किए जाते हैं। पेशेवरों: रेंडर कंट्रोल, फुटर उपलब्धता, पूर्वानुमेयता। विपक्ष: अभी भी रैखिक।

4. खंडित स्क्रॉलिंग (खंड/लंगर)

लंबे लेखों, संदर्भों और विकी के लिए। पेशेवरों: दस्तावेज़ मानचित्र, त्वरित कूदता है। विपक्ष: नेविगेशन और सामग्री की तालिका को जटिल करना।

• कैटलॉग/लॉबी - हाइब्रिड या अनंत + "शुरुआत में वापस जाएं।"
• पृष्ठ आकार और त्वरित फिल्टर के साथ खोज/तालिका - पृष्ठभूमि।
• टीओसी और प्रगति पट्टी रीडिंग के साथ प्रलेखन/लोंग्रिड - खंड।

3) सूचना वास्तुकला और लेआउट

शीर्ष हेडर (चिपचिपा): खोज, त्वरित फिल्टर, छंटाई; जब यह प्रकट होता है तो सामग्री को ओवरलैप नहीं करता है।

साइडबार (डेस्कटॉप): सामग्री की तालिका (टीओसी), फ़िल्टर; मोबाइल छोड़ ने वाली शीट पर।

स्टिकी तत्व: शीर्ष फिल्टर, एंकर मेनू, पढ़ ने की प्रगति संकेतक, "बैक टू टॉप"।

सामग्री कार्ड: पूर्वानुमानित पूर्वावलोकन ऊंचाई - कम लेआउट कूदता है।

खाली राज्य: कंकाल/शिमर्स, "खाली स्क्रीन" नहीं।

4) स्क्रॉलिंग व्यवहार (माइक्रोमैकेनिक्स)

जड़ ता और भौतिकी: स्क्रॉलिंग को "देशी" दिखाई देना चाहिए; सिस्टम पैटर्न को न तोड़ें।

अक्षीय ताला: क्षितिज (हिंडोला) के लिए, गति सीमा के बाद ऊर्ध्वाधर अक्ष को लॉक करें।

स्नैप पॉइंट: हिंडोला, कार्ड और जादूगर चरणों के लिए उपयुक्त। लंबे टेपों में दुरुपयोग न करें।

लंगर स्क्रॉलिंग: पुनः लोड करते समय उपयोगकर्ता फोकस और सापेक्ष स्थिति बनाए रखें।

स्क्रॉल-चेनिंग: नेस्टेड कंटेनरों से घटनाओं के "प्रवाह" को सीमित करें ताकि पृष्ठ पर "कूद" न हो।

5) ध्यान प्रबंधन

फ्लोटिंग STA/" डिपॉजिट "/" प्ले": अंगूठे क्षेत्र में, सामग्री ओवरलैप नहीं करता है।

प्रगति पट्टी पढ़ ना: शीर्ष पर शासक, लंगर के साथ तुल्यकालित।

सामग्री की तालिका (टीओसी) - वर्तमान विषय उभारा गया, शॉर्टकट, शीर्ष बटन।

शीर्षक एंकर: URL में स्थिर हैश; कैप ऊंचाई मुआवजे के साथ स्क्रॉलिंग।

संदर्भ "चिपचिपा" फिल्टर: 1-2 स्क्रीन स्क्रॉल करने के बाद ठीक करें।

6) बड़े टेप लोड और रेंडरिंग

आलसी लोडिंग: चित्र, वीडियो, ब्लॉक। लोड सीमा ~ 1-2 स्क्रीन आगे है।

वर्चुअलाइजेशन/विंडो: केवल दृश्यमान क्षेत्र + बफर खींचें।

प्लेसहोल्डर्स/कंकाल: पूर्वानुमानित आकार, कोई "छलांग" नहीं।

बैच रीलोडिंग: चरण 20-60 तत्व; प्रश्नों और रेंडर्स के बीच संतुलन।

पार्टीशन कैश: जब वापस जा रहा हो, स्थिति पुनर्प्राप्त करें और लोड किए गए चंक।

7) टेप में सामग्री प्रबंधित करें

समूह: तिथियों/श्रेणियों द्वारा; विभाजक हेडर छड़ी।

सॉर्ट्स और फ़िल्टर: सक्रिय स्थितियों के संकेत के साथ दृश्यमान और सुलभ।

पतन/विस्तार: लंबे विवरण के लिए, अधिक दिखाएँ।

स्क्रॉलिंग में मीडिया: ऑटो-पॉज़वीडियो दृष्टि से बाहर; केवल ध्वनि के बिना और स्पष्ट नियंत्रण के साथ ऑटो-प्ले

त्रुटि कहती है: "नेटवर्क का नुकसान", "लोड करने में विफल" - पुन: प्रयास और बचत स्थिति के साथ।

8) उपलब्धता और स्थानीयकरण

सभी क्रियाएं इशारों के बिना उपलब्ध हैं: "अधिक डाउनलोड करें", "शुरुआत करने के लिए", "टीओसी खोलें।"

फोकस प्रबंधन: जब एंकर नेविगेट करते हैं - अनुभाग शीर्षक पर फोकस स्थानांतरित करते हैं।

स्क्रीन रीडर: स्क्रॉल बटन/टीओसी के लिए विवरण, तर्क क्रम करें।

आरटीएल: मिरर क्षैतिज हिंडोला और संकेतक।

कम गति: सरलीकृत प्रभाव पसंद करने वालों के लिए "जटिल" एनिमेशन और लंबन अक्षम करें।

9) प्रदर्शन: लक्ष्य और मेट्रिक्स

INP (नेक्स्ट पेंट के लिए इंटरैक्शन) कुंजी इशारे/स्क्रॉलिंग: ≤ 200 ms।

स्क्रॉल-जानक: <1% फ्रेम> 16. ठेठ उपकरणों पर 7 एमएस।

सीएलएस (संचयी लेआउट शिफ्ट): ≤ 0। 1 (विशेष रूप से पुनः लोडिंग के दौरान)।

टीबीटी/ब्लॉकिंग: स्क्रॉल करते समय भारी तुल्यकालिक कंप्यूटिंग से बचें।

मेमोरी: लंबे सत्रों के दौरान स्थिर उपयोग (वर्चुअलाइजेशन के दौरान कोई लीक नहीं)।

• निष्क्रिय स्क्रॉलिंग श्रोताओं, 'एनिमेशनफ्रेम' के माध्यम से स्थगित गणना;
• स्क्रॉल करते समय "प्रकाश" छाया/कोई जटिल धुंधला नहीं;
• निश्चित या पूर्वानुमानित कार्ड आका
• Redraws (बैच अपडेट) की बचत।

10) टेलीमेट्री और इवेंट्स

• 'scroll _ start '/' स्क्रॉल _ end' (स्रोत, गति, दिशा),
• 'कॉन्टेंट _ लोड _ अनुरोध/सफलता/विफल' (स्टैक, आकार),
• 'viewport _ item _ expost' (id, दृश्यता समय),
• 'toc _ क्लिक', 'एंकर _ नेविगेट', 'back _ to _ top _ click',
• 'list _ restor' (स्थिति, पुनर्स्थापित समय)।

• गहराई तक पहुंचा (कितने ecraps/तत्वों को देखा गया है),
• एक्सपोज़र टाइम प्रति आइटम (माध्य/मध्य),
• त्रुटि दर लोड करें, पुनः प्रयास दर,
• परित्याग स्क्रॉल करें (अगले बैच के लोड होने से पहले बाहर),
• रिटर्न-टू-पोजिशन सफलता।

11) विभिन्न प्रकार की सामग्री के लिए पैटर्न

खेल/उत्पादों की सूची: हाइब्रिड टेप, चिपचिपा फिल्टर, वर्चुअलाइजेशन, "अधिक दिखाएं" बटन।

लोंग्राइड्स/विकी: टीओसी, प्रगति बार, एंकर, "अनुभाग के लिए लिंक कॉपी करें।"

समाचार फ़ीड: विभाजक तिथियों के साथ अंतहीन फ़ीड, "अंतिम पर वापस जाएं।"

टेबल/ग्रिड: पृष्ठभूमि + "एन द्वारा शो", ठंड शीर्षक और प्रमुख स्तंभ, आवश्यकतानुसार क्षैतिज स्क्रॉलिंग।

लाइव फीड/लॉग स्ट्रीम: "ठहराव/पकड़", बफर सीमा के साथ ऑटो-स्क्रॉल।

12) मोबाइल सुविधाएँ

अंगूठे के क्षेत्र: सीटीए और "शुरुआत तक" - नीचे से; फिल्टर - आउटगोइंग शीट में।

"पुलिंग" फुटर: तभी दिखाएं जब रोका जाए; स्क्रॉलिंग में हस्तक्षेप न करें।

इशारों: क्षैतिज हिंडोला - अक्षीय ताला के साथ; पुल-टू-रिफ्रेश - केवल जहां उम्मीद थी।

चिकनाई: "भारी" सूचियों पर 60 एफपीएस जांच; प्रभाव के घनत्व को कम करें।

13) एंटीपैटर्न

"बिना किसी निकास के अंतहीन टेप + छिपे हुए फुटर" (कोई लिंक/संपर्क/नियम नहीं)।

अतिरिक्त भार जो संदर्भ के पठन - हानि को स्थानांतरित करता है।

फ्लोटिंग पैनल ओवरलैपिंग पाठ और सीटीए।

कार्ड की असीमित ऊंचाई → "भटकना" लेआउट-शिफ्ट।

दृश्य होने पर ध्वनि के साथ ऑटोप्ले मीडिया।

"वापस" होने पर कोई स्थिति वसूली नहीं।

14) कार्यान्वयन चेकलिस्ट (स्प्रिंट द्वारा)

स्प्रिंट 1: मॉडल चयन (पैगिनेशन/हाइब्रिड/अनंत), बेसिक स्क्रॉलिंग कंटेनर, चिपचिपा टोपी/फिल्टर, "बैक टू टॉप"।

स्प्रिंट 2: छवियों/ब्लॉकों, कंकालों, पूर्वानुमानित कार्ड आकारों का आलसी लोडिंग।

स्प्रिंट 3: वर्चुअलाइजेशन, सेव पोजीशन और बर्स्ट कैश, एंकर/टीओसी।

स्प्रिंट 4: स्क्रॉल और एक्सपोज़र टेलीमेट्री, और स्क्रॉल-जंक अलर्ट।

स्प्रिंट 5: एक्सेसिबिलिटी (फोकस/रीडर), आरटीएल, कम गति, कीबोर्ड नेविगेशन (डेस्कटॉप)।

स्प्रिंट 6: फाइन ऑप्टिमाइजेशन: एक्सियल लॉक, स्नैप पॉइंट्स, यूएक्स मीडिया एन्हांसमेंट इन टेप।

15) शब्दावली

अनंत स्क्रॉल - तत्वों का अनंत लोडिंग।

विंडोज़िंग/वर्चुअलाइज़ेशन - रेंडर केवल दृश्यमान सूची आइटम।

लंगर स्क्रॉलिंग - पुनः लोडिंग के दौरान सापेक्ष स्थिति बनाए रखना।

स्क्रॉल-जंक - स्क्रॉल करते समय फ्रेम को छोड़ ने के कारण "झटका"।

टीओसी (सामग्री की तालिका) - एंकर के साथ सामग्री की तालिका।

सीएलएस/आईएनपी - लेआउट स्थिरता और जवाबदेही के मैट्रिक्स।

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

1. उपयुक्त प्रवाह मॉडल (pagination/hybrid/अनंत) का चयन करता है,

2. नियंत्रण देता है (एंकर, टीओसी, चिपचिपा फिल्टर, "शुरुआत के लिए"),

3. तेजी से और स्थिर (आलसी लोडिंग, वर्चुअलाइजेशन, कोई बदलाव नहीं),

4. सुलभ और अनुमानित रहता है,

5. टेलीमेट्री को मापता है और डेटा के आधार पर UX में सुधार करता है।