瞭解設計稿標註的底層邏輯,實現100%還原度!

語言: CN / TW / HK

有次幫朋友弄一個項目,不料遇到一個奇葩前端。

時間比較趕所以沒有標註尺寸,讓他自己看着源文件做。

結果做出來亂七八糟的,完全不一樣 ‍♀️

去找他問吧,他斬釘截鐵地説: 我明明是按照方案上的尺寸做的!

如果是這種一些層次不齊的小差別,那也就算了,以後慢慢摳細節就 OK:

但真的是相差很遠誒!

我再仔細問了一下,終於知道原因了……

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

我説:

界面佈局的關鍵不是寬高,而是間距

看他相當地不以為然,於是我只好這樣從頭開始解釋:

前端原理

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

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

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

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

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

尺寸是變化的

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

既然寬度,那麼 框架的 高度也同樣是不固定的

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

那麼既然頁面內的元素無法固定高寬,那麼什麼才是固定的呢?

答案是:

間距是固定的

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

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

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

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

文字對尺寸的影響

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

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

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

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

尺寸標註

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

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

其實,如果你知道哪些是關鍵的,需要標註的東西也沒有特別多,比以後東拉西扯地溝通細節高效多了。

很多設計師看了上圖的標註,也許會驚呼“沒必要”吧!

這説明你的前端同事很優秀,不需要解釋太多。

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

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

總結

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

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

慢慢來比較快,如覺得有幫助,

請點個 贊&在看 ,謝謝!

添加微信, 邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集