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

1 評論 9381 瀏覽 42 收藏 9 分鐘

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

在一個產(chǎn)品開發(fā)的流程中,UI設(shè)計師離不開和研發(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ā)的東西的離不開這兩個重要的部分。

  1. 頁面標(biāo)注
  2. 切圖

頁面標(biāo)注

以什么單位進(jìn)行標(biāo)注

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

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

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

那怎么換算呢?

(1)px轉(zhuǎn)dp

安卓端屏幕大小各不相同,根據(jù)其像素密度,分為以下幾種規(guī)格:

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

以mdpi為標(biāo)準(zhǔn),這些屏幕的密度比為: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è)間距是48px,那標(biāo)注時應(yīng)該是16dp。

(2)px轉(zhuǎn)sp

dp和sp都是安卓的開發(fā)單位,sp與dp類似,但是sp可以根據(jù)用戶的字體大小首選項(xiàng)進(jìn)行縮放。就是說Android系統(tǒng)允許用戶自定義文字尺寸大?。ㄐ?、正常、大、超大等等),如下圖,如果我以sp為單位時,當(dāng)把文字改為“大”時,應(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)注,不需要你自己去換算。建議利用好能夠提升效率的工具。

間距

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

標(biāo)注的方法也可以有不同,可以以邊框、附近的元素作為標(biāo)準(zhǔn),也可以告知具體坐標(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)重,這個比例大不大等。

字體大小及粗細(xì)

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

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

也支持打包其他字體。

顏色

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

如果是通過不同的顏色來表示不同的狀態(tài)也需要標(biāo)注說明。

(2)按顏色的數(shù)量來分:單色,多色(漸變色)

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

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

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

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

最后提醒一句:如果不清楚你該怎么標(biāo),一定要和研發(fā)溝通!而且也不需要每一張效果圖都進(jìn)行標(biāo)注,能保證研發(fā)工作順利進(jìn)行即可。

切圖

安卓尺寸眾多,按每個屏幕去適配肯定不現(xiàn)實(shí),所以為了解決這個問題,安卓手機(jī)屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進(jìn)行適配。

這和前面提到的單位有關(guān)系,下圖為在不同分辨率下對應(yīng)切圖的倍數(shù)關(guān)系。要切多少套的問題,根據(jù)實(shí)際開發(fā)來定。這里建議大家安裝切圖插件,一鍵可以導(dǎo)出多套非常方便。這個部分網(wǎng)上教程很多,就不多說了。

截圖來自wuseyun

在切圖之前你應(yīng)該明白哪些圖是可以不需要切的,那些圖是一定要切的。

以下圖為例:

截圖來自Ace Cleaner

要切的地方有(紅色部分):四個主要的功能圖標(biāo),側(cè)邊欄入口,右上角的商店入口以及小紅點(diǎn)(切點(diǎn)九)

不需要切的地方有(黑色部分):兩個色塊以及上面的小動畫圖

總的來說就是當(dāng)程序?qū)崿F(xiàn)不了的時候,就需要你切圖。程序?qū)崿F(xiàn)有個很大的好處就是能減少包體的大小。

記得壓縮!記得壓縮!記得壓縮!

除了這兩部分,還有交互方式說明,有動畫效果的進(jìn)行詳細(xì)描述,這部分寫起來也很多,下次講。

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很基礎(chǔ)也很實(shí)用,謝謝分享

    來自廣東 回復(fù)