विंडोज फोन के लिए इंटरफेस के डिजाइन में ग्रिड: एक सख्त शिक्षक या एक अच्छा सहायक? (भाग 1)

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

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

कंपनी में मुझे एक सनकी के रूप में जाना जाता है। यह माना जाता है कि डिजाइनर को एक बड़े एल्यूमीनियम खसखस ​​पर काम करना चाहिए और एक iPhone, अधिमानतः नवीनतम पीढ़ी। मैं विंडोज 8 ट्रांसफार्मर लैपटॉप पर काम करता हूं जो मैंने रूस में विंडोज 8 की बिक्री के पहले दिन खरीदा था। मेरा फोन एक सफेद लूमिया 710 है - अभी भी विंडोज फोन 7.5 पर है। यदि आपको लगता है कि मुझे विंडोज से प्यार है, तो आप गलत नहीं हैं। विशेष रूप से नया विंडोज इंटरफ़ेस, जिसे मेट्रो कहा जाता था। मैं उन्हें एक यूजर और एक इंटरफेस डिजाइनर के रूप में बहुत प्यार करता हूं।

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



जैसा कि आप जानते हैं, जब हमने विंडोज फोन 7 के लिए Pravo.ru मोबाइल एप्लिकेशन बनाने का फैसला किया, तो इसका इंटरफेस बनाने का काम स्वाभाविक रूप से मेरे पास आया, जिसे लेकर मैं बहुत खुश था। सबसे पहले, क्योंकि मैं इसे आकर्षित करने के लिए प्रसन्न था, और दूसरी बात, क्योंकि इससे मुझे विंडोज फोन के लिए सामान्य रूप से इंटरफ़ेस डिजाइन गाइड और विशेष रूप से ग्रिड के साथ काम करने के नियमों को समझने का अवसर मिला।

क्या ग्रिड?

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

आधिकारिक गाइड में, हम केवल इस उदाहरण को पा सकते हैं:



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

जब पर्याप्त आधिकारिक जानकारी नहीं होती है, तो कम आधिकारिक होने वाली जानकारी के साथ खोज के दायरे का विस्तार करना आवश्यक है, लेकिन फिर भी सभी आत्मविश्वास के योग्य हैं।

यहां, उदाहरण के लिए, माइक गस की साइट से एक तस्वीर - अद्वितीय दृश्य भाषा विंडोज फोन 7 के रचनाकारों में से एक:



यहां हमें पिछली तस्वीर की तरह 6 कॉलम का ग्रिड दिखाई देता है, न कि 12। लेकिन, जैसा कि आप समझते हैं, 6 में से 12 बनाना आसान है - और इसके विपरीत। यदि हम मान लें कि ठीक उसी जाली को यहाँ चित्रित किया गया है, केवल खांचे गायब हैं, तो हम शायद ही गलत समझें।

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

अंत में, यहाँ हम सभी संख्यात्मक मापदंडों को देखते हैं, और हम इस ग्रिड को विभिन्न प्रारूपों की फाइलों में डाउनलोड कर सकते हैं:



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

ऐसा ग्रिड क्यों?

तो, वर्ग मॉड्यूल आकार में 25 × 25 पिक्सेल हैं, और उनके बीच के स्थान 12 पिक्सेल हैं। मुझे बताओ, इन दो नंबरों के बीच आम क्या मिल सकता है: 25 और 12? सही उत्तर है: कुछ भी नहीं। इन नंबरों के लिए एक सामान्य भाजक की अनुपस्थिति वास्तव में हमें समस्याओं का वादा करती है, जिसके बारे में मैं थोड़ी देर बाद बात करूंगा। अब, आइए यह पता लगाने की कोशिश करें कि ऐसे नंबर कहां से आए, क्योंकि वे वास्तव में अजीब दिखते हैं।

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



जहाँ w स्क्रीन की चौड़ाई है, x स्तंभ की चौड़ाई है, और y स्तंभों के बीच की चौड़ाई की चौड़ाई है।

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

हमने पता लगाया कि स्क्रीन को क्षैतिज रूप से कैसे विभाजित किया गया है। और ऊर्ध्वाधर क्या है? ऊर्ध्वाधर, सब कुछ बिल्कुल समान है। समान क्षैतिज और ऊर्ध्वाधर रिक्ति वाले स्क्वायर मॉड्यूल आपको स्क्रीन पर विभिन्न आकारों के वर्ग ब्लॉकों को अपनी इच्छानुसार रखने की अनुमति देते हैं। और न केवल वर्ग।

यहां बताया गया है कि यह ग्रिड विंडोज फोन 7 और 8 की मुख्य स्क्रीन के उदाहरण पर कैसे काम करता है:



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

व्यवहार में लाने का प्रयास

मेट्रो शैली के लेखकों के काम के उदाहरण से प्रेरित होकर, मैंने विंडोज फोन के लिए Pravo.ru एप्लिकेशन के डिजाइन में इस जादू को लागू करने की कोशिश की। मुख्य स्क्रीन तुरंत बहुत सुंदर निकली:



मैं यह नहीं कह सकता कि यह मुश्किल था, क्योंकि यह लगभग पूरी तरह से विंडोज फोन 7 सिस्टम की मुख्य स्क्रीन को दोहराता है। यह आश्चर्य की बात नहीं है कि सभी तत्व सफलतापूर्वक ग्रिड फिट करते हैं।

लेकिन समाचार फ़ीड स्क्रीन के साथ कठिनाइयाँ थीं:



ग्रिड पर पाठ सामग्री हठपूर्वक नहीं जाना चाहती थी। ग्रिड लाइनों के साथ पाठ के आधार लाइनों के व्यक्तिगत संयोग को यादृच्छिक माना जा सकता है, जिस तरह एक टूटी हुई घड़ी दिन में दो बार सही समय दिखाती है।

पहला निष्कर्ष जो मेरे यहाँ भीख माँगता है, बल्कि मेरे लिए अप्रभावी लगता है: ग्रिड एक बुरे डिजाइनर के रास्ते में है। एक बुरे नर्तक के साथ सादृश्य द्वारा जो रास्ते में है, यह ज्ञात है कि हालांकि, अपने स्वयं के पेशेवर अभियोग्यता की प्राप्ति से अवसाद में डूबने से पहले, मैंने इस ग्रिड को Microsoft से आधिकारिक टेम्पलेट्स में संलग्न करने का प्रयास किया।

हम क्या देखते हैं? ग्रिड पर अलग पैटर्न तैयार किए गए हैं:



अन्य लोग पूरी तरह से ग्रिड को अनदेखा करते हैं:



अन्य केवल आंशिक रूप से ग्रिड का पालन करते हैं:



जाहिर है, मैंने अनजाने में एक रूसी कहावत को इस तथ्य के बारे में बताया कि यदि आप ईश्वर से प्रार्थना करते हैं, तो वह अपना माथा तोड़ सकता है।

आर्टुरो हमारी मदद करेगा

मदद की तलाश में, हम अपने दोस्त आर्थर टोलेडो की मदद के लिए फिर से मुड़ने की कोशिश करेंगे। स्क्रीन पर तत्वों की व्यवस्था पर तीन वीडियो हैं:

• भाग I
• भाग ii
• भाग III

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



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



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



अब सब कुछ सुंदर है, लेकिन ग्रिड अब सीधे इस सुंदरता से संबंधित नहीं है।

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

जारी रखने के लिए ...