客戶端設(shè)計(jì)中的屏幕大小適配

1、客戶端設(shè)計(jì)中的屏幕大小適配 2011-07-18 09:30工作至今一直在做wap站的設(shè)計(jì)，對各平臺(tái)的硬件也做過一些分析對比，今天看到無明老大的文章，寫得真細(xì)致，so,轉(zhuǎn)一份，一來學(xué)習(xí)，二來尋找可繼續(xù)深入的點(diǎn)，接著寫下去當(dāng)前的手機(jī)種類繁多，手機(jī)屏幕的大小、比例各異，并且手機(jī)的屏幕本身就小，因此既要考慮應(yīng)用在不同屏幕大小上的適配，又要保持其一致性，同時(shí)還要提高每個(gè)手機(jī)屏幕的使用效率，這就存在著很多的矛盾點(diǎn)。在客戶端的設(shè)計(jì)過程中，針對不同的屏幕大小，應(yīng)該如何來設(shè)計(jì)？是否每個(gè)大小的屏幕尺寸都需要一個(gè)新的界面布局，還是所有的屏幕尺寸都使用相同的界面布局？我們將在下面的內(nèi)容中來探討這些內(nèi)容。一、當(dāng)前熱門

2、手機(jī)的屏幕大小雖然只是2010年中的某一周的手機(jī)銷售量排名，由此可以看出，當(dāng)前使用中的手機(jī)屏幕差異很大，各種屏幕大小和分辨率都有。如果為了適配更多的用戶群體，則需要考慮的手機(jī)屏幕大小和分辨率更多?！静贿^，根據(jù)當(dāng)前的手機(jī)發(fā)展趨勢，及手機(jī)客戶端的使用行為可以看出，最主要需要用戶關(guān)注的手機(jī)屏幕是2.4吋以上，240*320以上的手機(jī)屏幕，因?yàn)檫@樣的手機(jī)使用客戶端的頻率和用戶量都會(huì)更多。個(gè)人建議更多地是考慮320*480及以上的屏幕。】二、屏幕大小正確理解說起屏幕大小的時(shí)候，會(huì)有兩種表達(dá)方式，1） “我的屏幕2.4吋，你的屏幕3.5吋?！?2）“這個(gè)屏幕分辨率 240*320，那個(gè)屏幕分辨率為320*

3、480?！钡谠O(shè)計(jì)過程中，屏幕的分辨率和屏幕的實(shí)際尺寸必須同時(shí)考慮。這里首先有幾個(gè)概念需要再澄清一下：屏幕物理尺寸：屏幕對角線長的實(shí)際尺寸，如2.4吋，3.5吋等等屏幕分辨率：屏幕所能顯示像素的多少。如，240*320等。屏幕密度（pixel per inch）：以每英寸的像素?cái)?shù)。每英寸的分辨率數(shù)，如160ppi。 物理尺寸決定了屏幕的實(shí)際尺寸，而分辨率可以表示屏幕上可以呈現(xiàn)的像素點(diǎn)數(shù)，屏幕密度決定了屏幕的精細(xì)程度。相同的屏幕大小，如果分辨率高，則屏幕元素更精細(xì)。一個(gè)界面元素在屏幕里的實(shí)際尺寸卻是與屏幕密度相關(guān)，屏幕密度較小的屏上，界面元素的實(shí)際尺寸就會(huì)大些，反之亦然。在進(jìn)行手機(jī)界面布局中，除

4、了元素的像素值外，考慮元素的實(shí)際尺寸也非常重要，甚至更為重要（人眼是要靠物體成像在視網(wǎng)膜上的視角大小來進(jìn)行識別感知，視角是與物體實(shí)際大小和距離有關(guān)）。在不同屏幕中，不同的圖標(biāo)點(diǎn)陣或者不同的字體及大小的漢字，在人的主觀感知上，會(huì)有一個(gè)最優(yōu)的結(jié)果值。在設(shè)計(jì)的過程中，我們需要根據(jù)這個(gè)最優(yōu)值來進(jìn)行界面的布局及設(shè)計(jì)。也可以看出，這個(gè)用戶感知最優(yōu)的取值也與使用手機(jī)的人群有關(guān)（如年齡大的用戶需要物理尺寸更大的界面元素）。在不同屏幕中，不同的圖標(biāo)點(diǎn)陣或者不同的字體及大小的漢字，在人的主觀感知上，會(huì)有一個(gè)最優(yōu)的結(jié)果值。在設(shè)計(jì)的過程中，我們需要根據(jù)這個(gè)最優(yōu)值來進(jìn)行界面的布局及設(shè)計(jì)。也可以看出，這個(gè)用戶感知最優(yōu)的取

5、值也與使用手機(jī)的人群有關(guān)（如年齡大的用戶需要物理尺寸更大的界面元素）。三、設(shè)計(jì)過程與屏幕適配思路1確定目標(biāo)的屏幕大小屏幕大小由寬度和高度兩個(gè)因素決定，但是在布局手機(jī)客戶端的過程中，最關(guān)心的是寬度值。寬度確定后，高度可以由滾動(dòng)或者翻頁來顯示所有內(nèi)容；文字可以在適當(dāng)?shù)奈恢谜坌?；?biāo)題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度，圖標(biāo)、文字、特殊的組件不僅需要考慮寬度，也需要考慮整個(gè)屏幕的布局是否與之適配。由于不可能對所有的客戶端進(jìn)行單獨(dú)的開發(fā)，因此，需要對手機(jī)屏幕的大小的歸類。同時(shí)，在設(shè)計(jì)中也不會(huì)真的只考慮屏幕大小一個(gè)因素，屏幕大小和操作系統(tǒng)、手機(jī)類型等還是存在很大的相關(guān)性的。首先，我們先來定義一

6、下手機(jī)的屏幕大小的歸類檔次：A. 小屏幕：寬度240 px 以下屏幕或者2.4 以下屏幕一般以非智能機(jī)為主，歸在這個(gè)分類中的手機(jī)屏幕，一般是以java版本的客戶端為主。 B. 中等屏幕：寬度240320 px，或者2.43.0吋屏幕智能手機(jī)以Symbian或S60 v1,2,3，Windows mobile為主流；或者是非智能手機(jī)的客戶端以java版本為主。同時(shí)包括240*320的寬屏手機(jī)。 C. 大屏幕：寬度320 px以上屏幕或者 3.0吋以上的屏幕iPhone 手機(jī)只有兩個(gè)版本的適配，屏幕物理尺寸保持一致；Android 系統(tǒng)手機(jī)及衍生平臺(tái)手機(jī)Win phone 7 系統(tǒng)手機(jī)Nokia

7、S60 v5，symbian 3等 D. 平板屏幕：7吋及以上的屏幕【可以不包含在手機(jī)中，_】由于當(dāng)前的平板電腦上的應(yīng)用的開發(fā)都是基于手機(jī)應(yīng)用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手機(jī)不一致，在設(shè)計(jì)上有很多的特殊性，可發(fā)揮空間也更大，因此個(gè)人建議單獨(dú)的設(shè)計(jì)。 其次，根據(jù)我們的產(chǎn)品戰(zhàn)略，來確定待開發(fā)產(chǎn)品的用戶群體來確定一款目標(biāo)手機(jī)屏幕。由于對于某個(gè)業(yè)務(wù)的手機(jī)客戶端都不會(huì)只推出其中的某一款（除非是戰(zhàn)略上的用戶群確定為使用某種手機(jī)的特殊業(yè)務(wù)），而是會(huì)對不同的手機(jī)平臺(tái)分別進(jìn)行適配。因此，確定的目標(biāo)手機(jī)屏幕，應(yīng)該是在該檔次中最主流的手機(jī)屏幕大小，在以此為基準(zhǔn)向上或向下來適配其他的同檔手機(jī)。2

8、適配原則1） 客戶端的logo，在各個(gè)手機(jī)上都應(yīng)該清晰地顯示2） 標(biāo)題或者底部欄必須100%的與手機(jī)寬度適配3） 文字內(nèi)容如果顯示不下的話，可以自動(dòng)適配寬度進(jìn)行折行4） 圖片可以根據(jù)寬度進(jìn)行自動(dòng)縮放，屏幕寬度超過圖片本身時(shí)，顯示圖片本身的大小5） 適配過程中，界面的元素的寬高最小值應(yīng)該符合用戶的主觀舒適范圍值。6） 不能完全使用分辨率的絕對比例來對界面布局進(jìn)行縮放；3. 適配思路分析根據(jù)我們前面的分析，C類大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手機(jī)為主，它們都是觸屏手機(jī)，在適配上可以劃為一個(gè)檔次。B類中等屏幕大小智能機(jī)主要以Symbian 和

9、Windows mobile為主，因此在適配這兩個(gè)平臺(tái)時(shí)，主要集中在B類屏幕間的適配。B類中等屏幕大小還有一塊是非智能手機(jī)，使用Java客戶端，同時(shí)，A類小屏幕大小主要使用Java客戶端，因此，Java類客戶端需要適配的范圍更廣，至少應(yīng)包括B類和A類的屏幕大小。（1）Android 與iPhone手機(jī)的適配iPhone 本身就只有兩個(gè)分辨率及一個(gè)屏幕大小尺寸，可以很好的來適配（最多出兩套圖片即可，系統(tǒng)會(huì)自動(dòng)讀取）。對于android，由于其開放性，導(dǎo)致了各種屏幕的大小及分辨率都有。但Android系統(tǒng)有一個(gè)很好的特性，系統(tǒng)會(huì)根據(jù)屏幕的分辨率密度來進(jìn)行自適應(yīng)。但是，當(dāng)密度差異較大時(shí)，自適應(yīng)后，圖

10、標(biāo)會(huì)由于拉伸變得模糊影響效果。這時(shí)，必須要通過重新設(shè)計(jì)新的圖標(biāo)或者加大間距來保持最佳的視覺效果及更便利于用戶操作。Android 手機(jī)屏根據(jù)屏幕的分辨率密度和物理尺寸，可以分為以下幾類：注：圖中的【】內(nèi)的值為手機(jī)所占的百分比值。Android 開發(fā)平臺(tái)數(shù)據(jù)，不一定準(zhǔn)Android 提供了如下的機(jī)制來對不同大小和密度的屏幕進(jìn)行適配：1） 圖片資源的縮放基于當(dāng)前屏幕的密度，平臺(tái)自動(dòng)加載任何未經(jīng)縮放的限定尺寸和密度的圖片。如果圖片不匹配，平臺(tái)會(huì)加載默認(rèn)資源并且在放大或者縮小之后可以滿足當(dāng)前界面的顯示要求。如果沒有多套資源，平臺(tái)會(huì)認(rèn)為默認(rèn)的資源是中密度的屏幕資源（160dpi）。例如，當(dāng)前為高密度屏幕

11、，平臺(tái)會(huì)加載高密度資源（如圖片），如果沒有，平臺(tái)會(huì)將中密度資源縮放至高密度。2） 根據(jù)分辨率和坐標(biāo)自動(dòng)縮放（密度不同的屏幕適配）如果程序不支持多種密度屏幕，平臺(tái)會(huì)自動(dòng)縮放絕對像素坐標(biāo)值和尺寸值等，這樣就能保證屏幕元素能和密度160的屏幕上一樣能顯示出同樣物理尺寸的效果。平臺(tái)會(huì)根據(jù)密度的比例來縮放實(shí)際尺寸的大小。3） 兼容更大的屏幕大?。ㄆ聊徊煌倪m配）當(dāng)前屏幕超過程序所支持屏幕的上限時(shí)，定義supports-screens元素，這樣超出顯示的基準(zhǔn)線時(shí)，平臺(tái)會(huì)以屏幕大小的比例來縮放整個(gè)屏幕。由上表格也可知，當(dāng)前的Android手機(jī)主要集中在標(biāo)準(zhǔn)屏的中密度和高密度兩個(gè)型號上。因此在設(shè)計(jì)中，主要是設(shè)

12、計(jì)其中的一種為主，再去適配另一個(gè)型號即可。對于在一個(gè)檔次上的手機(jī)，都會(huì)根據(jù)上述的三個(gè)原則，系統(tǒng)自動(dòng)去適配。個(gè)人認(rèn)為，在進(jìn)行Android手機(jī)設(shè)計(jì)時(shí)，如果只準(zhǔn)備一套資源時(shí)，應(yīng)該以高密度的版本為主，這樣去適配中密度時(shí)，效果更好。當(dāng)然，如果屏幕的密度差異較大時(shí)，自動(dòng)適配的效果肯定不會(huì)，如果要取得更好的適配效果，必須針對幾個(gè)不同的屏幕密度進(jìn)行單獨(dú)設(shè)計(jì)屏幕元素，提高視覺滿意度。（2）非Android、iphone的手機(jī)適配對于其他的非Android、iphone手機(jī)，則需要更多地考慮其適配規(guī)則，這些手機(jī)系統(tǒng)不提供自適應(yīng)的適配。簡單整理規(guī)則如下：1） 向上適配（標(biāo)準(zhǔn)屏向更大【分辨率高，物理尺寸大】的屏幕適

13、配）在向更大的屏幕適配時(shí)，根據(jù)設(shè)備分辨率的不同，會(huì)分為兩種狀態(tài)。A如果兩者的屏幕分辨率密度（dip）差不多，物理尺寸更大的屏幕。那可以直接在當(dāng)前尺寸上拉長、拉寬即可，圖標(biāo)、行距都可以保持不變。B. 如果屏幕密度要大很多，物理尺寸差不多的。則適配點(diǎn)包括：設(shè)計(jì)多套圖標(biāo)，需要有更大分辨率的圖標(biāo)使用不同的字體，需要更大的字體來適配大設(shè)備分辨率的屏幕增加行間距自適應(yīng)放大內(nèi)容中的圖片Tab頁簽 需要根據(jù)屏幕的大小來確認(rèn)每屏最多顯示的數(shù)目。考慮一些復(fù)雜界面，增大界面中的一些元素的分辨率，會(huì)導(dǎo)致許多東西需要重新設(shè)計(jì)。這種情況需要重新設(shè)計(jì)該界面。 2） 向下適配在向更小的屏幕適配，這種情況較少，那會(huì)集中在如下幾

14、點(diǎn)：考慮一些極限點(diǎn)的改進(jìn)，需要適配到小屏幕的手機(jī)中，如標(biāo)題的最大字?jǐn)?shù)等。title、bottom欄與小屏幕寬度適配?？紤]到行高（行信息展示）的設(shè)計(jì)是否適合更小的屏幕高度。在結(jié)構(gòu)上，需要考慮在小屏幕中，顯示是否合適。根據(jù)屏幕密度的比例來設(shè)計(jì)屏幕元素，需要更小分辨率的屏幕元素使用小的字體，具體的大小需要根據(jù)屏幕的大小來設(shè)定。 （3）豎屏橫屏適配橫豎屏的適配，在本文中，不過多討論，這里只是簡單的整理一下，我自己的理解。對于不同功能的應(yīng)用，都有其特定的頁面展現(xiàn)形式，個(gè)人并不贊同蠻目對任何應(yīng)用不加選擇的都去適配橫屏。個(gè)人觀點(diǎn)如下：1） 不同的應(yīng)用，在設(shè)計(jì)的過程中，對于選擇不同的屏幕有不同的選擇，如普通l

15、ist多的應(yīng)用，豎屏更合適；顯示圖片更多的界面，或者想更好的展示全景的應(yīng)用，橫屏更合適。2） 不必遵循，對任何的應(yīng)用都可以自動(dòng)進(jìn)行橫屏豎屏的切換。如果覺得沒有必要橫屏或者豎屏的應(yīng)用，就可以不切換。3） 由于用戶在使用手機(jī)的過程中，經(jīng)常會(huì)無意中調(diào)整位置，從而導(dǎo)致手機(jī)誤認(rèn)為是要進(jìn)行橫豎屏的轉(zhuǎn)化，從而更容易導(dǎo)致操作上的失誤，引起用戶的反感。4） 橫豎屏的切換時(shí)，允許用戶對于同一個(gè)界面有不同的展示方式。例如不一定在豎屏?xí)r時(shí)list方式顯示，在橫屏?xí)r也和豎屏保持一致，這時(shí)橫屏可以有更好的適應(yīng)橫屏的展示方式，使用戶更好的操作。由于手機(jī)系統(tǒng)各異，手機(jī)的屏幕尺寸五花八門，屏幕的性能也呈現(xiàn)多樣性，還有觸摸屏和非

16、觸屏的區(qū)分，這四個(gè)變量結(jié)合起來，會(huì)有無數(shù)種不同的情況，如何能使你的應(yīng)用完美地展現(xiàn)給用戶，適配固然很重要。但是，更重要的是你要在適配之前，確定應(yīng)用的目標(biāo)群體。如果你的應(yīng)用主要是針對高端手機(jī)用戶的，那你何必去考慮低端的手機(jī)呢？畢竟為了很少的用戶，使你花了很大的力氣，可能會(huì)有不值得，這一點(diǎn)絕對值得每一個(gè)設(shè)計(jì)師思考。=題外話一般來說，我們在設(shè)計(jì)一個(gè)產(chǎn)品時(shí)，首先需要確定產(chǎn)品的用戶群體，然后基于用戶群體來設(shè)計(jì)針對該用戶群特點(diǎn)和使用行為的界面。但是對于手機(jī)客戶端，感覺這個(gè)過程不能完全適用：原因是因?yàn)?，我的客戶端設(shè)計(jì)主要是針對不同的手機(jī)平臺(tái)（Android、ios，Win Phone 7，Palm Pre，Symbian）來開發(fā)的，因此，開發(fā)出來的客戶端適用于所有的持有該手機(jī)的用戶。但是這些手機(jī)持有者是否都有相同的特質(zhì)，是否都喜愛使用該客戶端，是個(gè)很大的未知數(shù)。另一