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