网站移动版：10 条规则与修改前后示例
网店的大多数访客来自手机，也在手机上决定是否购买。本文给出网站移动版的 10 条规则，附修改前后示例，以及依据 Apple、Google 和 WCAG 的按钮与字号具体尺寸。
为什么移动版不是“缩小版”网站？
在手机上，人们用手指点按，在小屏幕上阅读，还常常单手操作。电脑上舒适的设计，到了手机上就会变得太小、拥挤、难以理解。此外，Google 以移动版为准索引网站，搜索和销售都取决于它。
10 条规则与示例
1. 按钮要大
用户用手指点按，而不是鼠标。Apple 建议点按区域至少 44 × 44 pt，Android 建议 48 × 48 dp，无障碍标准 WCAG 2.2 规定最小 24 × 24 px。
2. 字号要大
电脑上正常的字在手机上读不清。正文通常不小于 16 px，免得用户放大；Google 的 Lighthouse 曾标记超过 40% 文字小于 12 px 的页面。
3. 注意间距
区块挤在一起，屏幕会显得拥挤又廉价。留白要比你以为的更多。
4. 按钮上下排列
两个按钮并排在手机上会很窄。通栏按钮上下排列更容易点中，误触也更少。
5. 提示可以滑动
卡片可以滑动时，要让人看出来：露出下一张卡片的边缘、圆点或箭头，提示后面还有内容。
6. 精简菜单
顶栏不应占据半个屏幕。只保留 Logo 和菜单按钮的紧凑顶栏，把空间留给重点。
7. 隐藏次要内容
手机上不必一次展示全部：折叠面板、标签页和“显示更多”让页面更清爽。可以隐藏但不要删除——Google 索引的是移动版，内容应与电脑版一致。
8. 联系方式要可点击
电话和邮箱应一点即开，这正是 tel: 和 mailto: 链接的用途。放一个“拨打电话”按钮更简单。
9. 首屏不要过载
首屏空间很少：一个标题、一句简短说明和一个主要操作。横幅、优惠和订阅放到下面。
10. 不要照搬电脑版
移动版不是缩小的网站。区块要重新排序，三栏变一栏，多余的去掉。
在 Metriverra 中可以看到手机和电脑访客的转化情况，方便检验移动版的改进是否带来了销售。
要点
- 按钮不小于 44 × 44 pt（Apple）或 48 × 48 dp（Android），WCAG 最小 24 × 24 px。
- 正文不小于 16 px，区块之间留出间距。
- 按钮通栏上下排列，联系方式可点击。
- 首屏一个主要操作，次要内容放进折叠面板。
- 移动版是重新编排，不是缩小版；内容与电脑版一致。
来源: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
