टियर 2 — अडैप्टिव ऑप्टिमाइज़ेशन

ऑप्टिमाइज़ किए गए ऐप्लिकेशन, सभी तरह की स्क्रीन और डिवाइस की स्थितियों के साथ पूरी तरह काम करते हैं. इनमें डिवाइस की स्थितियों में होने वाले बदलाव भी शामिल हैं.

क्वालिटी के तीन टियर को वर्टिकल लेयर के तौर पर दिखाया गया है. इसमें बीच वाले टियर को हाइलाइट किया गया है.

दिशा-निर्देश

अपने ऐप्लिकेशन को इस तरह बनाएं कि वह सभी डिसप्ले साइज़ और डिवाइस की स्थितियों के हिसाब से काम करे.

बेहतर यूज़र इंटरफ़ेस

दिशा-निर्देश का आईडी टेस्ट आईडी ब्यौरा
Responsive_adaptive_layouts T-Layout_Flow

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

ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में ये चीज़ें शामिल हो सकती हैं:

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

बड़ी स्क्रीन पर मौजूद जगह का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, मल्टी-पैन लेआउट बनाएं (जहां ज़रूरी हो). कैननिकल लेआउट देखें.

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

UI_Secondary_Elements T-Layout_Flow

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

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

कीबोर्ड, माउस, और ट्रैकपैड

दिशा-निर्देश का आईडी टेस्ट आईडी ब्यौरा
Keyboard_Navigation T-Keyboard_Navigation ऐप्लिकेशन में मुख्य टास्क फ़्लो, कीबोर्ड नेविगेशन के साथ काम करते हैं. इनमें Tab और ऐरो बटन से नेविगेट करना शामिल है. सुलभता से जुड़े ज़्यादा ऐप्लिकेशन बनाना देखें.
Keyboard_Shortcuts T-Keyboard_Shortcuts ऐप्लिकेशन में, आम तौर पर इस्तेमाल की जाने वाली कार्रवाइयों के लिए कीबोर्ड शॉर्टकट काम करते हैं. जैसे, चुनना, कट करना, कॉपी करना, चिपकाना, पहले जैसा करना, और फिर से करना. कीबोर्ड, माउस, और ट्रैकपैड देखें.
Keyboard_Media_Playback T-Keyboard_Media_Playback मीडिया चलाने की सेटिंग को कंट्रोल करने के लिए, कीबोर्ड का इस्तेमाल किया जा सकता है. उदाहरण के लिए, स्पेसबार से मीडिया को चलाया और रोका जा सकता है.
Keyboard_Send T-Keyboard_Send कम्यूनिकेशन ऐप्लिकेशन में, कीबोर्ड पर मौजूद Enter बटन से मैसेज भेजने का फ़ंक्शन काम करता है.
Keyboard_Exit T-Keyboard_Exit कीबोर्ड पर मौजूद Esc बटन, बाहर निकलने का फ़ंक्शन करता है. इससे कोई कार्रवाई खत्म हो जाती है या पहले जैसा हो जाती है. उदाहरण के लिए:
  • मोडल, डायलॉग, पॉप-अप, और मेन्यू बंद करता है
  • खोज के लिए डाला गया टेक्स्ट मिटाता है या खोज फ़ोकस हटाता है
  • कीबोर्ड फ़ोकस को रद्द करता है
  • फ़ुल-स्क्रीन वीडियो, पीआईपी, फ़ुल-स्क्रीन मोड या स्लाइड शो से बाहर निकलना
  • स्क्रीन पर दिखने वाले कंट्रोल, जैसे कि प्रोग्रेस बार या मेन्यू को खारिज करता है
  • 'अगला वीडियो' / वीडियो के अपने-आप चलने की सुविधा के टाइमर रद्द करना
  • चुने गए सभी आइटम से चुने हुए का निशान हटाता है
  • बदलावों को सेव किए बिना, नाम बदलने/बदलाव करने की प्रोसेस को रद्द करता है
  • क्रॉपिंग/ट्रांसफ़ॉर्म टूल से बाहर निकलता है और बदलावों को खारिज करता है
Context_Menus T-Context_Menus कॉन्टेक्स्ट मेन्यू को माउस और ट्रैकपैड पर राइट क्लिक (माउस के सेकंडरी बटन या सेकंडरी टैप) करके ऐक्सेस किया जा सकता है.
Content_Zoom T-Content_Zoom ऐप्लिकेशन के कॉन्टेंट को ज़ूम करने के लिए, माउस के स्क्रोल व्हील (Control या Ctrl बटन के साथ) और ट्रैकपैड के पिंच जेस्चर का इस्तेमाल किया जा सकता है.
Hover_States T-Hover_States कार्रवाई करने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट में, कर्सर घुमाने पर विज़ुअल में होने वाला बदलाव दिखता है (जहां ज़रूरी हो). इससे माउस और ट्रैकपैड इस्तेमाल करने वाले लोगों को यूआई के इंटरैक्टिव होने का पता चलता है.

टेस्ट अपडेट

यह पक्का करने के लिए कि आपका ऐप्लिकेशन ऑप्टिमाइज़ किया गया है और सभी डिसप्ले कॉन्फ़िगरेशन के हिसाब से काम करता है, यहां दिए गए टेस्ट करें.

बेहतर यूज़र इंटरफ़ेस

परीक्षण आईडी दिशा-निर्देशों के आईडी ब्यौरा
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

ऐप्लिकेशन को अलग-अलग स्क्रीन साइज़ वाले डिवाइसों पर चलाएं. इनमें फ़ोन, फ़ोल्ड किए जा सकने वाले फ़ोन, छोटे और बड़े टैबलेट, और कंप्यूटर शामिल हैं. डिवाइसों पर, ऐप्लिकेशन को मल्टी-विंडो मोड में चलाएं.

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

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

T-Touch_Targets Touch_Targets पुष्टि करें कि टच टारगेट (स्क्रीन के वे हिस्से जहां छूने पर कोई कार्रवाई होती है) का साइज़ और पोज़िशन, सभी डिसप्ले साइज़ और कॉन्फ़िगरेशन के लिए एक जैसी और ऐक्सेस करने लायक हो. साथ ही, वे अन्य यूज़र इंटरफ़ेस (यूआई) एलिमेंट से छिपे या धुंधले न हों. सुलभता के बारे में जानकारी पाने के लिए, Accessibility Scanner देखें.
T-Drawable_Focus Drawable_Focus इंटरैक्टिव कस्टम ड्रॉएबल वाली हर ऐप्लिकेशन स्क्रीन पर, पुष्टि करें कि ड्रॉएबल पर फ़ोकस किया जा सकता है. इसके लिए, बाहरी कीबोर्ड, डी-पैड या किसी अन्य डिवाइस का इस्तेमाल करें. इससे यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर फ़ोकस किया जा सकता है. पुष्टि करें कि फ़ोकस की स्थिति साफ़ तौर पर दिख रही हो. इससे जुड़ी जानकारी के लिए, Compose फ़ोकस से जुड़ा दस्तावेज़ देखें.

कीबोर्ड, माउस, और ट्रैकपैड

परीक्षण आईडी दिशा-निर्देशों के आईडी ब्यौरा
T-Keyboard_Navigation Keyboard_Navigation बाहरी कीबोर्ड के Tab और ऐरो बटन का इस्तेमाल करके, ऐप्लिकेशन के फ़ोकस किए जा सकने वाले कॉम्पोनेंट पर जाएं.
T-Keyboard_Shortcuts Keyboard_Shortcuts किसी बाहरी कीबोर्ड पर कीबोर्ड शॉर्टकट का इस्तेमाल करके, चुनने, कट करने, कॉपी करने, चिपकाने, पहले जैसा करने, और फिर से करने जैसी कार्रवाइयां करें.
T-Keyboard_Media_Playback Keyboard_Media_Playback मीडिया प्लेबैक को शुरू करने, रोकने, रिवाइंड करने, और फ़ास्ट फ़ॉरवर्ड करने के लिए, एक्सटर्नल कीबोर्ड का इस्तेमाल करें.
T-Keyboard_Send Keyboard_Send डेटा भेजने या सबमिट करने के लिए, बाहरी कीबोर्ड की Enter बटन का इस्तेमाल करें.
T-Keyboard_Exit Keyboard_Exit

बाहर निकलने के लिए, बाहरी कीबोर्ड के Esc बटन का इस्तेमाल करें. पुष्टि करें कि बटन ये काम करता है (जहां लागू हो):

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