但真的是相差很遠誒！
我再仔細問了一下，終于知道原因了……
他確實是按照方案做的，但是所采用的，都是寬度和高度，而不是間距。
我說：
『 界面布局的關鍵不是寬高，而是間距 』
看他相當地不以為然，于是我只好這樣從頭開始解釋：
前端原理
對于前端來說，界面是一個盒子一個盒子套起來的，而不是像畫圖工具那樣一個圖層一個圖層疊加起來的。
如果把界面看作一個大盒子，那么里面的模塊就是小盒子。小盒子里面會裝有文字、圖片或者更小的盒子
由于現在很多網站都是響應式的，所以這些盒子一般沒有固定的寬度，而是根據固定的邊距，來自由伸縮。
Sketch 和 Figma 等 UI 繪圖工具，都提供了固定邊距的自動布局功能，用的就是這個原理。
上圖截自：Sketch
但是因為這些繪圖工具的畫板里用的是圖層結構，所以只能固定元素相對于畫板的邊距，而不能固定元素相對于模塊的邊距，除非使用組件。
尺寸是變化的
前面提到了一個很關鍵的點，那就是「盒子」，或者說框架寬度不固定（響應式頁面）。
既然寬度，那么框架的高度也同樣是不固定的。
因為頁面包含大量固定字數的文字或者固定比例的圖片，在寬度不固定的情況下，高度自然也沒法固定了。
那么既然頁面內的元素無法固定高寬，那么什么才是固定的呢？
答案是：
間距是固定的
你可以想象一下柵格伸縮的情景，原理一樣，只是真實頁面上柵格替換成了各不相同的邊距。
也就是說，設計師最好是一開始和前端交付時，就明確設計稿上各元素之間的邊距，而不是高寬：
這一點，不但一些設計師不清楚，很多前端也不清楚。只是設計師不清楚是因為不知道前端原理；而前端不清楚，是因為他們不在意相應布局的視覺效果。
不過，雖然框架不固定高寬，但是按鈕、圖標、LOGO 等小元素，通常還是固定高寬的。
文字對尺寸的影響
一些設計師向前端提供文字參數時，只提供字體和字號，結果出來的效果還是相差很遠。
通常來說，最容易產生問題的參數就是「行高」了，因為瀏覽器的默認行高是 100%，而很多系統平臺都有自己的默認行高。
所以說，行高一定要明確才能確保效果，而且最好是提供百分比而不是數字，這樣就能夠跟隨字體尺寸按比例變化了。
除此之外，還有「段落間距」和「字間距」可以注意一下，不過使用率較低就不多說了。
尺寸標注
我知道現在有很多工具可以查看設計稿的尺寸，但是如果前端是新手，也會 get 不到你的設計規范。
標注的時候，就可以只挑關鍵參數，即：字體、字號、行高、邊距、色彩。
其實，如果你知道哪些是關鍵的，需要標注的東西也沒有特別多，比以后東拉西扯地溝通細節高效多了。
很多設計師看了上圖的標注，也許會驚呼“沒必要”吧！
這說明你的前端同事很優秀，不需要解釋太多。
可即便前端同事再優秀，按鈕是否要自動靈活伸縮？按照文字內容還是按照界面寬度伸縮？這些東西，也還是要他們自己來“猜”。
像我這樣對自適應方案想得比較多的，就更加傾向于標注清楚些。
總結
如果你有一名優秀而細心的前端同事，那么以上都不是問題，可能你根本不需要知道也能好好合作。
但是設計師的工作生涯中難免遇上幾個難對付的前端，多點溝通技巧，也可以讓自己心情愉快些。
原文地址：體驗進階（公眾號）
作者：設計師ZoeYZ
轉載請注明：學UI網》前端保證一比一按源文件做，結果又是慘不忍睹
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務