移動安全設計

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，尊重隱私和系統設置-您的界面在任何移動設備上都會方便可靠。