ज़ेनकमिंग और हबे पर "पागल टाइल" पर काबू पाना

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



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



लॉरेल्स लॉरेल हैं, और यह स्ट्रिप स्क्रीन पर जगह खा जाती है, जो कभी भी शानदार नहीं होती है। दरअसल, साइट के साथ अनुभव के अनुसार, बटन एक्सेस किए जाते हैं, अपेक्षाकृत अधिक अनियंत्रित होते हैं, इसलिए खुले बटन के क्षेत्र को कम करने से उन्हें दबाने की लागत में बहुत कमी नहीं होती है, लेकिन अधिक उपयोगी स्क्रीन क्षेत्र देता है। इसके अलावा, उपयोगकर्ता शैली साइट के लेखकों की राय का खंडन करती है कि उसे स्क्रॉल बार की गिनती न करते हुए देखने के लिए कम से कम 1,030 पिक्सेल चौड़ाई चाहिए। साइट आसानी से 380-400 पिक्सल में फिट हो जाती है, यहां तक ​​कि साइडबार के साथ भी।



20 मई 2014 से ZenComment संस्करण 4.02 उपयोगकर्ता शैलियों के प्रभाव में उनके साथ ऐसा ही हुआ। चलिए स्क्रीनशॉट के लिए लिए गए प्रारंभिक पृष्ठ पर एक नज़र डालते हैं।



(क्लिक करने योग्य)



यहाँ क्या विशेषता है?

1. एकता-शैली के बाएं मेनू 71 पिक्सेल चौड़ा है, जैसा कि एक भावनाहीन वेब इंस्पेक्टर कहता है।

2. वेबसाइट कैप - चीयर्स! - बहुत ही 20 पिक्सल पर कब्जा करना शुरू कर दिया है कि हेडर ने ZenComment के पिछले संस्करणों और HabrAjax स्क्रिप्ट पर कब्जा कर लिया है। लेकिन यह खाली है।

3. साइडबार हेडर से 800 वें पिक्सेल से काम करना शुरू कर देता है।

4. एक विशिष्ट लेख ऊंचाई में 500-800 पिक्सल है।

5. बाएं मेनू पर सभी खाली स्थान "स्क्रॉल अप" बटन के लिए आरक्षित हैं (यह ज्ञात है कि अधिकृत उपयोगकर्ता सेटिंग्स में कार्रवाई को अक्षम कर सकते हैं)।

6. क्षैतिज स्क्रॉलिंग अभी तक प्रकट नहीं होने पर 1030 पिक्सल की न्यूनतम विंडो चौड़ाई का चयन किया गया था।



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











स्क्रीनशॉट क्षेत्र लगभग 2.5 गुना छोटा है, और एक ही लेख फिट बैठता है, साथ ही साइडबार का पूरा पहला ब्लॉक। स्तब्ध साक्षी की समीक्षा:

1. बंद करो, मेनू कहाँ गया ???

2. कर्ब के शीर्ष पर 3 आइकन कौन से हैं?

3. ओह, एक साइडबार की तरह सिकुड़ सकता है? मेरे स्मार्टफोन में ऐसा ही होगा!

4. "अगला" बटन लेखों में लूम नहीं करते हैं।

5. छवियां संपीड़न के अनुपात में कम हो जाती हैं और स्तंभ की चौड़ाई के 50% से अधिक नहीं होती हैं।

6. लेख 300-600 पिक्सल है, इस तथ्य के बावजूद कि कॉलम संकरा है।

7. खिड़की की चौड़ाई से खेतों की अनुकूलन क्षमता दिखाई देती है, एक संकीर्ण खिड़की में कम क्षेत्र अंतराल होते हैं।

8. विज़िट किए गए लिंक (रंग में) के निशान हैं।



आइए पहेलियों को प्रकट करते हैं।

ZenComment मेनू

पिछले संस्करणों में, ZenComment मेनू 1 पंक्ति में फिट होता है और दो साइट मेनू दोहराता है: नेविगेशन और उपयोगकर्ता डेटा।







यह संस्करण कोई अपवाद नहीं था। साइट पर मेनू दोहराए जाते हैं क्योंकि वे HTML में लिखे गए हैं। लेकिन मेनू के दूसरे स्तर अधिक सुविधाजनक स्थानों में बिखरे हुए हैं। परंपरा के अनुसार, कस्टम मेनू दाईं ओर हैं, बाकी बाईं ओर हैं।



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



माउस को बटन पर लाने के बाद, आपको मेनू में से एक को देखने के लिए क्लिक करना होगा या 2 "बहुत महत्वपूर्ण" क्रियाओं में से एक करना होगा: मुख्य पृष्ठ पर जाएं या एक लेख लिखें। सामान्य तौर पर, साइट के निर्माता अब वही प्रदान करते हैं। लेकिन कुछ बिंदु सुचारू हैं:

1. पेज की डिमिंग मजबूत नहीं है ताकि आप पढ़ना जारी रख सकें।

2. मेनू पाठक और पृष्ठ क्षेत्र के पूरे मस्तिष्क पर कब्जा करने का प्रयास नहीं करता है। यह वही है जो यह है।

3. मेनू के प्रकार, जैसा कि वे कहते हैं, विभिन्न कोणों पर स्थित हैं।



जब आप 3 में से 2 तत्वों पर होवर करते हैं, तो 3 और बटन खुलेंगे, और होवर को इसके विपरीत बनाया जाएगा:









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









पूरी खिड़की को अंधेरा कर दिया जाता है, लेकिन मूल साइट पर उतनी भयावह नहीं। कोई अपारदर्शी तत्व नहीं हैं, आप पृष्ठ को पढ़ सकते हैं, हालांकि पृष्ठ के ऊपर मेनू की पठनीयता कम हो जाती है।









लेकिन मेनू के लिए संक्रमण निराला है, और पृष्ठ माउस व्हील के साथ पूरी तरह से स्क्रॉल करता है, इसलिए मेनू की पारदर्शिता पृष्ठ की आंशिक रूप से अदृश्य सामग्री की तुलना में कम बुराई है।









अंत में, एक और छोटा ट्रैकर मेनू है (बाईं ओर), और सबमेनू को बिखेरने वाला यह महाकाव्य सीमित है। हमने न्यूनतम नुकसान के साथ टाइल डिजाइन को छोड़ दिया।



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



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



इसी तरह, अलर्ट के लिए नहीं बल्कि एक मेनू के लिए एक खुला बटन रखना बेहतर होगा। लेकिन अलर्ट HTML में मेनू से ऊपर जाते हैं, और मैं अधिक छिपे हुए आइकन बनाना चाहता था। नतीजतन, मेनू और खोज पट्टी का मार्ग कुछ जटिल है (पथ पर एक क्लिक के साथ एक माउस लूप), लेकिन सहनशील और टाइल से मूल पथ की तुलना में छोटा है।

साइडबार

साइडबार में कम लाइनें होने के लिए, उन्होंने 1.5 साल पहले इसे रेखांकित करने से इनकार कर दिया था। अब साइट ने साइडबार को रेखांकित करने से इनकार कर दिया है। ताकि थोड़ा महत्व की जानकारी अंतरिक्ष को बर्बाद न करे, साइडबार में लाइन-टू-लाइन क्लीयरेंस कम हो - वहां कीवर्ड महत्वपूर्ण हैं। नियमित पाठक के लिए अप्रासंगिक को दोहराते हुए साइडबार से हटा दिया गया है। केवल नई वर्तमान जानकारी। स्थायी लिंक कम से कम कर रहे हैं। साइडबार की चौड़ाई मूल साइट (31%) की तुलना में अपेक्षाकृत छोटी (26%) है, लेकिन लाइनों और क्षेत्रों के संघनन के कारण, जानकारी को नुकसान नहीं होता है।

टिप्पणियाँ

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

चित्र, क्षेत्र, पाद लेख

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



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



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

.content_left table.menu tr td.active{border-bottom: 1px solid transparent}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कस्टम डिजाइन सुधार के बारे में

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

उपयोगकर्ता शैली प्लेसमेंट

हैबर-ज़ेनकैममेंट, संस्करण 4 (अब - 4.02)।

स्क्रिप्ट

उन्हें गितूब होस्टिंग पर होस्ट किया जाएगा, और इसे पढ़ा जाएगा, इसमें संस्करण, बग ट्रैकर, क्लोनिंग, प्रलेखन होंगे। संक्षेप में, यह usercripts.org की तुलना में अधिक सुविधाजनक है।



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



UPD 05/21/2014: एक विस्तृत विंडो में जोड़ा गया अनुकूलनशीलता, जो कुछ इस तरह दिखती है:



(1520 पिक्सेल से अधिक खिड़की की चौड़ाई के साथ स्क्रीन के बाईं ओर का दृश्य।)





UPD2 05/31/2014 : मेड HabrAjax (डॉक्स, कोड, रेपो) (Github पर एक नया होस्टिंग साइट), फिक्स्ड HabrPercentageRing , ने 2 नई साइटों पर ufoCorrect स्क्रिप्ट में लंबी छाया के साथ स्पूफिंग आइकन जोड़े।

साहित्य

• Other · ई पर नया नेविगेशन और अन्य परिवर्तन - मूल पोस्ट एक नवीनता है।
  
  
• Χ · χ · नया स्वरूप क्या गलत है, नए समाधानों की उपयोगिता का विश्लेषण है।