中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

以下內容針對于web設計的標注基礎知識，前端專業人士與設計高手可忽略此文。

設計師需要了解的幾個前端概念

1.盒子

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

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

2.固定布局、流動布局與彈性布局

幾個盒子可以組合成為區塊（div），跟我們設計的頁面布局是對應的。

（1）固定布局：指網頁里的幾個區塊都有固定的百分比或者像素值。不管窗口分辨率如何變化，用戶看到的都是固定寬度的內容。因為大部分用戶的屏幕分辨率都在1024×768及以上，960px成為了常用網頁內容寬度。但是近些年，1024×768的顯示器占比份額越來越少，不少網站直接把寬度直接設成1200px。

把UI中國頁面窗口縮小后，如下圖，發現網頁內容寬度并沒有改變，只是被窗口截斷了。

（2）流動布局：指網頁區塊的寬度或者間距是按照百分比設置的，會根據用戶瀏覽器窗口尺寸自適應。

把百度文庫網頁窗口縮小后，左側文檔預覽區的寬度變小了，間距并沒有變化，只是文本段落的寬度變窄了，如下圖。

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

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

3.絕對定位與相對定位

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

（2）相對定位（relative）：是指相對于內容在頁面內容的初始位置，不管是否移動內容，仍要占據原來空間的。舉個大家常見的例子，淘寶首頁的錨點導航，我們需要標注出距離頁面頂端的距離與距離左側盒子的距離。

文字 /?Font

不同的操作系統、不同的瀏覽器以及不同的語言版本（比如中英文），瀏覽器默認的文字樣式（比如字體、大小、行高）都是不同的。通常網頁設計，我們會給個默認文字樣式（font），包括字體家族（font-famliy）。

為啥要這樣做呢，好奇的小伙伴可以跟自己的前端設計師狠狠的聊一下。通常用戶看到的文字樣式是受以下三層控制的：瀏覽器默認樣式<網頁定義樣式<用戶自定義樣式。用戶通過瀏覽器設置（選項）里可以修改文字樣式的，當然用戶也可以恢復設置。因為用戶的權益是最大的，所以用戶自定義樣式優先級最高。介于可選擇的中文字體比較少，常用的中文字體就是宋體、微軟雅黑、Arial了。但是對于有追求的設計師來講，Windows中會使用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;但是并不是所有系統都預裝了這兩款字體哦，所以設計的時候給個font-family，可以從前往后優先錄用的哦。

下面來講下關于文字大小、行高的標注：

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

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

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

下面一篇文章會講解下關于“圖像”的設計說明與標注，先劇透下幾個重點：

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

作者：小白，微信公眾號：小白的交互設計

本文由 @小白 原創發布于人人都是產品經理。未經許可，禁止轉載。