تصميم آمن للهاتف المحمول

1) المبادئ الآمنة للهاتف المحمول

1. الإبهام أولاً: مناطق العمل - داخل الإبهام (الملاحة السفلية، FAB/الأولية من اليمين أدناه).
2. سهلة اللمس: الأهداف ≥ 40-48 px مع الحقول ؛ المسافة ≥ 8-12 px.
3. المنطقة الآمنة حسب التصميم: نأخذ في الاعتبار القطع/مناطق الإيماءات ('env (منطقة آمنة - inset-)).
4. السرعة أهم من «الجمال»: LCP ≤ 2. 5s، INP ≤ 200 ms، CLS ≤ 0. 1 (ص 75).
5. ضبط النفس: الحد الأدنى من الوسائط، الحد الأدنى من النماذج، الحد الأقصى من الإكمال الذاتي.
6. الشبكات والبطارية: حركة المرور الاقتصادية، الوضع غير المتصل بالإنترنت، عمليات إعادة التدوير المختصة.

2) الشبكة ونقاط التوقف والمنطقة الآمنة

نقاط التوقف: ≤ 480 (متنقل)، 481-768 (جهاز لوحي عمودي)، 769-1024 (جهاز لوحي أفقي).
حاويات ذات عرض أقصى وبطاقات مرنة 1-2 أعمدة.
الألواح السفلية ≥ 56 بكسل، مخزون للملاحة بالإيماءات.

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 px base, line to line 1. 4–1. 6، طول الخط 40-70 حرفًا.
الأزرار: الطول 44-52 px، التركيز الواضح/الأصول/المعوقون ؛ أيقونة + نص، ليس فقط أيقونة.
الإيماءات لها دائمًا بديل (زر/قائمة/بقعة ساخنة).
الرسوم المتحركة على «التحويل/التعتيم» والاحترام «يفضل الحركة المخفضة».

4) النماذج ولوحات المفاتيح والإكمال التلقائي

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" />

الأقنعة ناعمة (نعرض التنسيق، لكن لا تكسر المدخلات).

5) بنية الملاحة والشاشة

الملاحة السفلية (تصل إلى 5 نقاط) + إيماءة «الظهر».
حتى 3-5 نقرات للإجراء المستهدف.
تجنب «الهامبرغر» للأقسام الحرجة ؛ استخدام/علامات تبويب مجزأة.
UI ينص على: «التحميل/الفارغ/الخطأ/النجاح» - صريح، مع الإجراءات والتفسيرات.

6) الأداء والوفورات

الأدوات المقسمة بالكود والكسولة ؛ الرسوم البيانية/تحميل البطاقات «عند الطلب».
الموارد الحرجة - «التحميل المسبق»، والباقي - «تأجيل »/« كسول».
AVIF/WebP images + «srcset/sizes», «loading =» lazy «».
الخطوط: 1 WOFF2 متغير، «عرض الخط: تبديل»، التحميل المسبق فقط أساسي.
Caching and offine عبر Service Worker (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، نص بديل ('alt'، 'aria-label').
أهداف كبيرة ورسوم متحركة مؤقتة ؛ الإيماءات مكررة مع الأزرار.
للرسوم البيانية - ملخص نص قصير وجدول بيانات.

9) الموضوع المظلم والسطوع واللمسات

الموضوع المظلم ليس مجرد انعكاس ؛ تحقق من التناقضات ولهجات الألوان.
احترم موضوع النظام («يفضل نظام الألوان»).
اللمسات - جرعة (نجاح/خطأ)، القدرة على التعطيل.

10) الخصوصية والتصاريح والأمن

الأذونات فقط في لحظة القيمة (الكاميرا → مسح المستند).
تفسير «لماذا» والتراجع دون إذن.
WebAuthn/biometrics بدلا من كلمة السر ؛ يتم دعم مديري كلمات السر.
إخفاء الحقول الحساسة عند الطي ؛ مهلة التحذير.

11) دفع الإخطارات والمهام الأساسية

سيناريوهات القيمة الواضحة، غير متكررة ؛ ساعات الهدوء.
مركز إلغاء الاشتراك والتفضيل بنقرة واحدة.
كدمات الخلفية - في أجزاء صغيرة، مع قيود البطارية/الشبكة.

12) الصور ووسائط الإعلام والقدرة على التكيف

عنصر عضوي محدد الحجم → صفر CLS.
فيديو افتراضي بدون تشغيل تلقائي، مع ترجمة وضوابط ؛ البيترات التكيفية.
أيقونات - متجه (SVG) أو سبرايت ؛ لا تحمل مجموعات 1 ميجابايت.

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 (شاشة صغيرة/متوسطة/كبيرة)، صورة/منظر طبيعي.
الشبكات: غير متصلة بالإنترنت، 3G، 4G (دواسة الوقود) ؛ تمكين حفظ البيانات.
التوافر: نصوص VoiceOver/TalkBack، بطاقة لوحة المفاتيح، التباين.
الأداء: ويب فيتالز (RUM)، محلل بيانات ؛ قوائم كبيرة، طباعة/تمرير/إيماءات.
الاستقرار: الدوران، الطي/العودة، قتل العملية → استعادة الدولة.
الأمن: الأذونات، مهلة الجلسة، إخفاء البيانات الخاصة، القياسات الحيوية.

15) مقاييس آمنة للهاتف المحمول

LCP/INP/CLS (p75، متنقل فقط).
الوقت للعمل (قبل النقرة الأولية على الهدف).
دقة النقر (حصة الصنابير الخاطئة من العناصر القريبة).
جلسات خالية من التصادم/معدل ANR (التطبيقات/عرض الويب).
البيانات لكل جلسة وتأثير البطارية.
اختيار الاشتراك/إلغاء الاشتراك والمشاركة.

16) الأنماط المضادة

أزرار 28-32 px، قوائم كثيفة، «بطاقات» بدون حقل - أخطأت.
نص 12-14 px على خلفية رمادية فاتحة.
الوسائط على الوسائط ؛ تغلق بالإيماءة فقط.
التشغيل التلقائي للفيديو/الرسوم المتحركة على 3G/Save-Data.
ميزات الإيماءات فقط، بدون زر/قائمة.
مجهول المصير للمنطقة الآمنة → المحتوى المتداخل مع «الانفجارات» أو لوحة التمرير.

17) قائمة مراجعة الشاشة

• الأهداف ≥ 48 px، المسافات ≥ 8-12 px
• учтен المنطقة الآمنة ('viewport-fit = cover', 'env (safe-area-inset-)')
• نص ≥ 16 px، مقابل AA، التركيز/الأصول مرئية
• النماذج: «النوع/inputmode/autocomplete» الصحيح، أعمال مكتملة تلقائيًا
• LCP ≤ 2. 5s، INP ≤ 200 ms، CLS ≤ 0. 1 (متنقل)
• الكتل الثقيلة الكسولة، قوائم تقليل الحجم
• غير متصل بالإنترنت، أعد الدرس مع التراجع، وضع حفظ البيانات
• الزغب والتصاريح - عند الطلب، مع التفسير والرفض
• تم دعم الموضوع المظلم والحركة المخفضة
• الاختبارات: iOS/Android، portrait/landscape، 3G/offline، SR pass

18) خطة التنفيذ (3 تكرارات)

• الشبكة والمنطقة الآمنة، 48 هدف px، أنواع لوحة المفاتيح/المكتملة تلقائيًا، فيتالات الويب الأساسية، الصور الكسولة، السمة المظلمة.

• تقسيم الرمز، رؤية المحتوى، غير متصل بالإنترنت + SW، وضع حفظ البيانات، إعادة الطوابير/قوائم الانتظار، استرداد الدولة، التدقيق A11y.

• لوحات RUM، تحليل حركة المرور/البطارية، اللمسات، نصوص الإذن، تحسين القائمة (الافتراضية)، أيام اللعبة العادية لشبكات الهاتف المحمول.

19) الأسئلة الشائعة الصغيرة

هل أحتاج إلى «قائمة جوال» منفصلة ؟

نعم، ولكن الأولوية هي الملاحة القاعية مع 3-5 نقاط ؛ هامبرغر - للثانوية.

كيف تقلل من أخطاء الأزرار ؟

زيادة الأهداف إلى 48 px، إضافة الحقول حولها، الانتشار عموديًا، استخدام اللمسي لـ «النجاح/الخطأ».

مطلوب غير متصل ؟

بالنسبة للسيناريوهات الحرجة، نعم: ذاكرة التخزين المؤقت وطابور الإجراءات والمطالبات الصادقة للمستخدم.

النتيجة

التصميم الآمن للهاتف المحمول هو مزيج من بيئة العمل باللمس، ومحاسبة المنطقة الآمنة، والأداء، والتوافر، ومقاومة الشبكة/البطارية. اتبع قوائم المراجعة، وقياس Web-Vitals مع المستخدمين الحقيقيين، واحترم الخصوصية وإعدادات النظام - وستكون واجهتك مريحة وموثوقة على أي جهاز محمول.