✓ 主任务在线：CTA 可见、触控达标、无横滚
- ✓主 CTA 可达
- ✓触控 ≥ 44px
- ✓无横向滚动
- ✓主任务在线
产品与设计 · 界面体验
移动优先Mobile First
先设计小屏体验再增强到大屏的策略。
先把最小屏幕的主任务跑通，再加宽
切换工作流并从 390 起逐步加宽：移动优先在每个宽度都保住主任务；桌面优先缩到 390 时主 CTA、触控和无横滚通常一起崩。
同一个「申请试用」页面，主 CTA 是开始申请。先选工作流，再从 390 起逐步加宽； 结论长在下方的 mock 页面、CTA 触控标尺和四项验收表上，不只看这句说明。
对照「移动优先」工作流在 390px 下：主 CTA「开始申请」保持 44px 触控目标、无横滚，主任务在线。 下一步：加宽到 768，观察列数增加但主 CTA 顺序仍是 ②。
实验室里看到的就是知识点
下面这些结论都能在上面的 mock 与四项验收表里直接看到，这里只命名。
- 基线优先：390 单列下，目标、主 CTA、关键内容和错误恢复必须完整可用。
- 渐进增强：768 / 1280 用 min-width 媒体查询叠加列、侧栏与快捷操作，是「加层」不是重写。
- 触控目标：主 CTA 至少 44px 高；桌面优先压缩时常掉到 24–32px。
- 无横滚：内容超出视口意味着布局没在小屏落地。
- 顺序一致：加宽后 DOM 与焦点顺序不变，编号 ①②③ 仍指向同一组任务。
什么时候用，什么时候不用
从用户信号判断，而不是把它当成默认口号。
多设备产品、主任务在手机上高频（申请、下单、查询），或团队本能地「先按桌面稿做」。
纯大屏数据看板、单一专用设备，或没有真实小屏用户时；但仍要把内容优先级先列清。
怎么从 390 走到 1280
从最小屏幕开始，到获得判断的最短路径。
- 列主任务：目标、主 CTA、关键字段、加载 / 错误 / 恢复。
- 390 单列实现：CTA ≥ 44px，正文无横滚，次要信息默认折叠。
- 向上增强：768 加列、1280 加侧栏，用 min-width 而非 max-width。
- 每档回归：长标题、慢网、200% 字体、键盘顺序仍能完成主任务。
同一页面，两种工作流的结局
只改变一个关键选择：先做桌面还是先做最小屏幕。下方 mock 的主 CTA 用中性墨色，整页唯一的强调色留给上面的实验室。
免费试用 14 天开始申请CTA 24px · 触控过小↔ 横向滚动
桌面多列硬塞 390：主 CTA 缩水、被挤到折叠区，用户任务跑不通。
免费试用 14 天开始申请CTA 44px · 无横滚加宽只加列与侧栏
390 先跑通主任务，768 / 1280 叠加增强；每个宽度主任务都在线。
快速自测
新项目要同时上手机和桌面，团队说「先把桌面做多列再适配手机」。最该担心什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。