但真的是相差很遠誒！

我再仔細問了一下，終于知道原因了……

他確實是按照方案做的，但是所采用的，都是寬度和高度，而不是間距。

我說：

『 界面布局的關鍵不是寬高，而是間距 』

看他相當地不以為然，于是我只好這樣從頭開始解釋：

前端原理

對于前端來說，界面是一個盒子一個盒子套起來的，而不是像畫圖工具那樣一個圖層一個圖層疊加起來的。

如果把界面看作一個大盒子，那么里面的模塊就是小盒子。小盒子里面會裝有文字、圖片或者更小的盒子

由于現在很多網站都是響應式的，所以這些盒子一般沒有固定的寬度，而是根據固定的邊距，來自由伸縮。

Sketch 和 Figma 等 UI 繪圖工具，都提供了固定邊距的自動布局功能，用的就是這個原理。

上圖截自：Sketch

但是因為這些繪圖工具的畫板里用的是圖層結構，所以只能固定元素相對于畫板的邊距，而不能固定元素相對于模塊的邊距，除非使用組件。

尺寸是變化的

前面提到了一個很關鍵的點，那就是「盒子」，或者說框架寬度不固定（響應式頁面）。

既然寬度，那么框架的高度也同樣是不固定的。

因為頁面包含大量固定字數的文字或者固定比例的圖片，在寬度不固定的情況下，高度自然也沒法固定了。

那么既然頁面內的元素無法固定高寬，那么什么才是固定的呢？

答案是：

間距是固定的

你可以想象一下柵格伸縮的情景，原理一樣，只是真實頁面上柵格替換成了各不相同的邊距。

也就是說，設計師最好是一開始和前端交付時，就明確設計稿上各元素之間的邊距，而不是高寬：

這一點，不但一些設計師不清楚，很多前端也不清楚。只是設計師不清楚是因為不知道前端原理；而前端不清楚，是因為他們不在意相應布局的視覺效果。

不過，雖然框架不固定高寬，但是按鈕、圖標、LOGO 等小元素，通常還是固定高寬的。

文字對尺寸的影響

一些設計師向前端提供文字參數時，只提供字體和字號，結果出來的效果還是相差很遠。

通常來說，最容易產生問題的參數就是「行高」了，因為瀏覽器的默認行高是 100%，而很多系統平臺都有自己的默認行高。

所以說，行高一定要明確才能確保效果，而且最好是提供百分比而不是數字，這樣就能夠跟隨字體尺寸按比例變化了。

除此之外，還有「段落間距」和「字間距」可以注意一下，不過使用率較低就不多說了。

尺寸標注

我知道現在有很多工具可以查看設計稿的尺寸，但是如果前端是新手，也會 get 不到你的設計規(guī)范。

標注的時候，就可以只挑關鍵參數，即：字體、字號、行高、邊距、色彩。

其實，如果你知道哪些是關鍵的，需要標注的東西也沒有特別多，比以后東拉西扯地溝通細節(jié)高效多了。

很多設計師看了上圖的標注，也許會驚呼“沒必要”吧！

這說明你的前端同事很優(yōu)秀，不需要解釋太多。

可即便前端同事再優(yōu)秀，按鈕是否要自動靈活伸縮？按照文字內容還是按照界面寬度伸縮？這些東西，也還是要他們自己來“猜”。

像我這樣對自適應方案想得比較多的，就更加傾向于標注清楚些。

總結

如果你有一名優(yōu)秀而細心的前端同事，那么以上都不是問題，可能你根本不需要知道也能好好合作。

但是設計師的工作生涯中難免遇上幾個難對付的前端，多點溝通技巧，也可以讓自己心情愉快些。

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》前端保證一比一按源文件做，結果又是慘不忍睹

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務