طراحی ایمن موبایل

1) اصول ایمن موبایل

1. اول انگشت شست: مناطق عمل - در داخل انگشت شست (ناوبری پایین، FAB/اولیه از سمت راست زیر).
2. لمسی دوستانه: اهداف ≥ 40-48 پیکسل با زمینه ؛ فاصله ≥ 8-12 پیکسل.
3. منطقه امن با طراحی: ما را به حساب برش/مناطق ژست ('ENV (امن منطقه inset-)').

4. سرعت مهمتر از زیبایی است: LCP ≤ 2. 5S، INP ≤ 200ms، CLS ≤ 0. 1 (p75)

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 پیکسل، خط به خط 1. 4–1. 6، طول خط 40-70 کاراکتر.
دکمه ها: ارتفاع 44-52 پیکسل، تمرکز روشن/دارایی/غیر فعال ؛ آیکون + متن، نه تنها آیکون.
حرکات همیشه یک جایگزین دارند (دکمه/منو/نقطه داغ).
انیمیشن ها بر روی «transform/opacity» هستند و احترام «prefers-reduced-motion» را ترجیح می دهند.

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 + «srcset/اندازه»، «بارگیری =» تنبل «».
فونت ها: 1 WOFF2 متغیر، 'font-display: swap'، پیش بارگذاری فقط اساسی.
ذخیره و آفلاین از طریق Service Worker (PWA)، «stale-while-revalidate».

7) شبکه ها، آفلاین و بازپرداخت

3G/high دوستی تاخیر: محدودیت درخواست، butching، عقب ماندگی jittered.
صفحه آفلاین با کش داده های بحرانی و صف هماهنگ سازی.
احترام به اقتصاد داده: نکات مشتری/ذخیره داده → تصاویر نور، بدون خودکار ویدئو.

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) موضوع تاریک، روشنایی و haptics

موضوع تاریک فقط یک معکوس نیست ؛ کنتراست ها و لهجه های رنگی را بررسی کنید.
احترام به موضوع سیستم ('prefers-color-scheme').
Haptics - دوز (موفقیت/خطا)، توانایی غیر فعال کردن.

10) حریم خصوصی، مجوز و امنیت

مجوزها فقط در لحظه ارزش (دوربین → اسکن سند).
توضیح «چرا» و عقب نشینی بدون اجازه.
WebAuthn/بیومتریک به جای رمز عبور ؛ مدیران رمز عبور پشتیبانی می شوند.

مخفی کردن حوزههای حساس هنگام تا کردن ؛ زمان های هشدار دهنده

11) اطلاعیه های فشار و وظایف پس زمینه

سناریوهای ارزش روشن، مکرر نیست ؛ ساعت های آرام

مرکز لغو اشتراک و اولویت یک شیر.
کبودی پس زمینه - در بخش های کوچک، با محدودیت های باتری/شبکه.

12) تصاویر، رسانه ها و سازگاری

متغیرهایی با اندازه مشخص → CLS صفر

ویدئو به طور پیش فرض بدون پخش خودکار، با زیرنویس و کنترل ؛ bitrates تطبیقی.
آیکون ها - بردار (SVG) یا sprite ؛ مجموعه های 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 آندروید (صفحه نمایش کوچک/متوسط/بزرگ)، پرتره/چشم انداز.
شبکه ها: آفلاین، 3G، 4G (دریچه گاز) ؛ فعالسازی ذخیرۀ داده.
در دسترس بودن: اسکریپت های VoiceOver/TalkBack، پاس صفحه کلید، کنتراست.
عملکرد: وب حیاتی (RUM)، پروفایل ؛ لیست های بزرگ، تایپ/پیمایش/حرکات.
ثبات: چرخش، تاشو/بازگشت، کشتن روند → بازگرداندن حالت.
امنیت: مجوزها، اتمام جلسه، پنهان کردن داده های خصوصی، بیومتریک.

15) معیارهای ایمن موبایل

LCP/INP/CLS (p75، فقط تلفن همراه).
زمان به عمل (قبل از کلیک هدف اصلی).
دقت ضربه بزنید (سهم شیرهای کاذب از عناصر نزدیک).
جلسات بدون سقوط/نرخ ANR (برنامه های کاربردی/وب).
داده ها در هر جلسه و تاثیر باتری.
انتخاب کردن در/انتخاب کردن کرک و تعامل.

16) ضد الگوهای

دکمه های 28-32 پیکسل، لیست های متراکم، «کارت» بدون فیلد - از دست می رود.
متن 12-14 پیکسل بر روی یک پس زمینه خاکستری روشن.
مدال ها بیش از مدال ها ؛ بستن فقط با ژست.
پخش خودکار ویدئو/انیمیشن در 3G/Save-Data.
ویژگی های ژست فقط، بدون دکمه/منو.
حساب نشده برای منطقه امن → محتوای همپوشانی با «bangs» یا یک پانل ضربه تند وشدید زدن.

17) چک لیست صفحه نمایش

• اهداف ≥ 48 پیکسل، تورفتگی ≥ 8-12 پیکسل
• учтен منطقه امن ('viewport-fit = cover', 'env (safe-area-inset-)')
• متن ≥ 16 پیکسل، کنتراست AA، تمرکز/دارایی قابل مشاهده است
• فرم ها: درست «نوع/inputmode/autocomplete»، کارهای تکمیل خودکار

[LCP ≤ 2] 5S، INP ≤ 200ms، CLS ≤ 0. 1 (تلفن همراه)

• بلوک های سنگین بارگیری تنبل، لیست های downsampling
• صفحه آفلاین، بازپرداخت با بازپرداخت، حالت ذخیره داده
• Fluffs و مجوز - در تقاضا، با توضیح و امتناع
• موضوع تاریک و کاهش حرکت پشتیبانی می شود
• تست: iOS/آندروید، پرتره/چشم انداز، 3G/offline، SR پاس

18) برنامه پیاده سازی (3 تکرار)

• شبکه و منطقه امن، اهداف 48 پیکسل، انواع صفحه کلید/تکمیل خودکار، وب سایت های اصلی، تصاویر تنبل، تم تاریک.

• Code-split, content-visibility, offline + SW, Save-Data mode, retray/صف, بازیابی حالت, ممیزی A11y.

• تابلوهای RUM، تجزیه و تحلیل ترافیک/باتری، haptics، اسکریپت های مجوز، بهبود لیست (مجازی سازی)، روزهای بازی منظم شبکه های تلفن همراه.

19) مینی سوالات متداول

آیا به منوی جداگانه موبایل نیاز دارم ؟

بله، اما اولویت ناوبری پایین با 3-5 امتیاز است ؛ همبرگر - برای ثانویه.

چگونه خطای دکمه را کاهش دهیم ؟

اهداف را به 48 پیکسل افزایش دهید، فیلدها را اضافه کنید، به صورت عمودی گسترش دهید، از haptic برای «موفقیت/خطا» استفاده کنید.

آفلاین مورد نیاز است ؟

برای سناریوهای بحرانی، بله: کش، صف اقدامات و پیشنهادات صادقانه به کاربر.

نتیجه گیری

طراحی ایمن موبایل ترکیبی از ارگونومی لمسی، حسابداری منطقه امن، عملکرد، در دسترس بودن و مقاومت در برابر شبکه/باتری است. چک لیست ها را دنبال کنید، Web-Vitals را با کاربران واقعی اندازه گیری کنید، به حریم خصوصی و تنظیمات سیستم احترام بگذارید - و رابط کاربری شما در هر دستگاه تلفن همراه راحت و قابل اعتماد خواهد بود.