1. 交互细节：手指友好，避免误触

点按区域大小：可点击的元素（按钮、链接）面积不小于 44pt x 44pt。常用按钮（如“立即购买”）应足够大，且两个相邻可点区域间距不小于8px，防止点错。

表单极简：减少输入。能用下拉选择就别让用户手打；用数字键盘调出（如手机号、验证码输入框）；自动识别输入类型（邮箱键盘带@符号）。

返回与关闭：每个二级以上页面都应有清晰的返回按钮。弹窗或浮层必须有明显的关闭按钮（X），且点击蒙层也能关闭。

反馈提示：点击按钮后立即给出视觉反馈（如按钮变色、加载转圈），用户很急，需要知道“系统正在响应”。

2. 性能细节：秒开是底线，每慢0.1秒都流失用户

图片处理：使用WebP格式（比JPG/PNG省30%以上流量）；根据不同屏幕尺寸，通过CDN动态裁切图片（不要统一给原图）；图标尽量用字体图标或SVG，少用图片。

首屏限制：0-1.5秒内必须可交互。非关键资源（如统计代码、客服弹窗）延迟加载；首屏不要超过5个HTTP请求。

无阻塞滚动：触屏滚动必须丝滑。避免在滚动时频繁计算或触发大量DOM操作。

3. 视觉与布局细节：一眼看到核心信息

字体与行距：正文字号至少 16px（避免iOS自动缩放）；行高推荐1.4-1.6倍；一行的字符数控制在35-45个。

留白与对齐：左右内边距至少15px（内容不要贴边）；关键信息和边界保持足够留白；所有元素严格左对齐或居中对齐。

点击态与反馈：所有可点元素要有按压态（如半透明蒙层、微缩放）；表单输入时高亮边框；加载状态用骨架屏而不是菊花转圈。

4. 内容与导航细节：快速找到目标

底部导航（Tab Bar）：最多5个，常用4个。当前页面的图标高亮显示，图标配上简洁文字标签。

悬浮操作按钮：如“在线客服”、“返回顶部”，右下角放置，不遮挡主要内容，且可半透明可手动关闭。

层级与面包屑：手机端一般不用面包屑，但深内容页必须在顶部显示当前分类路径（如：首页 > 产品 > 型号）。

搜索：放在显眼位置（顶部或底部导航）。支持模糊搜索、历史记录、热门推荐。搜索结果需即时刷新。

5. 跨设备与网络细节：应对各种真实场景

刘海屏与动态岛适配：使用 safe-area-inset-* 适配刘海、动态岛、底部黑条。关键内容（如返回按钮）不要放在系统区域。

横屏/分屏模式：通常强制竖屏（在CSS或meta里设置）。如果支持横屏，重新计算布局（如两列变三列）。

无网络/弱网提示：检测网络状态，断网时显示友好提示（如“请检查网络连接”），并缓存已加载内容。

触控反馈：按钮按下可轻震动（仅限确认类操作，不要滥用）。IOS上滚动到顶部点击状态栏回到顶部。

6. 测试与监控细节：没有测试就没有发言权

真机测试矩阵：覆盖主流机型和系统版本（iPhone 15 + iOS 17，华为/小米 + Android 13/14）。特别测试微信内置浏览器、Chrome、Safari。

监控指标：使用Google PageSpeed Insights或Lighthouse检测，目标：移动端分数 > 90。重点关注：

FCP（首次内容绘制） < 1.8s

LCP（最大内容绘制） < 2.5s

TTI（可交互时间） < 3.8s

异常监控：接入Sentry等工具，捕获JS报错、Ajax失败、资源加载失败。特别是Android WebView 兼容性问题。