1. 射雞師 VS 攻城師
在日常的Andriod開發中經常會遇到各種各樣的PK,其中設計師和工程師的矛盾非常突出,我們來看一下雙方的主要矛盾。
主要原因是由于設計師和工程師都只專注于自己的領域,對彼此的領域了解較少。
2. 幾個基本的概念
1.屏幕尺寸:手機實際物理尺寸,一般用英寸來表示(1 英寸 = 2.54 厘米)。
手機尺寸計算方式=對角線尺寸/2.54
2.分辨率:屏幕上顯示的像素個數,單位尺寸內像素點越多,顯示的圖像就越清楚。
分辨率720*1280表示手機水平方向的像素為720,垂直方向為1280.
市場上主流分辨率有:480*800、 720*1280、 1080*1920(其他的早該淘汰了,忽略不計)。
3.屏幕密度:表示屏幕每英寸有多少個像素。
240dpi(480*800) 、320dpi(720*1280)、480dpi(1080*1920)
(這里240dpi并不一定是480*800的分辨率,設計效果圖時不用考慮這些,可以把480*800的分辨率“當成”是在240dpi下的設計,因為實際240dpi下的分辨率可以和480*800的分辨率共用一套切圖資源。)
4.單位:
px:像素(設計師都知道像素是什么)。
dp:andriod開發中用于描述尺寸和間距。
sp:和dp一樣,只是用于描述字號和行距。
3. 到底采用哪種分辨率來設計。
1.原則上需要為不同的分辨率去單獨設計效果圖,但是由于實際開發成本,設計成本的各種要求,可以根據目前市場占有率選擇機型,目前主要480*800、 720*1280、 1080*1920這幾種分辨率,本人目前都是采用720*1280的分辨率來設計,因為目前為止720*1280的市場占有率還是比較高的。但是由于技術水平的不斷提升,今后一定會采用1080*1920的來設計,希望各位小伙伴能夠關注一下市場情況。
總結:現在還是采用720*1280的分辨率來設計吧。
4.到底需要提供多少套切圖。
1.只需要提供一套切圖即可。
原則上設計師需要為不同分辨率單獨標注切圖,同樣根據開發成本等要求。
1.一般采用720*1280的來設計。切圖可以直接適配120*1280分辨率的機型。
2.720*1280下的切圖資源基本可以適配其他機型,有些特殊的切圖需要單獨適配的,比如icon等。
3.適配480*800的機型,只需要把切圖/1.5即可。
4.適配1080*1920機型,只需要把切圖*1.5即可。
5.適配1080*1920的時候,不要單獨硬生生的將圖標放大1.5倍。這就要求在720*1280下畫圖的時候,盡量采用矢量圖形來畫 圖。比如在720*1280下圖圖標是48px*48px的時候,適配1080*1920時候,48px*1.5=72px。把矢量圖形調整為72px即可。把 切圖資源給開發,開發會把切圖單獨放到xxhdpi的文件目錄下,就會自動適配1080*1920的了。
同樣要是適配480*800的,48px/1.5=32px,把切圖給開發,開發會把切圖資源單獨放到hdpi的目錄下,就會自動適配的。
720*1280下的切圖資源,開發是放到xhdpi的目錄下的。
注意:大家在設計圖片的時候盡量采用偶數來設計。
5.到底需要提供多少套標注。
1.只需要提供一套標注即可。
原則上需要為不同分辨單獨進行標注,但由于開發成本等各種考慮。
選取320dpi下(分辨率為:720*1280)進行設計,此分辨率下1dp=2px。
設計師要建立相對單位概念,可以直接使用dp標注尺寸、sp標注文字大??;
Andriod官網中就采用相對單位進行標注的。
注意事項:另外視覺可以直接從高分辨率進行設計、標注、切圖,這樣可以方便適配低分辨率。
6.其他。
1.由于Andriod設備尺寸較多,設計師設計時要考慮好固定和自適應部分(一定要和開發溝通好,哪些地方時固定的,哪些地方是要根據內容變換的)。
2.標注盡量采用相對關系。
Andriod設備尺寸很多,不可能采用絕對定位方式來標注,因為絕對定位無法實現界面元素自適應,標注時說明和兄弟元素、父子元素之間的關系即可。
7. 文字。
中文字體:默認為Droid Sans Fallback,設計時可采用微軟雅黑。
英文字體:Andriod4.x及以上采用Roboto,Andrio2.x和andriod3.x采用 Droid Sans。
建議盡量采用系統默認字體。
Andriod規范建議,字號采用12sp、14sp、18sp、22sp等四個級別來設計。(實際設計時可以按實際情況調整,我經常這么干,嘿嘿)
8. 總結。
1.采用720*1280分辨率來進行設計。(設計時,采用偶數值進行設計,方便dp和px的轉換)
2.開始標注了,標注盡量采用相對位置進行標注。
3.切圖了,首先在720*1280下進行切圖,可以完全適配720*1280的機型。切圖資源
4.分別適配480*800 、1080*1920(上面已經描述過了哦)
5.不要忘記了,開發完后要進行bug測試哦(視覺方面的)
6.終于上線了,有自豪感了吧。