अंतरिक्ष, ग्रिड और लेआउट

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

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

एक स्थानिक प्रणाली क्या है?

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

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



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

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

स्थानिक प्रणाली के साथ काम करना कैसे शुरू करें?

यह आधार इकाई की परिभाषा के साथ शुरू करने लायक है - यह आपको अपने स्थानिक प्रणाली में समर्थित आकारों का एक पैमाना बनाने की अनुमति देगा। इंटरनेट पर विभिन्न उत्पादों को ब्राउज़ करते समय, आपको इसके लिए कई अलग-अलग दृष्टिकोण दिखाई देंगे। आप 4pt, 5pt, 6pt, 8pt, 10pt जैसी प्रणालियों में आ सकते हैं। कोई गलत विकल्प नहीं है जब तक आप यह पता नहीं लगाते हैं कि इनमें से प्रत्येक सिस्टम क्या योगदान देता है या क्या समाधान रोकता है।

मेरी पसंदीदा विधि अंतराल के आइकनों या छोटे पाठ ब्लॉकों के लिए 4pt आधा कदम वाले तत्वों के लिए 8pt रैखिक स्केल है। मैं अपनी टाइपोग्राफी के लिए 4pt बेस ग्रिड पसंद करता हूं, जिसका अर्थ है कि मेरे फॉन्ट चयन की लाइन की ऊंचाई हमेशा 4 से विभाज्य होगी। यह सिस्टम भ्रम को कम करने के लिए डिज़ाइन किया गया है, और इसे लागू करना भी आसान है।



अपना स्वयं का स्थानिक सिस्टम बनाते समय, निम्न बातों के बारे में सोचें:

1. उपयोगकर्ता की जरूरत है

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

2. चर की संख्या

एक छोटी आधार इकाई, जैसे 4pt, 5pt या 6pt को चुनना, आपके सिस्टम पर बहुत अधिक चर बना सकता है। नतीजतन, 12pt और 16pt के बीच के अंतर का निरीक्षण करना कठिन हो जाएगा, जो टीम के कार्यों में निरंतरता को जटिल कर सकता है। मुझे लगता है कि 8pt की वृद्धि उचित दूरी के साथ दृश्य दूरी के लिए सही संतुलन है। इसके अलावा, 4 बिंदुओं की एक अर्ध-इकाई का उपयोग माउस को रखने या छोटे पाठ ब्लॉक को अनुकूलित करने के लिए किया जाता है।

3. विषम संख्या

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

स्थानिक प्रणाली कैसे लागू करें?

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



इस उदाहरण में, आप देख सकते हैं कि इस पाठ की लाइन ऊंचाई 20px है, लेकिन अगर मैंने ऊपर और नीचे 8px इंडेंट का उपयोग किया है, तो बटन की ऊंचाई 36px होगी। किस मामले में, किस माप को प्राथमिकता दी जानी चाहिए? इस समस्या को हल करने के दो तरीके हैं:

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



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



आप हमेशा "सही पिक्सेल" कोड को अंतहीन रूप से बदल सकते हैं, लेकिन साथ ही आप योजना के कार्यान्वयन के लिए टीम से सहमत नहीं होने पर सादगी और तन्मयता का त्याग कर सकते हैं।

लेआउट सिस्टम क्या है?

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

कॉलम बेस्ड लेआउट सिस्टम

इस तरह की एक लेआउट प्रणाली आपको सामग्री को समान रूप से लंबवत स्तंभों में व्यवस्थित करने में मदद करती है। स्तंभों के बीच के स्थान को "गटर का आकार" कहा जाता है। इन "नालियों" के लिए अपने स्थानिक प्रणाली के नियमों को लागू करने से आपकी परियोजना को एक सुसंगत लय देने में मदद मिलेगी। एक विशिष्ट उदाहरण 12 कॉलम का एक ग्रिड है, क्योंकि यह आपको इस क्षेत्र को 2, 3, 4 या 6 भागों में विभाजित करने की अनुमति देता है।

मॉड्यूलर लेआउट प्रणाली

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

बुनियादी लेआउट प्रणाली

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

लेआउट निर्माण

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

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

अनुकूली (अनुकूली)

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

उत्तरदायी (उत्तरदायी)

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

सख्त (सख्त)

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

डिजाइन परियोजनाओं के मौजूदा सेट पर एक स्थानिक प्रणाली को कैसे लागू किया जाए

खरोंच से शुरू करना किसी भी परियोजना के लिए आसान है। चुनौती के लिए मौजूदा डिजाइन को आधुनिक बनाना है।

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

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

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

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