डिज़ाइन के सुझाव

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

हालांकि, हर स्क्रीन कॉन्फ़िगरेशन पर अपने उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, आपको अलग-अलग साइज़ के हिसाब से अपने लेआउट और अन्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को ऑप्टिमाइज़ करना होगा. ChromeOS पर, यूज़र इंटरफ़ेस (यूआई) को ऑप्टिमाइज़ करने से, आपको स्क्रीन पर ज़्यादा जगह मिलती है. इससे नई सुविधाएं ऑफ़र की जा सकती हैं, नया कॉन्टेंट दिखाया जा सकता है या उपयोगकर्ता की दिलचस्पी बढ़ाने के लिए बेहतर अनुभव दिया जा सकता है.

बड़ी स्क्रीन के लिए लेआउट

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

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

यहां कुछ सुझाव दिए गए हैं:

• इन बड़ी स्क्रीन के लिए कस्टम लेआउट उपलब्ध कराएं. इसके लिए, स्क्रीन के सबसे छोटे डाइमेंशन या कम से कम उपलब्ध चौड़ाई और ऊंचाई का इस्तेमाल करें.
• सोचें कि ChromeOS जैसे लैंडस्केप मोड वाले एनवायरमेंट में, आपका यूज़र एक्सपीरियंस और लेआउट कैसे काम करते हैं. विंडो के साइज़ के हिसाब से, इन ओरिएंटेशन में अपने लेआउट को इस तरह से अडजस्ट करें कि वे अच्छे दिखें और बेहतर परफ़ॉर्म करें. इसके अलावा, लैंड रिसॉर्स क्वालिफ़ायर का इस्तेमाल करके, लैंडस्केप ओरिएंटेशन के लिए खास लेआउट उपलब्ध कराएं. विंडो मैनेजमेंट पेज पर, बड़ी स्क्रीन के लिए डाइनैमिक विंडो का साइज़ बदलने और अन्य बातों के बारे में ज़्यादा जानें.
• जब आपके ऐप्लिकेशन को चौड़ा किया जाता है, तो सबसे नीचे मौजूद नेविगेशन बार ठीक से स्केल नहीं होते. नेविगेशन को बाईं ओर के मेन्यू में ले जाएं, ताकि यह ज़्यादा आसानी से ऐक्सेस किया जा सके और इसमें ज़्यादा विकल्प दिखाए जा सकें. जवाब देने के उदाहरण में इसे अच्छी तरह से समझाया गया है.
• बड़ी स्क्रीन के लिए, कम से कम फ़ॉन्ट साइज़, मार्जिन, और स्पेसिंग जैसे डाइमेंशन को पसंद के मुताबिक बनाएं. इससे स्पेस का बेहतर तरीके से इस्तेमाल किया जा सकेगा और कॉन्टेंट को आसानी से पढ़ा जा सकेगा. ध्यान रखें कि जब उपयोगकर्ता, ChromeOS डिवाइस या अन्य डेस्कटॉप एनवायरमेंट जैसे डिवाइस से थोड़ी दूरी पर हों, तो चीज़ें कैसी दिखेंगी.
• यूज़र इंटरफ़ेस (यूआई) कंट्रोल की पोज़िशन को इस तरह से अडजस्ट करें कि माउस का इस्तेमाल करते समय या टैबलेट को पकड़ते समय, उपयोगकर्ता उन्हें ऐक्सेस कर सकें. जैसे, किनारों की ओर और बीच से दूर.
• ChromeOS और बड़ी स्क्रीन वाले अन्य डिवाइसों पर, यूज़र इंटरफ़ेस (यूआई) एलिमेंट की पैडिंग, हैंडसेट की तुलना में ज़्यादा होनी चाहिए. आपके मार्जिन और गटर, अलग-अलग स्क्रीन साइज़ के हिसाब से अपने-आप अडजस्ट होने चाहिए.
• टेक्स्ट कॉन्टेंट को इस तरह से पैड करें कि वह सीधे तौर पर स्क्रीन के किनारों के साथ अलाइन न हो. स्क्रीन के किनारों के पास मौजूद कॉन्टेंट के चारों ओर, कम से कम 16 डीपी पैडिंग का इस्तेमाल करें.

खास तौर पर, पक्का करें कि आपके लेआउट, स्क्रीन पर "खींचे हुए" न दिखें:

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

स्क्रीन के ज़्यादा हिस्से का फ़ायदा पाना

ChromeOS डिवाइसों पर, आपके ऐप्लिकेशन को ज़्यादा स्क्रीन स्पेस मिलता है. बड़ी स्क्रीन के लिए अपने ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करते समय, इस अतिरिक्त जगह का पूरा फ़ायदा लें.

Reply और Rally के उदाहरणों में, ऐप्लिकेशन ने बड़ी स्क्रीन का इस्तेमाल करने के लिए अलग-अलग तरीके अपनाए हैं. जवाब देने की सुविधा से, चैट को साफ़-सुथरा दिखाने में मदद मिलती है. वहीं, 'एक साथ मिलकर काम करें' सुविधा से ज़्यादा डेटा दिखता है, ताकि स्क्रोल करने और टैप करने की ज़रूरत कम पड़े.

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

यहां आपके ऐप्लिकेशन के लिए कुछ सुझाव दिए गए हैं:

• आपका ब्रैंड तय करता है कि आपको अलग-अलग स्क्रीन साइज़ के बारे में सोचते समय किस दिशा में जाना चाहिए. उपयोगकर्ता को क्या दिखाना है और किस चीज़ को प्राथमिकता देनी है, यह इस बात पर निर्भर करता है कि उपयोगकर्ता की किस तरह की गतिविधियां मौजूद हैं और सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधाएं कौनसी हैं. प्रेरणा पाने के लिए, मटेरियल स्टडी देखें. साथ ही, देखें कि हर प्रॉडक्ट बड़ी स्क्रीन पर अलग-अलग तरीके से कैसे दिखता है.
• सोचें कि रिस्पॉन्सिव ग्रिड सिस्टम का इस्तेमाल करके, आपके ऐप्लिकेशन का डिज़ाइन कैसा होना चाहिए. साथ ही, बड़ी स्क्रीन पर कॉन्टेंट, नेविगेशन, और विकल्पों को कैसे मूव करना चाहिए.
• तय करें कि आपको किन स्क्रीन साइज़ के लिए अलग-अलग लेआउट इस्तेमाल करने हैं. इसके बाद, विंडो के साइज़ के हिसाब से अलग-अलग बकेट (जैसे, बड़ी/ज़्यादा बड़ी) या विंडो की कम से कम चौड़ाई (जैसे, sw600dp/sw720) के हिसाब से अलग-अलग लेआउट उपलब्ध कराएं. ध्यान रखें कि इन लेआउट पर पहुंचने पर, उपयोगकर्ता का कॉन्टेक्स्ट नहीं बदलना चाहिए. साथ ही, लेआउट के बीच ट्रांज़िशन करते समय, आपको उपयोगकर्ता की सभी स्थितियों को बनाए रखने की कोशिश करनी चाहिए. जैसे, स्क्रोल करने की पोज़िशन, लिखा जा रहा टेक्स्ट वगैरह.

ज़्यादा डेंसिटी और बड़ी स्क्रीन के लिए डिज़ाइन की गई ऐसेट का इस्तेमाल करें

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

Android पर VectorDrawable और वेक्टर ऐसेट के बारे में ज़्यादा जानने के लिए, निक बुचर की यह ब्लॉग पोस्ट पढ़ें.

फ़ॉन्ट के साइज़ और टच टारगेट में बदलाव करना

अपने ऐप्लिकेशन को ChromeOS और ज़्यादा डेंसिटी वाली स्क्रीन पर इस्तेमाल करने लायक बनाने के लिए, अपने यूज़र इंटरफ़ेस (यूआई) में फ़ॉन्ट के साइज़ और टच टारगेट को अडजस्ट करें. ऐसा उन सभी स्क्रीन कॉन्फ़िगरेशन के लिए करें जिन्हें टारगेट किया जा रहा है. स्टाइल किए जा सकने वाले एट्रिब्यूट या डाइमेंशन रिसॉर्स की मदद से, फ़ॉन्ट के साइज़ को अडजस्ट किया जा सकता है. साथ ही, लेआउट और बिटमैप ड्रॉएबल की मदद से, टच टारगेट को अडजस्ट किया जा सकता है. इसके बारे में पहले बताया जा चुका है.

इन बातों का ध्यान रखें:

• बड़ी स्क्रीन के साइज़ और डेंसिटी पर टेक्स्ट बहुत ज़्यादा बड़ा या छोटा नहीं होना चाहिए. पक्का करें कि लेबल का साइज़, यूज़र इंटरफ़ेस (यूआई) के उन एलिमेंट के हिसाब से सही हो जिनसे वे जुड़े हैं. यह भी पक्का करें कि लेबल, टाइटल, और अन्य एलिमेंट में लाइनें सही तरीके से टूटी हों.
• स्क्रीन पर मौजूद एलिमेंट के लिए, टच-टारगेट का सुझाया गया साइज़ 48 डीपी है. बड़ी स्क्रीन के यूज़र इंटरफ़ेस (यूआई) में कुछ बदलाव करने पड़ सकते हैं. स्पेसिंग के तरीकों के बारे में ज़्यादा पढ़ें. इससे आपको टच टारगेट और स्क्रीन के साइज़ बदलने पर आइटम के बीच स्पेसिंग के बारे में जानकारी मिलेगी. ये सुझाव, सुलभता से जुड़े दिशा-निर्देशों का भी पालन करते हैं.
• जब भी मुमकिन हो, छोटे आइकॉन के लिए, TouchDelegate का इस्तेमाल करके या आइकॉन को पारदर्शी बटन के बीच में रखकर, आइकॉन के आस-पास की जगह को 48dp से ज़्यादा करें.