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