但真的是相差很远诶！
我再仔细问了一下，终于知道原因了……
他确实是按照方案做的，但是所采用的，都是宽度和高度，而不是间距。
我说：
『 界面布局的关键不是宽高，而是间距 』
看他相当地不以为然，于是我只好这样从头开始解释：
前端原理
对于前端来说，界面是一个盒子一个盒子套起来的，而不是像画图工具那样一个图层一个图层叠加起来的。
如果把界面看作一个大盒子，那么里面的模块就是小盒子。小盒子里面会装有文字、图片或者更小的盒子
由于现在很多网站都是响应式的，所以这些盒子一般没有固定的宽度，而是根据固定的边距，来自由伸缩。
Sketch 和 Figma 等 UI 绘图工具，都提供了固定边距的自动布局功能，用的就是这个原理。
上图截自：Sketch
但是因为这些绘图工具的画板里用的是图层结构，所以只能固定元素相对于画板的边距，而不能固定元素相对于模块的边距，除非使用组件。
尺寸是变化的
前面提到了一个很关键的点，那就是「盒子」，或者说框架宽度不固定（响应式页面）。
既然宽度，那么框架的高度也同样是不固定的。
因为页面包含大量固定字数的文字或者固定比例的图片，在宽度不固定的情况下，高度自然也没法固定了。
那么既然页面内的元素无法固定高宽，那么什么才是固定的呢？
答案是：
间距是固定的
你可以想象一下栅格伸缩的情景，原理一样，只是真实页面上栅格替换成了各不相同的边距。
也就是说，设计师最好是一开始和前端交付时，就明确设计稿上各元素之间的边距，而不是高宽：
这一点，不但一些设计师不清楚，很多前端也不清楚。只是设计师不清楚是因为不知道前端原理；而前端不清楚，是因为他们不在意相应布局的视觉效果。
不过，虽然框架不固定高宽，但是按钮、图标、LOGO 等小元素，通常还是固定高宽的。
文字对尺寸的影响
一些设计师向前端提供文字参数时，只提供字体和字号，结果出来的效果还是相差很远。
通常来说，最容易产生问题的参数就是「行高」了，因为浏览器的默认行高是 100%，而很多系统平台都有自己的默认行高。
所以说，行高一定要明确才能确保效果，而且最好是提供百分比而不是数字，这样就能够跟随字体尺寸按比例变化了。
除此之外，还有「段落间距」和「字间距」可以注意一下，不过使用率较低就不多说了。
尺寸标注
我知道现在有很多工具可以查看设计稿的尺寸，但是如果前端是新手，也会 get 不到你的设计规范。
标注的时候，就可以只挑关键参数，即：字体、字号、行高、边距、色彩。
其实，如果你知道哪些是关键的，需要标注的东西也没有特别多，比以后东拉西扯地沟通细节高效多了。
很多设计师看了上图的标注，也许会惊呼“没必要”吧！
这说明你的前端同事很优秀，不需要解释太多。
可即便前端同事再优秀，按钮是否要自动灵活伸缩？按照文字内容还是按照界面宽度伸缩？这些东西，也还是要他们自己来“猜”。
像我这样对自适应方案想得比较多的，就更加倾向于标注清楚些。
总结
如果你有一名优秀而细心的前端同事，那么以上都不是问题，可能你根本不需要知道也能好好合作。
但是设计师的工作生涯中难免遇上几个难对付的前端，多点沟通技巧，也可以让自己心情愉快些。
原文地址：体验进阶（公众号）
作者：设计师ZoeYZ
转载请注明：学UI网》前端保证一比一按源文件做，结果又是惨不忍睹
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
