ऐप्लिकेशन विजेट की खास जानकारी

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

इस दस्तावेज़ में, अलग-अलग तरह के विजेट बनाने और डिज़ाइन के सिद्धांतों के बारे में बताया गया है. रिमोट व्यू एपीआई और एक्सएमएल लेआउट का इस्तेमाल करके ऐप्लिकेशन विजेट बनाने के लिए, आसान विजेट बनाना देखें. Kotlin और Compose स्टाइल एपीआई का इस्तेमाल करके विजेट बनाने के लिए, Jetpack एक नज़र में देखें.

विजेट के टाइप

विजेट बनाने से पहले, यह तय कर लें कि आपको किस तरह का विजेट बनाना है. आम तौर पर, विजेट इनमें से किसी एक कैटगरी में आते हैं:

जानकारी देने वाले विजेट

मौसम की जानकारी दिखाने वाले विजेट का उदाहरण, जिसमें टोक्यो के लिए ज़्यादातर समय बादल छाए रहने, 14 डिग्री सेल्सियस, और दोपहर 4 बजे से शाम 7 बजे तक के अनुमानित तापमान की जानकारी दी गई है
पहला डायग्राम. मौसम की जानकारी देने वाले ऐप्लिकेशन का विजेट.

जानकारी वाले विजेट में आम तौर पर ज़रूरी जानकारी के एलिमेंट दिखते हैं. साथ ही, यह भी ट्रैक किया जाता है कि समय के साथ वह जानकारी कैसे बदलती है. जानकारी वाले विजेट के उदाहरणों में, मौसम के विजेट, घड़ी के विजेट या खेल के स्कोर को ट्रैक करने वाले विजेट शामिल हैं. जानकारी पर टैप करने से आम तौर पर, विजेट से जुड़ा ऐप्लिकेशन लॉन्च हो जाता है और विजेट से जुड़ी जानकारी दिखती है.

कलेक्शन विजेट

कलेक्शन विजेट एक ही तरह के कई एलिमेंट दिखाने में मदद करते हैं. जैसे, गैलरी ऐप्लिकेशन से तस्वीरों का कलेक्शन, समाचार ऐप्लिकेशन से लेखों का कलेक्शन या कम्यूनिकेशन ऐप्लिकेशन के ईमेल या मैसेज का कलेक्शन. कलेक्शन विजेट, वर्टिकल तौर पर स्क्रोल कर सकते हैं.

कलेक्शन विजेट, आम तौर पर इन इस्तेमाल के उदाहरणों पर फ़ोकस करते हैं:

  • कलेक्शन को ब्राउज़ करना.
  • कलेक्शन के किसी एलिमेंट को, उससे जुड़े ऐप्लिकेशन में ज़्यादा जानकारी वाले व्यू में खोलना.
  • Android 12 (एपीआई लेवल 31) में कंपाउंड बटन की सुविधा के साथ, एलिमेंट के साथ इंटरैक्ट करना, जैसे कि उन्हें 'हो गया' के तौर पर मार्क करना.

विजेट कंट्रोल करना

'लाइट की सूची' नाम के ऐप्लिकेशन का विजेट, जिसमें 'बेडरूम', 'किचन', और 'लिविंग रूम' लेबल वाले टॉगल स्विच दिखाए गए हैं. पहले दो टॉगल स्विच बंद हैं
चौथी इमेज. कंट्रोल विजेट का उदाहरण.

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

कंट्रोल विजेट के साथ इंटरैक्ट करने पर, ऐप्लिकेशन में उससे जुड़ा ज़्यादा जानकारी वाला व्यू खुल सकता है. यह इस बात पर निर्भर करता है कि कंट्रोल विजेट का फ़ंक्शन कोई डेटा दिखाता है या नहीं. जैसे, खोज विजेट के मामले में.

हाइब्रिड विजेट

संगीत चलाने वाला सामान्य ऐप्लिकेशन, जिसमें 'पसंद नहीं आया', पीछे जाएं, चलाएं/रोकें, आगे जाएं, और 'पसंद आया' बटन दिख रहे हैं. कलाकार और ट्रैक को 'कलाकार' और 'उदाहरण के लिए संगीत' के तौर पर लिस्ट किया गया है.
पांचवीं इमेज. संगीत ऐप्लिकेशन के विजेट का उदाहरण.

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

विजेट बनाने से पहले, किसी एक बुनियादी टाइप के हिसाब से डिज़ाइन बनाएं. साथ ही, ज़रूरत के हिसाब से अन्य टाइप के एलिमेंट जोड़ें.

Google Assistant के साथ विजेट इंटिग्रेट करना

लोगों के बोले गए निर्देशों के जवाब में, Google Assistant किसी भी तरह के विजेट को दिखा सकती है. ऐप्लिकेशन ऐक्शन की सुविधा देने के लिए, अपने विजेट कॉन्फ़िगर किए जा सकते हैं. इससे उपयोगकर्ताओं को Android और Android Auto जैसे Assistant प्लैटफ़ॉर्म पर, तुरंत जवाब और ऐप्लिकेशन के इंटरैक्टिव अनुभव मिल सकते हैं. Assistant के लिए विजेट की सुविधा के बारे में ज़्यादा जानने के लिए, Android विजेट के साथ ऐप्लिकेशन ऐक्शन को इंटिग्रेट करना लेख पढ़ें.

विजेट से जुड़ी सीमाएं

विजेट को "मिनी ऐप्लिकेशन" के तौर पर समझा जा सकता है. हालांकि, विजेट डिज़ाइन करने से पहले, इन सीमाओं को समझना ज़रूरी है.

हाथ के जेस्चर (हाव-भाव)

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

विजेट के लिए सिर्फ़ टच और वर्टिकल स्वाइप जैसे जेस्चर उपलब्ध हैं.

एलिमेंट

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

डिज़ाइन से जुड़े दिशा-निर्देश

विजेट का कॉन्टेंट

विजेट आपके ऐप्लिकेशन में उपलब्ध नई और दिलचस्प सामग्री को "विज्ञापन" देकर किसी उपयोगकर्ता को आकर्षित करने का बहुत अच्छा तरीका है.

किसी अखबार के मुख्य पेज पर मौजूद टीज़र की तरह ही, विजेट ऐप्लिकेशन की जानकारी को इकट्ठा और केंद्रित करते हैं और ऐप्लिकेशन में ही ज़्यादा जानकारी उपलब्ध कराते हैं. आप कह सकते हैं कि विजेट एक जानकारी "स्नैक" है और ऐप्लिकेशन का नाम "खाना" है. पक्का करें कि आपका ऐप्लिकेशन, विजेट के मुकाबले किसी जानकारी वाले आइटम के बारे में ज़्यादा जानकारी दिखाता हो.

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

विजेट पर नेविगेशन लिंक के तौर पर ये विकल्प इस्तेमाल किए जा सकते हैं:

  • जनरेटिव फ़ंक्शन: ये ऐसे फ़ंक्शन होते हैं जिनकी मदद से उपयोगकर्ता, किसी ऐप्लिकेशन के लिए नया कॉन्टेंट बना सकता है. जैसे, नया दस्तावेज़ या नया मैसेज बनाना.

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

विजेट का साइज़ बदला जा रहा है

Google Clock का स्टैंडर्ड विजेट
छठी इमेज. Google Clock का स्टैंडर्ड विजेट.

जिस विजेट का साइज़ बदला जा सकता है उसे दबाकर रखने के बाद छोड़ने पर, विजेट का साइज़ बदलने का मोड चालू हो जाता है. उपयोगकर्ता, अपनी पसंद का साइज़ सेट करने के लिए, विजे़ट के कोनों या ड्रैग हैंडल का इस्तेमाल कर सकते हैं.

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

उपयोगकर्ताओं को विजेट का साइज़ बदलने की अनुमति देने के कई फ़ायदे हैं:

  • वे इसे फ़ाइन-ट्यून कर सकते हैं कि हर विजेट पर वे कितनी जानकारी देखना चाहते हैं.
  • वे अपने होम पैनल पर विजेट और शॉर्टकट के लेआउट को बेहतर तरीके से तय कर सकते हैं.

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

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

यहां दिए गए उदाहरण में, उपयोगकर्ता तीन चरणों में मौसम के विजेट का साइज़ बदल सकता है. विजेट का साइज़ बढ़ने पर, उपयोगकर्ता को मौजूदा जगह के मौसम की ज़्यादा जानकारी दिखती है.

मौसम के विजेट का उदाहरण, जो सबसे छोटे 3x2-ग्रिड साइज़ में है. इसमें जगह का नाम (टोक्यो), तापमान (14°), और आंशिक रूप से बादल छाए होने का संकेत देने वाला चिह्न दिया गया है
सातवीं इमेज. 3x2-ग्रिड के 'छोटे' साइज़ में मौसम विजेट का उदाहरण.


मौसम के विजेट का उदाहरण, जिसका साइज़ 5x2 'मीडियम' है. इसमें 3x2 ग्रिड साइज़ का पूरा यूज़र इंटरफ़ेस (यूआई) शामिल है. साथ ही, 'ज़्यादातर बादल' लेबल और दोपहर 4 बजे से शाम 7 बजे तक के तापमान का पूर्वानुमान भी शामिल है
आठवीं इमेज. 5x2 ग्रिड वाले 'मीडियम' साइज़ के मौसम विजेट का उदाहरण.


5x4 'बड़े' साइज़ में मौसम विजेट का उदाहरण. इसमें 3x2 और 5x2 ग्रिड साइज़ के सभी यूज़र इंटरफ़ेस (यूआई) के साथ-साथ, मंगलवार से शुक्रवार तक के मौसम का पूर्वानुमान भी शामिल है
नौवीं इमेज. 5x4 ग्रिड वाले 'बड़े' साइज़ में मौसम की जानकारी देने वाले विजेट का उदाहरण.

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

लेआउट से जुड़ी बातें

अपने विजेट को उस डिवाइस के प्लेसमेंट ग्रिड के डाइमेंशन के हिसाब से लेआउट करना आसान होता है जिस पर आपने विजेट डेवलप किए हैं. यह शुरुआती अनुमान के तौर पर काम का हो सकता है. हालांकि, इन बातों का ध्यान रखें:

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

उपयोगकर्ताओं के हिसाब से विजेट कॉन्फ़िगरेशन

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

विजेट डिज़ाइन की चेकलिस्ट

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