先做桌面版，再把页面"压缩"到手机——这是模板站最省事的做法，也是我们见过最多的翻车现场。 我们反着来：先在 390px 宽的小屏上把版式立住，再放大到 1440px。
一、先做桌面再压缩，会发生什么
原因很简单：桌面版的很多设计手法，是建立在"宽度充裕"这个前提上的。三栏并排、左图右文、 大字号标题——在 1440px 里都很好看。一旦宽度掉到 390px，这些结构必须重新做决策， 而"压缩"这个动作并不会替你做决策。
- 字号缩水：桌面 16px 正文，等比缩到手机只有 11px，读三段就累。
- 点击区域过小：并排的按钮被挤成两个 40px 宽的小块，拇指根本点不准。
- 图片被裁：宽幅大图居中裁切，主体（人脸、产品、建筑入口）常常正好被切掉。
一个实用的判断标准：把页面截图缩到手机宽度，如果第一屏看不出"这是谁、能解决什么问题"， 那它在手机上的转化率基本可以放弃。
二、我们的做法：从小屏开始
项目进入设计阶段时，我们第一版稿子永远是竖版的手机界面。原因有三个：
- 手机上放不下装饰，只能留下真正重要的信息，结构因此变得清晰；
- 所有交互（导航、表单、轮播）都必须能单手完成，倒逼我们砍掉花哨动效；
- 小屏立住之后，桌面版只是"加宽 + 增加留白 + 补横向信息"，工作量反而更小。
实际项目里，这个顺序通常能让首页的信息层级一次谈透，客户在竖版稿阶段提出的修改意见， 比在桌面稿阶段多得多——但都是真问题，而不是"这个颜色再亮一点"。
三、上线前的三个自查点
每个项目交付前，我们都会跑一遍这份清单，你也可以拿自己的官网对照：
- 首屏 3 秒法则：不看第二屏，能说出公司做什么、给谁做、怎么联系。
- 按钮 44px 法则：所有可点元素的触摸区域不小于 44×44px，且间距不小于 8px。
- 断网可用性：弱网下图片加载失败时，文字与联系方式仍然完整可读。
四、什么情况下可以不这么做
也有例外：面向专业采购的 B 端产品站、需要大量参数表格的工业站、以及主要在电脑上使用的 后台系统。这类项目的桌面端权重确实更高。但即便在这种情况下，我们仍会先画一版手机稿—— 因为它能帮我们判断"哪些内容是可以砍掉的"。
如果你正在为官网改版做决策，可以先做一件小事：打开你现在的网站，用手机看首屏， 然后问自己一句——客户看完这一屏，会想给你打电话吗？
