हम स्मार्टफोन स्क्रीन में तालिकाओं को कैसे फिट करते हैं और उन्हें डिज़ाइन सिस्टम के हिस्से के रूप में एकीकृत करते हैं

हम कर्मचारियों और ग्राहकों के भागीदारों के लिए काम करने के उपकरण विकसित करते हैं। हमारे द्वारा बनाए गए अधिकांश मॉड्यूल में विस्तृत जानकारी के साथ टेबल, रजिस्टर, कार्ड होते हैं।

प्रारंभ में, मॉड्यूल का मुख्य भाग वेब के लिए तेज किया गया था, क्योंकि स्थिर कंप्यूटर के कार्यालय कर्मचारी सिस्टम के साथ काम करते हैं। वेब के लिए हमने एक डिज़ाइन सिस्टम कैसे बनाया, इसके बारे में हमने पहले लिखा था ।

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

डिजाइन इंजीनियरिंग के लिए, यह हमें 2 कार्य देता है:

1. बड़े को छोटे में बदलें - बड़ी सूचियों को मोबाइल प्रस्तुति में अनुवाद करें।



2. एक एकीकरण दृष्टिकोण विकसित करें - हमारे पारिस्थितिकी तंत्र के भीतर विभिन्न सूचियों के लिए मोबाइल प्रस्तुति को एकजुट करें। ताकि उपयोगकर्ता अनुभव सुसंगत हो, चाहे उपयोगकर्ता जिस भी मॉड्यूल के साथ काम करे।

इस नोट में, हम साझा करेंगे कि कैसे हमने सूचियों में तालिकाओं के अनुवाद और विभिन्न सूचियों की प्रस्तुति को एकीकृत करने की समस्याओं के समाधान के लिए संपर्क किया।

हम तट पर अवधारणाओं पर सहमत हैं

हमारे पास जो डिज़ाइन ऑब्जेक्ट है वह अनिवार्य रूप से तालिका में एक पंक्ति है।

उदाहरण के लिए

• यात्रा आवेदन
• व्यय रिपोर्ट
• बिक्री की जानकारी
• एक साथी और इतने पर कनेक्ट करने के लिए आवेदन।

लेख में आगे हम अपनी वस्तु को एक पंक्ति कहेंगे।

कार्य का विघटन

सबसे पहले, हमने एक साथ रखा और हमारी सभी सेवाओं का विश्लेषण किया, वास्तव में, उन्हें घटकों में विभाजित किया।

हम उस डेटा को निर्धारित करते हैं जिसे मोबाइल संस्करण में स्थानांतरित करने की आवश्यकता है

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

एक टेबल पैटर्न को परिभाषित करना

हम इस डेटा को एक पृष्ठ पर कैसे फिट करेंगे? Google की सामग्री डिज़ाइन प्रणाली हमारी संरचना के समान है, और उनके समाधान हमारी वास्तविकताओं के लिए काफी हद तक लागू होते हैं।

मटीरियल डिज़ाइन कॉन्सेप्ट में, डेटा को सूचियों और कार्ड के रूप में प्रदर्शित किया जाता है।

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


चित्र स्रोत

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

हमने डेटा को कैसे एकीकृत किया जाए, इस पर नियम तय किए

एक प्रणाली बनाते समय, एकरूपता सुनिश्चित करना महत्वपूर्ण है ताकि सूचना की प्रकृति की परवाह किए बिना कार्ड समान रूप से प्रस्तुत किए जाएं।

1. कार्ड बनाने के लिए एकीकृत नियम। कार्ड संरचना में समान होना चाहिए: उपयोगकर्ता को प्रत्येक नई सेवा के लिए वापस नहीं किया जाना चाहिए। इसलिए, सूचना ब्लॉक और उनके प्रदर्शन की प्राथमिकता नियमों में तय की जाती है।
2. कार्ड - सभी नहीं, लेकिन तालिका से सबसे महत्वपूर्ण जानकारी - स्मार्टफोन स्क्रीन पर दिखाई देनी चाहिए।
3. तालिका से अतिरिक्त विस्तृत जानकारी प्राप्त करने (प्रदर्शित करने) की विधियाँ भी एक समान होनी चाहिए।

कंस्ट्रक्टर का निर्माण करें

हम लाइन में सार को उजागर करते हैं

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

हमने कार्ड की सामग्री को महत्व के 3 डिग्री में विभाजित किया है:



1. मुख्य जानकारी - यह आवश्यक है, लेकिन शायद निर्णय लेने के लिए पर्याप्त नहीं है। लेकिन यह वही है जो सभी मॉड्यूल में है, और यह ठीक उसकी प्रस्तुति है जिसे हम एकीकृत करते हैं।

1.1। ऑब्जेक्ट पहचानकर्ता - प्रत्येक कार्ड के लिए आईडी, संख्या, दिनांक और अन्य अद्वितीय मान।

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

1.3। क्रियाएँ - प्रत्येक पंक्ति में हमेशा लक्ष्य क्रियाएं (स्वीकार / अस्वीकार) और कई अतिरिक्त क्रियाएं होती हैं (पुनर्निर्देशित, एक प्रश्न पूछें, आदि)।

प्रमुख क्रियाएं एक या दो से अधिक नहीं हो सकती हैं। हम उन्हें स्पष्ट रूप से उपलब्ध कराते हैं - हम उन्हें सीधे कार्ड पर रखते हैं। और हम लड़ाई के तहत अतिरिक्त लोगों को छिपाते हैं।

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

3. अतिरिक्त विवरण , जानकारी जो स्थिति के गहन अध्ययन के लिए आवश्यक है, लेकिन निर्णय लेने को प्रभावित नहीं करती है। हम इसे मोबाइल प्रस्तुति में बिल्कुल नहीं डाल सकते हैं। यह केवल वेब संस्करण में ही रहता है।

कार्ड निर्माण सिद्धांत

हम एफ-पैटर्न के अनुसार कार्य करते हैं।

• हम मुख्य जानकारी को ऊपरी बाएँ कोने में रखते हैं।

चित्र स्रोत

• हम बाईं ओर जानकारी की व्यवस्था करते हैं - यह उपयोगकर्ता से परिचित है, वह पहली जगह में स्थित जानकारी को पढ़ने की अधिक संभावना है।

चित्र स्रोत

• हम पाठ में जानकारी प्रस्तुत करते हैं, न कि चित्रों या आइकन में। उन्होंने ऐसा किया, क्योंकि हमारे मामले में वे जगह को अव्यवस्थित करते हैं और अक्सर अस्पष्ट रूप से माना जा सकता है।
• हम अत्यधिक सामग्री से बचते हैं और वेब से अतिरिक्त विवरण स्थानांतरित नहीं करते हैं।

चित्र स्रोत

फिल्टर और छंटनी

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

मोबाइल प्रस्तुति के लिए, हम निम्नलिखित पर सहमत हुए:

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

परिणाम

इसलिए, ऊपर वर्णित तकनीकों द्वारा निर्देशित, हमने ग्राहक के पारिस्थितिकी तंत्र के विभिन्न मॉड्यूलों के लिए मोबाइल प्रस्तुतिकरण तैयार किए:

• एजेंट नेटवर्क के लिए एक साथी को जोड़ने के लिए आवेदन
• कॉर्पोरेट समाचार प्रशासन पैनल
• यात्रा अनुरोध

कुल मिलाकर

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

निम्नलिखित मॉड्यूल के लिए मोबाइल प्रस्तुतियों का विकास आपकी ज़रूरत के हिसाब से सीमित है।

1. सूचना के एक सेट को परिभाषित करें
2. सूचना ब्लॉकों को प्राथमिकता दें,
3. इंटरफ़ेस में उपयुक्त पाठ लिखें,
   
   
   • "पोस्टिंग की तारीख" / "प्रस्थान की तारीख" / "प्रकाशन की तारीख"।
   • "सहमत / अस्वीकार" या "सहमत / असहमत"।
4. यदि आवश्यक हो, तो व्यक्तिगत दृश्य तत्वों को काम करें।