做 UI 的人常遇到一个尴尬：稿子画得挺好看，开发做出来却变形、错位、字号忽大忽小；同一套视觉放到手机、平板、网页端，总要重新量一遍、改一遍。问题往往不在审美，而在「适配」和「落地」这两步没打牢。这套内容针对的就是这个缺口——不是教你画得更炫，而是让设计稿在不同屏幕、不同平台上站得住、交得出去。

先搞清楚：你缺的是哪一块

适配和落地牵扯的面比较杂，不同人卡的环节不一样，不妨对照自查：

只会按固定尺寸出稿，遇到刘海屏、折叠屏、横竖屏切换就不知道怎么处理；
知道要做多套尺寸，但每次都是手动复制、逐个挪，改一处要动十个文件；
切图和标注交出去，开发反复来问间距、颜色、状态，来回拉扯；
设计规范文档写了，团队却没人用，因为约束和实际组件对不上；
能画出界面的静态样子，但说不清交互状态、异常状态、空状态该怎么呈现。

如果你中了其中两三条，这套内容对你是有针对性的；如果你已经能顺畅地一个人扛完多端交付，那它更多是帮你把零散经验补成方法。

它讲的是「规则」，不是「某一张图」

适配的核心不是把同一张设计稿拉伸到不同宽度，而是先想清楚哪些东西该固定、哪些该随屏变化。所以内容会围绕布局栅格、断点划分、间距与尺寸的弹性规则、字号与行高的相对关系展开，把「多大屏幕用哪套逻辑」变成可复用的判断，而不是每次凭感觉调。多平台的差异也会拆开讲：移动端的触控热区与安全区、网页端的响应式流式布局、平板这类中间形态的取舍，各自约束不同，硬套一套方案通常两头不讨好。

落地这一段，才是多数人真正卡住的地方

稿子好看不代表能上线的例子太多了。落地要处理的是设计语言和实现语言之间的翻译：组件怎么定义才能被复用、状态怎么标全、标注和切图怎么给才不返工、规范文档怎么写成开发愿意照着做而不是束之高阁。内容里会涉及组件化思路、设计规范的建立与维护、以及与前端协作时的交付习惯。这些听起来琐碎，但恰恰是决定一轮迭代要沟通三次还是十次的关键。

配套练习建议这样用

看和做要分开。建议准备一个自己熟悉的真实项目当底稿，边看边改：

挑一个已有页面，拆出它的栅格和断点，说明每个断点变了什么、为什么；
把一个常用控件整理成组件，标出全部状态（默认、悬停、禁用、加载、报错等），看自己漏了几种；
把同一组内容分别适配到手机和网页两种宽度，比较哪些规则必须重写；
写一份只有一页的交付说明，给一个没参与过你项目的开发看，看他能不能照着还原。

能独立完成这几件事，基本就说明适配和落地的链条你已经打通了。

看完后，你应该能回答这几个问题

面对一个新平台，你先定什么、后定什么？
哪些尺寸可以固定，哪些必须弹性，判断依据是什么？
一套设计要交付给开发，最少要提供哪些信息才算完整？
设计规范怎么建才不会写完就废？
当实现效果和设计稿有偏差时，你能否说清是规则问题还是执行问题？

如果这些问题你目前答不完整，先把缺口找出来，再顺着对应的小节去看，效率会比从头刷一遍高。缺什么补什么，别假装什么都会。