Android 中,應用程序需要的圖片資源如何針對不同屏幕大小手機設計? | 知乎問答精選

 

A-A+

Android 中,應用程序需要的圖片資源如何針對不同屏幕大小手機設計?

2018年04月09日 GOOGLE, 知乎問答精選 暫無評論 閱讀 15 ℃ 次

1.800x480、480X320、320X240分辨率的手機需要不同的圖片資源;

2.如何設計三套圖片資源來滿足這3種分辨率的手機,這三套圖片資源之間有什麼樣的大小比例關係?

3.美工設計圖片的時候有沒有技巧?可否先設計一套,然後按照比率縮放呢?

【iCooVoo的回答(57票)】:

可以按照手機屏幕的標準把800x480理解為hdpi,480x320為mdpi,320x240為ldpi,根據最新的數據顯示,Android所有手機中hdpi和mdpi佔有九成以上的比例;

系統版本,到今天2.1~2.3的比例也是絕對比例,所有我們可以以這個為依據來做相應的適配,對於這些數據,需要隨時注意,特別是在Android有新版本推出後的幾個月裡,市場的變動相應的會活動一些,值得注意的是這個比例只是現在的一些數據,可能之後也會有些變動,所以需要事實根據新的市場環境進行適配。

答問題1:以現在的情況為例,最為節省的話,一般開發Android APP的時候會考慮設計hdpi和mdpi的圖片資源,所以也是需要設計兩套圖的,很多為了節省工作量直接用一套hdpi的圖片資源,在mdpi的時候直接壓縮,這樣圖片質量會損失很大,所以最好還是盡量使用兩套資源圖片;

答問題2:視覺在根據交互原型進行設計的時候,可以考慮以mdpi,也就是320x480為藍本進行設計,因為Android一般採用dp為單位,而我們設計的時候一般是px為單位的,這個就涉及到一個單位轉換的問題,而在mdpi下,px和dp是1:1的關係,這樣在標注坐標的時候能夠很方便的進行單位轉換,例如我們以320x480為藍本的話,在photoshop測量的間距為10px,我們在給到RD時的坐標可以直接標注為10dp;因為dp的單位是可以程序自己去適配不用dpi屏幕的,所以就算設計三套不同dpi的圖,一般也只用對mdpi的設計圖進行坐標定位,這個坐標的標注可以用在所有dpi的資源上;

因為現在Android又添加了xhdpi(類似iPhone4的960x640的分辨率)的支持,假如我們在設計有(xhdpihdpi/mdpi/ldpi)四套不同dpi的圖片資源時,因為之前提到以mdpi為藍本做第一個dpi的設計,相應的我們把mdpi的比例設定為1,相應的不同dpi的圖片資源尺寸的比例關係可以是xhdpi:hdpi:mdpi:ldpi等於2:1.5:1:0.75,也就是說,第一套圖為mdpi的資源圖片,xhpi可以大小調整到200%,hdpi可以調整到150%,ldpi則是75%;

答問題3:視覺設計的時候就像前面說到的一樣,可以優先以320x480的大小去設計一套,在用到不同dpi的時候,可以把320x480設計psd裡所有APP要用到的控件單獨做一個控件庫的psd,psd的所有控件圖層是基於形狀工具繪製的,每個分辨率都做一個控件庫的psd,然後可以直接讓美工根據控件庫的psd切圖給RD使用了,先做完mdpi的控件psd後,其它dpi的控件庫的psd可以依照上面說到的比例關係進行大小的調整,例如,hdpi的控件psd也就是把mdpi裡的每個控件放大到150%,有時候放大縮小psd裡的圖片會有些半透明的虛邊,細微調整即可,如果在設計mdpi的時候,每個控件的大小能夠盡量的被4整除,那麼基本上就可以直接放大和縮小控件大小而不用擔心虛邊的問題,當然也不能完全限制在大小被4整除的死胡同裡,這樣也容易局限視覺設計,只是在視覺設計完成後,可以盡量的去調整在,如果視覺上有些控件在大小調整到被4整除的範圍裡,界面整體的比如不太合適,或者很影響視覺設計,也不必去過分強求。

【朱磊的回答(14票)】:

這種問題就應該先去看文檔再來問。

developer.android.com/guide

好吧,我把珍藏多年的必殺技拿出來!!上傳一張圖片,自動生成多尺寸,各種規格圖片。

android-ui-utils.google

【湯立的回答(1票)】:

如果要控制軟件大小的,主要按照480x800的分辨率來出資源圖片就可以了,寫界面程序的時候注意縮放,基本沒什麼問題。。

【picsays的回答(1票)】:

圖說picsays前段時間發佈的《Android的發展和碎片化》中提到了不同屏幕規格的占比情況,還有不同系統版本的占比情況。 picsays.com/2012

標籤:-Android -用戶界面設計 -Android-手機 -Android-開發 -Android-應用 -用戶界面設計師 -iCooVoo


相關資源:





給我留言