韌館-LearnHouse

[Android]UI的Multiple Screen設計

以前第一次做APP的案子時,是QA的腳色,一直都有遇到Android因為不同的device有不同的resolution

因此在測試的時候都會盡量找不一樣大小的手機來測試,但繁忙的工作讓我一直沒有時間去瞭解與思考 為什麼?

趁現在剛開始工作沒多久,有比較多的時間study,將這幾天閱讀Android Developer,作一些整理。

資料來源:http://developer.android.com/design/style/metrics-grids.html

為了簡化multiple screen的設計,Android使用size bucketsdensity buckets來計算不同的device。

Size Buckets手持行動裝置(handset)會小於600dp,而平板(tablet)則大於等於600dp

Density Buckets則有LDPI(Low,120dpi), MDPI(Medium,160dpi), HDPI(High,240dpi), XHDPI(Extra High, 320dpi), XXHDPI(480dpi), and XXXHDPI(640dpi).

建議的Touch UI設計為48dp,只為什麼要這樣設計呢?難道這是布林、佩吉的黃金比例?

原來平均48db換算成實體的大小大約是9mm(會隨著不同螢幕大小有所不同),這是一般使用這使用touch screen感覺比較舒適的大小範圍內(7-10mm),所以Android希望盡量使用這種黃金比例的設計方式。範例如下:

建議每個UI的space距離是8dp

其實看到這裡,我還是似懂非懂,只是似乎有一個概念而已,但是dpi、dp還是傻傻分不清楚,不過Android Developer有更進一步關於支援Multiple Screens的介紹:http://developer.android.com/guide/practices/screens_support.html

在開始前,可能需要了解一下下面的專有名詞和觀念,由於我加入很多我認為的白話語解釋,有錯請指教。

Screen size
螢幕實際的大小,測量方式是以斜對角(diagonal)的方式,應該就是我們一般說的幾吋螢幕的手機,像我的One S是4.3吋,一般分成small, normal, large, and extra large這四種大小。

Screen density
度量單位是dpi (dots per inch),也就是每一吋裡有幾個點,也可以說有幾個pixels,一般分成low, medium, high, and extra high這四種。

補充:計算公式如下(2014.07.31)

以我的One S來說,4.3 吋 AMOLED,解析度960 x 540 (qHD)其dpi為

sqrt(960^2+540^2)/4.3  = 256.1419.....      介於hdpi(240)~xhdpi(320)之間,所以dpi是240

這裡ppi翻譯成pixels per inch其實是跟dpi(dot per inch)是一樣的。

Orientation
指的就是目前手機是橫向(landscape)還是直立(portrait)的。

Resolution
指的就是實際一個Screen上總共有多少個pixels,但APP設計時不能直接用resolution來設計,需要用screen size和screen density的角度來考量。

 

Density-independent pixel (dp)
是設計UI layout時所使用的一個虛擬的pixel unit,用來表達layout的尺寸(dimensions)或位置(position)。

density-independent pixel代表一個實體的pixel在160dpi的screen,所以公式如下:

 

px = dp * (dpi / 160)

 

舉例來說一個240dpi的screen,1dp就等於1.5pixcel,當在設計APP的UI時,要時時刻刻使用dp來做為設計的單位,確保你的UI可以在不同的密度下做呈現。

補充:mdpi: 1px = 1dp; hdpi: 1.5px = 1dp; xhdpi: 2px = 1dp; xxhdpi: 3px = 1dp (2014.07.30)

資料來源:http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

我是覺得不知道是不是可以解釋成無關密度的意思,有點類似把相對位置變成絕對位置。

所以總結上述一些觀念:

為了解決不同device有不同的螢幕大小,從Android1.6(API Level 4)開始支援multiple screen的sizedensities來對應不同的螢幕設定,因此就有以下兩個集合(Set)

 

size:small、normal、large和xlarge

註:從Android 3.2(API Level 13)開始支援平板,因此定義又不太一樣,可以參閱Declaring Tablet Layouts for Android 3.2,目前先針對Phone的部分看,Tablet以後有時間再研究。

densities:ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)

以下是一張很初淺的size和densities的對照圖,不是絕對:

以下則是每個size相對應的dp

  • xlarge screens are at least 960dp x 720dp
  • large screens are at least 640dp x 480dp
  • normal screens are at least 470dp x 320dp
  • small screens are at least 426dp x 320dp

補充:手機、平版的解析度(Resolution)和尺寸(Inch)百百種,怎樣才能快速方便之道你測試的設備是屬於哪種?這時你就可以使用Android提供的API來取得(2014.08.11)

int width = getResources().getDisplayMetrics().widthPixels;   //手機或平板的寬度(pixel)
int height = getResources().getDisplayMetrics().heightPixels; //手機或平板的高度(pixel)
float density = getResources().getDisplayMetrics().density;   //手機或平板的密度
float dpi = getResources().getDisplayMetrics().densityDpi;    //手機或平板的dpi

等抓到測試設備的dpi後就可以直接對照上面2014.7.30補充的那張對照表,或者直接加入下列程式直接印出

if(dpi < 160){
	//此為: ldpi
} else if (mDpi < 240){
	//此為: mdpi
} else if (mDpi < 320){
	//此為: hdpi
} else if (mDpi < 480){
	//此為: xhdpi
} else {
	//此為: xxhdpi
}

最後,開發的時候要顧到目前最多人使用的Android版本,因此官方提供一個隨時可以看目前Android版本的分布狀況(2014.08.22)
http://developer.android.com/about/dashboards/index.html

以及不同的resolution使用分布情形

像我Android SDK就只安裝最多人使用的那幾個版本,而不是全部都裝....
而且由上圖可以觀察到Normal(3吋到5吋)的手機似乎還是佔比較多數,且解析度似乎平均落在mdpi, hdpi, xhdpi, xxhdpi之間
因此在製作images時,就必須考慮這幾種解析度的圖片。

2014年7 月 posted by admin in 程式&軟體 and have No Comments

Place your comment

Please fill your data and comment below.
名稱:
信箱:
網站:
您的評論: