मोबाइल-सुरक्षित डिजाइन

1) मोबाइल-सुरक्षित सिद्धांत

1. अंगूठे-पहले: कार्रवाई के क्षेत्र - अंगूठे के भीतर (नीचे नेविगेशन, FAB/प्राथमिक नीचे से)।

2. टच-फ्रेंडली: खेतों के साथ लक्ष्य ≥ 40-48 पीएक्स; दूरी ≥ 8-12 पीएक्स।

3. डिजाइन द्वारा सुरक्षित क्षेत्र: हम कटआउट/इशारा क्षेत्र ('एनवी (सुरक्षित-क्षेत्र-इनसेट-)') को ध्यान में रखते हैं।

4. गति "सौंदर्य" से अधिक महत्वपूर्ण है: LCP ≤ 2। 5s, INP ≤ 200ms, CLS ≤ 0। 1 (p75)।

5. संयम: न्यूनतम मोडल, न्यूनतम प्रपत्र, अधिकतम स्वतः पूर्ण।

6. नेटवर्क और बैटरी: किफायती ट्रैफिक, ऑफ़ लाइन मोड, सक्षम रिट्रेज़।

2) ग्रिड, ब्रेकपॉइंट और सुरक्षित क्षेत्र

ब्रेकपॉइंट्स: ≤ 480 (मोबाइल), 481-768 (ऊर्ध्वाधर टैबलेट), 769-1024 (क्षैतिज टैबलेट)।

अधिकतम चौड़ाई वाले कंटेनर, लचीले कार्ड 1-2 कॉलम।

निचले पैनल ≥ 56 px, इशारा नेविगेशन के लिए स्टॉक।

सीएसएस:

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) पाठ, बटन और इंटरैक्शन

पाठ: 16-18 पीएक्स बेस, लाइन-टू-लाइन 1। 4–1. 6, लाइन लंबाई 40-70 वर्ण।

बटन: ऊंचाई 44-52 पीएक्स, स्पष्ट फोकस/संपत्ति/अक्षम; आइकन + टेक्स्ट, न केवल आइकन।

इशारों में हमेशा एक विकल्प होता है (बटन/मेनू/हॉट स्पॉट)।

एनिमेशन 'ट्रांसफॉर्म/अपारदर्शिता' पर हैं और 'पसंद-कम-गति' का सम्मान करते हैं।

4) फॉर्म, कीबोर्ड और स्वतः पूर्ण

फ़ील्ड को न्यूनतम करें, inputmode/type और स्वतः पूर्ण का उपयोग करें:

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

मुखौटे नरम हैं (हम प्रारूप दिखाते हैं, लेकिन इनपुट को नहीं तोड़ ते हैं)।

ऑटोकैप/ऑटोकॉरेक्ट अर्थ से (' autocapitalize =" वाक्य	ऑफ"')।
फ़ील्ड के बगल में संकेत/त्रुटियाँ और स्क्रीनसेवर ('आरिया-विवरण') के लिए उपलब्ध हैं।

5) नेविगेशन और स्क्रीन आर्किटेक्चर

नीचे नेविगेशन (5 अंक तक) + "बैक" इशारा।

लक्ष्य कार्रवाई के लिए 3-5 नल तक।

महत्वपूर्ण वर्गों के लिए "हैमबर्गर" से बचें; उपयोग/खंडित टैब।

UI कहता है: 'लोडिंग/रिक्त/त्रुटि/सफलता' - स्पष्ट, क्रिया और स्पष्टीकरण के साथ।

6) प्रदर्शन और बचत

कोड-विभाजन और आलसी विजेट; चार्ट/कार्ड "मांग पर" लोड करते हैं।

महत्वपूर्ण संसाधन - 'प्रीलोड', बाकी - 'स्थगित '/' आलसी'।

AVIF/WebP छवियां +' srcset/sizes', 'लोडिंग =" आलसी"।

फ़ॉन्ट: 1 चर WOFF2, 'फ़ॉन्ट-डिस्प्ले: स्वैप', केवल मूल लोड करें.

सेवा कार्यकर्ता (PWA), 'बासी-जबकि-पुनर्नवीनीकरण' के माध्यम से कैशिंग और ऑफ़ लाइन।

7) नेटवर्क, ऑफ़ लाइन और रिट्रेज़

3G/high विलंबता मित्रता: अनुरोध सीमा, कसाई, झटके वाला बैकऑफ।

महत्वपूर्ण डेटा कैश और तुल्यकालन कतार के साथ ऑफ़ लाइन स्क्रीन।

डेटा अर्थव्यवस्था का सम्मान करें: क्लाइंट संकेत/सेव-डेटा → लाइट इमेज, कोई ऑटो-वीडियो नहीं।

जेएस (डेटा/नेटवर्क डिटेक्टर):

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) मोबाइल पर उपलब्धता (A11y)

पूर्ण कुंजीपट/स्विच नियंत्रण और पढ़ ने योग्य फोकस।

कंट्रास्ट ≥ WCAG AA, वैकल्पिक पाठ ('ऑल्ट', 'आरिया-लेबल')।

बड़े लक्ष्य और ठहराव एनिमेशन; इशारों को बटन के साथ डुप्लिकेट किया जाता है।

आरेख के लिए - एक छोटा पाठ सारांश और एक डेटा तालिका।

9) डार्क थीम, चमक और हैप्टिक्स

डार्क थीम सिर्फ एक उलटा नहीं है; विरोधाभास और रंग लहजे की जाँच करें।

तंत्र प्रसंग का सम्मान करें ('prefers-color-scheme')

Haptics - dosed (सफलता/त्रुटि), निष्क्रिय करने की क्षमता।

10) गोपनीयता, परमिट और सुरक्षा

बिना अनुमति के "क्यों" और गिरावट का स्पष्टीकरण।

केवल मूल्य के समय अनुमतियाँ (कैमरा → दस्तावेज़ स्कैन).

पासवर्ड के बजाय WebAthn/biometrics; पासवर्ड प्रबंधक समर्थित हैं।

तह करते समय संवेदनशील क्षेत्र छुपाएँ; चेतावनी टाइमआउट।

11) सूचनाओं और पृष्ठभूमि कार्यों को धक्का दें

स्पष्ट मूल्य परिदृश्य, अक्सर नहीं; शांत घंटे।

वन-टैप सदस्यता और वरीयता केंद्र।

पृष्ठभूमि चोट - छोटे भागों में, बैटरी/नेटवर्क प्रतिबंधों के साथ।

12) छवियां, मीडिया और अनुकूलनशीलता

आकार-निर्दिष्ट प्लेसहोल्डर → शून्य सीएलएस।

उपशीर्षक और नियंत्रण के साथ ऑटोप्ले के बिना डिफ़ॉल्ट रूप से वीडियो; अनुकूली बिटरेट।

प्रतीक - वेक्टर (एसवीजी) या स्प्राइट; 1MB सेट लोड नहीं करें।

13) स्निपेट और सेटिंग्स

मेटा व्यूपोर्ट और लहजे:

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

लेआउट स्थिरीकरण और ऑफ-स्क्रीन छुपाना:

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

कम गति मोड:

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) परीक्षण योजना (न्यूनतम)

उपकरण: 1 iOS + 1 Android (छोटा/मध्यम/बड़ास्क्रीन), चित्र/परिदृश्य।

नेटवर्क: ऑफ़ लाइन, 3 जी, 4 जी (थ्रॉटल); डाटा सहेजें सक्षम करें.

उपलब्धता: वॉयसओवर/टॉकबैक स्क्रिप्ट, कीबोर्ड पास, कंट्रास्ट।

प्रदर्शन: वेब-विटल्स (RUM), प्रोफाइलर; बड़ी सूची, टाइपिंग/स्क्रॉलिंग/इशारों।

स्थिरता: रोटेशन, तह/वापसी, प्रक्रिया को मारना - राज्य को बहाल करना।

सुरक्षा: अनुमति, सत्र समय समाप्ति, निजी डेटा छुपाना, बायोमेट्रिक्स।

15) मोबाइल-सुरक्षित मैट्रिक्स

LCP/INP/CLS (p75, केवल मोबाइल)।

टाइम-टू-एक्शन (प्राथमिक लक्ष्य क्लिक से पहले)।

टैप सटीकता (करीबी तत्वों के झूठे नल का हिस्सा)।

क्रैश-मुक्त सत्र/एएनआर दर (अनुप्रयोग/वेबव्यू)।

प्रति सत्र डेटा और बैटरी प्रभाव।

ऑप्ट-इन/ऑप्ट-आउट फुल और सगाई।

16) एंटी-पैटर्न

बटन 28-32 पीएक्स, घनी सूची, "कार्ड" एक क्षेत्र के बिना - याद आती है।

हल्के भूरे रंग की पृष्ठभूमि पर पाठ 12-14 px।

मोडल्स पर मोडल्स; केवल इशारे से बंद।

Autoplay पर वीडियो/एनिमेशन।

इशारा केवल सुविधाएँ, कोई बटन/मेनू नहीं।

सुरक्षित-क्षेत्र के लिए बेहिसाब - "बैंग्स" या एक स्वाइप पैनल के साथ ओवरलैपिंग सामग्री।

17) स्क्रीन चेकलिस्ट

लक्ष्य ≥ 48 पीएक्स, इंडेंट ≥ 8-12 पीएक्स
सुरक्षित क्षेत्र - ('व्यूपोर्ट-फिट = कवर', 'एनवी (सुरक्षित-क्षेत्र-इनसेट-)')
टेक्स्ट ≥ 16 पीएक्स, कंट्रास्ट एए, फोकस/एसेट दिखाई दे रहा है
प्रपत्र: सही 'प्रकार/इनपुटमोड/स्वतः पूर्ण', स्वतः पूर्ण कार्य
LCP ≤ 2। 5s, INP ≤ 200ms, CLS ≤ 0। 1 (मोबाइल)
आलसी लोडिंग भारी ब्लॉक, डाउनसैम्पलिंग सूची
ऑफ़ लाइन स्क्रीन, बैकऑफ़के साथ रिट्रे, सेव-डेटा मोड
फ्लफ्स और परमिट - मांग पर, स्पष्टीकरण और इनकार के साथ
डार्क थीम और कम गति समर्थित
टेस्ट: आईओएस/एंड्रॉइड, पोर्ट्रेट/लैंडस्केप, 3G/offline, एसआर पास

18) कार्यान्वयन योजना (3 पुनरावृत्ति)

पुनरावृत्ति 1 - मूल बातें (1-2 सप्ताह):

ग्रिड और सुरक्षित-क्षेत्र, 48 पीएक्स लक्ष्य, कीबोर्ड प्रकार/स्वतः पूर्ण, मूल वेब-विटल्स, आलसी छवियां, डार्क थीम।

पुनरावृत्ति 2 - प्रदर्शन और मजबूती (3-4 सप्ताह):

कोड-स्प्लिट, कंटेंट-विज़िबिलिटी, ऑफ़ लाइन + SW, सेव-डेटा मोड, रिट्रे/कतारें, स्टेट रिकवरी, A11y ऑडिट।

पुनरावृत्ति 3 - अनुकूलन और स्केल (सतत):

आरयूएम बोर्ड, ट्रैफिक/बैटरी विश्लेषण, हैप्टिक्स, अनुमति स्क्रिप्ट, सूची सुधार (वर्चुअलाइजेशन), मोबाइल नेटवर्क के नियमित गेम दिन।

19) मिनी-एफएक्यू

क्या मुझे एक अलग "मोबाइल मेनू" की आवश्यकता है?

हां, लेकिन प्राथमिकता 3-5 बिंदुओं के साथ नीचे नेविगेशन है; हैमबर्गर - द्वितीयक के लिए।

बटन को कैसे कम करें?

लक्ष्यों को 48 px तक बढ़ाएं, चारों ओर फ़ील्ड जोड़ें, लंबवत फैलाएं, "सफलता/त्रुटि" के लिए हैप्टिक का उपयोग करें

ऑफ़ लाइन आवश्यक है?

महत्वपूर्ण परिदृश्यों के लिए, हाँ: कैश, कार्यों की कतार और उपयोगकर्ता को ईमानदार संकेत।

परिणाम

मोबाइल-सुरक्षित डिजाइन टच एर्गोनोमिक्स, सुरक्षित-क्षेत्र लेखांकन, प्रदर्शन, उपलब्धता और ग्रिड/बैटरी प्रतिरोध का एक संयोजन है। चेकलिस्ट का पालन करें, वास्तविक उपयोगकर्ताओं के साथ वेब-विटल्स को मापें, गोपनीयता और सिस्टम सेटिंग्स का सम्मान करें - और आपका इंटरफ़ेस किसी भी मोबाइल डिवाइस पर सुविधाजनक और विश्वसनीय हो