工作中我們提供的設(shè)計(jì)稿標(biāo)注那么仔細(xì)，那為什么前端實(shí)現(xiàn)出來后，設(shè)計(jì)的小伙伴總覺得很多細(xì)節(jié)不夠完美呢，不是這里大了，就是那里小了。我們提供的標(biāo)注，前端的小伙伴真的一個(gè)一個(gè)看了？并且符合他們的認(rèn)知么？如果真的如此，設(shè)計(jì)跟前端之前可以減少大量不必要的溝（si）通（bi）環(huán)節(jié)。

以下內(nèi)容針對于web設(shè)計(jì)的標(biāo)注基礎(chǔ)知識(shí)，前端專業(yè)人士與設(shè)計(jì)高手可忽略此文。

設(shè)計(jì)師需要了解的幾個(gè)前端概念

1.盒子

不管是文字、圖片，還是組合體都可以看成一個(gè)盒子。

1. 前端實(shí)現(xiàn)的時(shí)候需要通過外邊距（margin）來控制盒子與盒子之間的距離。
2. 通過內(nèi)邊距（padding）控制內(nèi)容（比如下圖中的內(nèi)容是一行文字）在自身所在盒子的位置，這個(gè)相當(dāng)于photoshop圖層效果里的內(nèi)描邊。內(nèi)（外）邊距是分上、下、左、右4個(gè)方向的。我們在標(biāo)注的時(shí)候，需要標(biāo)注出不同的間距值。
3. 描邊（border）相當(dāng)于photoshop圖層效果里的外描邊。

2.固定布局、流動(dòng)布局與彈性布局

幾個(gè)盒子可以組合成為區(qū)塊（div），跟我們設(shè)計(jì)的頁面布局是對應(yīng)的。

（1）固定布局：指網(wǎng)頁里的幾個(gè)區(qū)塊都有固定的百分比或者像素值。不管窗口分辨率如何變化，用戶看到的都是固定寬度的內(nèi)容。因?yàn)榇蟛糠钟脩舻钠聊环直媛识荚?024×768及以上，960px成為了常用網(wǎng)頁內(nèi)容寬度。但是近些年，1024×768的顯示器占比份額越來越少，不少網(wǎng)站直接把寬度直接設(shè)成1200px。

把UI中國頁面窗口縮小后，如下圖，發(fā)現(xiàn)網(wǎng)頁內(nèi)容寬度并沒有改變，只是被窗口截?cái)嗔恕?/p>

（2）流動(dòng)布局：指網(wǎng)頁區(qū)塊的寬度或者間距是按照百分比設(shè)置的，會(huì)根據(jù)用戶瀏覽器窗口尺寸自適應(yīng)。

把百度文庫網(wǎng)頁窗口縮小后，左側(cè)文檔預(yù)覽區(qū)的寬度變小了，間距并沒有變化，只是文本段落的寬度變窄了，如下圖。

（3）彈性布局：彈性布局與流動(dòng)布局有相似的地方，可以根據(jù)瀏覽器窗口寬度調(diào)整網(wǎng)頁內(nèi)容寬度。不同的是，彈性布局尺寸主要是根據(jù)文字大小而變化的。彈性布局的單位是em或rem，對這個(gè)好奇的小伙伴可以找前端聊聊。當(dāng)前瀏覽器設(shè)置里的字號為14px，假設(shè)1rem（1個(gè)單位）=14px，當(dāng)前大標(biāo)題文字大小=4.5rem=4.5×14=63px；當(dāng)在設(shè)置里將字號改為28px后，這時(shí)大標(biāo)題文字大小=4.5em=4.5×28=126px；頁面寬度也跟著對應(yīng)比例變大了。

（4）混合布局：以上布局綜合使用2種及以上，比如有些區(qū)塊寬度是固定值，某些區(qū)塊寬度是自適應(yīng)縮放的。

3.絕對定位與相對定位

（1）絕對定位（absolute）：是指內(nèi)容距離上一級盒子的位置。大家看下UI中國的導(dǎo)航，文字“競賽”本身也可以看成一個(gè)盒子，青色區(qū)域的高度就是上文中提到的文字行高。文字“競賽”與“N”小圖標(biāo)有相同的父級盒子，即紫色區(qū)域?！癗”小圖標(biāo)距離紫色區(qū)域上邊距與右邊距有個(gè)固定尺寸。

（2）相對定位（relative）：是指相對于內(nèi)容在頁面內(nèi)容的初始位置，不管是否移動(dòng)內(nèi)容，仍要占據(jù)原來空間的。舉個(gè)大家常見的例子，淘寶首頁的錨點(diǎn)導(dǎo)航，我們需要標(biāo)注出距離頁面頂端的距離與距離左側(cè)盒子的距離。

文字 /?Font

不同的操作系統(tǒng)、不同的瀏覽器以及不同的語言版本（比如中英文），瀏覽器默認(rèn)的文字樣式（比如字體、大小、行高）都是不同的。通常網(wǎng)頁設(shè)計(jì)，我們會(huì)給個(gè)默認(rèn)文字樣式（font），包括字體家族（font-famliy）。

為啥要這樣做呢，好奇的小伙伴可以跟自己的前端設(shè)計(jì)師狠狠的聊一下。通常用戶看到的文字樣式是受以下三層控制的：瀏覽器默認(rèn)樣式<網(wǎng)頁定義樣式<用戶自定義樣式。用戶通過瀏覽器設(shè)置（選項(xiàng)）里可以修改文字樣式的，當(dāng)然用戶也可以恢復(fù)設(shè)置。因?yàn)橛脩舻臋?quán)益是最大的，所以用戶自定義樣式優(yōu)先級最高。介于可選擇的中文字體比較少，常用的中文字體就是宋體、微軟雅黑、Arial了。但是對于有追求的設(shè)計(jì)師來講，Windows中會(huì)使用tahoma、在Mac中使用helvetica效果更好。

比如淘寶定義的font: 12px/1.5 tahoma,arial,’Hiragino Sans GB’,’\5b8b\4f53′,sans-serif;?font-family: tahoma,arial,”Hiragino Sans GB”,”宋體”,sans-serif;但是并不是所有系統(tǒng)都預(yù)裝了這兩款字體哦，所以設(shè)計(jì)的時(shí)候給個(gè)font-family，可以從前往后優(yōu)先錄用的哦。

下面來講下關(guān)于文字大小、行高的標(biāo)注：

1.文字本身也是個(gè)盒子，盒子的高度也就是文字行高（line-height）

2.文字可以與其他元素再次組合成一個(gè)盒子，我們需要標(biāo)注出盒子與盒子之間的間距。

3.文字間距：一般我們不特意去標(biāo)注文字間距，因?yàn)闉g覽器解析文字間距的方式在有些情況下不太適應(yīng)，比如文字居中的情況。通常如果少量特殊文字需要擴(kuò)大間距的話，就直接用空格替代了。但是考慮到長文本的易讀性，可以嘗試設(shè)置一個(gè)文字間距。

下面一篇文章會(huì)講解下關(guān)于“圖像”的設(shè)計(jì)說明與標(biāo)注，先劇透下幾個(gè)重點(diǎn)：

1. 圖像的格式選擇與素材提供
2. 需要縮放、裁切的圖像說明
3. 不同設(shè)計(jì)情況下的圖像標(biāo)注
4. 背景圖像的素材提供

作者：小白，微信公眾號：小白的交互設(shè)計(jì)

本文由 @小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。