向研發(fā)交付設(shè)計(jì)稿時(shí)，需要注意兩個方面

　

當(dāng)一個頁面做完以后，需要交付給研發(fā)的東西的離不開這兩個重要的部分，即頁面標(biāo)注和切圖。

在一個產(chǎn)品開發(fā)的流程中，，UI設(shè)計(jì)師離不開和研發(fā)打交道，UI做出來的圖都需要研發(fā)這邊去實(shí)現(xiàn)，所以我們也要站在研發(fā)的視角去考慮問題，這樣可以減少不須要的溝通成本，提升工作效率。

每個研發(fā)有差別的性格。在我們團(tuán)隊(duì)中，有的研發(fā)需要你每個地方都標(biāo)注得很清楚，否則他會不停地來找你，有的研發(fā)則不需要，這些都需要慢慢去磨合，找到相互覺得舒服的方式。下面主要是我寫我本身工作上和研發(fā)合作的一些總結(jié)，已經(jīng)結(jié)合網(wǎng)上的一些文章，內(nèi)容也比較基礎(chǔ)，大神可以忽略我。

當(dāng)一個頁面做完以后，需要交付給研發(fā)的東西的離不開這兩個重要的部分。

頁面標(biāo)注切圖頁面標(biāo)注1、以什么單位進(jìn)行標(biāo)注

先來了解一下這幾個單位：px 、dp 、sp

px：pixel像素，電子屏幕上組成一幅圖畫或照片的最基本單元，設(shè)計(jì)時(shí)使用的單位。dp:?dip，Density-independent pixel, 是安卓開發(fā)用的長度單位，1dp體現(xiàn)在屏幕像素點(diǎn)密度為160ppi時(shí)1px長度sp:?scale-independent pixel，安卓開發(fā)用的字體大小單位。

具體要使用什么單位進(jìn)行標(biāo)注，請和研發(fā)溝通好。目前有些設(shè)計(jì)師提供設(shè)計(jì)稿的時(shí)候依舊使用px進(jìn)行標(biāo)注，但如果不影響他開發(fā)以及他能換算清楚的前提下，理論上是可以的。但這不是一個最好的選擇，建議使用dp或sp。

那怎么換算呢？

（1）px轉(zhuǎn)dp

安卓端屏幕大小各不相同，按照其像素密度，分為以下幾種規(guī)格：

1dp定義為像素密度值為160ppi時(shí)的1px，即，在MDPI時(shí)（分辨率為320*480），1dp = 1px。

以mdpi為尺度，這些屏幕的密度比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi ：xxxhdpi= 0.75 : 1 : 1.5 : 2 : 3：4? 。即在HDPI的密度下，1dp=1.5px；在xHDPI情況下，1dp=1.5px。以此類推。

所以當(dāng)我以使用分辨率為1080*1920（即xxHDPI）來做圖時(shí)，假設(shè)間距是48px，那標(biāo)注時(shí)應(yīng)該是16dp。

（2）px轉(zhuǎn)sp

dp和sp都是安卓的開發(fā)單位，sp與dp類似，但是sp可以按照用戶的字體大小首選項(xiàng)進(jìn)行縮放。就是說Android系統(tǒng)允許用戶自定義文字尺寸大?。ㄐ?、正常、大、超大等等），如下圖，如果我以sp為單位時(shí)，當(dāng)把文字改為“大”時(shí)，應(yīng)用內(nèi)部也會進(jìn)行字體的相應(yīng)縮放，dp則不行。一般情況下可認(rèn)為1sp=1dp

進(jìn)入系統(tǒng)的設(shè)備顯示可調(diào)字體大小

當(dāng)然目前也有一些工具可以幫你更好的進(jìn)行標(biāo)注，不需要你本身去換算。建議利用好能夠提升效率的工具。

2、間距

需要標(biāo)注的地方很多，好比圖與字的間距、字/圖與界面兩邊的間距、字與字的間距等…

標(biāo)注的方法也可以有差別，可以以邊框、附近的元素作為尺度，也可以告知具體坐標(biāo)…

重點(diǎn)講一下字與字的間距：在實(shí)際的開發(fā)中，兩個字體的間距在手機(jī)上的顯示效果要比標(biāo)注圖的間距要大。 這是因?yàn)樵谝粋€字體中，字母的高度可能會有所差別，系統(tǒng)會默認(rèn)給字體增加一個高度，但每個手機(jī)增加的高度也差別，你可以按你的圖來進(jìn)行標(biāo)注，再由研發(fā)進(jìn)行判斷和調(diào)試，ui也需要一起跟進(jìn)。

間距的標(biāo)注也需要考慮在差別機(jī)型上顯示會出現(xiàn)什么問題，這個問題是否嚴(yán)重，這個比例大不大等。

3、字體大小及粗細(xì)

在一個頁面下，常用的字號有：12、14、16、20 和 34sp。

除了標(biāo)注字體大小外，還需要標(biāo)注字體的粗細(xì)，你還可以按照需要設(shè)置字距，行距等。

也支持打包其他字體。

4、顏3色

（1）按元素種類來分，需要標(biāo)注的有：配景色（遮罩的顏色）、字體顏色，按鈕顏色，點(diǎn)擊色……

如果是通過差別的顏色來體現(xiàn)差別的狀態(tài)也需要標(biāo)注說明。

（2）按顏色的數(shù)量來分：單色，多色（漸變色）

如果是漸變色，那漸變的角度也要說明，是從左往右，從上到下還是從中間到四周等。

已經(jīng)是否有透明度等……

這里強(qiáng)烈建議在項(xiàng)目開始之初能夠建立基本的設(shè)計(jì)規(guī)范（包孕顏色，字體大小等），建立完后不要就扔在共享就不管了，必然要讓負(fù)責(zé)這個項(xiàng)目的每個UI、研發(fā)人員都知道。

這里增補(bǔ)一個小點(diǎn)：如果你的文字是有帶透明度的，那你標(biāo)注的時(shí)候可以采用以下方式：因?yàn)檠邪l(fā)采用十六進(jìn)制的代碼，就是說當(dāng)你給研發(fā)一個80%的白色時(shí)，其實(shí)也可以給對應(yīng)代碼：#CCFFFFFF ，前兩位是CC是體現(xiàn)透明度，后面六位FFFFFF是體現(xiàn)具體的色值。

標(biāo)簽：東營 鹽城 林芝 烏魯木齊 九江