手机菜单设计的7条金科法则

手机菜单不是桌面菜单的缩小版。小屏幕、常常缓慢的连接、单手操作，都需要独立的设计决策。以下七条规则直接影响客单价和顾客满意度。

1. 正文字号不低于16像素

16像素（1rem）是底线。低于此用户会手动缩放，导致层次错乱。建议：正文16-18px，菜品名18-22px，分类标题22-28px。

2. 触摸目标最小44 × 44像素

Apple HIG和Google Material都要求44 × 44。更小=误触增加15-23%。分类标签之间至少留8像素间距。

3. 以F型构建层次

手机阅读是垂直的。推荐菜品放在最顶部，分类栏吸顶。顾客5秒内无法理解菜单逻辑，返回按钮就赢了。

4. WebP/AVIF与懒加载

WebP比PNG小30%，AVIF再小15-20%。图片仅在分类打开时加载——<img loading="lazy">。

5. 3秒法则

LCP低于3秒。用3G节流测试——咖啡馆Wi-Fi通常更差。JS包小于150KB。

6. 调色板最多4-5种

品牌色+次色+强调色+黑+白。过敏原图标用形状和颜色双重标识——每12位男性中有1位红绿色盲。

7. 单手可用性测试

关键操作放在下半部——拇指区法则。像thMenu这样的移动优先平台默认遵循；自定义主题请自行验证。

调校良好的手机菜单使订单提升12-18%。调校不佳会把顾客赶回服务员，抹掉数字化优势。

觉得有用?分享给朋友。