बड़े और जटिल वेब स्प्रेडशीट कैसे डिजाइन करें

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

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

इस लेख का अनुवाद EDISON सॉफ्टवेयर के सहयोग से किया गया, जो एक ऐसी कंपनी है जो अनुप्रयोगों और साइटों को विकसित करती है , और उपयोगकर्ता इंटरफेस के साथ भी काम करती है ।

1. जरूरतों का व्यवस्थितकरण

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

परिणामस्वरूप, आपके पास लोगों की जरूरतों और इच्छाओं की एक सूची होगी। ओपन-एंडेड प्रश्न वास्तविक जरूरतों का पता लगाने और सीटी को छानने के लिए उपयोगी हैं। उदाहरण के लिए: “क्या आप तेजी से काम करने में मदद करता है? यह आपके काम की दक्षता को कैसे बढ़ाता है? यदि आप X नहीं बना सकते हैं तो क्या परिवर्तन होगा? "

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



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

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

उप-योग

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

2. अणुव्रत का परिचय दें

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

फ़ॉन्ट्स, रंग और प्रतीक

इन भागों को पहले से ही आपके डिज़ाइन सिस्टम या UI ढांचे में परिभाषित किया जा सकता है। यदि आप किसी मौजूदा उत्पाद के लिए एक तालिका बना रहे हैं, तो जांच लें कि उसका रंग पैलेट, फ़ॉन्ट और चिह्न तालिका की आवश्यकताओं को पूरा करते हैं।

सेल और सहायक उपकरण

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

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



सेल में सहायक उपकरण जैसे टूलटिप्स, इनपुट संकेत, त्रुटि संदेश, प्लेसहोल्डर आदि हो सकते हैं। इस बिंदु पर, वे स्थिर हैं, लेकिन बाद में डेवलपर को उन्हें प्रदर्शित करने के लिए तर्क निर्दिष्ट करना होगा।

लाइन्स और हेडर

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



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



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



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



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



मेरे उदाहरण में, तीन प्रकार के फ़िल्टर ब्लॉक हैं। एक अल्फ़ान्यूमेरिक फ़िल्टर आपको अक्षरों और संख्याओं द्वारा खोजने की अनुमति देता है। वाइल्डकार्ड का समर्थन किया जाता है - अज्ञात वर्णों की एक अज्ञात संख्या। उदाहरण के लिए, यदि मैं "45 * A1" दर्ज करता हूं, तो इसका परिणाम "45A1", "45982A1B", "45A109B" और "096445-A1" जैसे मानों के साथ हो सकता है।

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


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

कॉलम

कॉम्प्लेक्स टेबल की एक सामान्य विशेषता पिन किए गए कॉलम हैं। आमतौर पर, प्रमुख जानकारी वाले कॉलम, जैसे कि आइटम का नाम या स्थिति, स्क्रॉल नहीं करते हैं।



यद्यपि तालिका के स्तंभों को सामग्री के आकार के साथ सही ढंग से समायोजित किया जाना चाहिए, यह तब होता है जब पाठ काट दिया जाता है। इस स्थिति में, एक resizable स्तंभ मदद करता है। उपयोगकर्ता स्तंभ के किनारे को खींच सकते हैं और लंबी सामग्री देख सकते हैं। उन्हें एक महत्वहीन स्तंभ या लघु पाठ के साथ एक कॉलम को भी निचोड़ने की आवश्यकता हो सकती है।



लंबे टेक्स्ट स्ट्रिंग्स को हैंडल करने का दूसरा तरीका कॉलम को सबसे लंबे कंटेंट तक फैलाना है, या कई पंक्तियों में रखा गया है। पहला दृष्टिकोण समान पाठ स्ट्रिंग के लिए बेहतर काम करता है। दूसरा विकल्प बेहतर काम करता है जब लोगों के लिए सभी सामग्री तालिका को लंबवत रूप से कॉम्पैक्ट करने से अधिक महत्वपूर्ण होती है।



मेरी एक परियोजना में, हम डिफ़ॉल्ट न्यूनतम कॉलम चौड़ाई निर्धारित करते हैं ताकि तालिकाओं का आकार परिवर्तन न हो। हमने सामग्री के प्रकार के आधार पर एक निश्चित चौड़ाई में स्तंभ संपीड़न को अक्षम कर दिया।

शीर्ष पैनल

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



अब हम विभिन्न तत्वों को संयोजित करने और यह देखने का प्रयास कर सकते हैं कि क्या यह काम करता है। यहाँ कुछ उदाहरण हैं।



बेशक, यह फ़ंक्शन और तत्वों की पूरी सूची नहीं है। यह एक परियोजना से दूसरी में भिन्न होता है और इसमें अन्य चीजें शामिल हो सकती हैं, उदाहरण के लिए:

• कई स्तंभों द्वारा क्रमबद्ध;
• कॉलम का अनुकूलन सेट (उन्हें स्विच करने की क्षमता);
• विस्तार योग्य पंक्तियाँ (मूल पंक्ति में बाल पंक्तियाँ हो सकती हैं);
• फ़िल्टरिंग और खोज के लिए तार्किक ऑपरेटर ("और", "या", "अधिक", आदि)।

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

समाप्त तालिका

जब सभी भवन खंड तैयार हो जाते हैं, तो आप विभिन्न उद्देश्यों के लिए कई तालिकाओं को इकट्ठा कर सकते हैं। यह विसंगतियों और अतार्किक फैसलों की खोज करने का एक मौका है। अक्सर मैं निम्नलिखित तीन प्रकारों से निपटता हूं।

तालिका केवल पढ़ी जाती है । निर्माण के लिए सबसे सरल प्रकार की तालिका, क्योंकि यह केवल डेटा दिखाता है जैसा कि यह है। कोई फ़िल्टरिंग या संपादन विकल्प नहीं हैं। छँटाई या पंक्ति पदानुक्रम डेटा के बड़े हिस्से का विश्लेषण करने में मदद कर सकते हैं। ऐसी तालिका का उपयोग डेटा प्रदर्शित करने के लिए किया जाता है, जो लोगों को किसी चीज़ के बारे में सूचित करता है।



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



संपादन योग्य तालिका । सभी या कुछ कोशिकाएं संपादन योग्य हैं, आमतौर पर कोई फ़िल्टरिंग नहीं होता है, क्योंकि पंक्तियों के क्रम को बदला जा सकता है। इस तरह की टेबल आमतौर पर एक टूलबार के साथ होती हैं और आपको पंक्तियों के साथ क्रिया करने की अनुमति देती हैं।

उप-योग

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

3. सहभागिता और पर्यावरण को परिभाषित करें

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

संख्यात्मक डेटा

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

• लंबाई : 2 दशमलव स्थान (57.53 मीटर, 3.16 किमी), रिक्त स्थान हजारों विभाजक (403 456.56 मीटर) के रूप में उपयोग किए जाते हैं।
• वजन : 2 दशमलव स्थान (225.08 किलोग्राम, 108.75 टी), रिक्त स्थान हजारों विभाजक (12 032.17 किलो) के रूप में उपयोग किया जाता है।
• पैसा : 2 दशमलव स्थानों ($ 9.45), कॉमा का उपयोग हजारों विभाजक ($ 16,408,989.00) के रूप में किया जाता है।
• व्यास : 3 दशमलव स्थानों (10.375 सेमी), कोई विभाजक की जरूरत नहीं है।
• अक्षांश और देशांतर : 8 दशमलव स्थान (26.4321121), माइनस का उपयोग पश्चिम देशांतर और दक्षिण देशांतर (-78.05640132) के लिए किया जाता है।
• डिफ़ॉल्ट रूप से, ऊपर सूचीबद्ध नहीं की गई इकाइयों के लिए: 2 दशमलव स्थान (32.05 g / m 86, 86.13 C °)।

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

इनपुट की पुष्टि

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

यह एक बार उपयोग किए गए संदेश टेम्प्लेट का एक उदाहरण है। कोण कोष्ठक में पाठ गतिशील है और गणना इंजन या डेटाबेस से आता है।

• अधिक number measurement unit होनी चाहिए। Optional explanation ।
• number measurement unit से कम होना चाहिए। Optional explanation ।
• value 1 और value 2 measurement unit बीच होना चाहिए। Optional explanation ।
• न्यूनतम मूल्य अधिकतम मूल्य से कम होना चाहिए।
• अधिकतम मूल्य न्यूनतम मूल्य से अधिक होना चाहिए।
• न्यूनतम और अधिकतम मान समान नहीं होने चाहिए।

आदेशों

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

तो, हमारे पास कुछ रसायनों के साथ एक तालिका है। इसमें "Add Line", "Move Up", "Move Down", "Delete", "Recalculate" और "Settings" जैसे बटन होते हैं।



और यहाँ बटन राज्यों का वर्णन है। यह पता चला है कि उनकी उपलब्धता एक या अधिक स्थितियों पर निर्भर करती है।



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

कंटेनर और अनुकूलन क्षमता

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



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

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



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

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

उपलब्धता (सरल उपयोग)

यहां तक ​​कि एक असाधारण चिकनी और सुंदर तालिका उपयोगकर्ताओं के लिए एक बुरा सपना हो सकती है। इसलिए, सुलभता के सिद्धांतों का पालन करना महत्वपूर्ण है। वेब कंटेंट एक्सेसिबिलिटी गाइड ( WCAG 2.0 ) में टेबल पर एक अध्याय है। अधिकांश सामग्री उचित प्रोग्रामिंग के बारे में है। हालांकि, डिजाइनर को भी कुछ सोचना होगा। यहां पहुंच के संदर्भ में मूल डिजाइन विचार हैं।

एक शीर्षक तालिका में दें और एक संक्षिप्त सारांश दें। एक नेत्रहीन उपयोगकर्ता को अपने सभी कोशिकाओं के आवाज प्रसंस्करण के बिना तालिका का एक विचार प्राप्त करने में सक्षम होना चाहिए।

फ़ॉन्ट का आकार देखें। यद्यपि वेब के लिए कोई आधिकारिक न्यूनतम आकार नहीं है, 16 पिक्सल (12 पीटी) को इष्टतम माना जाता है। इसके अलावा, उपयोगकर्ता को पूरे लेआउट को तोड़ने के बिना इसे 200% तक बढ़ाने में सक्षम होना चाहिए।

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

छोटे और अस्पष्ट नियंत्रण से बचें। नल पर प्रतिक्रिया करने वाले घटक अच्छे माने जाते हैं यदि उनका आकार कम से कम 40 × 40 पिक्सेल हो। आइकन द्वारा दर्शाए गए बटन या तो चिह्नित होने चाहिए या उनमें संकेत और वैकल्पिक पाठ होना चाहिए। डिजाइनरों को आइकन का दुरुपयोग नहीं करना चाहिए, क्योंकि उपयोगकर्ता जटिल रूपकों को गलत समझ सकते हैं।

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

उप-योग

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

निष्कर्ष और अतिरिक्त पठन सामग्री

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

यहां आप टेबल डिजाइन के बारे में अधिक पढ़ सकते हैं।

• " द टेबल डिज़ाइन पैटर्न ऑन द वेब, " स्मैशिंग मैगज़ीन के लिए चेन हुई जिंग का एक लेख।
• ब्रैड फ्रॉस्ट की एक पुस्तक " एटॉमिक डिज़ाइन "।
• एडम वातानंद और स्टीव शोगर की एक पुस्तक "रिफैक्टिंग यूआई "।
• UX डिजाइन के लिए एंड्रयू कोयल द्वारा " डिजाइन बेहतर डेटा टेबल्स "।
• " डिज़ाइन सिस्टम्स ", अल्ला खोलमातोवा की एक पुस्तक।

अधिक दिलचस्प प्रकाशन

• अपने वेब एप्लिकेशन को ऑफ़लाइन कैसे काम करें
• डेवलपर के लिए 5 और साहसी प्रशिक्षण परियोजनाएं (लेयर, स्क्वॉश, कैलकुलेटर, वेबसाइट क्रॉलर, म्यूजिक प्लेयर)

ब्लॉग भी पढ़ें
EDISON कंपनी:

के लिए 20 पुस्तकालय
शानदार iOS आवेदन