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