UI डिज़ाइन टूल में बेहतर ग्रिड सिस्टम।

डिज़ाइनर को केवल कोड में ही नहीं, बल्कि नेत्रहीन रूप से ग्रिड के परिणामों का पता लगाने में सक्षम होना चाहिए।

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

यूआई डिज़ाइन टूल में ग्रिड के साथ क्या गलत है?

सॉफ्टवेयर डेवलपर्स के पास स्क्रीन लेआउट जटिलता को प्रबंधित करने में मदद करने के लिए उपकरण हैं: iOS 'AutoLayout और Android के ConstraintLayout, Flexbox जैसे आगामी सिस्टम, और आगामी सीएसएस ग्रिड जैसे ग्रिड-विशिष्ट ढांचे भी। लेकिन लेआउट निर्णय डिजाइनरों द्वारा किए जाने चाहिए, डेवलपर्स को नहीं सौंपे गए। वे एक इंटरफेस के रूप और कार्य के लिए महत्वपूर्ण हैं। डिजाइनर केवल कोड में ही नहीं, बल्कि नेत्रहीन रूप से ग्रिड लेआउट निर्णयों के परिणामों का पता लगाने में सक्षम होना चाहिए।

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

जवाबदेही

ग्रिड बनाने के लिए, आप आमतौर पर कॉलम, गटर और मार्जिन की कुल चौड़ाई, संख्या और चौड़ाई जैसे पैरामीटर सेट करते हैं:

स्केच और फ़ोटोशॉप का ग्रिड नियंत्रण

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

यह प्रिंट के लिए ठीक काम करता है। डिजाइनर को पता है कि उनका प्रकाशन, ए 4 पेपर आकार का उपयोग करने वाला है। लेकिन डिजिटल में क्या होता है, जब आपको एक अलग डिवाइस आकार का अनुकरण करने की आवश्यकता होती है? आर्टबोर्ड आयाम बदलने का मतलब है कि ग्रिड या तो बहुत बड़ा है या बहुत छोटा है:

इस समस्या का सबसे आम समाधान कई आर्टबोर्ड बनाना है, जो प्रत्येक एक अद्वितीय डिवाइस श्रेणी के लिए है, जैसे स्मार्टफोन, टैबलेट और डेस्कटॉप। अलग-अलग ग्रिड को प्रत्येक डिवाइस / आर्टबोर्ड के लिए अलग से बनाया जा सकता है:

उत्तरदायी का अनुकरण: कुछ अलग डिवाइस आकार के लिए ग्रिड बनाना मदद कर सकता है, लेकिन विवरण अभी भी गिरते हैं।

यह आउटपुट मीडिया का एक सुंदर घटिया अनुकरण है, हालांकि, यह केवल तीन संभावित डिवाइस रिज़ॉल्यूशन का प्रतिनिधित्व करता है। (उपरोक्त उदाहरण में, यह आईफोन 7, आईपैड और एक 13 "मैकबुक प्रो है।) क्या ग्रिड निर्णय अभी भी Google पिक्सेल या एक आईमैक 5K पर ध्वनि कर रहे हैं? परिदृश्य अभिविन्यास या विभाजित विचारों के बारे में क्या?

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

परिवर्तन का प्रचार

ग्राफिक डिजाइन में प्रभावशाली ग्रिड सिस्टम में, जोसेफ मुलर-ब्रोकमैन किसी भी पृष्ठ के लेआउट से पहले, ग्रिड को एक परियोजना की शुरुआत में निर्दिष्ट करने के लिए कहते हैं। वास्तव में, मुलर-ब्रॉकमैन ग्रिड को निर्दिष्ट करने से पहले एक परियोजना के सभी चर को जानने का सुझाव देते हैं:

काम शुरू करने से पहले […] प्रारूप, पाठ और चित्र, टाइपफेस, मुद्रण विधि और कागज की गुणवत्ता के बारे में सवाल उठने चाहिए।

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

इसलिए यह आश्चर्यजनक नहीं है कि इन प्रकार के परिवर्तनों को संभालने के लिए प्रिंट-लीगेसी विज़ुअल डिज़ाइन टूल कभी डिज़ाइन नहीं किए गए थे। नालियों से चौड़ाई की कुछ इकाइयों को घटाना-या कुछ और स्तंभों में जोड़ना - इसका मतलब है कि आपको सभी तत्वों को नई ग्रिड लाइनों में मैन्युअल रूप से पुनःस्थापित करना होगा:

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

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

जैसा कि ऊपर दिखाया गया है, हालांकि, ग्रिड में एक सरल परिवर्तन का अर्थ है कि प्रत्येक तत्व को एक डिजाइन में मैन्युअल रूप से पुनः प्राप्त करना। सैकड़ों स्क्रीन से गुणा होने पर, ग्रिड परिवर्तन का अर्थ दुखी पिक्सेल धक्का के घंटे (या दिन) हो सकते हैं।

प्रयोग

एक नया ग्रिड बनाते समय, मुलर-ब्रॉकमैन संभावित कॉन्फ़िगरेशन के छोटे हाथ रेखाचित्र बनाते हैं। इस प्रक्रिया की तकनीकी कठिनाई भी उसके लिए स्पष्ट थी:

“एक स्केचिंग ग्रिड में, यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि स्केच अंतिम मुद्रित प्रारूप के अनुपात के जितना करीब हो सके। [...] केवल इस तरह से धीरे-धीरे उत्पादन करने की क्षमता हासिल करना संभव है, यहां तक ​​कि बहुत छोटे रेखाचित्रों में, टाइपोग्राफिक पैटर्न जो यथार्थवादी हैं, यानी जिन्हें बिना किसी कठिनाई के अंतिम प्रारूप में स्थानांतरित किया जा सकता है। "
 - जोसेफ मुलर-ब्रॉकमैन, ग्राफिक डिजाइन में ग्रिड सिस्टम, पीजीएस। 94, 49
ग्राफिक डिजाइन में ग्रिड सिस्टम से जोसेफ मुलर-ब्रॉकमैन के कुछ स्केच।

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

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

कैलकुलेटर को तोड़ने का समय। युक्त स्थान की चौड़ाई प्राप्त करें, उनकी चौड़ाई से गुणा गटर की संख्या को घटाएं, फिर शेष को तत्वों की संख्या से विभाजित करें। परिणाम के साथ एक तत्व ड्रा करें, इसे प्रत्येक कॉलम के लिए डुप्लिकेट करें, फिर उन सभी को समान रूप से वितरित करें:

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

बेहतर ग्रिड टूल क्या दिख सकते हैं?

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

ग्रिड स्वभाव से उत्तरदायी होना चाहिए।

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

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

स्ट्रेचेबल कॉलम को फिक्स्ड कॉलम, गटर और मार्जिन के साथ मिलाया जा सकता है। उपरोक्त उदाहरण में गटर 12px पर सेट होते हैं, इसलिए उनकी चौड़ाई स्थिर रहती है क्योंकि आर्टबोर्ड का आकार बदलता है।

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

इस तरह से काम करने से यह समझना बहुत आसान हो जाता है कि एक ग्रिड विभिन्न डिवाइस आकार और अभिविन्यासों में कैसे काम करेगा - और किसी भी किनारे के मामलों को पकड़ने से पहले वे विकास टीम को पारित कर देंगे।

गाइड और स्निपिंग को भूल जाएं- तत्वों का ग्रिड के साथ औपचारिक संबंध होना चाहिए।

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

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

उदाहरण के लिए, आपको एक नियम का उपयोग करने में सक्षम होना चाहिए जैसे "कॉलम 2 में शुरू करें, फिर 4 कॉलम की अवधि।" यह प्रत्यक्ष हेरफेर के माध्यम से किया जा सकता है, या स्पष्ट रूप से 2 / स्पैन जैसे शॉर्टहैंड का उपयोग करके 4. अब जब ग्रिड बदलता है, तत्व स्वचालित रूप से आकार बदलेंगे और उनके संरेखण को संरक्षित करेंगे:

यह ग्रिड के प्रत्यक्ष हेरफेर के लिए नई संभावनाओं को भी खोलता है, जैसे गटर और स्तंभों का आकार बदलना:

ग्रिड तेजी से प्रयोग को सक्षम करना चाहिए।

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

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

दो-आयामी ग्रिड को अनदेखा नहीं किया जाना चाहिए।

कॉलम ग्रिड में बहुत सारे उपयोग के मामले होते हैं, लेकिन कई लेआउट को कॉलम और पंक्तियों की आवश्यकता होती है, जो कि मुलर-ब्रॉकमैन के मॉड्यूलर ग्रिड के समान है। आपको इन दोनों आयामों में तत्वों का वर्णन करने में सक्षम होना चाहिए: “क्षैतिज रूप से, इस तत्व को कॉलम 3 में शुरू करना चाहिए और 2 कॉलम को फैलाना चाहिए। ऊर्ध्वाधर रूप से, यह पंक्ति 1 पर शुरू होना चाहिए और पंक्ति 2 पर समाप्त होना चाहिए। "

एक-आयामी ग्रिड के साथ, किसी भी दिशा में ग्रिड का आकार बदलना स्वचालित रूप से सामग्री को प्रतिबिंबित करता है। सब-ग्रिड ग्रिड में परिवर्तन की गणना भी कर सकता है, जैसे वास्तविक समय में गटर को जोड़ना:

कुछ भी एक ग्रिड को शामिल करने में सक्षम होना चाहिए।

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

कोई भी आयताकार तत्व एक ग्रिड को शामिल करने में सक्षम होना चाहिए। एक तालिका, उदाहरण के लिए, उस पर रहने वाली स्क्रीन से एक अलग ग्रिड संरचना की आवश्यकता हो सकती है:

कई ग्रिड और उन्हें घोंसले का उपयोग करने की क्षमता भी डिजाइनर के लिए रचनात्मक रचनात्मकता का एक बहुत खोलती है। (कार्ल गेर्स्टनर ने 1962 में कैपिटल मैगज़ीन के लिए मल्टीपल ओवर ग्रिड के साथ कुछ बेहतरीन काम किया।

निष्कर्ष

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

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

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

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