移动安全设计

1）移动安全原则

1.Thumb-first：作用区域-在拇指内（底部导航,右下方的FAB/primary）。
2.触摸友好：目标≥ 40-48 px带球场；距离≥ 8-12 px。
3.安全区设计：我们考虑切口/手势区（'env （safe-are-inset-）'。

4.速度比"美丽"更重要： LCP ≤ 2。5 c，INP ≤ 200毫秒，CLS ≤ 0。1 (p75).

5.克制：最小调制解调器，最小形状，最大自动填充。
6.网络和电池：节约流量，离线模式，熟练的回程。

2）网格、断路器和安全区

Breakpoints： ≤ 480（移动）,481-768（垂直平板电脑）,769-1024（水平平板电脑）。
带有max-width的容器，灵活的1-2列卡。
底部面板≥ 56 px，用于手势导航。

CSS:

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基本,字符串1.4–1.6、40-70个字符串的长度。
按钮：高度44-52 px，清晰的焦点/资产/失控；图标+文本，不仅仅是图标。
手势始终具有替代方案（按钮/菜单/热点）。
动画-在"变形/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 tap到目标动作。
避免在关键部分使用"汉堡包"；使用禁忌/禁忌。
UI状态："loading/empty/error/success"是显式的，具有动作和解释。

6）生产力和节省

代码分割和懒惰的小部件；图形/地图按需装载。
关键资源是"preload"，其余资源是"defer"/"lazy"。
AVIF/WebP+"srcset/sizes"，"loading="lazy"图像。
字体：1个可变WOFF2，"字体显示：交换"，仅主要字体。
通过"stale-wile-revalidate"的Service Worker （PWA）缓存和离线。

7）网络、离线和转发

友好3G/高延迟： 查询限制,战斗,jittered backoff.

具有关键数据缓存和同步队列的离线屏幕。
尊重节省的数据：Client Hints/Save-Data →轻量级图像,没有自动视频。

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

8） mobile上的可用性（A11y）

完全控制键盘/开关和可读焦点。
对比≥ WCAG AA，替代文本（"alt"，"aria-label"）。
大型目标和动画暂停；手势用按钮复制。
对于图表-简短的文本摘要和数据表。

9）黑暗主题，亮度和快感

黑暗的主题不仅仅是反转。检查对比度和颜色重音。
尊重系统主题（"prefers-color-scheme"）。
Haptics-剂量（成功/错误）、禁用功能。

10）隐私，许可证和安全

权限仅在价值时刻（相机→文档扫描）。
解释"为什么"和未经许可的倒退。
WebAuthn/生物识别代替密码；支持密码管理器。
折叠时隐藏敏感字段；带有警告的taymauts。

11） push通知和背景任务

清晰的价值场景，不常见；安静的时钟。
一键不匹配和偏好中心。
背景合成器是小部分，具有电池/网络限制。

12）图像、媒体和适应性

具有指定尺寸→零CLS的Placeholder。
缺省视频没有自动轨道，带有字幕和控制器；自适应比特率。
图标是向量（SVG）或精灵；不要装载1 MB的集。

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（throttle）；启用Save-Data。
可用性：VoiceOver/TalkBack脚本，键盘通道，对比度。
Perfomance：Web-Vitals（RUM），分析仪；大列表，输入/滚动/手势。
弹性：轮换，折叠/返回，过程杀死→恢复状态。
安全：许可证，会议时间，隐瞒私人数据，生物识别技术。

15）移动安全度量

LCP/INP/CLS（p75，仅移动）。
时间到动作（在主要目标点击之前）。
Tap Accuracy（近距离元素的假小费比例）。
无碰撞会议/ANR比率（应用程序/webview）。
数据每次会议和电池冲击（背景/前景）。
Opt-in/opt-out大炮和参与。

16）反模式

28-32 px按钮，密集列表，无字段的"地图"是错误。
浅灰色背景上的文本12-14 px。
调制解调器在调制解调器上；仅以手势关闭。
3G/Save-Data上的视频/动画自动播放。
没有按钮/菜单的"仅手势"功能。
不负责任的安全区→内容被"刘海"或滑动面板重迭。

17）屏幕支票清单

• Targets ≥ 48 px，撤退≥ 8-12 px

[] Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)

• 文本≥ 16 px，AA对比，焦点/资产可见
• 表格：正确的"类型/inputmode/autocomplete",自动完成工作

[] LCP ≤ 2.5 c，INP ≤ 200毫秒，CLS ≤ 0。1（移动）

• lazy-loading重块,downsampling列表
• 离线屏幕,背靠背,保存数据模式
• Pushi和许可证-按需提供解释和拒绝
• 黑暗主题和重定向动作得到支持
• 测试：iOS/Android，肖像/景观，3G/离线，SR通道

18）实施计划（3次迭代）

• 网格和安全区域，48 px瞄准镜，键盘/自动填充类型，基本的Web-Vitals，懒惰的图像，深色主题。

• 代码分割、内容可见性、离线+SW、保存数据模式、转发/队列、状态恢复、A11 y审核。

• RUM-dashbords，流量/电池分析，快感，权限场景，列表改进（虚拟化），常规移动网络游戏日。

19）迷你常见问题

是否需要单独的"移动菜单"？
是的，但优先级是具有3-5点的底部导航；汉堡包-为次要。

如何减少按钮上的错误?

将目标增加到48 px，增加周围的字段，垂直侦察，使用haptic进行"成功/错误"。

离线是强制性的吗？
对于关键脚本-是的：缓存、操作队列和向用户提供的诚实提示。

结果

移动安全设计是触摸人体工程学，安全区域会计，性能，可用性和网络/电池抗性的结合。按照支票单，在实际用户中测量Web-Vitals，尊重隐私和系统设置-您的界面在任何移动设备上都会方便可靠。