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

हम डिजाइन शिविर की राह पर लेख प्रकाशित करना जारी रखते हैं। आज हमारे पास विंडोज फोन में ग्रिड के उपयोग पर येगोर गिलेव ( yegorg ) द्वारा एक लेख जारी है। लेख प्रस्तुत किया गया है और विंडोज फोन के लिए अनुप्रयोगों के डिजाइन पर लेखक के दृष्टिकोण को प्रदर्शित करता है।

बेसलाइन ग्रिड

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



दुर्भाग्य से, दोस्तों के हमारे ग्रिड के साथ बेसलाइन का एक ग्रिड बनाने का कोई तरीका नहीं है। ऐसा इसलिए है क्योंकि मॉड्यूल के आकार और इंडेंटेशन में एक आम भाजक नहीं होता है। याद है, हम इस बारे में चिंतित थे, संख्या 25 और 12 को देख रहे थे? यह वह जगह है जहाँ यह आया था:



क्या करें? मेरी राय में, हमारे पास तीन समाधान हैं। और प्रत्येक कुछ पीड़ितों के साथ जुड़ा हुआ है। खैर, आप जानते हैं - आप सही पर जाएंगे, आप घोड़े को खो देंगे, और इसी तरह।

पहला तरीका : वर्गों को छोड़ दें। आइए हम 12 स्तंभों को क्षैतिज और लंबवत रूप से - बस आधार रेखाओं की एक समान ग्रिड बनाएं:



लेकिन, मैं तुरंत ही कहूंगा, मैं बिल्कुल बक्से की अस्वीकृति की तरह नहीं हूं। इस दृष्टिकोण के साथ, हम अनिवार्य रूप से 173 × 168 जैसे ब्लॉक के पूरी तरह से हास्यास्पद अनुपात होंगे। इसलिए मुझे यह शाखा गतिरोध लगती है।

दूसरा तरीका : 25 पिक्सेल से मॉड्यूल के आकार को 24 तक कम करें। फिर मॉड्यूल ठीक 2 बार इंडेंटेशन होगा, जो आपको 12 या 24 पिक्सेल के वेतन वृद्धि में आधार रेखा के ग्रिड का उपयोग करने की अनुमति देगा। लेकिन फिर स्क्रीन के किनारों से 6 पिक्सेल जोड़े जाएंगे, इसलिए किनारे से इंडेंट 24 पिक्सेल नहीं होगा, लेकिन 30 के रूप में:



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

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

खरोंच से

आइए, स्क्रैच से सब कुछ शुरू करने की कोशिश करें और स्क्रीन को 12 × 12 पिक्सल के सेल में विभाजित करें, जो कि एक बार और सभी के लिए सामान्य हर के बारे में प्रश्न को हल करने के लिए है:



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



परिणाम पैनोरमा के प्रत्येक खंड के लिए 36 सेल है। 36 एक बहुत अच्छी संख्या है! यह भी सभी आगामी लाभों के साथ, 12 से विभाजित है। लेकिन हम 36 को 12 से नहीं, बल्कि 6 से विभाजित करेंगे, जैसा कि माइक गस ने ग्रिड के अपने संस्करण में किया था। हमें 6 छोटी कोशिकाओं के आकार के साथ बड़ी कोशिकाएँ खड़ी और क्षैतिज रूप से मिलती हैं:



इसी ग्रिड को न केवल कोशिकाओं के रूप में दर्शाया जा सकता है, बल्कि चौकोर 48 × 48 के रूप में 24 पिक्सल्स द्वारा इंडेंट किया जाता है:



कुछ मामलों में, हमें 12-पिक्सेल वर्ग के साथ एक छोटे और अधिक लचीले ग्रिड की आवश्यकता होती है:

नतीजा क्या हुआ

चौकों सुंदर निकला, लेकिन यह वास्तविक जीवन में कैसे काम करता है?

इस तरह से हमारे आवेदन की मुख्य स्क्रीन अंत में निकली:





निम्नलिखित उदाहरण में, सूचना, पाठ और टाइलों के ब्लॉक ग्रे आयतों में दिखाए गए हैं। यह स्पष्ट रूप से देखा जाता है कि ये ब्लॉक 1 वर्ग के इंडेंट को छोड़ कर बड़ी ग्रिड लाइनों का पालन करते हैं, यानी 12 पिक्सेल:



ध्यान दें कि पैनोरमा के पहले खंड में आधार रेखाएँ कैसे पंक्तिबद्ध हैं:



पैनोरमा के दूसरे खंड में, आइकनों के केंद्रों को बड़ी ग्रिड की रेखाओं के साथ संरेखित किया जाता है, और टाइल्स के अंदर लेबल ग्रिड की पतली रेखाओं के साथ स्थित होते हैं:



समाचार पैनोरमा का तीसरा खंड:



यहाँ आधार रेखा के बीच सभी अंतराल दो ग्रिड कोशिकाओं के गुणक हैं। या 4 कोशिकाओं, या 6, यदि आपको अधिक इंडेंटेशन की आवश्यकता हो।

नवीनतम ब्लॉग प्रविष्टियों के साथ चौथा पैनोरमा खंड उसी तरह बनाया गया था:



यहां आप बड़े सुर्खियों पर ध्यान दे सकते हैं, जहां हमें अधिक लाइन रिक्ति की आवश्यकता थी। यदि हमारे लिए सामान्य लाइन स्पेस 2 सेल या 24 पिक्सल है, तो बड़े हेडर के मामले में 3 सेल हैं, यानी 36 पिक्सल।

दस्तावेज़ सूची स्क्रीन:



यहां आप स्पष्ट रूप से देख सकते हैं कि बड़े ब्लॉकों के बीच की दूरी एक बड़ी ग्रिड के कदम के बराबर है।

परिणाम स्क्रीन खोजें:



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

पाठ सामग्री के साथ एक और स्क्रीन दस्तावेज़ की सामग्री है:



स्क्रीन के बारे में:



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



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

===
मुझे उम्मीद है कि मैंने जो समाधान प्रस्तावित किया है, वह विंडोज फोन के लिए तेजी से और अधिक सुखद तरीके से सुंदर एप्लिकेशन बनाने में आपकी मदद करेगा। कम से कम हमारे Pravo.ru आवेदन जितना सुंदर है।