टाइल के लिए सबसे सही तरीके

काले बैकग्राउंड पर डिज़ाइन

Wear OS के लिए, काले बैकग्राउंड पर डिज़ाइन करना ज़रूरी है. इसकी दो मुख्य वजहें हैं:

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

यह करें

बैकग्राउंड का रंग हमेशा काले रंग पर सेट करें.

ऐसा न करें

बैकग्राउंड को फ़ुल ब्लीड इमेज या ब्लॉक कलर के तौर पर सेट न करें.

सिर्फ़ ज़रूरी एलिमेंट शामिल करें

अगर आपने इस सुविधा के लिए ऑप्ट-इन किया है, तो Wear OS पर ऐप्लिकेशन का आइकॉन अपने-आप दिखेगा. उदाहरण के लिए, ProtoLayout Material3 PrimaryLayout का इस्तेमाल करके. यह आइकॉन, टाइल कैरसेल पर स्क्रोल करने पर अपने-आप दिखेगा. ऐप्लिकेशन आइकॉन को टाइल के हिस्से के तौर पर डिज़ाइन और जोड़ा नहीं जाना चाहिए.

अगर टाइल पर डाइनैमिक थीम का इस्तेमाल किया जा रहा है, तो पक्का करें कि ऐप्लिकेशन का दिया गया आइकॉन मोनोक्रोम हो. अपने ब्रैंड के लिए ऐप्लिकेशन आइकॉन बनाने का तरीका जानने के लिए, Android प्रॉडक्ट आइकॉन के दिशा-निर्देश देखें.

यह करें

जब उपयोगकर्ता टाइल कैरसेल पर स्क्रोल करता है, तो Wear OS ऐप्लिकेशन का आइकॉन अपने-आप दिखा सकता है. टाइल के डिज़ाइन में ऐप्लिकेशन आइकॉन डालने की ज़रूरत नहीं है.

ऐसा न करें

टाइल के डिज़ाइन में ऐप्लिकेशन का आइकॉन न जोड़ें. ऐसा इसलिए, क्योंकि अगर इसे सिस्टम लेवल पर भी दिखाया जाता है, तो यह दो बार/ओवरलैप होकर दिख सकता है.

कम से कम टैप टारगेट पक्का करने के लिए, ऐप्लिकेशन के टाइटल छिपाएं

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

यह करें

छोटी स्क्रीन पर, ऐप्लिकेशन का टाइटल छिपा होता है. इससे यह पक्का होता है कि दोनों लाइनों की ऊंचाई कम से कम 48dp हो और टैप टारगेट भी 48dp हो.

ऐसा न करें

अगर आपने छोटी स्क्रीन पर ऐप्लिकेशन का टाइटल नहीं छिपाया है और दो लाइनें हैं, तो कॉम्पोनेंट की ऊंचाई, सुलभता से जुड़े हमारे मानकों के मुताबिक नहीं होगी. साथ ही, यह टैप टारगेट के कम से कम साइज़ से भी कम होगी. इस उदाहरण में, बटन के लिए स्पेस 48dp से कम है, इसलिए यह क्लिप हो जाता है.

हाइलाइट करने के लिए, इस्तेमाल का कोई एक मुख्य उदाहरण चुनें

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

यह करें

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

ऐसा न करें

यह तरीका उपयोगकर्ता के लिए कम मददगार होता है, क्योंकि बहुत ज़्यादा विकल्पों की वजह से फ़ैसला लेने में मुश्किल आती है

कम से कम एक कंटेनर शामिल करें

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

अगर बटन का इस्तेमाल किया जाता है, तो वे डिज़ाइन के स्टैंडर्ड नियमों का पालन करते हों. साथ ही, उनके फ़ंक्शन के बारे में साफ़ तौर पर जानकारी देते हों.

यह करें

यह टाइल अच्छी तरह से काम करती है, क्योंकि उपयोगकर्ता इनमें से किसी भी सुविधा पर कार्रवाई कर सकता है. ऐसा इसलिए, क्योंकि इनमें टैप करने के लिए साफ़ तौर पर निर्देश दिए गए हैं

ऐसा न करें

यह टाइल कम असरदार है, क्योंकि इससे यह साफ़ तौर पर नहीं पता चलता कि उपयोगकर्ता ज़्यादा जानकारी देखने के लिए, कॉन्टेंट पर टैप कर सकता है

कार्रवाइयों को तुरंत समझने लायक बनाना

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

यह करें

एक अच्छा टाइल, उपलब्ध जगह का पूरा फ़ायदा उठाता है, ताकि हर कार्रवाई के नतीजे को साफ़ तौर पर बताया जा सके

ऐसा न करें

इस टाइल में मौजूद कार्रवाइयों के बारे में साफ़ तौर पर नहीं बताया गया है—एल्बम आर्ट वाला कंटेनर, उपयोगकर्ता को कहां ले जाता है और क्या यह “चलाएं” बटन से अलग है?

कार्रवाइयों को विज़ुअल तौर पर प्राथमिकता देना

टाइल पर सबसे अहम कार्रवाई को समझने में उपयोगकर्ताओं की मदद करने के लिए, इंटरैक्टिव कंटेनर को विज़ुअल तौर पर प्राथमिकता दी जानी चाहिए.

  • मुख्य ऐक्शन बटन पर प्राइमरी कलर का इस्तेमाल करें.
  • सेकंडरी ऐक्शन के लिए सेकंडरी/तीसरे रंग का इस्तेमाल करना

यह करें

इस टाइल में, टोनल-फ़िल स्टाइल का इस्तेमाल करके, मुख्य और सेकंडरी कलर की भूमिकाओं के साथ-साथ, तीसरे सबसे नीचे मौजूद बटन की भूमिका के लिए, भरी हुई जगह का इस्तेमाल किया गया है

ऐसा न करें

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

कम कंटेनर में आसानी से मैनेज करना

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

यह करें

इस टाइल में कई कंटेनर का इस्तेमाल किया जा रहा है. हर कंटेनर, किसी खास कार्रवाई को करने के लिए बटन की तरह काम करता है. जैसे, टाइमर शुरू करना या नया टाइमर बनाना

ऐसा न करें

यहां चार कंटेनर का इस्तेमाल करना ज़रूरी नहीं है, क्योंकि सारी जानकारी एक ही जगह पर ले जाएगी

फ़ंक्शनल कामों के लिए कंटेनर का इस्तेमाल करना

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

यह करें

यह तरीका इसलिए काम करता है, क्योंकि टाइल की एकमात्र कार्रवाई, कॉन्टेंट बनाने की प्रोसेस है. साथ ही, बाकी सारा कॉन्टेंट काले बैकग्राउंड पर फ़्लोट कर रहा है

ऐसा न करें

यह टाइल ज़्यादा भ्रमित करने वाली है, क्योंकि ऐसा लगता है कि उपयोगकर्ता सभी कंटेनर के साथ इंटरैक्ट कर सकता है

एक नज़र में जानकारी देने वाले ग्राफ़ और चार्ट दिखाना

Wear OS डिज़ाइन के लिए, एक नज़र में जानकारी देखना ज़रूरी है. शॉर्ट वीडियो में स्क्रीन पर दिखने का समय सीमित होता है. इसलिए, ज़रूरी जानकारी को साफ़ तौर पर और ऐसे फ़ॉर्मैट में दें जिसे एक नज़र में समझा जा सके.

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

यह करें

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

ऐसा न करें

टाइल पर संख्या या आंकड़ों की ज़्यादा जानकारी दिखाना