सुरक्षित पुष्टि का डिज़ाइन

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

यहां दिए गए दिशा-निर्देशों में Roboto फ़ॉन्ट फ़ैमिली का इस्तेमाल किया गया है. इसे fonts.google.com से डाउनलोड किया जा सकता है.

हार्डवेयर बटन वाला यूज़र इंटरफ़ेस (यूआई)

Android Protected Confirmation, डिवाइस पर मौजूद हार्डवेयर बटन का इस्तेमाल करके, इनपुट की पुष्टि कर सकता है और उसे रद्द कर सकता है.

डिज़ाइन लेआउट

आइकॉन

शील्ड का आइकॉन

आइकॉन सुरक्षित पुष्टि वाला शील्ड आइकॉन
डाउनलोड करें सुरक्षा शील्ड
आइकन का आकार 32dp

तीर आइकॉन

आइकॉन कीबोर्ड के ऐरो का आइकॉन
डाउनलोड करें कीबोर्ड का राइट ऐरो
आइकन का आकार 24 डीपी
कंटेनर के कोने का रेडियस 4dp

इनपुट मैसेज

सुरक्षित पुष्टि में दो तरह के इनपुट इस्तेमाल किए जाते हैं: पुष्टि करें और रद्द करें.

पुष्टि करने वाली स्ट्रिंग

इस मैसेज में यह बताया जाना चाहिए कि पुष्टि करने के लिए किस बटन का इस्तेमाल किया गया है.

मैसेज पुष्टि करने के लिए, बटन को दो बार दबाएं
अधिकतम लंबाई ज़रूरी शर्त: पुष्टि करने वाला मैसेज दो लाइन से ज़्यादा का नहीं होना चाहिए.
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 14sp
लाइन की ऊंचाई ज़रूरी शर्त: 20 डीपी

स्ट्रिंग रद्द करें

रद्द करने का मैसेज साफ़ तौर पर दिखना चाहिए. साथ ही, पुष्टि करने वाले बटन से अलग दिखना चाहिए. रद्द करें शब्द के साथ इन प्रॉपर्टी का इस्तेमाल करें.

मैसेज अभी नहीं
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 14sp
लाइन की ऊंचाई ज़रूरी शर्त: 20 डीपी

हेडर टेक्स्ट

सुविधा की पहचान करने के लिए, भरोसेमंद यूज़र इंटरफ़ेस (यूआई) में हेडर टेक्स्ट Android Protected Confirmation शामिल करें. हेडर टेक्स्ट के लिए, इन प्रॉपर्टी का इस्तेमाल करें.

मैसेज ज़रूरी शर्तें: Android Protected Confirmation
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Regular
फ़ॉन्ट का साइज़ ज़रूरी शर्तें: 22sp
लाइन की ऊंचाई ज़रूरी शर्त: 28 डीपी

Body text

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

मैसेज मुख्य टेक्स्ट, Protected Confirmation को कॉल करने वाले ऐप्लिकेशन डेवलपर ने उपलब्ध कराया है.
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Regular
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 16sp
लाइन की ऊंचाई ज़रूरी शर्त: 24 डीपी

सबहेडर का टेक्स्ट

सबहेडर टेक्स्ट का इस्तेमाल करके बताएं कि उपयोगकर्ता को सुरक्षित पुष्टि वाली स्क्रीन क्यों दिख रही है. इस टेक्स्ट को स्क्रीन पर सबसे नीचे रखें और इन प्रॉपर्टी का इस्तेमाल करें.

मैसेज ज़रूरी शर्त: इस पुष्टि से, आपको वह कार्रवाई करने में मदद मिलती है जो आपको करनी है. साथ ही, इससे आपके खाते को सुरक्षा की एक और लेयर मिलती है.
अधिकतम लंबाई ज़रूरी जानकारी: पुष्टि करने वाला मैसेज चार लाइन से ज़्यादा का नहीं होना चाहिए.
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Regular
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 14sp
लाइन की ऊंचाई ज़रूरी शर्त: 20 डीपी

सॉफ़्टवेयर बटन वाला यूज़र इंटरफ़ेस (यूआई)

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

पुष्टि करने वाले यूज़र इंटरफ़ेस (यूआई) के सॉफ़्टवेयर डिज़ाइन का लेआउट

शील्ड का आइकॉन

Android Protected Confirmation Shield Icon से आइकॉन ऐसेट डाउनलोड करें. आइकॉन को स्क्रीन पर सबसे ऊपर रखें.

शील्ड का आइकॉन

'पुष्टि करके सुरक्षित किया गया' शील्ड आइकॉन का होना ज़रूरी है. शील्ड के रंग को पसंद के मुताबिक बनाया जा सकता है. हालांकि, यह साफ़ तौर पर दिखनी चाहिए.

टेक्स्ट लिखो

सॉफ़्टवेयर बटन के डाइमेंशन

पुष्टि करने और रद्द करने के इनपुट के लिए, प्राइमरी और सेकेंडरी बटन का इस्तेमाल करें.

बटन का लेबल बटन के लेबल के लिए, अंग्रेज़ी के वाक्यों में पहला वर्ण बड़ा (अपर केस में) रखें.
बटन का रेडियस 4dp
एक्सेंट रंग #1a73e8
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 14sp

हेडर टेक्स्ट

सुविधा की पहचान करने के लिए, भरोसेमंद यूज़र इंटरफ़ेस (यूआई) में हेडर टेक्स्ट Android Protected Confirmation शामिल करें. हेडर टेक्स्ट के लिए, इन प्रॉपर्टी का इस्तेमाल करें.

मैसेज ज़रूरी शर्तें: Android Protected Confirmation
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 24sp
लाइन की ऊंचाई ज़रूरी शर्त: 20 डीपी

Body text

मुख्य टेक्स्ट वाले एलिमेंट को लागू करते समय, इन प्रॉपर्टी का इस्तेमाल करें. असल मैसेज, ऐप्लिकेशन का डेवलपर लिखता है.

मैसेज बॉडी टेक्स्ट, ऐप्लिकेशन डेवलपर ने दिया है. यह डेवलपर, सुरक्षित पुष्टि की सुविधा का इस्तेमाल कर रहा है
रंग #000000 87%
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 16sp
लाइन की ऊंचाई ज़रूरी शर्त: 24 डीपी

सबहेडर का टेक्स्ट

सबहेडर टेक्स्ट का इस्तेमाल करके बताएं कि उपयोगकर्ता को सुरक्षित पुष्टि वाली स्क्रीन क्यों दिख रही है. इस टेक्स्ट को स्क्रीन पर सबसे नीचे रखें और इन प्रॉपर्टी का इस्तेमाल करें.

मैसेज ज़रूरी जानकारी: इस पुष्टि से, आपको वह कार्रवाई करने में मदद मिलती है जो आपको करनी है. साथ ही, इससे आपके खाते को ज़्यादा सुरक्षा मिलती है.
अधिकतम लंबाई ज़रूरी जानकारी: पुष्टि करने वाला मैसेज चार लाइन से ज़्यादा का नहीं होना चाहिए.
रंग #000000 54%
फ़ॉन्ट फ़ेस Roboto-Medium
फ़ॉन्ट का साइज़ ज़रूरी शर्त: 14sp
लाइन की ऊंचाई ज़रूरी शर्त: 20 डीपी

स्थानीय भाषा में लिखना

आपको बताए गए कॉम्पोनेंट के लिए स्थानीय भाषा में अनुवाद, AOSP के हिस्से के तौर पर, लुकअप टेबल के सी-इम्प्लीमेंटेशन में मिल सकता है.