Android 中,應用程序需要的圖片資源如何針對不同屏幕大小手機設計?
1.800x480、480X320、320X240解析度的手機需要不同的圖片資源;
2.如何設計三套圖片資源來滿足這3種解析度的手機,這三套圖片資源之間有什麼樣的大小比例關係?
3.美工設計圖片的時候有沒有技巧?可否先設計一套,然後按照比率縮放呢?
可以按照手機屏幕的標準把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整除的範圍里,界面整體的比如不太合適,或者很影響視覺設計,也不必去過分強求。 這種問題就應該先去看文檔再來問。
http://developer.android.com/guide/practices/screens_support.html
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
解決樓主問題的關鍵不在於點九,點九隻是一種可拉伸切圖的方法。
樓上切的點九也有問題,那個對話氣泡,有沒有發現字都偏下?WHY?因為切圖氣泡下面有陰影,氣泡上面又沒有相等的留出透明空間,而開發是將文字與切圖居中對齊,所以會偏下。
---------- 進入正題 --------
先說一下安卓手機調取資源的方式,
一般資源文件存在****/res/ 目錄中,APK文件解壓出來就可以看到HDPI、XHDPI、XXHDPI等文件夾,用來分別存取不同比例的資源。
* 如果每種資源都有,系統會自動調用相對應的資源文件夾里的資源。比如手機是HDPI的,而HDPI資源文件里有,就調取HDPI的資源。
* 如果相對應資源沒有,會調取接近的大資源並按比例縮小來適配,比如手機是HDPI的,但是HDPI文件夾里沒有資源,而XHDPI里有,就調用XHDPI里的資源(縮小損失微小,只是邊緣會產生模糊像素,用戶沒有設計師的像素眼,影響並不大)。
* 如果大資源也沒有,會調取接近的小資源並按比例放大來適配。比如手機是HDPI的,HDPI和XHDPI、XXHDPI都沒有資源,而MDPI有,就調用MDPI的資源。(放大損失大,模糊,和圖片放大一個道理)。
看個表格,屏幕密度倍數關係,資源適配時縮放比例關係。
再看一份數據,安卓手機屏幕尺寸與屏幕密度覆蓋率(谷歌官方數據,截止到2015.1.5)
樓主提到的三個解析度對應屏幕密度分布是:
800x480(HDPI),480X320(MDPI)、320X240(LDPI)
發現樓主去適配的機器只佔了 38.4% + 17.9% + 5.4% = 61.7%。
即使你全部提供這3套資源,也只能適配好61.7%。
到時候會出現這樣的情況:
樓主最大的資源只有HDPI的,
XHDPI(720P)機器適配的時候,調用HDPI資源,放大1.333倍顯示,還好,能忍受
XXHDPI(1080P)機器適配的時候,調用HDPI資源,放大2倍顯示,。。。。糊
更別說現在的2K屏手機了(雖然還比較少),就無法直視了。
給樓主3個問題的回答:
1. 800x480、480X320、320X240解析度的手機需要不同的圖片資源;
答:不一定要3種資源都提供,提供一個高的就好。
當然如果你設計開發資源充足,對安裝包大小又不在乎,那麼你可以全做出來,沒有什麼不可以的,但這樣性價比不高。
2. 如何設計三套圖片資源來滿足這3種解析度的手機,這三套圖片資源之間有什麼樣的大小比例關係?
答:大小比例請看第一個表格。
3. 美工設計圖片的時候有沒有技巧?可否先設計一套,然後按照比率縮放呢?
答:最有性價比的方案是 設計師用1080x1920(XXHDPI)做設計,提供一套XXHDPI切圖資源。其他密度不需要提供,系統會自適配。
為什麼是XXHDPI,因為大解析度趨勢,需要滿足大屏手機的清晰度,現在XXHDPI已經佔比16.3%(2015.1.5)。
如果各種資源都提供,成本大,
1. 前期開發設計成本大,特別是設計,需要切很多套圖,浪費時間。
2. 用戶下載成本大,如果你的用戶達到了一定量,你的安裝包大幾百K,將會影響你的下載安裝量。
****** PS:請不要叫設計師為美工,建議讓你們公司HR把「美工」的title改成「設計師」 ******
對安卓開發團隊建議:
* 設計師和開發人員都把Android design精讀一遍,並舉行一次交流分享會議。
* 設計師和開發人員都把dp(安卓里的長度單位)搞清楚,設計師提供給開發人員的標註單位最好是dp(長度)、sp(字體),而不是px,因為你標px的話,說明還沒弄懂Android,如果沒弄懂,結果就會出現很多問題。
...
如果搞明白上述問題
安卓適配很容易搞定。
前面各位都已經回答的很詳細,說點不久的將來的事兒。
Android 5.0開始已經支持基於SVG的XML資源了,設計師要學會純矢量啦,別天天切PNG啦,隨意縮放隨意改色的界面圖標才是王道啊。
PS:iOS支持PDF矢量資源了,之前自己預言的矢量化UI階段已經走到眼前了。額.....有一種東西....叫做.9.png 完美解決問題
剛好在研究這個問題
這個QQ登錄頁面的圖片1080p的截圖,中間的.9圖片是drawable-hdpi里的資源文件(整個資源包中唯一一張)
截圖的邊緣雖然模糊了,但是在手機上看效果還是過得去的
如果要適配不同解析度如1080p,需要單獨做個邊框為4px像素的.9資源文件,如果所有圖片都這樣適配,對設計者而言是很大的工作量
既然能夠達到使用的效果,就無需對所有圖片都適配,只做需要適配的圖片資源即可。
下圖中xxhdpi中只有1個文件
如果要控制軟體大小的,主要按照480x800的解析度來出資源圖片就可以了,寫界面程序的時候注意縮放,基本沒什麼問題。。
圖說picsays前段時間發布的《Android的發展和碎片化》中提到了不同屏幕規格的佔比情況,還有不同系統版本的佔比情況。 http://picsays.com/2012/07/20/android-develop-fragmented/
剛好在微博上看到幾張圖,順手粘貼過來給大家看看這是一個專門處理點九圖的工具App的界面,一張修改圖,一張預覽圖
補充一下,簡單的形狀還可以寫drawable, 更靈活
除非是啟動畫面那種大圖 一般能做成.9的就盡量做了 減少顏色漸變什麼的設計
那個點九存圖應該可以適應不同的尺寸。
給最清晰的圖,放對應的文件夾,系統自動壓縮。
推薦閱讀:
※為什麼最近圓形頭像變得流行?
※找個類似 eico design 的設計公司做一個移動應用的設計要多少費用?
※什麼是沉浸式設計?它有什麼具體特點?
※Instagram for iOS 7 新版使用圓形頭像,這是錯誤的設計決定嗎?
※重新設計的 Flickr for iOS 新版體驗如何?